From 84ad5590bafc58e17ebcf7ebdce2cd70c0c22ea9 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期五, 24 九月 2021 18:54:56 +0800
Subject: [PATCH] 日期时间新版
---
src/pages/vindicate/index/App.vue | 110 ++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 80 insertions(+), 30 deletions(-)
diff --git a/src/pages/vindicate/index/App.vue b/src/pages/vindicate/index/App.vue
index d6af057..eb915de 100644
--- a/src/pages/vindicate/index/App.vue
+++ b/src/pages/vindicate/index/App.vue
@@ -8,48 +8,64 @@
: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>
- <systemClean v-if="activePage == 1" style="width: 100%" :percent="storagePercent"></systemClean>
+ <systemClean v-if="activePage == 1" style="width: 100%" :free="free" :full="full" @refreshPercent="getLeftPer"></systemClean>
<updateSettings v-if="activePage == 0" style="width: 100%"></updateSettings>
- <back-up v-if="activePage == 3" style="width: 100%"></back-up>
+ <!-- <back-up v-if="activePage == 3" style="width: 100%"></back-up> -->
<restartSettings v-if="activePage == 2" style="width: 100%"></restartSettings>
+ <sysInfo v-if="activePage == 3" style="width: 100%"></sysInfo>
</div>
</template>
<script>
import {
- getClockInfo,
- saveClockInfo,
- testNTPserver,freedisk
+ freedisk
} from "@/api/system";
+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 {
name: "settings",
components: {
systemClean,
updateSettings,
- BackUp,
- restartSettings,
+ // BackUp,
+ restartSettings,sysInfo
},
data() {
return {
menuArr: [
- { name: "鏇存柊璁剧疆" ,icon:"\ue60f" },
- // { name: "澶囦唤杩樺師",icon:"" },
- { name: "绯荤粺娓呯悊" ,icon:"\ue6e0" },
- { name: "閲嶅惎璁剧疆" ,icon:"" },
+ { 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,
- storagePercent: 0,
+ free: 0,
+ full: 0,
};
},
+ created() {
+ let color = localStorage.getItem('--colorCard')
+ if(color) {
+ document.documentElement.style.setProperty('--colorCard',`${color}`)
+ }
+ },
mounted() {
+ const menu = getUrlKey("menu");
+ if (menu) {
+ this.activePage = this.menuArr.findIndex((x) => x.name == menu);
+ // this.$nextTick(() => {
+ // this.$refs.netSettings.openRight(2);
+ // });
+ }
this.getLeftPer()
},
methods: {
@@ -58,7 +74,8 @@
},
getLeftPer(){
freedisk().then((res) => {
- this.storagePercent = Math.round(res.data.free/ res.data.all *100)
+ this.free = res.data.free
+ this.full = res.data.all
})
},
},
@@ -67,6 +84,7 @@
<style lang="scss">
.container {
height: 100%;
+ width: 100%;
display: flex;
flex-direction: row;
flex: 1;
@@ -74,39 +92,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: var(--colorCard);
+ .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: var(--colorCard);
color: #fff;
+ .iconfont {
+ color: #333333;
+ background-color: #fff;
+ }
+ .icon_black {
+ visibility: hidden;
+ }
+ .icon_white{
+ visibility: visible;
+ }
}
}
--
Gitblit v1.8.0