From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 20 七月 2022 15:05:58 +0800
Subject: [PATCH] 修复国标配置的bug
---
src/pages/vindicate/index/App.vue | 475 ++++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 437 insertions(+), 38 deletions(-)
diff --git a/src/pages/vindicate/index/App.vue b/src/pages/vindicate/index/App.vue
index 9f90130..df6d8ed 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 vindicate" v-if="!showWelcome">
<div class="container-left">
<div
class="left-card"
@@ -8,22 +8,94 @@
: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%" :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> -->
- <restartSettings v-if="activePage == 2" style="width: 100%"></restartSettings>
- <sysInfo v-if="activePage == 3" style="width: 100%"></sysInfo>
+ <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>
+ <sysInfo v-if="activePage == 4" style="width: 100%" ref="view_3"></sysInfo>
+ </div>
+
+ <div
+ class="welcome-page"
+ v-else
+ ref="curPage"
+ @click="showRecomand = false"
+ @mouseup="mouseDownIndex = ''"
+ >
+ <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"
+ @mousedown="mouseDownIndex = i"
+ :class="mouseDownIndex === i ? 'nav-child-active' : ''"
+ >
+ <div class="child-info">
+ <!-- <span class="icon iconfont welcome-icon">{{ item.icon }}</span> -->
+ <img :src="item.img_welcome" alt="" />
+ <span class="welcome-title">{{ item.name }}</span>
+ </div>
+ </div>
+ </div>
</div>
</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";
@@ -36,21 +108,66 @@
systemClean,
updateSettings,
BackUp,
- restartSettings,sysInfo
+ 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",
+ 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] },
+ { 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: "",
+ showRecomand: false,
+ mouseDownIndex: "",
};
+ },
+ created() {
+ let color = localStorage.getItem("--colorCard");
+ if (color) {
+ document.documentElement.style.setProperty("--colorCard", `${color}`);
+ }
},
mounted() {
const menu = getUrlKey("menu");
@@ -60,67 +177,349 @@
// this.$refs.netSettings.openRight(2);
// });
}
- this.getLeftPer()
+ 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) {
+ 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;
+ });
+ }
+ },
+ },
+ watch: {
+ showWelcome(newVal) {
+ if (newVal) {
+ // 闅愯棌杩斿洖鎸夋寜閽�
+ window.parent.postMessage(
+ {
+ msg: "hiddenBack",
+ },
+ "*"
+ );
+ } else {
+ //鏄剧ず杩斿洖鎸夐挳
+ window.parent.postMessage(
+ {
+ msg: "showBack",
+ },
+ "*"
+ );
+ }
},
},
};
</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;
+ opacity: 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;
+
+ &::-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 19+ */
+ 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;
+ 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;
+ background-color: rgba(255, 255, 255, 0.5);
+ .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 {
+ max-width: 960px;
+ margin: 0 auto;
+ .nav-child {
+ box-sizing: border-box;
+ background-color: rgba(251, 251, 255, 0.1);
+ backdrop-filter: blur(4px);
+ float: left;
+ width: 288px;
+ height: 190px;
+ margin: 0 10px;
+ margin-bottom: 20px;
+ border-radius: 15px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ border: 2px solid #f2f2f7;
+
+ &:hover {
+ background: #f2f2f7;
+ }
+
+ &-active {
+ border: 2px solid #4e94ff;
+ }
+
+ // 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: 61px;
+ 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%;
display: flex;
flex-direction: row;
flex: 1;
flex-basis: auto;
box-sizing: border-box;
+ position: relative;
+
+ .back {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
.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: 13px 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: #fff;
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) !important;
+ .icon_black {
+ visibility: hidden;
+ }
+ .icon_white {
+ visibility: visible;
+ }
+ .iconfont {
+ color: #333333;
+ background-color: #fff;
+ }
}
-
+
.left-card:hover {
- background-color: rgba(61, 104, 225, 1);
- color: #fff;
+ background-color: #f2f2f7;
}
}
+}
+.vindicate {
+ border-top: 2px solid #e1e0e6;
}
</style>
--
Gitblit v1.8.0