feat: pc布局设置最大宽度

simply-none · Jan 26, 2024 · c76b7cd · c76b7cd
1 parent ad0d8c1
commit c76b7cd
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git 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
@@ -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
@@ -26,7 +26,7 @@
     </div>
   </el-card>
 
-  <SettingCom :visible="drawer" @handleDrawer="handleDrawer" />
+  <SettingCom  :class="{ pc: isPC() }" :visible="drawer" @handleDrawer="handleDrawer" />
 </template>
 
 <script setup>