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