From c0c034b3ef0fdf0fd9c802d5984dbd717db6817a Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 06 九月 2023 17:54:55 +0800
Subject: [PATCH] 定制桌面.
---
src/pages/vindicate/index/App.vue | 274 +++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 186 insertions(+), 88 deletions(-)
diff --git a/src/pages/vindicate/index/App.vue b/src/pages/vindicate/index/App.vue
index 6503f60..20e3725 100644
--- a/src/pages/vindicate/index/App.vue
+++ b/src/pages/vindicate/index/App.vue
@@ -1,5 +1,5 @@
<template>
- <div class="container" v-if="!showWelcome">
+ <div class="container vindicate" v-if="!showWelcome">
<div class="container-left">
<div
class="left-card"
@@ -13,19 +13,22 @@
<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>
+ <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> -->
+ <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 == 3" style="width: 100%" ref="view_3"></sysInfo>
+ <sysInfo v-if="activePage == 4" 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
- >
+ <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"
@@ -40,17 +43,10 @@
</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)"
- >
+ <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 class="no-res-bar" v-if="searchArrForShow.length == 0">娌℃湁鎵惧埌涓� {{ searchText }} 鐩稿叧鐨勭粨鏋�</div>
</div>
<div class="dummy-end" v-if="showRecomand" style="height: 14px"></div>
</div>
@@ -60,6 +56,8 @@
@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> -->
@@ -72,67 +70,103 @@
</template>
<script>
-import {
- 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 restartSettings from "../views/restartSettings";
-import sysInfo from "../views/sysInfo";
+import { 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 restartSettings from "../views/restartSettings"
+import sysInfo from "../views/sysInfo"
export default {
name: "settings",
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"
+ },
+ {
+ 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: [0] },
+ // { name: "绯荤粺鏇存柊", addr: [0, 0] },
+ // { name: "鏇存柊璁剧疆", addr: [0, 1] },
+ // { name: "绯荤粺娓呯悊", addr: [1] },
{ name: "閲嶅惎璁剧疆", addr: [2] },
- { name: "绯荤粺淇℃伅", addr: [3] },
+ { name: "绯荤粺淇℃伅", addr: [3] }
],
activePage: 0,
free: 0,
full: 0,
- showWelcome:true,
- searchText:'',
- };
+ 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");
+ const menu = getUrlKey("menu")
if (menu) {
- this.activePage = this.menuArr.findIndex((x) => x.name == menu);
+ this.activePage = this.menuArr.findIndex((x) => x.name == menu)
// this.$nextTick(() => {
// 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;
+ this.activePage = i
},
- getLeftPer(){
+ getLeftPer() {
freedisk().then((res) => {
this.free = res.data.free
this.full = res.data.all
@@ -140,37 +174,58 @@
},
pickQuick(addr) {
if (addr.length == 1) {
- this.openWelcome(addr[0]);
+ this.openWelcome(addr[0])
} else {
- this.openWelcome(addr[0]);
+ this.openWelcome(addr[0])
this.$nextTick(() => {
if (addr[0] == 1) {
// addr[1] == 0
// ? this.changeSwitch("isNtp")
// : this.changeSwitch("isManual");
- return;
+ return
}
- this.$refs[`view_${addr[0]}`].openRight(addr[1]);
- });
+ this.$refs[`view_${addr[0]}`].openRight(addr[1])
+ })
}
},
openWelcome(i) {
- this.showWelcome = false;
- this.openMenu(1,i);
- },
+ this.showWelcome = false
+ this.openMenu(1, i)
+ }
},
- computed:{
- searchArrForShow() {
+ computed: {
+ searchArrForShow() {
if (this.searchText == "") {
- return this.searchArr;
+ return this.searchArr
} else {
return this.searchArr.filter((item) => {
- return item.name.indexOf(this.searchText.toUpperCase()) > -1;
- });
+ 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 {
@@ -191,7 +246,7 @@
position: fixed;
left: calc(50% - 166px);
top: 50px;
- background: rgba(255, 255, 255, 0.8);
+ opacity: 0.8;
border: 2px solid #4e94ff;
box-sizing: border-box;
@@ -219,11 +274,35 @@
line-height: 36px;
outline: 0;
padding: 0 20px;
- -webkit-transition: border-color 0.2s
- cubic-bezier(0.645, 0.045, 0.355, 1);
+ -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;
@@ -246,6 +325,7 @@
.search-res {
max-height: 240px;
overflow: auto;
+ background-color: rgba(255, 255, 255, 0.5);
.res-bar {
height: 40px;
line-height: 40px;
@@ -276,20 +356,31 @@
}
}
.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: 46%;
+ width: 288px;
height: 190px;
- margin: 0 15px;
- margin-bottom: 30px;
+ 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 {
@@ -303,7 +394,7 @@
img {
width: 64px;
margin: 0 auto;
- margin-top: 65px;
+ margin-top: 61px;
height: 50px;
}
.welcome-title {
@@ -314,11 +405,11 @@
}
}
}
- .nav-child:hover {
- // box-shadow: 4px 4px 12px rgb(218, 218, 218);
- // transform: translate3d(0, -1px, 0);
- // transition: all 0.3s;
- }
+ // .nav-child:hover {
+ // box-shadow: 4px 4px 12px rgb(218, 218, 218);
+ // transform: translate3d(0, -1px, 0);
+ // transition: all 0.3s;
+ // }
}
}
@@ -330,16 +421,23 @@
flex: 1;
flex-basis: auto;
box-sizing: border-box;
+ position: relative;
+
+ .back {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
.container-left {
height: 100%;
width: 244px;
overflow: auto;
box-sizing: border-box;
flex-shrink: 0;
- padding: 17px 10px 0 10px;
+ padding: 13px 10px 0 10px;
box-sizing: border-box;
background: #fff;
- border-top:2px solid #E1E0E6 ;
.left-card {
position: relative;
width: 224px;
@@ -347,7 +445,7 @@
cursor: pointer;
border-radius: 8px;
margin-bottom: 4px;
- display: flex;
+ display: flex;
background-color: #fff;
align-items: center;
.icon_white {
@@ -374,9 +472,9 @@
color: #fff;
background-color: var(--colorCard) !important;
.icon_black {
- visibility: hidden;
+ visibility: hidden;
}
- .icon_white{
+ .icon_white {
visibility: visible;
}
.iconfont {
@@ -384,14 +482,14 @@
background-color: #fff;
}
}
-
+
.left-card:hover {
- background-color: #F2F2F7;
-
+ background-color: #f2f2f7;
}
}
+}
+.vindicate {
+ border-top: 2px solid #e1e0e6;
}
</style>
-
-
--
Gitblit v1.8.0