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