优化移动端显示效果

src/assets/css/global.less

@@ -3,8 +3,8 @@
 // 滚动条
 
 ::-webkit-scrollbar {
-    width: .5rem;
-    height: .5rem;
+    width: 0.5rem;
+    height: 0.5rem;
 }
 
 ::-webkit-scrollbar-track {
@@ -20,6 +20,13 @@
     }
 }
 
+// 选中文本
+
+::selection {
+    background-color: @colorPrimary;
+    color: #FFF;
+}
+
 // 标签
 
 html {
@@ -76,21 +83,21 @@ body {
 // 阴影
 
 .shadow-1 {
-    box-shadow: 0 0 .5rem rgba(0, 0, 0, .1);
+    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
 }
 
 .shadow-2 {
-    box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .05);
+    box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.05);
 }
 
 .shadow-3 {
-    box-shadow: 0 .5rem 1rem -.4rem rgba(0, 0, 0, .12);
+    box-shadow: 0 0.5rem 1rem -0.4rem rgba(0, 0, 0, 0.12);
 }
 
 // 载入中（链接列表）
 
 .loading-link {
-    background-color: rgba(255, 255, 255, .5) !important;
+    background-color: rgba(255, 255, 255, 0.5) !important;
     backdrop-filter: blur(.2rem);
 
     .el-loading-spinner {
@@ -120,7 +127,7 @@ body {
         padding: 1rem 1.5rem !important;
         background-color: @colorPrimary;
         color: #FFF;
-        .shadow-3();
+        .shadow-3;
     }
 
     .el-drawer__body {
@@ -129,6 +136,10 @@ body {
     }
 }
 
+.el-form-item {
+    margin-bottom: 0.5rem;
+}
+
 .el-input {
     input::-webkit-inner-spin-button,
     input::-webkit-outer-spin-button {
@@ -155,6 +166,28 @@ body {
     }
 }
 
+.el-message {
+    width: 80%;
+    min-width: 16rem;
+    max-width: 25rem;
+    .shadow-2;
+
+    &.el-message--info {
+        background-color: #FFF;
+    }
+}
+
+.el-message-box {
+    display: block;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 90%;
+    min-width: 16rem;
+    max-width: 25rem;
+    transform: translate(-50%, -50%);
+}
+
 .el-select-dropdown {
     border: none !important;
 }

src/views/Settings.vue

@@ -4,9 +4,13 @@
 
             <el-form label-position="left" label-width="7rem">
 
-                <el-form-item label="字体大小">
-                    <el-input-number v-model="config.fontSize"
-                        :min="12" :max="32" label="字体大小" size="small"
+                <el-form-item label="字体大小" class="set-font">
+                    <el-input-number
+                        v-model="config.fontSize"
+                        :min="12"
+                        :max="32"
+                        label="字体大小"
+                        size="small"
                     ></el-input-number>
                 </el-form-item>
 
@@ -19,11 +23,19 @@
                 </el-form-item>
 
                 <el-form-item label="清除数据">
-                    <el-button type="danger" size="medium" @click="resetDatas('settings')">清除设置</el-button>
+                    <el-button
+                        type="danger"
+                        size="medium"
+                        @click="resetDatas('settings')"
+                    >清除设置</el-button>
                 </el-form-item>
 
                 <el-form-item>
-                    <el-button type="danger" size="medium" @click="resetDatas('cache')">清除缓存</el-button>
+                    <el-button
+                        type="danger"
+                        size="medium"
+                        @click="resetDatas('cache')"
+                    >清除缓存</el-button>
                 </el-form-item>
 
             </el-form>
@@ -101,10 +113,16 @@ export default {
     overflow-y: auto;
 
     .wrapper {
-        padding: 1.5rem 2rem;
+        padding: 1.5rem;
         width: 100%;
         max-width: 50rem;
         background-color: #FFF;
     }
 }
+
+.set-font {
+    /deep/ .el-input-number {
+        width: 7rem;
+    }
+}
 </style>

src/views/Tools.vue

@@ -196,11 +196,11 @@ export default {
 
         .tool-item {
             flex-shrink: 0;
-            margin: .5rem;
+            margin: 0.5rem;
             padding: 1rem;
             width: 16rem;
-            border-left: .2rem solid @colorPrimary;
-            border-radius: .25rem;
+            border-left: 0.2rem solid @colorPrimary;
+            border-radius: 0.25rem;
             background-color: #FFF;
             font-size: 0;
             color: #555;
@@ -210,7 +210,7 @@ export default {
 
             &:hover {
                 border-left-color: @colorSecondary;
-                transform: translateY(-.2rem);
+                transform: translateY(-0.2rem);
             }
 
             &.disabled {
@@ -218,15 +218,15 @@ export default {
             }
 
             .item-title {
-                margin-bottom: .5rem;
+                margin-bottom: 0.5rem;
                 font-weight: bold;
-                font-size: .9rem;
+                font-size: 0.9rem;
             }
 
             .item-content {
                 height: calc(1.5em * 2);
                 line-height: 1.5em;
-                font-size: .75rem;
+                font-size: 0.75rem;
                 color: #999;
             }
         }