From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 20 七月 2022 15:05:58 +0800
Subject: [PATCH] 修复国标配置的bug

---
 src/pages/settings/index/index.vue |  445 ++++++++++++++++++++++++++++++-------------------------
 1 files changed, 242 insertions(+), 203 deletions(-)

diff --git a/src/pages/settings/index/index.vue b/src/pages/settings/index/index.vue
index 5c27f41..e8eaf50 100644
--- a/src/pages/settings/index/index.vue
+++ b/src/pages/settings/index/index.vue
@@ -8,7 +8,6 @@
         :key="i"
         @click="openMenu(i)"
       >
-        <!-- <span class="icon iconfont">{{ item.icon }}</span> -->
         <img :src="item.blackIcon" class="b" alt="" />
         <img :src="item.whiteIcon" class="w" alt="" />
         <span class="card-text">{{ item.name }}</span>
@@ -17,7 +16,12 @@
 
     <div class="container-center" v-if="activeIndex == 0">
       <div class="account-left" v-if="activeIndex == 0">
-        <div class="account-list">
+        <div
+          class="account-list"
+          :class="{ 'account-list-scroll': account_list_scroll }"
+          @mouseenter="account_list_scroll = true"
+          @mouseleave="account_list_scroll = false"
+        >
           <div
             class="account-card"
             :class="activeAccountIndex == index ? 'account-card-active' : ''"
@@ -40,7 +44,6 @@
           </div>
         </div>
         <div class="add-account" v-if="curUserRole != '鏅�氱敤鎴�'">
-          <!-- <span class="icon iconfont" @click="openAdd">&#xe646;</span> -->
           <i
             class="el-icon-circle-plus"
             style="font-size: 40px"
@@ -74,15 +77,6 @@
                 <span class="enable" v-if="!showJPGArr" @click="editHeadPic"
                   >缂栬緫澶村儚</span
                 >
-                <!-- <span
-                  class="enable"
-                  v-if="addForm.headpic"
-                  @click="confirmChangePic"
-                  >纭閫夋嫨</span
-                >
-                <span class="enable" v-if="showJPGArr" @click="cacelChoosePic">
-                  鍙栨秷</span
-                > -->
               </div>
             </div>
             <div class="user-desc">
@@ -222,35 +216,6 @@
 
         <div class="permission" v-if="inAccountDetail && isSetPermission">
           <div class="title">鏉冮檺绠$悊</div>
-
-          <!-- <div class="line-wrap" v-for="item in sysMenus" :key="item.id">
-            <div class="line">
-              <div class="name">{{ item.name }}</div>
-              <el-switch
-                v-model="item.selected"
-                active-color="rgba(61, 104, 225, 1)"
-                @change="fatherChange(item)"
-              >
-              </el-switch>
-            </div>
-            <div v-if="item.children">
-              <div
-                class="line"
-                style="margin-left: 55px"
-                v-for="x in item.children"
-                :key="x.id"
-              >
-                <div class="name">{{ x.name }}</div>
-                <el-switch
-                  v-model="x.selected"
-                  active-color="rgba(61, 104, 225, 1)"
-                  @change="childrenChange(item)"
-                >
-                </el-switch>
-              </div>
-            </div>
-          </div> -->
-          <!--    -->
           <div class="tree-window">
             <el-tree
               ref="treeMenus"
@@ -366,12 +331,6 @@
           </div>
 
           <div class="adjust-zone">
-            <!-- <el-radio-group v-model="ajustType"
-            fill="#4E94FF"
-            >
-                  <el-radio-button label="鎵嬪姩鏍℃椂"></el-radio-button>
-                  <el-radio-button label=""></el-radio-button>
-                </el-radio-group> -->
             <div class="two-radio">
               <div
                 class="radio"
@@ -617,21 +576,22 @@
       style="width: 100%"
       ref="view_6"
     ></deviceInfo>
+    <Authorization v-if="activeIndex == 7" style="width: 100%" ref="view_7">
+    </Authorization>
+    <WebManage v-if="activeIndex == 8"></WebManage>
   </div>
-  <div class="welcome-page" v-else ref="curPage">
+  <div class="welcome-page" v-else ref="curPage" @mouseup="mouseDownIndex = ''">
     <div
       class="search-box"
       :class="showRecomand ? 'border-change' : ''"
       @click.stop
     >
-      <!-- @blur="showRecomand = false" -->
       <el-input
         class="search-input"
         placeholder="鏌ユ壘璁剧疆"
         size="mini"
         @focus="showRecomand = true"
         clearable
-        @input="filterRecomand"
         :suffix-icon="showRecomand && searchText.length ? '' : 'el-icon-search'"
         v-model="searchText"
       >
@@ -656,11 +616,12 @@
       <div
         class="nav-child"
         @click="openWelcome(i)"
+        @mousedown="mouseDownIndex = i"
+        :class="mouseDownIndex === i ? 'nav-child-active' : ''"
         v-for="(item, i) in menuArr"
         :key="i"
       >
         <div class="child-info">
-          <!-- <span class="icon iconfont welcome-icon">{{ item.icon }}</span> -->
           <img :src="item.imgUrl" alt="" />
           <span class="welcome-title">{{ item.name }}</span>
         </div>
@@ -689,6 +650,8 @@
 import deviceInfo from "../views/deviceInfo";
 import keyboardLanguage from "../views/keyboardLanguage";
 import generalSettings from "../views/generalSettings";
+import Authorization from "../views/Authorization";
+import WebManage from "@/pages/settings/components/WebManage";
 import { pad0, getUrlKey } from "@/api/utils";
 
 export default {
@@ -701,6 +664,8 @@
     keyboardLanguage,
     generalSettings,
     deviceInfo,
+    Authorization,
+    WebManage,
   },
   data() {
     var v2 = (rule, value, callback) => {
@@ -752,7 +717,6 @@
       browserTimer: null,
       timezone: "",
       showRecomand: false,
-
       searchArr: [
         { name: "璐︽埛", addr: [0] },
         { name: "閫氱敤璁剧疆", addr: [5] },
@@ -780,13 +744,11 @@
       selectedPic: null,
       showDayInput: false,
       timestamp: 0,
-      ajustType: "鎵嬪姩鏍℃椂",
       inAccountDetail: false,
       isChangePw: false,
       isSetPermission: false,
       timeInterval: 10,
       ntpServer: "",
-      // syncType: "1",
       equipmentTime: "",
       equipmentDate: "",
       roleList: [],
@@ -844,16 +806,30 @@
           blackIcon: "/images/settings/榛戣壊涓�绾con/璁惧淇℃伅.png",
           whiteIcon: "/images/settings/鐧借壊涓�绾con/璁惧淇℃伅.png",
         },
+        {
+          name: "鎺堟潈绠$悊",
+          icon: "\ue7e9;",
+          imgUrl: "/images/settings/鎺堟潈绠$悊.png",
+          blackIcon: "/images/settings/榛戣壊涓�绾con/鎺堟潈绠$悊.png",
+          whiteIcon: "/images/settings/鐧借壊涓�绾con/鎺堟潈绠$悊.png",
+        },
+        {
+          name: "鍩熷悕绠$悊",
+          icon: "\ue6db",
+          imgUrl: "/images/settings/閫氱敤璁剧疆.png",
+          blackIcon: "/images/settings/榛戣壊涓�绾con/閫氱敤璁剧疆.png",
+          whiteIcon: "/images/settings/鐧借壊涓�绾con/閫氱敤璁剧疆.png",
+        },
       ],
       accountArr: [],
       jpgArr: [],
-      isManual: true,
       isNtp: false,
       activeIndex: 0,
       clockTimer: null,
       inputHour: "",
       inputMin: "",
       inputSec: "",
+      mouseDownIndex: "",
       inputYrs: "",
       showInputNickName: false,
       inputMonth: "",
@@ -899,16 +875,26 @@
         ],
         confirmPassword: [{ validator: v4, trigger: "blur" }],
       },
+      account_list_scroll: false,
     };
+  },
+  created() {
+    let color = localStorage.getItem("--colorCard");
+    if (color) {
+      document.documentElement.style.setProperty("--colorCard", `${color}`);
+    }
   },
   beforeDestroy() {
     clearTimeout(this.clockTimer);
     clearInterval(this.browserTimer);
-    if (this.$refs.curPage) {
-      this.$refs.curPage.removeEventListener("click");
-    }
   },
   mounted() {
+    // 杩斿洖鎸夐挳鍥炶皟
+    window.addEventListener("message", (e) => {
+      if (e.data.msg === "杩斿洖绯荤粺璁剧疆") {
+        this.showWelcome = true;
+      }
+    });
     const menu = getUrlKey("menu");
     if (menu) {
       this.showWelcome = false;
@@ -1017,7 +1003,6 @@
         case "hrs":
           num = +this.syncHour - 1;
           if (num == -1) {
-            鏈夌嚎缃戠粶鏈夌嚎缃戠粶;
             num = 23;
           }
           this.syncHour = pad0(+num);
@@ -1175,18 +1160,10 @@
         }
       );
     },
-    flatCheckedArr(arr, res) {
-      for (const item of arr) {
-        if (item.selected) res.push(item.id);
-        if (item.children) this.flatCheckedArr(item.children, res);
-      }
-    },
     saveAuth() {
-      let arr = [];
-      this.flatCheckedArr(this.sysMenus, arr);
       updataUser({
         id: this.activeAccountItem.id,
-        menuIds: arr,
+        menuIds: this.$refs.treeMenus.getCheckedKeys(),
       }).then((res) => {
         if (res.success) {
           this.$message.success(res.msg);
@@ -1218,9 +1195,7 @@
         if (rsp && rsp.success) {
           this.timezone = rsp.data.time_zone;
           if (!ntpTest) {
-            // this.syncType = rsp.data.ntp ? "1" : "2";
             this.isNtp = rsp.data.ntp;
-            this.isManual = !rsp.data.ntp;
           }
           if (rsp.data.ntp) {
             this.ntpServer = rsp.data.ntp_server;
@@ -1232,7 +1207,7 @@
             "鏃ヤ竴浜屼笁鍥涗簲鍏�".charAt(new Date(+this.timestamp * 1000).getDay());
           if (this.clockTimer === null) {
             this.runClock();
-            if (this.isManual) this.parseTime();
+            if (!this.isNtp) this.parseTime();
           }
         }
       });
@@ -1313,9 +1288,6 @@
         this.openWelcome(addr[0]);
         this.$nextTick(() => {
           if (addr[0] == 1) {
-            // addr[1] == 0
-            //   ? this.changeSwitch("isNtp")
-            //   : this.changeSwitch("isManual");
             return;
           }
           this.$refs[`view_${addr[0]}`].openRight(addr[1]);
@@ -1499,26 +1471,21 @@
       }
     },
     parseTime() {
-      [this.syncYrs, this.syncMonth, this.syncDay] = this.equipmentDate.split(
-        "-"
-      );
-      [this.syncHour, this.syncMin, this.syncSec] = this.equipmentTime.split(
-        ":"
-      );
+      [this.syncYrs, this.syncMonth, this.syncDay] =
+        this.equipmentDate.split("-");
+      [this.syncHour, this.syncMin, this.syncSec] =
+        this.equipmentTime.split(":");
     },
-    // changeSwitch(str) {
-    //   if (str == "isNtp") {
-    //     this.isManual = !this[str];
-    //   } else {
-    //     this.isNtp = !this[str];
-    //   }
-    //   this.syncType = this.isNtp ? "1" : "2";
-    //   if (this.isManual) this.parseTime();
-    // },
   },
   computed: {
     activeUserRole() {
-      return this.activeAccountItem.sysRoles[0].name;
+      if (
+        this.activeAccountItem.sysRoles &&
+        this.activeAccountItem.sysRoles.length
+      ) {
+        return this.activeAccountItem.sysRoles[0].name;
+      }
+      return "鏅�氱敤鎴�";
     },
     curUserRole() {
       const info = JSON.parse(sessionStorage.getItem("userInfo"));
@@ -1537,6 +1504,10 @@
       return false;
     },
     isShowPermitBtn() {
+      // basic 鐢ㄦ埛涓嶅厑璁镐慨鏀规潈闄�
+      if (this.activeUserRole == "瓒呯骇绠$悊鍛�") {
+        return false;
+      }
       if (this.curUserRole == "绠$悊鍛�") {
         return this.activeUserRole == "鏅�氱敤鎴�";
       } else {
@@ -1553,6 +1524,27 @@
       }
     },
   },
+  watch: {
+    showWelcome(newVal) {
+      if (newVal) {
+        // 闅愯棌杩斿洖鎸夋寜閽�
+        window.parent.postMessage(
+          {
+            msg: "hiddenBack",
+          },
+          "*"
+        );
+      } else {
+        //鏄剧ず杩斿洖鎸夐挳
+        window.parent.postMessage(
+          {
+            msg: "showBack",
+          },
+          "*"
+        );
+      }
+    },
+  },
 };
 </script>
 <style lang="scss">
@@ -1565,21 +1557,23 @@
   background-color: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(4px);
   .border-change {
-    border-radius: 20px !important;
+    border-radius: 15px !important;
   }
   .search-box {
     width: 332px;
     z-index: 999;
-    // margin: 55px auto;
     position: fixed;
     left: calc(50% - 166px);
     top: 50px;
-    background: rgba(255, 255, 255, 0.8);
 
-    border: 2px solid #4e94ff;
+    border: 2px solid var(--colorCard);
     box-sizing: border-box;
     backdrop-filter: blur(4px);
     border-radius: 40px;
+
+    .search-res {
+      background-color: rgba(255, 255, 255, 0.5);
+    }
     .search-input {
       font-size: 14px;
       .el-input--mini .el-input__inner {
@@ -1607,6 +1601,31 @@
         transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
         width: 100%;
         font-weight: bold;
+
+        &::-webkit-input-placeholder {
+          /* WebKit browsers */
+          color: #828282;
+          font-weight: normal;
+          font-size: 14px;
+        }
+        &:-moz-placeholder {
+          /* Mozilla Firefox 4 to 18 */
+          color: #828282;
+          font-weight: normal;
+          font-size: 14px;
+        }
+        &::-moz-placeholder {
+          /* Mozilla Firefox 19+ */
+          color: #828282;
+          font-weight: normal;
+          font-size: 14px;
+        }
+        &:-ms-input-placeholder {
+          /* Internet Explorer 10+ */
+          color: #828282;
+          font-weight: normal;
+          font-size: 14px;
+        }
       }
       .el-input__suffix {
         display: flex;
@@ -1635,7 +1654,7 @@
         text-align: left;
         box-sizing: border-box;
         padding: 0 20px;
-        color: #333333;
+        color: #4f4f4f;
         font-size: 14px;
         cursor: pointer;
       }
@@ -1645,20 +1664,19 @@
         text-align: left;
         box-sizing: border-box;
         padding: 0 20px;
-        color: #333333;
+        color: #4f4f4f;
         font-size: 14px;
       }
       .res-bar:hover {
         background: #f5f5f6 10%;
         font-weight: bold;
-        color: #4e94ff;
+        color: var(--colorCard);
       }
-      // .res-bar:last-child {
-      //   border-radius: 0 0 20px 20px;
-      // }
     }
   }
   .nav-items {
+    max-width: 960px;
+    margin: 0 auto;
     .nav-child {
       box-sizing: border-box;
       background-color: rgba(251, 251, 255, 0.1);
@@ -1673,12 +1691,19 @@
       justify-content: center;
       align-items: center;
       cursor: pointer;
+      border: 2px solid #f2f2f7;
 
-      // box-shadow: 2px 2px 4px rgb(226, 226, 226);
+      &-active {
+        border: 2px solid #4e94ff;
+      }
+
+      &:hover {
+        background: #f2f2f7;
+      }
+
       .child-info {
         display: flex;
         flex-direction: column;
-        // justify-content: space-around;
         height: 100%;
         .welcome-icon {
           font-size: 72px;
@@ -1686,21 +1711,16 @@
         img {
           width: 64px;
           margin: 0 auto;
-          margin-top: 65px;
+          margin-top: 61px;
           height: 50px;
         }
         .welcome-title {
           font-size: 16px;
           font-weight: bold;
           margin-top: 24px;
-          color: #333333;
+          color: #4f4f4f;
         }
       }
-    }
-    .nav-child:hover {
-      // box-shadow: 4px 4px 12px rgb(218, 218, 218);
-      // transform: translate3d(0, -1px, 0);
-      // transition: all 0.3s;
     }
   }
 }
@@ -1712,8 +1732,9 @@
   flex-basis: auto;
   box-sizing: border-box;
   background-color: #fff;
-  border-top: 1px solid #e1e0e6;
-
+  color: #4f4f4f;
+  border-top: 2px solid #e1e0e6;
+  overflow-x: hidden;
   .container-left {
     height: 100%;
     width: 244px;
@@ -1721,32 +1742,27 @@
     box-sizing: border-box;
     flex-shrink: 0;
     padding: 10px;
-    // border-right: 5px solid rgba(248, 248, 248, 1);
     box-sizing: border-box;
     .left-card {
       height: 56px;
       cursor: pointer;
       border-radius: 8px;
-      margin-bottom: 10px;
+      margin-bottom: 4px;
       display: flex;
       align-items: center;
       padding: 0 20px;
-      // .iconfont {
-      //   margin-left: 25px;
-      //   margin-right: 10px;
-      //   font-size: 24px;
-      // }
+
       .card-text {
         margin-left: 20px;
-        color: #333333;
+        color: #4f4f4f;
         font-weight: bold;
         font-size: 16px;
         line-height: 22px;
         height: 22px;
       }
       img {
-        height: 40px;
-        width: 40px;
+        height: 30px;
+        width: 30px;
       }
       .w {
         display: none;
@@ -1756,7 +1772,7 @@
       }
     }
     .left-card-active {
-      background-color: #4e94ff !important;
+      background-color: var(--colorCard) !important;
       .card-text {
         color: #fff !important;
       }
@@ -1777,15 +1793,33 @@
     overflow: auto;
     flex-shrink: 0;
     padding: 10px;
-    border-right: 4px solid #f2f2f7;
+    padding-top: 6px;
+    padding-right: 5px;
+    border-top: 4px solid #f2f2f7;
+    border-left: 4px solid #f2f2f7;
     box-sizing: border-box;
     background-color: #fbfaff;
-    border-left: 4px solid #f2f2f7;
     .account-left {
       height: 100%;
       .account-list {
         height: calc(85%);
         overflow: auto;
+        padding-right: 5px;
+        &::-webkit-scrollbar-track,
+        &::-webkit-scrollbar-thumb {
+          visibility: hidden;
+        }
+        &::-webkit-scrollbar {
+          background-color: #fff;
+        }
+
+        &.account-list-scroll::-webkit-scrollbar-thumb,
+        &.account-list-scroll::-webkit-scrollbar-track {
+          visibility: visible;
+        }
+        &.account-list-scroll::-webkit-scrollbar {
+          background-color: #f5f5f5;
+        }
       }
       .add-account {
         color: var(--colorCard);
@@ -1822,10 +1856,9 @@
           height: 19.21px;
           background: #ffffff;
           border-radius: 20px;
-          color: #333333;
+          color: #4f4f4f;
           transform: scale(0.833333);
           line-height: 22.21px;
-          // border: 1px solid var(--colorCard) ;
           span {
             font-size: 13px;
           }
@@ -1851,6 +1884,8 @@
     position: relative;
     padding: 30px 40px;
     background: #f2f2f7;
+    border-left: 4px solid #f2f2f7;
+    border-top: 4px solid #f2f2f7;
     .account-right {
       height: 100%;
       .account-content {
@@ -1859,7 +1894,6 @@
           margin: 0 auto;
           display: flex;
           flex-direction: column;
-          // margin-bottom: 80px;
           align-items: center;
           .touxiang-big {
             width: 100px;
@@ -1909,7 +1943,7 @@
             display: flex;
             flex-direction: column;
             align-items: center;
-            color: #333333;
+            color: #4f4f4f;
             min-width: 200px;
             .user-name {
               margin-bottom: 10px;
@@ -1937,7 +1971,7 @@
                 margin-left: 10px;
               }
               .confirm-icon {
-                color: #4e94ff;
+                color: var(--colorCard);
                 font-size: 18px;
                 margin-left: 10px;
               }
@@ -1956,7 +1990,7 @@
                   height: 20px;
                   line-height: 20px;
                   /* border: 1px solid; */
-                  border: 1px solid #4e94ff;
+                  border: 1px solid var(--colorCard);
                   border-radius: 20px;
                   background: #f2f2f7;
                 }
@@ -1984,14 +2018,14 @@
           margin-top: 80px;
           .alt-pw-btn {
             background: rgba(78, 148, 255, 0.1);
-            border: 1px solid #4e94ff;
+            border: 1px solid var(--colorCard);
           }
           .del-usr-btn {
             background: #e0e0e0;
             color: #fc4958;
           }
           .auth-set-btn {
-            background: #4e94ff;
+            background: var(--colorCard);
             color: #ffffff;
           }
           .item-btn {
@@ -2009,22 +2043,23 @@
 
       .change-pw {
         padding: 40px 10px;
-    max-width: 600px;
-    margin: 0 auto;
+        // max-width: 600px;
+        margin: 0 auto;
         .title {
           font-weight: bold;
           font-size: 16px;
           line-height: 22px;
-          color: #333333;    margin-bottom: 40px;
-              height: 28px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-          .icon{
-    font-size: 28px;
-    font-weight: normal;margin-right: 10px;
+          color: #4f4f4f;
+          margin-bottom: 40px;
+          height: 28px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          .icon {
+            font-size: 28px;
+            font-weight: normal;
+            margin-right: 10px;
           }
-
         }
         .el-form-item__content {
           line-height: 48px;
@@ -2034,7 +2069,7 @@
           border-radius: 8px;
           padding: 0 15px 0 20px;
           .el-select-dropdown__item {
-            color: #333333;
+            color: #4f4f4f;
             height: 32px;
             font-size: 12px;
             line-height: 32px;
@@ -2048,7 +2083,7 @@
             .el-select-dropdown__item.hover,
             .el-select-dropdown__item:hover {
               background-color: #f2f2f7;
-              color: #4e94ff;
+              color: var(--colorCard);
             }
           }
         }
@@ -2059,12 +2094,16 @@
         .el-form-item {
           .el-input__inner {
             background-color: #ffffff;
-            border: none;
+            border: 2px solid transparent;
             border-radius: 20px;
             height: 32px;
+            line-height: 32px;
             padding: 0 15px;
             font-size: 14px;
             font-weight: bold;
+          }
+          .el-input__inner:focus {
+            border: 2px solid var(--colorCard);
           }
           .el-input__inner::placeholder {
             color: #c0c4cc;
@@ -2075,17 +2114,17 @@
             width: 100%;
           }
           .el-select .el-input .el-select__caret {
-            color: #333333;
+            color: #4f4f4f;
             font-size: 14px;
             font-weight: 600;
           }
         }
         .p-title {
-           height: 48px;
-            text-align: left;
-            line-height: 48px;
-            width: 90px;
-            font-weight: 600;
+          height: 48px;
+          text-align: left;
+          line-height: 48px;
+          width: 90px;
+          font-weight: 600;
         }
       }
       .el-form-item {
@@ -2099,7 +2138,7 @@
           font-size: 15px;
         }
         .el-input__clear {
-          color: #333333;
+          color: #4f4f4f;
           font-size: 16px;
           line-height: 48px;
         }
@@ -2118,7 +2157,7 @@
           line-height: 48px;
           font-size: 16px;
           font-weight: 600;
-          color: #333333;
+          color: #4f4f4f;
           height: 48px;
           background: #fbfaff;
           border-bottom: 2px solid #f2f2f7;
@@ -2132,8 +2171,8 @@
             color: #333;
             height: 100%;
             overflow: auto;
-                max-width: 600px;
-    margin: 0 auto;
+            max-width: 600px;
+            margin: 0 auto;
             .el-tree-node {
               background: initial;
               .el-tree-node__content {
@@ -2149,12 +2188,12 @@
                 }
                 .el-checkbox__input.is-checked .el-checkbox__inner,
                 .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-                  background-color: #4e94ff;
-                  border-color: #4e94ff;
+                  background-color: var(--colorCard);
+                  border-color: var(--colorCard);
                 }
                 .el-checkbox__inner {
                   border-radius: 1px;
-                  border: 1px solid #4e94ff;
+                  border: 1px solid var(--colorCard);
                 }
                 .el-tree-node__label {
                   font-size: 13px;
@@ -2162,7 +2201,7 @@
                 }
               }
               .el-tree-node__content:hover {
-                border: 2px solid #4e94ff;
+                border: 2px solid var(--colorCard);
               }
             }
           }
@@ -2214,7 +2253,7 @@
           }
         }
         .upload-jpg-border {
-          border: 2px solid #4e94ff;
+          border: 2px solid var(--colorCard);
         }
       }
       .add-account-page {
@@ -2228,7 +2267,7 @@
           line-height: 22px;
         }
         .fill-group {
-          max-width: 450px;
+          //  max-width: 450px;
           margin-top: 10px;
 
           margin: 0 auto;
@@ -2240,7 +2279,7 @@
             border-radius: 8px;
             padding: 0 15px 0 20px;
             .el-select-dropdown__item {
-              color: #333333;
+              color: #4f4f4f;
               height: 32px;
               font-size: 12px;
               line-height: 32px;
@@ -2254,7 +2293,7 @@
               .el-select-dropdown__item.hover,
               .el-select-dropdown__item:hover {
                 background-color: #f2f2f7;
-                color: #4e94ff;
+                color: var(--colorCard);
               }
             }
           }
@@ -2272,12 +2311,16 @@
           .el-form-item {
             .el-input__inner {
               background-color: #ffffff;
-              border: none;
+              border: 2px solid transparent;
               border-radius: 20px;
               height: 32px;
+              line-height: 32px;
               padding: 0 15px;
               font-size: 14px;
               font-weight: bold;
+            }
+            .el-input__inner:focus {
+              border: 2px solid var(--colorCard);
             }
             .el-input__inner::placeholder {
               color: #c0c4cc;
@@ -2288,7 +2331,7 @@
               width: 100%;
             }
             .el-select .el-input .el-select__caret {
-              color: #333333;
+              color: #4f4f4f;
               font-size: 14px;
               font-weight: 600;
             }
@@ -2299,7 +2342,7 @@
     .datetime-right {
       .datetime-left {
         .device-time {
-          color: #333333;
+          color: #4f4f4f;
           .title {
             display: flex;
             justify-content: center;
@@ -2369,7 +2412,7 @@
               letter-spacing: 0.5px;
             }
             .highlight-radio {
-              background: #4e94ff;
+              background: var(--colorCard);
               color: #ffffff;
             }
           }
@@ -2522,19 +2565,20 @@
                   background: #f2f2f7;
                 }
                 .el-input__inner:focus {
-                  border: 2px solid #4e94ff;
+                  border: 2px solid var(--colorCard);
                 }
               }
               .el-button--text {
                 margin-left: 42px;
                 color: #409eff;
                 background: rgba(78, 148, 255, 0.1);
-                border: 1px solid #4e94ff;
+                border: 1px solid var(--colorCard);
                 box-sizing: border-box;
                 border-radius: 20px;
                 width: 68px;
                 color: #333;
-                font-weight: bold;padding: 6px 20px;
+                font-weight: bold;
+                padding: 6px 20px;
               }
             }
           }
@@ -2573,7 +2617,6 @@
       }
       .ip-input-container {
         max-width: none !important;
-        display: inline-block;
         width: 336px;
         height: 34px;
         line-height: normal;
@@ -2585,33 +2628,33 @@
         border: 2px solid transparent;
       }
     }
-    .btns {
-      margin: 0 auto;
-      margin-top: 40px;
-      width: fit-content;
-      display: flex;
-      .cancel {
-        width: 188px;
-        height: 40px;
-        cursor: pointer;
-        border-radius: 25px;
-        background-color: #e0e0e0;
-        line-height: 40px;
-        font-weight: bold;
-        font-size: 16px;
-        margin-right: 12px;
-      }
-      .ok {
-        width: 188px;
-        height: 40px;
-        cursor: pointer;
-        border-radius: 25px;
-        background-color: #4e94ff;
-        color: #fff;
-        line-height: 40px;
-        font-weight: bold;
-        font-size: 16px;
-      }
+  }
+  .btns {
+    margin: 0 auto;
+    margin-top: 40px;
+    width: fit-content;
+    display: flex;
+    .cancel {
+      width: 188px;
+      height: 40px;
+      cursor: pointer;
+      border-radius: 25px;
+      background-color: #e0e0e0;
+      line-height: 40px;
+      font-weight: bold;
+      font-size: 16px;
+      margin-right: 12px;
+    }
+    .ok {
+      width: 188px;
+      height: 40px;
+      cursor: pointer;
+      border-radius: 25px;
+      background-color: var(--colorCard);
+      color: #fff;
+      line-height: 40px;
+      font-weight: bold;
+      font-size: 16px;
     }
   }
   .container-right-for-account {
@@ -2619,8 +2662,4 @@
     padding: 0;
   }
 }
-.del-account-message-box {
-}
 </style>
-
-

--
Gitblit v1.8.0