From 46b274e6b5d0bd7f2afe46a8adeac4faaa446dc9 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期三, 29 九月 2021 17:59:18 +0800
Subject: [PATCH] 系统设置/维护v0
---
src/pages/vindicate/index/App.vue | 269 ++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 250 insertions(+), 19 deletions(-)
diff --git a/src/pages/vindicate/index/App.vue b/src/pages/vindicate/index/App.vue
index eb915de..90e6935 100644
--- a/src/pages/vindicate/index/App.vue
+++ b/src/pages/vindicate/index/App.vue
@@ -1,5 +1,5 @@
<template>
- <div class="container">
+ <div class="container" v-if="!showWelcome">
<div class="container-left">
<div
class="left-card"
@@ -13,11 +13,61 @@
<span class="card-text">{{ item.name }}</span>
</div>
</div>
- <systemClean v-if="activePage == 1" style="width: 100%" :free="free" :full="full" @refreshPercent="getLeftPer"></systemClean>
- <updateSettings v-if="activePage == 0" style="width: 100%"></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%"></restartSettings>
- <sysInfo v-if="activePage == 3" style="width: 100%"></sysInfo>
+ <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">
+ <div
+ class="search-box"
+ :class="showRecomand ? 'border-change' : ''"
+ @click.stop
+ >
+ <!-- @blur="showRecomand = false" -->
+ <el-input
+ class="search-input"
+ placeholder="鏌ユ壘璁剧疆"
+ size="mini"
+ @focus="showRecomand = true"
+ clearable
+ @input="filterRecomand"
+ :suffix-icon="showRecomand && searchText.length ? '' : 'el-icon-search'"
+ v-model="searchText"
+ >
+ </el-input>
+
+ <div class="search-res" v-if="showRecomand">
+ <div
+ class="res-bar"
+ v-for="(item, index) in searchArrForShow"
+ :key="index"
+ @click="pickQuick(item.addr)"
+ >
+ {{ item.name }}
+ </div>
+ <div class="no-res-bar" v-if="searchArrForShow.length == 0">
+ 娌℃湁鎵惧埌涓� {{ searchText }} 鐩稿叧鐨勭粨鏋�
+ </div>
+ </div>
+ <div class="dummy-end" v-if="showRecomand" style="height: 14px"></div>
+ </div>
+ <div class="nav-items">
+ <div
+ class="nav-child"
+ @click="openWelcome(i)"
+ v-for="(item, i) in menuArr"
+ :key="i"
+ >
+ <div class="child-info">
+ <!-- <span class="icon iconfont welcome-icon">{{ item.icon }}</span> -->
+ <img :src="item.img_black" alt="" />
+ <span class="welcome-title">{{ item.name }}</span>
+ </div>
+ </div>
+ </div>
</div>
</template>
@@ -47,9 +97,19 @@
{ name: "閲嶅惎璁剧疆" ,img_black:"/images/vindicate/閲嶅惎璁剧疆-榛�.png", img_white:"/images/vindicate/閲嶅惎璁剧疆-鐧�.png",},
{ name: "绯荤粺淇℃伅" ,img_black:"/images/vindicate/绯荤粺淇℃伅-榛�.png", img_white:"/images/vindicate/绯荤粺淇℃伅-鐧�.png",},
],
+ searchArr: [
+ { name: "绯荤粺璁剧疆", addr: [0] },
+ { name: "绯荤粺鏇存柊", addr: [0, 0] },
+ { name: "鏇存柊璁剧疆", addr: [0, 1] },
+ { name: "绯荤粺娓呯悊", addr: [1] },
+ { name: "閲嶅惎璁剧疆", addr: [2] },
+ { name: "绯荤粺淇℃伅", addr: [3] },
+ ],
activePage: 0,
free: 0,
full: 0,
+ showWelcome:true,
+ searchText:'',
};
},
created() {
@@ -78,10 +138,190 @@
this.full = res.data.all
})
},
+ pickQuick(addr) {
+ if (addr.length == 1) {
+ this.openWelcome(addr[0]);
+ } else {
+ this.openWelcome(addr[0]);
+ this.$nextTick(() => {
+ if (addr[0] == 1) {
+ // addr[1] == 0
+ // ? this.changeSwitch("isNtp")
+ // : this.changeSwitch("isManual");
+ return;
+ }
+ this.$refs[`view_${addr[0]}`].openRight(addr[1]);
+ });
+ }
+ },
+ openWelcome(i) {
+ this.showWelcome = false;
+ this.openMenu(1,i);
+ },
},
+ computed:{
+ searchArrForShow() {
+ if (this.searchText == "") {
+ return this.searchArr;
+ } else {
+ return this.searchArr.filter((item) => {
+ return item.name.indexOf(this.searchText.toUpperCase()) > -1;
+ });
+ }
+ },
+ }
};
</script>
<style lang="scss">
+.welcome-page {
+ width: 100%;
+ height: 100%;
+ display: -ms-flexbox;
+ padding: 145px 32px 50px 32px;
+ box-sizing: border-box;
+ background-color: rgba(255, 255, 255, 0.9);
+ backdrop-filter: blur(4px);
+ .border-change {
+ border-radius: 20px !important;
+ }
+ .search-box {
+ width: 332px;
+ z-index: 999;
+ // margin: 55px auto;
+ position: fixed;
+ left: calc(50% - 166px);
+ top: 50px;
+ background: rgba(255, 255, 255, 0.8);
+
+ border: 2px solid #4e94ff;
+ box-sizing: border-box;
+ backdrop-filter: blur(4px);
+ border-radius: 40px;
+ .search-input {
+ font-size: 14px;
+ .el-input--mini .el-input__inner {
+ height: 36px;
+ line-height: 36px;
+ }
+ .el-input--suffix .el-input__inner {
+ padding-right: 40px;
+ }
+ .el-input__inner {
+ background-color: #fff;
+ background-image: none;
+ border-radius: 40px;
+ border: none;
+ box-sizing: border-box;
+ color: #606266;
+ display: inline-block;
+ font-size: 14px;
+ height: 36px;
+ line-height: 36px;
+ outline: 0;
+ padding: 0 20px;
+ -webkit-transition: border-color 0.2s
+ cubic-bezier(0.645, 0.045, 0.355, 1);
+ transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+ width: 100%;
+ font-weight: bold;
+ }
+ .el-input__suffix {
+ display: flex;
+ align-items: center;
+ padding-right: 10px;
+ .el-input__suffix-inner {
+ border-color: none;
+ .el-icon-circle-close:before {
+ content: "\e79d" !important;
+ font-size: 17px;
+ }
+ .el-icon-search {
+ color: #2f2d3d;
+ font-weight: bold;
+ font-size: 17px;
+ }
+ }
+ }
+ }
+ .search-res {
+ max-height: 240px;
+ overflow: auto;
+ .res-bar {
+ height: 40px;
+ line-height: 40px;
+ text-align: left;
+ box-sizing: border-box;
+ padding: 0 20px;
+ color: #333333;
+ font-size: 14px;
+ cursor: pointer;
+ }
+ .no-res-bar {
+ height: 40px;
+ line-height: 40px;
+ text-align: left;
+ box-sizing: border-box;
+ padding: 0 20px;
+ color: #333333;
+ font-size: 14px;
+ }
+ .res-bar:hover {
+ background: #f5f5f6 10%;
+ font-weight: bold;
+ color: #4e94ff;
+ }
+ // .res-bar:last-child {
+ // border-radius: 0 0 20px 20px;
+ // }
+ }
+ }
+ .nav-items {
+ .nav-child {
+ box-sizing: border-box;
+ background-color: rgba(251, 251, 255, 0.1);
+ backdrop-filter: blur(4px);
+ float: left;
+ width: 46%;
+ height: 190px;
+ margin: 0 15px;
+ margin-bottom: 30px;
+ border-radius: 15px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+
+ // box-shadow: 2px 2px 4px rgb(226, 226, 226);
+ .child-info {
+ display: flex;
+ flex-direction: column;
+ // justify-content: space-around;
+ height: 100%;
+ .welcome-icon {
+ font-size: 72px;
+ }
+ img {
+ width: 64px;
+ margin: 0 auto;
+ margin-top: 65px;
+ height: 50px;
+ }
+ .welcome-title {
+ font-size: 16px;
+ font-weight: bold;
+ margin-top: 24px;
+ color: #333333;
+ }
+ }
+ }
+ .nav-child:hover {
+ // box-shadow: 4px 4px 12px rgb(218, 218, 218);
+ // transform: translate3d(0, -1px, 0);
+ // transition: all 0.3s;
+ }
+ }
+}
+
.container {
height: 100%;
width: 100%;
@@ -99,6 +339,7 @@
padding: 17px 10px 0 10px;
box-sizing: border-box;
background: #fff;
+ border-top:2px solid #E1E0E6 ;
.left-card {
position: relative;
width: 224px;
@@ -107,7 +348,7 @@
border-radius: 8px;
margin-bottom: 4px;
display: flex;
- background-color: #F2F2F7;
+ background-color: #fff;
align-items: center;
.icon_white {
position: absolute;
@@ -131,7 +372,7 @@
}
.left-card-active {
color: #fff;
- background-color: var(--colorCard);
+ background-color: var(--colorCard) !important;
.icon_black {
visibility: hidden;
}
@@ -145,18 +386,8 @@
}
.left-card:hover {
- background-color: var(--colorCard);
- color: #fff;
- .iconfont {
- color: #333333;
- background-color: #fff;
- }
- .icon_black {
- visibility: hidden;
- }
- .icon_white{
- visibility: visible;
- }
+ background-color: #F2F2F7;
+
}
}
--
Gitblit v1.8.0