From 0c1c5d33b087e4ef06d7c1ae70f5c42486e04139 Mon Sep 17 00:00:00 2001
From: zyronon <zyronon@163.com>
Date: Sat, 18 May 2024 00:25:53 +0800
Subject: [PATCH] save

---
 src/pages/pc/components/DictListPanel.vue     |   8 +-
 src/pages/pc/components/dialog/MiniDialog.vue |  14 +-
 src/pages/pc/components/list/DictGroup.vue    |   2 +-
 src/pages/pc/components/list/DictItem.vue     |   9 +-
 .../pc/components/toolbar/ChapterName.vue     |  22 ++--
 src/pages/pc/index.vue                        |   2 +-
 src/pages/pc/word/WordHome.vue                | 121 +++++++++++-------
 7 files changed, 103 insertions(+), 75 deletions(-)

diff --git a/src/pages/pc/components/DictListPanel.vue b/src/pages/pc/components/DictListPanel.vue
index 0d53ef0f..8be46647 100644
--- a/src/pages/pc/components/DictListPanel.vue
+++ b/src/pages/pc/components/DictListPanel.vue
@@ -97,8 +97,8 @@ function del(e) {
               :list="groupByTranslateLanguage['common']"/>
         </template>
         <template v-else>
-          <div class="translate">
-            <span>翻译：</span>
+          <div class="translate ">
+            <span>释义：</span>
             <el-radio-group v-model="currentTranslateLanguage">
               <el-radio-button border v-for="i in translateLanguageList" :label="i">{{ $t(i) }}</el-radio-button>
             </el-radio-group>
@@ -174,10 +174,10 @@ function del(e) {
         display: flex;
         align-items: center;
         color: var(--color-font-1);
-        margin-bottom: 2rem;
+        margin-bottom: 1rem;
 
         & > span {
-          font-size: 1.6rem;
+          font-size: 1.2rem;
         }
       }
     }
diff --git a/src/pages/pc/components/dialog/MiniDialog.vue b/src/pages/pc/components/dialog/MiniDialog.vue
index 235a68ff..9c94b66b 100644
--- a/src/pages/pc/components/dialog/MiniDialog.vue
+++ b/src/pages/pc/components/dialog/MiniDialog.vue
@@ -23,15 +23,15 @@ withDefaults(defineProps<IProps>(), {
 @import "@/assets/css/style";
 
 .mini-row-title {
-  min-height: 35rem;
+  min-height: 2rem;
   text-align: center;
-  font-size: 16rem;
+  font-size: 1rem;
   font-weight: bold;
   color: var(--color-font-1);
 }
 
 .mini-row {
-  min-height: 35rem;
+  min-height: 2rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -43,12 +43,12 @@ withDefaults(defineProps<IProps>(), {
 .mini-modal {
   position: absolute;
   z-index: 9;
-  width: 180rem;
+  width: 12rem;
   background: var(--color-second-bg);
-  border-radius: 8rem;
+  border-radius: .5rem;
   box-shadow: 0 0 8px 2px var(--color-item-border);
-  padding: 10rem var(--space);
-  top: 40rem;
+  padding: .6rem var(--space);
+  top: 2.4rem;
   left: 50%;
   transform: translate3d(-50%, 0, 0);
   //margin-top: 10rem;
diff --git a/src/pages/pc/components/list/DictGroup.vue b/src/pages/pc/components/list/DictGroup.vue
index 93b7c41b..3dadd6b9 100644
--- a/src/pages/pc/components/list/DictGroup.vue
+++ b/src/pages/pc/components/list/DictGroup.vue
@@ -45,7 +45,7 @@ watch(() => props.groupByTag, () => {
 <style scoped lang="scss">
 .dict-group {
   color: var(--color-font-1);
-  margin-bottom: 40rem;
+  margin-bottom: 1.5rem;
   //border-bottom: 1px dashed gray;
 
   .category {
diff --git a/src/pages/pc/components/list/DictItem.vue b/src/pages/pc/components/list/DictItem.vue
index cb7b7c42..3bb9013d 100644
--- a/src/pages/pc/components/list/DictItem.vue
+++ b/src/pages/pc/components/list/DictItem.vue
@@ -36,7 +36,7 @@ let length = $computed(() => {
 
 <template>
   <div
-      class="dict-item anim"
+      class="dict-item anim rounded-md p-4"
       :class="active && 'active'"
   >
     <template v-if="dict.id">
@@ -63,12 +63,11 @@ let length = $computed(() => {
 .dict-item {
   cursor: pointer;
   box-sizing: border-box;
-  padding: 1rem;
-  width: 12rem;
-  height: 16rem;
-  border-radius: 1rem;
+  width: 9rem;
+  height: 12rem;
   position: relative;
   background: var(--color-third-bg);
+  //background: white;
   border: 1px solid var(--color-item-border);
   color: var(--color-font-1);
   font-size: 1rem;
diff --git a/src/pages/pc/components/toolbar/ChapterName.vue b/src/pages/pc/components/toolbar/ChapterName.vue
index 284f37bb..3e7be055 100644
--- a/src/pages/pc/components/toolbar/ChapterName.vue
+++ b/src/pages/pc/components/toolbar/ChapterName.vue
@@ -29,8 +29,8 @@ function clickJumpSpecifiedChapter(index: number) {
 const listRef: HTMLElement = $ref(null as any)
 
 watch(() => show, n => {
-  if (n){
-    nextTick(()=>{
+  if (n) {
+    nextTick(() => {
       listRef?.children[store.currentDict.chapterIndex]?.scrollIntoView({block: 'center'})
     })
   }
@@ -49,7 +49,7 @@ watch(() => show, n => {
         v-model="show"
         @mouseenter="toggle(true)"
         @mouseleave="toggle(false)"
-        style="width: 230rem;"
+        style="width: 16rem;"
     >
       <div class="chapter-list" ref="listRef">
         <div class="chapter-list-item"
@@ -70,24 +70,24 @@ watch(() => show, n => {
 }
 
 .chapter-list {
-  max-height: 250rem;
+  max-height: 16rem;
   overflow: auto;
-  padding-right: 5rem;
+  padding-right: .3rem;
 
   .chapter-list-item {
-    margin-bottom: 7rem;
-    height: 36rem;
+    margin-bottom: .4rem;
+    height: 2.2rem;
     display: flex;
     align-items: center;
-    gap: 10rem;
+    gap: .6rem;
     width: 100%;
     box-sizing: border-box;
     background: var(--color-item-bg);
     color: var(--color-font-1);
-    font-size: 18rem;
-    border-radius: 8rem;
+    font-size: 1.1rem;
+    border-radius: .5rem;
     transition: all .3s;
-    padding: 10rem;
+    padding: .6rem;
     border: 1px solid var(--color-item-border);
 
     &:hover {
diff --git a/src/pages/pc/index.vue b/src/pages/pc/index.vue
index ca6a2816..e0ecd7f8 100644
--- a/src/pages/pc/index.vue
+++ b/src/pages/pc/index.vue
@@ -48,7 +48,7 @@ const router = useRouter()
         </div>
       </div>
     </div>
-    <div class="content">
+    <div class="content overflow-auto">
       <router-view></router-view>
     </div>
   </div>
diff --git a/src/pages/pc/word/WordHome.vue b/src/pages/pc/word/WordHome.vue
index 2568906c..7d1bbfe2 100644
--- a/src/pages/pc/word/WordHome.vue
+++ b/src/pages/pc/word/WordHome.vue
@@ -15,60 +15,91 @@ function clickEvent(e) {
 </script>
 
 <template>
-  <div class="word flex justify-center overflow-auto	">
-    <div class="w-3/5">
-
-      <div class="card">
-        <div class="title">
-          当前学习
-        </div>
-        <div class="mt-4 flex justify-between items-center">
-          <div class="bg-slate-200 p-5 rounded-md cursor-pointer flex items-center">
-            <span>{{ base.currentDict.name }}</span>
-            <Icon icon="gg:arrows-exchange" class="text-2xl ml-2"/>
+  <div class="word flex justify-center ">
+    <div class="w-5/10 pt-5">
+      <div class="flex gap-6">
+        <div class="card w-1/2 flex flex-col">
+          <div class="title">
+            我的词典
           </div>
-          <div class="rounded-xl bg-slate-800 flex items-center py-3 px-5 text-white cursor-pointer"
-               @click="router.push('/practice')">
-            开始学习
+          <div class="grid flex-1 flex gap-5 mt-4">
+            <div class="p-4 flex-1 rounded-md bg-slate-200 relative" v-for="i in 3">
+              <span>收藏</span>
+              <div class="absolute bottom-4 right-4">333个词</div>
+            </div>
+          </div>
+        </div>
+        <div class="w-1/2">
+          <div class="card ">
+            <div class="flex justify-between items-center">
+              <div class="bg-slate-200 p-3 rounded-md cursor-pointer flex items-center">
+                <span class="text-lg font-bold">{{ base.currentDict.name }}</span>
+                <Icon icon="gg:arrows-exchange" class="text-2xl ml-2"/>
+                <Icon icon="uil:setting" class="text-2xl ml-2"/>
+              </div>
+              <div class="rounded-xl bg-slate-800 flex items-center py-3 px-5 text-white cursor-pointer"
+                   @click="router.push('/practice')">
+                开始学习
+              </div>
+            </div>
+            <div class="mt-5 text-sm">已学习5555个单词的1%</div>
+            <el-progress class="mt-1" percentage="80" :show-text="false"></el-progress>
+          </div>
+          <div class="card flex gap-3">
+            <div class="bg-slate-200 w-10 h-10 flex center text-2xl rounded">
+              0
+            </div>
+            <div class="flex-1">
+              <div class="flex justify-between">
+                <div class="title">
+                  每日目标
+                </div>
+                <div style="color:#ac6ed1;" class="cursor-pointer">
+                  更改目标
+                </div>
+              </div>
+              <div class="mt-2 text-xs">学习 50 个单词</div>
+              <el-progress class="flex-1 mt-1" percentage="80" :show-text="false"></el-progress>
+            </div>
           </div>
         </div>
       </div>
+
+      <div class="card  ">
+        <div class="flex justify-between ">
+          <div class="title">
+            所有词典
+          </div>
+          <Icon icon="lucide:search" class="text-2xl" />
+        </div>
+
+        <div class="bg-white ">
+          <DictListPanel
+          />
+        </div>
+
+      </div>
+
       <div class="card">
         <div class="title">
           其他学习词典
         </div>
-        <div class="flex flex-wrap">
-          <div class="flex w-1/2 justify-between items-center">
-            <div class="bg-slate-200 p-5 rounded-md cursor-pointer flex items-center">
+        <div class="grid grid-cols-2 gap-6 mt-5 ">
+          <div class=" p-4 rounded-md justify-between items-center bg-slate-200 " v-for="i in 3">
+            <div class="flex justify-between w-full">
               <span>{{ base.currentDict.name }}</span>
-              <Icon icon="gg:arrows-exchange" class="text-2xl ml-2"/>
-            </div>
-            <div class="rounded-xl bg-slate-800 flex items-center py-3 px-5 text-white cursor-pointer"
-                 @click="router.push('/practice')">
-              开始学习
-            </div>
-          </div>
-          <div class="flex w-1/2 justify-between items-center">
-            <div class="bg-slate-200 p-5 rounded-md cursor-pointer flex items-center">
-              <span>{{ base.currentDict.name }}</span>
-              <Icon icon="gg:arrows-exchange" class="text-2xl ml-2"/>
-            </div>
-            <div class="rounded-xl bg-slate-800 flex items-center py-3 px-5 text-white cursor-pointer"
-                 @click="router.push('/practice')">
-              开始学习
-            </div>
-          </div>
-          <div class="flex w-1/2 justify-between items-center">
-            <div class="bg-slate-200 p-5 rounded-md cursor-pointer flex items-center">
-              <span>{{ base.currentDict.name }}</span>
-              <Icon icon="gg:arrows-exchange" class="text-2xl ml-2"/>
-            </div>
-            <div class="rounded-xl bg-slate-800 flex items-center py-3 px-5 text-white cursor-pointer"
-                 @click="router.push('/practice')">
-              开始学习
+              <div class="text-2xl ml-2 flex gap-4">
+                <Icon icon="hugeicons:delete-02"/>
+                <Icon icon="nonicons:go-16"/>
+              </div>
             </div>
+            <div class="mt-5 text-sm">已学习5555个单词的1%</div>
+            <el-progress class="mt-1" percentage="80" color="white" :show-text="false"></el-progress>
           </div>
         </div>
+        <div class="flex justify-center mt-2 text-2xl">
+          <Icon icon="mingcute:down-line"/>
+        </div>
       </div>
 
       <div class="card">
@@ -90,15 +121,13 @@ function clickEvent(e) {
         </div>
       </div>
 
-      <DictListPanel
-      />
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
 .card {
-  @apply rounded-xl bg-white p-5 mt-10 ;
+  @apply rounded-xl bg-white p-4 mt-5;
 }
 
 .center {
@@ -106,6 +135,6 @@ function clickEvent(e) {
 }
 
 .title {
-  @apply text-xl font-bold;
+  @apply text-lg font-medium;
 }
 </style>
\ No newline at end of file