From ce91379aaa2a8f431e171abc40fe818c4c08c914 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期三, 22 九月 2021 20:51:15 +0800
Subject: [PATCH] 系统更新 v0

---
 public/images/vindicate/系统清理-白.png           |    0 
 public/images/vindicate/重启设置-黑.png           |    0 
 public/images/vindicate/更新设置-黑.png           |    0 
 src/pages/vindicate/index/App.vue            |   79 ++++++++++++++-----
 src/pages/vindicate/views/sysInfo.vue        |   50 ++++++++----
 public/images/vindicate/系统清理-黑.png           |    0 
 public/images/vindicate/重启设置-白.png           |    0 
 src/pages/vindicate/views/updateSettings.vue |   54 ++++++++-----
 public/images/vindicate/更新设置-白.png           |    0 
 public/images/vindicate/系统信息-白.png           |    0 
 public/images/vindicate/系统信息-黑.png           |    0 
 11 files changed, 122 insertions(+), 61 deletions(-)

diff --git "a/public/images/vindicate/\346\233\264\346\226\260\350\256\276\347\275\256-\347\231\275.png" "b/public/images/vindicate/\346\233\264\346\226\260\350\256\276\347\275\256-\347\231\275.png"
new file mode 100644
index 0000000..cff05b0
--- /dev/null
+++ "b/public/images/vindicate/\346\233\264\346\226\260\350\256\276\347\275\256-\347\231\275.png"
Binary files differ
diff --git "a/public/images/vindicate/\346\233\264\346\226\260\350\256\276\347\275\256-\351\273\221.png" "b/public/images/vindicate/\346\233\264\346\226\260\350\256\276\347\275\256-\351\273\221.png"
new file mode 100644
index 0000000..837d2d6
--- /dev/null
+++ "b/public/images/vindicate/\346\233\264\346\226\260\350\256\276\347\275\256-\351\273\221.png"
Binary files differ
diff --git "a/public/images/vindicate/\347\263\273\347\273\237\344\277\241\346\201\257-\347\231\275.png" "b/public/images/vindicate/\347\263\273\347\273\237\344\277\241\346\201\257-\347\231\275.png"
new file mode 100644
index 0000000..e3a43ae
--- /dev/null
+++ "b/public/images/vindicate/\347\263\273\347\273\237\344\277\241\346\201\257-\347\231\275.png"
Binary files differ
diff --git "a/public/images/vindicate/\347\263\273\347\273\237\344\277\241\346\201\257-\351\273\221.png" "b/public/images/vindicate/\347\263\273\347\273\237\344\277\241\346\201\257-\351\273\221.png"
new file mode 100644
index 0000000..1a39d8b
--- /dev/null
+++ "b/public/images/vindicate/\347\263\273\347\273\237\344\277\241\346\201\257-\351\273\221.png"
Binary files differ
diff --git "a/public/images/vindicate/\347\263\273\347\273\237\346\270\205\347\220\206-\347\231\275.png" "b/public/images/vindicate/\347\263\273\347\273\237\346\270\205\347\220\206-\347\231\275.png"
new file mode 100644
index 0000000..153f873
--- /dev/null
+++ "b/public/images/vindicate/\347\263\273\347\273\237\346\270\205\347\220\206-\347\231\275.png"
Binary files differ
diff --git "a/public/images/vindicate/\347\263\273\347\273\237\346\270\205\347\220\206-\351\273\221.png" "b/public/images/vindicate/\347\263\273\347\273\237\346\270\205\347\220\206-\351\273\221.png"
new file mode 100644
index 0000000..ff1fdfd
--- /dev/null
+++ "b/public/images/vindicate/\347\263\273\347\273\237\346\270\205\347\220\206-\351\273\221.png"
Binary files differ
diff --git "a/public/images/vindicate/\351\207\215\345\220\257\350\256\276\347\275\256-\347\231\275.png" "b/public/images/vindicate/\351\207\215\345\220\257\350\256\276\347\275\256-\347\231\275.png"
new file mode 100644
index 0000000..5e07c8a
--- /dev/null
+++ "b/public/images/vindicate/\351\207\215\345\220\257\350\256\276\347\275\256-\347\231\275.png"
Binary files differ
diff --git "a/public/images/vindicate/\351\207\215\345\220\257\350\256\276\347\275\256-\351\273\221.png" "b/public/images/vindicate/\351\207\215\345\220\257\350\256\276\347\275\256-\351\273\221.png"
new file mode 100644
index 0000000..902c917
--- /dev/null
+++ "b/public/images/vindicate/\351\207\215\345\220\257\350\256\276\347\275\256-\351\273\221.png"
Binary files differ
diff --git a/src/pages/vindicate/index/App.vue b/src/pages/vindicate/index/App.vue
index 9f90130..a82f94f 100644
--- a/src/pages/vindicate/index/App.vue
+++ b/src/pages/vindicate/index/App.vue
@@ -8,7 +8,8 @@
         :class="activePage == i ? 'left-card-active' : ''"
         @click="openMenu(item, i)"
       >
-        <span class="icon iconfont">{{item.icon}}</span>
+        <img :src="item.img_black" class="icon iconfont icon_black" />
+        <img :src="item.img_white" class="icon iconfont icon_white" />
         <span class="card-text">{{ item.name }}</span>
       </div>
     </div>
@@ -27,7 +28,7 @@
 import { getUrlKey } from "@/api/utils";
 import systemClean from "../views/systemClean";
 import updateSettings from "../views/updateSettings";
-import BackUp from "../views/backUp";
+// import BackUp from "../views/backUp";
 import restartSettings from "../views/restartSettings";
 import sysInfo from "../views/sysInfo";
 export default {
@@ -35,17 +36,16 @@
   components: {
     systemClean,
     updateSettings,
-    BackUp,
+ //   BackUp,
     restartSettings,sysInfo
   },
   data() {
     return {
       menuArr: [
-        { name: "鏇存柊璁剧疆" ,icon:"\ue6fa" },
-        // { name: "澶囦唤杩樺師",icon:""  },
-        { name: "绯荤粺娓呯悊" ,icon:"\uea3b" },
-        { name: "閲嶅惎璁剧疆" ,icon:"\ue709" },
-        { name: "绯荤粺淇℃伅" ,icon:"\ue709" },
+        { name: "鏇存柊璁剧疆" ,img_black:"/images/vindicate/鏇存柊璁剧疆-榛�.png", img_white:"/images/vindicate/鏇存柊璁剧疆-鐧�.png",},
+        { name: "绯荤粺娓呯悊" ,img_black:"/images/vindicate/绯荤粺娓呯悊-榛�.png", img_white:"/images/vindicate/绯荤粺娓呯悊-鐧�.png",},
+        { name: "閲嶅惎璁剧疆" ,img_black:"/images/vindicate/閲嶅惎璁剧疆-榛�.png", img_white:"/images/vindicate/閲嶅惎璁剧疆-鐧�.png",},
+        { name: "绯荤粺淇℃伅" ,img_black:"/images/vindicate/绯荤粺淇℃伅-榛�.png", img_white:"/images/vindicate/绯荤粺淇℃伅-鐧�.png",},
       ],
       activePage: 0,
       free: 0,
@@ -78,6 +78,7 @@
 <style lang="scss">
 .container {
   height: 100%;
+  width: 100%;
   display: flex;
   flex-direction: row;
   flex: 1;
@@ -85,39 +86,71 @@
   box-sizing: border-box;
   .container-left {
     height: 100%;
-      width: 240px;
-
+    width: 244px;
     overflow: auto;
     box-sizing: border-box;
     flex-shrink: 0;
-    padding: 10px;
-    border-right: 5px solid rgba(248, 248, 248, 1);
+    padding: 17px 10px 0 10px;
     box-sizing: border-box;
+    background: #fff;
     .left-card {
-      height: 50px;
+      position: relative;
+      width: 224px;
+      height: 56px;
       cursor: pointer;
-      border-radius: 10px;
-      margin-bottom: 10px;
-      display: flex;    background-color: #f8f8f8;
-
+      border-radius: 8px;
+      margin-bottom: 4px;
+      display: flex;    
+      background-color: #F2F2F7;
       align-items: center;
+      .icon_white {
+        position: absolute;
+        top: 8px;
+        left: 0;
+        visibility: hidden;
+      }
       .iconfont {
-        margin-left: 15px;
-        margin-right: 10px;
-        font-size: 18px;
+        width: 40px;
+        height: 40px;
+        margin: 0 20px 0 20px;
+        background: #333333;
+        border-radius: 8px;
       }
       .card-text {
-        font-size: 15px;
+        font-family: PingFang SC;
+        font-weight: 700;
+        font-size: 16px;
+        line-height: 22.4px;
       }
     }
     .left-card-active {
       color: #fff;
-      background-color: rgba(61, 104, 225, 1);
+      background-color: #4E94FF;
+      .icon_black {
+      visibility: hidden;
+      }
+      .icon_white{
+        visibility: visible;
+      }
+      .iconfont {
+        color: #333333;
+        background-color: #fff;
+      }
     }
    
     .left-card:hover {
-      background-color: rgba(61, 104, 225, 1);
+      background-color: #4E94FF;
       color: #fff;
+      .iconfont {
+        color: #333333;
+        background-color: #fff;
+      }
+      .icon_black {
+      visibility: hidden;
+      }
+      .icon_white{
+        visibility: visible;
+      }
     }
   }
 
diff --git a/src/pages/vindicate/views/sysInfo.vue b/src/pages/vindicate/views/sysInfo.vue
index 5c8a9fc..38ac399 100644
--- a/src/pages/vindicate/views/sysInfo.vue
+++ b/src/pages/vindicate/views/sysInfo.vue
@@ -25,7 +25,7 @@
                 v-if="serializedNumber != ''"
                 >瀵煎嚭浜у搧瀵嗛挜</el-button
               >
-              <div class="desc" style="color: rgba(71, 153, 247, 1)">
+              <div class="desc activation">
                 {{ serializedNumber == "" ? "鏈縺娲�" : "宸叉縺娲�" }}
               </div>
             </div>
@@ -36,8 +36,8 @@
           </div>
           <div class="bar">
             <div class="name">浜у搧瀵嗛挜锛�</div>
-            <div class="desc" style="font-size: 12px">
-              {{ authorization || "--" }}
+            <div class="desc" >
+              {{ authorization || "-" }}
             </div>
           </div>
           <div class="bar">
@@ -187,6 +187,7 @@
 <style lang="scss">
 .v-sys-info {
   width: 100%;
+  background-color: #F2F2F7;
   .el-dialog__header {
     padding: 15px 20px 10px;
     text-align: left;
@@ -255,7 +256,7 @@
     overflow: auto;
     box-sizing: border-box;
     position: relative;
-    padding: 20px 40px;
+    padding: 10px 15px 0 10px;
     .el-form-item.is-required:not(.is-no-asterisk)
       > .el-form-item__label:before,
     .el-form-item.is-required:not(.is-no-asterisk)
@@ -289,28 +290,30 @@
     }
     .auto {
       .title-bg {
-        background-color: #f8f8f8;
-        height: 150px;
-        border-radius: 12px;
-        margin-bottom: 20px;
+        background-color: #fff;
+        height: 110px;
+        border-radius: 8px;
+        margin-bottom: 10px;
         display: flex;
         flex-direction: column;
         justify-content: center;
         .title {
-          font-size: 34px;
-          font-weight: 600;
-          line-height: 50px;
+          font-size: 24px;
+          font-weight: 700;
+          line-height: 33.6px;
         }
         .desc {
-          font-size: 16px;
-          line-height: 30px;
+          margin-top:10px ;
+          font-size: 12px;
+          line-height: 16.8px;
+          font-weight: 700;
         }
       }
       .bar {
         display: flex;
         align-items: center;
-        padding: 12px 25px;
-        background-color: #f8f8f8;
+        padding: 12px 40px;
+        background-color: #fff;
         justify-content: space-between;
         border-radius: 12px;
         margin-bottom: 10px;
@@ -319,12 +322,14 @@
           align-items: center;
         }
         .name {
-          font-size: 15px;
+          font-size: 16px;
+          font-weight: 700;
           text-align: left;
           min-width: 180px;
         }
         .desc {
-          font-size: 15px;
+          font-size: 16px;
+          font-weight: 700;
           margin-left: 20px;
           max-width: 600px;
           /* overflow: hidden; */
@@ -334,6 +339,17 @@
           word-wrap: break-word;
           text-align: left;
         }
+        .activation{
+          width: 90px;
+          height: 28px;
+          background: rgba(78,148,255,0.1);
+          border: 1px solid #4E94FF;
+          border-radius:20px ;
+          text-align: center;
+          line-height: 28px;
+          color: #333;
+          font-size: 14px;
+        }
         .el-input {
           width: 100%;
           .el-input {
diff --git a/src/pages/vindicate/views/updateSettings.vue b/src/pages/vindicate/views/updateSettings.vue
index 10e68fb..7c73428 100644
--- a/src/pages/vindicate/views/updateSettings.vue
+++ b/src/pages/vindicate/views/updateSettings.vue
@@ -104,7 +104,6 @@
 
           <div class="cur-version">褰撳墠鐗堟湰锛歿{ curVersionName }}</div>
         </div>
-
         <div class="wifi" v-if="activePage == 1">
           <div class="content">
             <div class="title">绯荤粺鏇存柊璁剧疆</div>
@@ -329,43 +328,48 @@
   flex: 1;
   flex-basis: auto;
   box-sizing: border-box;
+  border-top: 4px solid #f8f8f8;
+  border-left: 4px solid #f8f8f8;
   .cluster-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 0 10px;
+    border-right: 4px solid #f8f8f8;
 
     .menu-item {
-      background-color: #f8f8f8;
-      height: 50px;
-      margin-bottom: 10px;
+      background-color: #F2F2F7;
+      height: 56px;
+      margin-bottom: 4px;
       border-radius: 8px;
-      line-height: 50px;
-      box-sizing: border-box;
-      font-size: 14px;
+      line-height: 56px;
+      box-sizing: border-box;   
       cursor: pointer;
-      padding: 0 20px;
+      padding: 0 15px;
       display: flex;
       justify-content: space-between;
       .con {
         .iconfont {
+          width: 26px;
+          height: 26px;
           margin-right: 10px;
+          color: #333;
         }
         .menu-text {
-          font-size: 15px;
+          font-size: 16px;
+           font-weight: 700;
         }
       }
     }
     .menu-item-active {
       color: #fff;
-      background-color: rgba(61, 104, 225, 1);
+      background-color: #4E94FF;
     }
     .menu-item:hover {
       color: #fff;
-      background-color: rgba(61, 104, 225, 1);
+      background-color: #4E94FF;
     }
   }
   .cluster-right {
@@ -374,7 +378,6 @@
     overflow: auto;
     box-sizing: border-box;
     position: relative;
-    padding: 20px 40px;
     .el-form-item.is-required:not(.is-no-asterisk)
       > .el-form-item__label:before,
     .el-form-item.is-required:not(.is-no-asterisk)
@@ -515,26 +518,35 @@
       }
     }
     .wifi {
-      .content {
-        margin-bottom: 20px;
-      }
+      padding: 10px 0 0 10px;
       .bar {
         display: flex;
         align-items: center;
         height: 50px;
-        padding: 0 25px;
         background-color: #f8f8f8;
         justify-content: space-between;
         border-radius: 12px;
         margin-bottom: 10px;
+        padding-left:20px ;
         .name {
-          font-size: 15px;
+          font-size: 14px;
+          font-weight: 700;
         }
       }
       .title {
         text-align: left;
-        padding: 10px;
+        padding: 17px 0 17px 25px;
         font-size: 16px;
+        color:#333;
+        font-weight: 700;
+      }
+      .el-switch{
+        width: 40px;
+        height: 14px;
+        margin-right: 17px;
+      }
+      .is-checked .el-switch__core{
+       background-color: #4E97FF  !important;
       }
     }
 

--
Gitblit v1.8.0