From 2ce4eadc2f9b1455e630f6c7938b15701afcd3be Mon Sep 17 00:00:00 2001
From: Frost-ZX <30585462+Frost-ZX@users.noreply.github.com>
Date: Sat, 5 Jun 2021 11:08:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/global.less | 47 ++++++++++++++++++++++++++++++++------
 src/views/Settings.vue     | 30 +++++++++++++++++++-----
 src/views/Tools.vue        | 14 ++++++------
 3 files changed, 71 insertions(+), 20 deletions(-)

diff --git a/src/assets/css/global.less b/src/assets/css/global.less
index 98b6a69..cea3b29 100644
--- a/src/assets/css/global.less
+++ b/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;
 }
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 4eb1e0f..5ad51db 100644
--- a/src/views/Settings.vue
+++ b/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>
diff --git a/src/views/Tools.vue b/src/views/Tools.vue
index 07df5fa..38326fb 100644
--- a/src/views/Tools.vue
+++ b/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;
             }
         }