Merge pull request #134 from chenjunyu19/fix-style

修复样式
YuehaiTeam · Aug 27, 2024 · 5130b2b · 5130b2b
2 parents 8bceee1 + 92918f2
commit 5130b2b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 13 deletions.
diff --git a/src/views/Achievement/ImportDialog.vue b/src/views/Achievement/ImportDialog.vue
@@ -1,6 +1,6 @@
 <template>
     <!-- eslint-disable vue/no-parsing-error -->
-    <div style="margin-top: -35px">
+    <div style="margin-top: -5px">
         <el-tabs v-model="activeName" stretch>
             <el-tab-pane label="本地导入" name="text">
                 <div
@@ -224,9 +224,9 @@ export default defineComponent({
 .import-button {
     display: block;
     margin-top: 15px;
-    width: calc(100% + 40px);
+    width: calc(100% + var(--el-dialog-padding-primary) * 2);
     margin-bottom: -30px;
-    margin-left: -20px;
+    margin-left: calc(-1 * var(--el-dialog-padding-primary));
     height: 50px;
     border-radius: 0;
     border-left: 0;

diff --git a/src/views/Achievement/Index.vue b/src/views/Achievement/Index.vue
@@ -27,7 +27,8 @@
                 <div class="a-line">
                     <el-popover
                         v-model:visible="showClear"
-                        :width="190"
+                        width="auto"
+                        trigger="click"
                         :placement="isMobile ? 'left-start' : 'bottom'"
                     >
                         <div style="text-align: center">真的要清空吗？</div>
@@ -37,7 +38,7 @@
                             <el-button size="small" type="danger" plain @click="doClear(true)">清空全部</el-button>
                         </div>
                         <template #reference>
-                            <el-button v-show="!showScanner" type="danger" plain @click="showClear = true">
+                            <el-button v-show="!showScanner" type="danger" plain>
                                 <fa-icon icon="trash-can" />
                                 清空
                             </el-button>

diff --git a/src/views/Options/Basic.vue b/src/views/Options/Basic.vue
@@ -1,8 +1,8 @@
 <template>
-    <section :class="$style.optionBasic">
+    <section :class="[$style.optionBasic, { [$style.optionBasicMoblie]: isMobile }]">
         <el-form label-position="right" label-width="130px">
             <el-form-item label="语言 (Language)">
-                <div>
+                <div class="form-content">
                     <div class="select">
                         <el-select v-model="options.lang">
                             <el-option v-for="(i, a) in langNames" :key="a" :label="i" :value="a" />
@@ -12,7 +12,7 @@
                 </div>
             </el-form-item>
             <el-form-item label="颜色模式">
-                <div>
+                <div class="form-content">
                     <div class="select">
                         <el-select v-model="configuredMode">
                             <el-option label="跟随系统" value="auto" />
@@ -23,15 +23,15 @@
                 </div>
             </el-form-item>
             <el-form-item label="错误报告和统计">
-                <div>
+                <div class="form-content">
                     <div class="select">
                         <el-switch v-model="options.reporting"></el-switch>
                     </div>
                     <div class="desc">关闭后刷新页面生效。</div>
                 </div>
             </el-form-item>
             <el-form-item label="展示广告">
-                <div>
+                <div class="form-content">
                     <div class="select">
                         <el-switch v-model="options.showads"></el-switch>
                     </div>
@@ -51,6 +51,8 @@
 </template>
 
 <script>
+import { toRef } from 'vue'
+import bus from '@/bus'
 import { langNames } from '@/i18n'
 import { options } from '@/store'
 import { configuredMode } from '@/utils/darkmode'
@@ -67,6 +69,7 @@ export default {
             reporting.report()
         }
         return {
+            isMobile: toRef(bus(), 'isMobile'),
             langNames,
             options,
             report,
@@ -86,10 +89,8 @@ export default {
         .about {
             display: flex;
             flex-direction: column;
-            align-content: center;
             justify-content: center;
-            width: 300px;
-            max-width: 80%;
+            width: 320px;
             align-items: center;
             text-align: center;
             .logo {
@@ -119,4 +120,17 @@ export default {
         }
     }
 }
+.option-basic.option-basic-moblie {
+    :global {
+        .form-content {
+            width: 100%;
+        }
+        .select {
+            width: 100%;
+        }
+        .about {
+            width: 100%;
+        }
+    }
+}
 </style>