save

src/pages/dict/DictManage.vue

@@ -143,7 +143,7 @@ onMounted(() => {
 
 #DictDialog {
   font-size: 14rem;
-  position: fixed;
+  position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);

src/pages/dict/index.vue

@@ -3,25 +3,74 @@
 import DictManage from "@/pages/dict/DictManage.vue";
 import {onMounted} from "vue";
 import {useRoute} from "vue-router";
+import {useRuntimeStore} from "@/stores/runtime.ts";
 
 const router = useRoute()
-
-onMounted(()=>{
+const runtimeStore = useRuntimeStore()
+onMounted(() => {
 
 })
 </script>
 
 <template>
   <div id="page">
-    <DictManage/>
+    <header>
+      <div class="nav-list">
+        <nav>
+          <router-link to="/practice">练习</router-link>
+        </nav>
+        <nav class="active">
+          <router-link to="/dict">词典</router-link>
+        </nav>
+        <nav @click="runtimeStore.showSettingModal = true"><a href="#">设置</a></nav>
+      </div>
+    </header>
+    <div class="content">
+      <DictManage/>
+    </div>
   </div>
 </template>
 
 <style scoped lang="scss">
 #page {
+  position: relative;
+  z-index: 9;
   background: var(--color-main-bg);
   height: 100%;
   width: 100%;
+  font-size: 14rem;
+
+  header {
+    height: 60rem;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-bottom: 1px solid #d2d2d2;
+
+    .nav-list {
+      display: flex;
+      gap: 10rem;
+
+      nav {
+        padding: 7rem 20rem;
+        cursor: pointer;
+        font-size: 16rem;
+        transition: all .3s;
+
+        &:hover {
+        }
+
+        &.active {
+          border-bottom: 2px solid var(--color-main-active);
+        }
+
+        a {
+          color: var(--color-font-1);
+        }
+      }
+    }
+  }
 }
 
 </style>

src/pages/practice/index.vue

@@ -165,7 +165,6 @@ onUnmounted(() => {
     <Footer/>
   </div>
   <DictModal/>
-  <SettingDialog v-if="runtimeStore.showSettingModal" @close="runtimeStore.showSettingModal = false"/>
   <Statistics/>
 </template>