From 9b2f8c30ff7d147d415c9df376cbfa754c6a35da Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sat, 16 Dec 2023 00:48:13 +0800
Subject: [PATCH] save

---
 src/components/BaseButton.vue   |  1 +
 src/pages/mobile/DictManage.vue | 15 ++++++++
 src/pages/mobile/Home.vue       | 66 +++++++++++++++++++++++++++++++--
 src/pages/mobile/index.vue      |  5 ++-
 4 files changed, 82 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/mobile/DictManage.vue

diff --git a/src/components/BaseButton.vue b/src/components/BaseButton.vue
index 48ffd220..d2a2d22e 100644
--- a/src/components/BaseButton.vue
+++ b/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',
diff --git a/src/pages/mobile/DictManage.vue b/src/pages/mobile/DictManage.vue
new file mode 100644
index 00000000..1c487212
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/mobile/Home.vue b/src/pages/mobile/Home.vue
index dabed8a2..dc6e5ba3 100644
--- a/src/pages/mobile/Home.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/pages/mobile/index.vue b/src/pages/mobile/index.vue
index 45910fe8..b3c94b7b 100644
--- a/src/pages/mobile/index.vue
+++ b/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>