From 8b31ebab2fd3bb4397f4966767a1ed7ddef3ff2c Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期一, 27 九月 2021 17:42:06 +0800
Subject: [PATCH] 系统设置v1.1

---
 src/pages/settings/views/keyboardLanguage.vue |   73 +++++++++++++++++++-----------------
 1 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/src/pages/settings/views/keyboardLanguage.vue b/src/pages/settings/views/keyboardLanguage.vue
index a7e17b8..c61c9b0 100644
--- a/src/pages/settings/views/keyboardLanguage.vue
+++ b/src/pages/settings/views/keyboardLanguage.vue
@@ -7,7 +7,7 @@
           v-for="(item, i) in tabList"
           :class="activePage == i ? 'menu-item-active' : ''"
           :key="i"
-          @click="openRight(item, i)"
+          @click="openRight( i)"
           ref="leftbar"
         >
           <span class="iconfont">{{ item.icon }}</span>
@@ -16,7 +16,7 @@
       </div>
       <div class="language-right">
         <div class="lang" v-if="activePage == 0">
-          <div class="title">璇█鍒楄〃</div>
+          <div class="bar title">璇█鍒楄〃</div>
           <div
             class="bar"
             v-for="(item, i) in langList"
@@ -26,14 +26,14 @@
             <span class="name">{{ item.Name }}</span>
             <span
               class="icon iconfont"
-              style="color: #3d68e1;font-size:18px;"
+              style="color: var(--colorCard);font-size:16px;"
               v-show="activeLang == item.Lang"
               >&#xe6f1;</span
             >
           </div>
         </div>
         <div class="lang" v-if="activePage == 1">
-          <div class="title">閿洏甯冨眬</div>
+          <div class="title bar">閿洏甯冨眬</div>
           <div
             class="bar"
             v-for="(item, i) in keyboardList"
@@ -43,7 +43,7 @@
             <span class="name">{{ item.name }}</span>
             <span
               class="icon iconfont"
-              style="color: #3d68e1;font-size:18px;"
+              style="color: #4E94FF;font-size:16px;"
               v-show="activeKb == item.id"
               >&#xe6f1;</span
             >
@@ -143,7 +143,7 @@
         }
       );
     },
-    openRight(item, i) {
+    openRight(i) {
       this.activePage = i;
     },
   },
@@ -155,6 +155,7 @@
 }
 
 .kb-content {
+  font-weight: 700;
   height: 100%;
   display: flex;
   flex-direction: row;
@@ -163,38 +164,39 @@
   box-sizing: border-box;
   .kb-center {
     height: 100%;
-    width: 280px;
+    width: 300px;
     overflow: auto;
     box-sizing: border-box;
     flex-shrink: 0;
-    padding: 10px;
-    border-right: 5px solid #f8f8f8;
+    padding: 24px 10px 0px 10px;
+    background-color: #FBFAFF;
+    border-right: 4px solid #F2F2F7;
     .menu-item {
-      background-color: #f8f8f8;
-      height: 50px;
-      margin-bottom: 10px;
+    /*   background-color: #F2F2F7; */
+      height: 56px;
+      margin-bottom: 4px;
       border-radius: 8px;
-      line-height: 50px;
+      line-height: 56px;
       box-sizing: border-box;
-      font-size: 14px;
-      padding: 0 20px;
+      padding: 0 20px;cursor: pointer;
       display: flex;
       align-items: center;
+      color: #333;
       .title {
         font-size: 16px;
+        font-weight: 700;
       }
       .iconfont {
-        margin-right: 10px;
-        font-size: 19px;
+        margin: 15px;
+        font-size: 24px;
       }
     }
     .menu-item-active {
-      background-color: #3d68e1;
+      background-color: var(--colorCard) !important;
       color: white;
     }
     .menu-item:hover {
-      background-color: #3d68e1;
-      color: white;
+      background-color: #F2F2F7;
     }
   }
   .language-right {
@@ -203,7 +205,7 @@
     overflow: auto;
     box-sizing: border-box;
     position: relative;
-    padding: 20px 40px;
+    padding: 10px;
     .el-form-item.is-required:not(.is-no-asterisk)
       > .el-form-item__label:before,
     .el-form-item.is-required:not(.is-no-asterisk)
@@ -236,32 +238,33 @@
       max-width: none !important;
     }
     .lang {
-      .title {
-        height: 30px;
-        line-height: 30px;
-        font-size: 16px;
-        margin-bottom: 10px;
-      }
       .bar {
         height: 48px;
         background-color: #f8f8f8;
-        border-radius: 10px;
+        border-radius: 8px;
         line-height: 50px;
-        box-sizing: border-box;
-        padding: 0 20px;
+        box-sizing: content-box;
+        padding: 0 15px 0 20px;
         display: flex;
         justify-content: space-between;
         cursor: pointer;
-        margin-bottom: 12px;
+        margin-bottom: 4px;
+        border: 2px solid #f8f8f8;
         .name{
-               font-size: 15px;
+               font-size: 14px;
         }
       }
       .bar:hover{
-            background-color: #e9e9e9;
+            border: 2px solid var(--colorCard);
+      }
+      .title {
+         cursor:default ;
+        font-size: 16px;
+       justify-content: center;
+       border: 2px solid #f8f8f8 !important;
       }
     }
-    .save-btn {
+    /* .save-btn {
       background-color: #3d68e1;
       width: 240px;
       height: 40px;
@@ -271,7 +274,7 @@
       line-height: 40px;
       font-size: 14px;
       margin-top: 20px;
-    }
+    } */
   }
 }
 </style>

--
Gitblit v1.8.0