save

src/components/BaseButton.vue

@@ -23,6 +23,7 @@ defineEmits(['click'])
 <template>
   <Tooltip :disabled="!keyboard" :title="`快捷键: ${keyboard}`">
     <div class="base-button"
+         v-bind="$attrs"
          @click="e => (!disabled && !loading) && $emit('click',e)"
          :class="[
              active && 'active',

src/pages/mobile/DictManage.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="page dict-manage">
+    DictManage.vue
+  </div>
+</template>
+
+<style scoped lang="scss">
+.dict-manage {
+  font-size: 18rem;
+}
+</style>

src/pages/mobile/Home.vue

@@ -2,18 +2,76 @@
 
 import BaseButton from "@/components/BaseButton.vue";
 import router from "@/router.ts";
+import {useBaseStore} from "@/stores/base.ts";
+import {Icon} from "@iconify/vue";
 
-function goPractice(){
+const store = useBaseStore()
+
+function goPractice() {
   router.push('/mobile-practice')
 }
 </script>
 
 <template>
-<div class="page home">
-  <BaseButton @click="goPractice">继续</BaseButton>
-</div>
+  <div class="page home">
+    <div class="current-dict">
+      <div class="top">
+        <div class="left">
+          <div class="name">{{ store.currentDict.name }}</div>
+          <Icon class="arrow" icon="mingcute:right-line" width="20"/>
+        </div>
+        <span>词表</span>
+      </div>
+      <el-progress
+          :percentage="90"
+      />
+    </div>
+
+    <div class="btn">
+      <BaseButton size="large" @click="goPractice">开始背单词吧！</BaseButton>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">
+.home {
+  font-size: 18rem;
+  color: var(--color-font-2);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 
+  .current-dict {
+    width: 80%;
+    box-sizing: border-box;
+    padding: 20rem;
+    background: var(--color-third-bg);
+    border-radius: 8rem;
+
+    .top {
+      display: flex;
+      gap: 20rem;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 20rem;
+
+      .left {
+        display: flex;
+        align-items: center;
+        gap: 4rem;
+      }
+
+
+      span {
+        font-size: 14rem;
+      }
+    }
+  }
+
+  .btn {
+    margin-top: 30rem;
+    width: 80%;
+  }
+}
 </style>

src/pages/mobile/index.vue

@@ -3,6 +3,7 @@ import {Icon} from "@iconify/vue";
 import SlideHorizontal from "@/components/slide/SlideHorizontal.vue";
 import SlideItem from "@/components/slide/SlideItem.vue";
 import Home from "@/pages/mobile/Home.vue";
+import DictManage from "@/pages/mobile/DictManage.vue";
 
 let state = $ref({
   baseIndex: 0
@@ -17,7 +18,9 @@ let state = $ref({
         <SlideItem>
           <Home/>
         </SlideItem>
-        <SlideItem>2</SlideItem>
+        <SlideItem>
+          <DictManage/>
+        </SlideItem>
         <SlideItem>3</SlideItem>
       </SlideHorizontal>
     </div>