<template>
|
<div class="container vindicate" v-if="!showWelcome">
|
<div class="container-left">
|
<div
|
class="left-card"
|
v-for="(item, i) in menuArr"
|
:key="i"
|
:class="activePage == i ? 'left-card-active' : ''"
|
@click="openMenu(item, i)"
|
>
|
<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"
|
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 { 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,
|
},
|
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",
|
},
|
],
|
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");
|
if (menu) {
|
this.activePage = this.menuArr.findIndex((x) => x.name == menu);
|
// this.$nextTick(() => {
|
// 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;
|
}
|
});
|
},
|
methods: {
|
openMenu(item, i) {
|
this.activePage = i;
|
},
|
getLeftPer() {
|
freedisk().then((res) => {
|
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: 244px;
|
overflow: auto;
|
box-sizing: border-box;
|
flex-shrink: 0;
|
padding: 13px 10px 0 10px;
|
box-sizing: border-box;
|
background: #fff;
|
.left-card {
|
position: relative;
|
width: 224px;
|
height: 56px;
|
cursor: pointer;
|
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 {
|
width: 40px;
|
height: 40px;
|
margin: 0 20px 0 20px;
|
background: #333333;
|
border-radius: 8px;
|
}
|
.card-text {
|
font-family: PingFang SC;
|
font-weight: 700;
|
font-size: 16px;
|
line-height: 22.4px;
|
}
|
}
|
.left-card-active {
|
color: #fff;
|
background-color: var(--colorCard) !important;
|
.icon_black {
|
visibility: hidden;
|
}
|
.icon_white {
|
visibility: visible;
|
}
|
.iconfont {
|
color: #333333;
|
background-color: #fff;
|
}
|
}
|
|
.left-card:hover {
|
background-color: #f2f2f7;
|
}
|
}
|
}
|
|
.vindicate {
|
border-top: 2px solid #e1e0e6;
|
}
|
</style>
|
