From c76b7cd5d7362c8b09e3fe76be56634ef796c902 Mon Sep 17 00:00:00 2001
From: jousindea <jousindea@163.com>
Date: Fri, 26 Jan 2024 22:23:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20pc=E5=B8=83=E5=B1=80=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E6=9C=80=E5=A4=A7=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/namedWordList/index.vue | 12 +++++++++---
 src/views/setting/index.vue       |  7 ++++++-
 src/views/wordMainPage/index.vue  |  2 +-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/views/namedWordList/index.vue b/src/views/namedWordList/index.vue
index b4b259f..748c7dd 100644
--- a/src/views/namedWordList/index.vue
+++ b/src/views/namedWordList/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="vocabulary-list"
-    :class="{ simple: simpleStyle }"
+    :class="{ simple: simpleStyle, 'is-pc': isPC() }"
     v-loading.fullscreen.lock="fullscreenLoading"
     element-loading-text="数据正在加载中..."
     element-loading-background="#eee"
@@ -154,6 +154,7 @@ import useTableStore from "../../stores/table";
 import { generateImage } from "../../utils/generateFile";
 import { funDownloadByJson, funDownloadByHtml2Md } from "../../utils/generateFile";
 import { setNotify } from "../../utils/element-plus";
+import { isPC } from "../../utils/common";
 
 let { getDBTable, getDBTableData } = useTableStore();
 
@@ -429,6 +430,11 @@ async function getWordTypedList(type) {
 <style scoped lang="scss">
 
 .vocabulary-list {
+  &.is-pc {
+    max-width: 520px;
+    height: fit-content;
+    box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 12px 0px;
+  }
   height: 100%;
 }
 .voca-card {
@@ -534,9 +540,9 @@ async function getWordTypedList(type) {
 }
 
 :deep(.el-affix) {
-  width: 100% !important;
+  width: 100% ;
   & > div {
-    width: 100% !important;
+    width: 100% ;
     background: white;
   }
 }
diff --git a/src/views/setting/index.vue b/src/views/setting/index.vue
index c81e263..5fcd005 100644
--- a/src/views/setting/index.vue
+++ b/src/views/setting/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-drawer v-model="drawer" title="设置" size="100%" :before-close="handleClose" class="word-main-page-setting">
+  <el-drawer :modal-class="{ 'is-pc': isPC(), 'setting-drawer': true }" v-model="drawer" title="设置" size="100%" :before-close="handleClose" class="word-main-page-setting">
     <div class="demo-collapse">
       <el-collapse v-model="activeCollapse" @change="setSymbol">
         <el-collapse-item name="3">
@@ -88,6 +88,8 @@ import SelectBook from "./selectBook.vue";
 import ShowDescInfo from "./showDescInfo.vue";
 import ShowBasicInfo from "./showBasicInfo.vue";
 
+import { isPC } from "../../utils/common";
+
 let activeCollapse = ref(["2", "3", "5", "6"]);
 let currentCollapse = ref([]);
 
@@ -130,6 +132,9 @@ function handleClose(done) {
 </script>
 
 <style scoped lang="scss">
+:global(.setting-drawer.is-pc) {
+  max-width: 520px;
+}
 :deep(.el-collapse-item__header) {
   font-size: 1em;
 }
diff --git a/src/views/wordMainPage/index.vue b/src/views/wordMainPage/index.vue
index 435e932..fe5ac9b 100644
--- a/src/views/wordMainPage/index.vue
+++ b/src/views/wordMainPage/index.vue
@@ -26,7 +26,7 @@
     </div>
   </el-card>
 
-  <SettingCom :visible="drawer" @handleDrawer="handleDrawer" />
+  <SettingCom  :class="{ pc: isPC() }" :visible="drawer" @handleDrawer="handleDrawer" />
 </template>
 
 <script setup>