From ce91379aaa2a8f431e171abc40fe818c4c08c914 Mon Sep 17 00:00:00 2001 From: ZZJ <zzjdsg2300@163.com> Date: 星期三, 22 九月 2021 20:51:15 +0800 Subject: [PATCH] 系统更新 v0 --- src/pages/vindicate/index/App.vue | 79 ++++++++++++++++++++++++++++----------- 1 files changed, 56 insertions(+), 23 deletions(-) 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; + } } } -- Gitblit v1.8.0