From 32065e3edfba329fd68d082bcca6f734152d86db Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期一, 13 十二月 2021 15:54:06 +0800
Subject: [PATCH] 车辆库左端列表
---
src/pages/vindicate/index/App.vue | 188 ++++++++++++++++++++++++++++------------------
1 files changed, 115 insertions(+), 73 deletions(-)
diff --git a/src/pages/vindicate/index/App.vue b/src/pages/vindicate/index/App.vue
index aedbc6a..ee839c1 100644
--- a/src/pages/vindicate/index/App.vue
+++ b/src/pages/vindicate/index/App.vue
@@ -1,6 +1,5 @@
<template>
<div class="container vindicate" v-if="!showWelcome">
-
<div class="container-left">
<div
class="left-card"
@@ -14,14 +13,35 @@
<span class="card-text">{{ item.name }}</span>
</div>
</div>
- <systemClean v-if="activePage == 1" style="width: 100%" :free="free" :full="full" @refreshPercent="getLeftPer" ref="view_1"></systemClean>
- <updateSettings v-if="activePage == 0" style="width: 100%" ref="view_0"></updateSettings>
+ <systemClean
+ v-if="activePage == 1"
+ style="width: 100%"
+ :free="free"
+ :full="full"
+ @refreshPercent="getLeftPer"
+ ref="view_1"
+ ></systemClean>
+ <updateSettings
+ v-if="activePage == 0"
+ style="width: 100%"
+ ref="view_0"
+ ></updateSettings>
<!-- <back-up v-if="activePage == 3" style="width: 100%"></back-up> -->
- <restartSettings v-if="activePage == 2" style="width: 100%" ref="view_2"></restartSettings>
+ <restartSettings
+ v-if="activePage == 2"
+ style="width: 100%"
+ ref="view_2"
+ ></restartSettings>
<sysInfo v-if="activePage == 3" style="width: 100%" ref="view_3"></sysInfo>
</div>
- <div class="welcome-page" v-else ref="curPage" @click="showRecomand = false" @mouseup="mouseDownIndex = ''">
+ <div
+ class="welcome-page"
+ v-else
+ ref="curPage"
+ @click="showRecomand = false"
+ @mouseup="mouseDownIndex = ''"
+ >
<div
class="search-box"
:class="showRecomand ? 'border-change' : ''"
@@ -62,7 +82,7 @@
v-for="(item, i) in menuArr"
:key="i"
@mousedown="mouseDownIndex = i"
- :class="mouseDownIndex === i? 'nav-child-active':''"
+ :class="mouseDownIndex === i ? 'nav-child-active' : ''"
>
<div class="child-info">
<!-- <span class="icon iconfont welcome-icon">{{ item.icon }}</span> -->
@@ -75,9 +95,7 @@
</template>
<script>
-import {
- freedisk
-} from "@/api/system";
+import { freedisk } from "@/api/system";
import { getUrlKey } from "@/api/utils";
import systemClean from "../views/systemClean";
import updateSettings from "../views/updateSettings";
@@ -89,16 +107,37 @@
components: {
systemClean,
updateSettings,
- // BackUp,
- restartSettings,sysInfo
+ // BackUp,
+ restartSettings,
+ sysInfo,
},
data() {
return {
menuArr: [
- { name: "鏇存柊璁剧疆" ,img_black:"/images/vindicate/鏇存柊璁剧疆-榛�.png", img_white:"/images/vindicate/鏇存柊璁剧疆-鐧�.png",img_welcome:"/images/vindicate/鏇存柊璁剧疆.png"},
- { name: "绯荤粺娓呯悊" ,img_black:"/images/vindicate/绯荤粺娓呯悊-榛�.png", img_white:"/images/vindicate/绯荤粺娓呯悊-鐧�.png",img_welcome:"/images/vindicate/绯荤粺娓呯悊.png"},
- { name: "閲嶅惎璁剧疆" ,img_black:"/images/vindicate/閲嶅惎璁剧疆-榛�.png", img_white:"/images/vindicate/閲嶅惎璁剧疆-鐧�.png",img_welcome:"/images/vindicate/閲嶅惎璁剧疆.png"},
- { name: "绯荤粺淇℃伅" ,img_black:"/images/vindicate/绯荤粺淇℃伅-榛�.png", img_white:"/images/vindicate/绯荤粺淇℃伅-鐧�.png",img_welcome:"/images/vindicate/绯荤粺淇℃伅.png"},
+ {
+ name: "鏇存柊璁剧疆",
+ img_black: "/images/vindicate/鏇存柊璁剧疆-榛�.png",
+ img_white: "/images/vindicate/鏇存柊璁剧疆-鐧�.png",
+ img_welcome: "/images/vindicate/鏇存柊璁剧疆.png",
+ },
+ {
+ name: "绯荤粺娓呯悊",
+ img_black: "/images/vindicate/绯荤粺娓呯悊-榛�.png",
+ img_white: "/images/vindicate/绯荤粺娓呯悊-鐧�.png",
+ img_welcome: "/images/vindicate/绯荤粺娓呯悊.png",
+ },
+ {
+ name: "閲嶅惎璁剧疆",
+ img_black: "/images/vindicate/閲嶅惎璁剧疆-榛�.png",
+ img_white: "/images/vindicate/閲嶅惎璁剧疆-鐧�.png",
+ img_welcome: "/images/vindicate/閲嶅惎璁剧疆.png",
+ },
+ {
+ name: "绯荤粺淇℃伅",
+ img_black: "/images/vindicate/绯荤粺淇℃伅-榛�.png",
+ img_white: "/images/vindicate/绯荤粺淇℃伅-鐧�.png",
+ img_welcome: "/images/vindicate/绯荤粺淇℃伅.png",
+ },
],
searchArr: [
{ name: "绯荤粺璁剧疆", addr: [0] },
@@ -111,17 +150,17 @@
activePage: 0,
free: 0,
full: 0,
- showWelcome:true,
- searchText:'',
- showRecomand:false,
- mouseDownIndex:''
+ showWelcome: true,
+ searchText: "",
+ showRecomand: false,
+ mouseDownIndex: "",
};
},
created() {
- let color = localStorage.getItem('--colorCard')
- if(color) {
- document.documentElement.style.setProperty('--colorCard',`${color}`)
- }
+ let color = localStorage.getItem("--colorCard");
+ if (color) {
+ document.documentElement.style.setProperty("--colorCard", `${color}`);
+ }
},
mounted() {
const menu = getUrlKey("menu");
@@ -131,25 +170,28 @@
// this.$refs.netSettings.openRight(2);
// });
}
- this.getLeftPer()
- window.addEventListener("message",(e)=>{
- if(e.data.msg === 'changeColor') {
- document.documentElement.style.setProperty('--colorCard',`${e.data.color}`)
- }
- if (e.data.msg === '杩斿洖绯荤粺缁存姢') {
- this.showWelcome = true
- }
- })
+ this.getLeftPer();
+ window.addEventListener("message", (e) => {
+ if (e.data.msg === "changeColor") {
+ document.documentElement.style.setProperty(
+ "--colorCard",
+ `${e.data.color}`
+ );
+ }
+ if (e.data.msg === "杩斿洖绯荤粺缁存姢") {
+ this.showWelcome = true;
+ }
+ });
},
methods: {
openMenu(item, i) {
this.activePage = i;
},
- getLeftPer(){
+ getLeftPer() {
freedisk().then((res) => {
- this.free = res.data.free
- this.full = res.data.all
- })
+ this.free = res.data.free;
+ this.full = res.data.all;
+ });
},
pickQuick(addr) {
if (addr.length == 1) {
@@ -169,11 +211,11 @@
},
openWelcome(i) {
this.showWelcome = false;
- this.openMenu(1,i);
+ this.openMenu(1, i);
},
},
- computed:{
- searchArrForShow() {
+ computed: {
+ searchArrForShow() {
if (this.searchText == "") {
return this.searchArr;
} else {
@@ -182,7 +224,7 @@
});
}
},
- }
+ },
};
</script>
<style lang="scss">
@@ -238,28 +280,30 @@
width: 100%;
font-weight: bold;
- &::-webkit-input-placeholder { /* WebKit browsers */
- color: #828282;
- font-weight: normal;
- font-size: 14px;
+ &::-webkit-input-placeholder {
+ /* WebKit browsers */
+ color: #828282;
+ font-weight: normal;
+ font-size: 14px;
}
- &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
- color: #828282;
- font-weight: normal;
- font-size: 14px;
+ &:-moz-placeholder {
+ /* Mozilla Firefox 4 to 18 */
+ color: #828282;
+ font-weight: normal;
+ font-size: 14px;
}
- &::-moz-placeholder { /* Mozilla Firefox 19+ */
- color: #828282;
- font-weight: normal;
- font-size: 14px;
+ &::-moz-placeholder {
+ /* Mozilla Firefox 19+ */
+ color: #828282;
+ font-weight: normal;
+ font-size: 14px;
}
- &:-ms-input-placeholder { /* Internet Explorer 10+ */
- color: #828282;
- font-weight: normal;
- font-size: 14px;
-
- }
-
+ &:-ms-input-placeholder {
+ /* Internet Explorer 10+ */
+ color: #828282;
+ font-weight: normal;
+ font-size: 14px;
+ }
}
.el-input__suffix {
display: flex;
@@ -329,14 +373,14 @@
justify-content: center;
align-items: center;
cursor: pointer;
- border: 2px solid #F2F2F7;
+ border: 2px solid #f2f2f7;
&:hover {
- background: #F2F2F7;
+ background: #f2f2f7;
}
&-active {
- border: 2px solid #4E94FF;
+ border: 2px solid #4e94ff;
}
// box-shadow: 2px 2px 4px rgb(226, 226, 226);
@@ -363,9 +407,9 @@
}
}
// .nav-child:hover {
- // box-shadow: 4px 4px 12px rgb(218, 218, 218);
- // transform: translate3d(0, -1px, 0);
- // transition: all 0.3s;
+ // box-shadow: 4px 4px 12px rgb(218, 218, 218);
+ // transform: translate3d(0, -1px, 0);
+ // transition: all 0.3s;
// }
}
}
@@ -402,7 +446,7 @@
cursor: pointer;
border-radius: 8px;
margin-bottom: 4px;
- display: flex;
+ display: flex;
background-color: #fff;
align-items: center;
.icon_white {
@@ -429,9 +473,9 @@
color: #fff;
background-color: var(--colorCard) !important;
.icon_black {
- visibility: hidden;
+ visibility: hidden;
}
- .icon_white{
+ .icon_white {
visibility: visible;
}
.iconfont {
@@ -439,17 +483,15 @@
background-color: #fff;
}
}
-
+
.left-card:hover {
- background-color: #F2F2F7;
-
+ background-color: #f2f2f7;
}
}
-
}
.vindicate {
- border-top:2px solid #E1E0E6 ;
+ border-top: 2px solid #e1e0e6;
}
</style>
--
Gitblit v1.8.0