From 2cb264ec2b7c7dd9798d1821927104fad35bd063 Mon Sep 17 00:00:00 2001
From: ZZJ <10913410+zzj2100@user.noreply.gitee.com>
Date: 星期二, 28 六月 2022 14:47:43 +0800
Subject: [PATCH] 系统设置自适应
---
src/pages/desktop/index/components/Tools.vue | 679 +++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 620 insertions(+), 59 deletions(-)
diff --git a/src/pages/desktop/index/components/Tools.vue b/src/pages/desktop/index/components/Tools.vue
index fa642fd..957f916 100644
--- a/src/pages/desktop/index/components/Tools.vue
+++ b/src/pages/desktop/index/components/Tools.vue
@@ -2,124 +2,471 @@
<div class="tools">
<div class="tools-left">
<div
- :class="['tools-icon','tools-show-desktop', {clicked:this.$store.state.desktop.preferenceVisiable}]"
- @click="togglePreference()"
+ :class="['tools-icon', 'tools-show-desktop', { clicked: this.$store.state.desktop.preferenceVisiable }]"
+ @click.stop="togglePreference"
>
<img class="system" :src="`${publicPath}images/desktop/header-icon/system.png`" />
- <!-- <span class="fa fa-apple"></span> -->
</div>
- <div class="tools-icon">
- <!-- <span class="fa fa-safari"></span> -->
- <img class="smart-ai" :src="`${publicPath}images/desktop/header-icon/SmartAI.png`" alt />
+
+ <div class="fast-path" :class="showFastPath ? 'fast-path-show' : ''" @click.stop>
+ <div class="top">
+ <img v-if="userInfo" :src="`data:image/png;base64,${userInfo.headpic}`" alt="" />
+
+ <span class="username">{{ userInfo && userInfo.username }}</span>
+ </div>
+ <div class="link-list">
+ <div class="list-item" v-for="(x, i) in linkList" :key="i" @click="clickFastPath(x.name)">
+ {{ x.name }}
+ </div>
+ </div>
+ <div class="bot">
+ <div class="set" @click="clickFastPath('绯荤粺璁剧疆')">
+ <span class="icon iconfont">{{ "\ue60f" }}</span>
+ <span>璁剧疆</span>
+ </div>
+ <div class="exit" @click="toLogout">
+ <span class="icon iconfont">{{ "\ue60f" }}</span>
+ <span>閫�鍑�</span>
+ </div>
+ </div>
+ </div>
+ <div class="tools-icon no-hover-style">
+ <img class="smart-ai" :src="`${publicPath}images/desktop/header-icon/SmartAI-鏂�.png`" alt />
</div>
</div>
<div class="tools-middle">
- <div v-for="dock in this.$store.state.desktop.minDocks" :key="dock.id" class="dock-item-wrap">
+ <div
+ v-for="dock in $store.state.desktop.minDocks"
+ :key="dock.id"
+ class="dock-item-wrap"
+ :class="{ actived: dock.highlight }"
+ >
<a @click="dockClick(dock)">
<img class="dock-item" :src="dock.src" :alt="dock.alt" />
- <img class="dock-shot" :src="dock.screenshot" :alt="dock.name" />
+ <img class="dock-shot" :src="dock.screenshot" v-if="dock.screenshot" />
+ <!-- <iframe class="dock-shot" :src="dock.url" ></iframe> -->
</a>
</div>
</div>
<div class="tools-right">
+ <div class="tools-icon my-tools-icon" @click="goToWireSet">
+ <span class="icon iconfont"></span>
+ </div>
+ <div class="tools-icon my-tools-icon" @click.stop="toggleShowWifi" v-show="wifiList.length">
+ <span class="icon iconfont"></span>
+ </div>
<div class="tools-icon">
- <!-- <span class="fa fa-battery-full"></span> -->
<img :src="`${publicPath}images/desktop/header-icon/search.png`" alt />
</div>
<div class="tools-icon">
- <!-- <span class="fa fa-battery-full"></span> -->
<img :src="`${publicPath}images/desktop/header-icon/help.png`" alt />
</div>
<div class="tools-icon" @click="notificationCenterClick()">
- <!-- <span class="fa fa-battery-full"></span> -->
<img :src="`${publicPath}images/desktop/header-icon/notice.png`" alt />
</div>
<div class="tools-icon">
- <!-- <span class="fa fa-battery-full"></span> -->
- <img :src="`${publicPath}images/desktop/header-icon/user.png`" alt />
+ <el-dropdown size="small" placement="bottom">
+ <span class="el-dropdown-link">
+ <img :src="`${publicPath}images/desktop/header-icon/user.png`" alt />
+ <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
+ </span>
+ <el-dropdown-menu slot="dropdown" style="top: 44px">
+ <el-dropdown-item style="text-align: left">
+ <b>Hi {{ userInfo && userInfo.username }}</b>
+ </el-dropdown-item>
+ <el-dropdown-item @click.native="showPasswdForm = true">淇敼瀵嗙爜</el-dropdown-item>
+ <el-dropdown-item @click.native="toLogout">閫�鍑虹櫥褰�</el-dropdown-item>
+ </el-dropdown-menu>
+ </el-dropdown>
</div>
- <!-- <timer></timer> -->
- <!-- <div class="tools-icon tools-notification-center" @click="notificationCenterClick()">
- <span
- :class="['fa', {'fa-list-ul':notificationCenterNoMessage()}, {'fa-comment-o on-new-msg':!notificationCenterNoMessage()},{'fa-commenting-o':notificationCenterMessageFlicker()}]"
- ></span>
- </div>-->
+ </div>
+ <el-dialog
+ title="淇敼瀵嗙爜"
+ :visible.sync="showPasswdForm"
+ :append-to-body="true"
+ width="500px"
+ @close="cancelPasswordChange"
+ >
+ <el-form :model="passwdForm" ref="ruleForm" :rules="rules" label-width="90px">
+ <el-form-item label="鏃у瘑鐮�" prop="oldPwd">
+ <el-input show-password v-model="passwdForm.oldPwd" autocomplete="off" size="small"></el-input>
+ </el-form-item>
+ <el-form-item label="鏂板瘑鐮�" prop="newPwd">
+ <el-input show-password v-model="passwdForm.newPwd" autocomplete="off" size="small"></el-input>
+ </el-form-item>
+ <el-form-item label="纭瀵嗙爜" prop="checkPwd">
+ <el-input show-password v-model="passwdForm.checkPwd" autocomplete="off" size="small"></el-input>
+ </el-form-item>
+ </el-form>
+ <div slot="footer" class="dialog-footer">
+ <el-button type="info" size="small" @click="cancelPasswordChange">鍙� 娑�</el-button>
+ <el-button type="primary" @click="submitForm('ruleForm')" size="small">纭� 瀹�</el-button>
+ </div>
+ </el-dialog>
+
+ <div class="sys-remind" v-if="showSysRemind">
+ <!-- -->
+ <div class="remind-title">绯荤粺鏇存柊鎻愰啋</div>
+
+ <div class="remind-content">
+ 宸插仛濂�<b>绯荤粺鏇存柊</b>鐨勫噯澶囷紝<span style="color: red">鏇存柊棰勮闇�瑕佷竴瀹氱殑鏃堕棿</span
+ >锛屽鏋滄偍鏈噯澶囧ソ锛屾垜浠皢鍦ㄤ竴灏忔椂鍚庡啀娆″悜鎮ㄧ‘璁ゃ��
+ </div>
+
+ <div class="btns">
+ <el-button size="mini" type="primary" @click="delaySysRemind(3600 * 24)">鍏抽棴姝ゆ鎻愰啋</el-button>
+ <el-button size="mini" type="primary" @click="delaySysRemind(60 * 60)">1灏忔椂鍚庢彁閱�</el-button>
+ <el-button :loading="upgrading" size="mini" type="primary" @click="updateSysNow">
+ {{ upgrading ? "鏇存柊涓�" : "绔嬪嵆鏇存柊" }}</el-button
+ >
+ </div>
+ </div>
+
+ <div class="sys-remind" v-if="showAppRemind">
+ <div class="remind-title">绠楁硶/搴旂敤鏇存柊鎻愰啋</div>
+
+ <div class="remind-content">
+ 鍙戠幇 <b>绠楁硶/搴旂敤 </b>鏇存柊锛�<span style="color: red">璇峰墠寰�鏌ョ湅鏇存柊</span
+ >銆傚鏋滄偍鏈噯澶囧ソ锛屾垜浠皢鍦ㄤ竴灏忔椂鍚庡啀娆″悜鎮ㄧ‘璁ゃ��
+ </div>
+
+ <div class="btns">
+ <el-button size="mini" type="primary" @click="delayAppRemind(3600 * 24)">鍏抽棴姝ゆ鎻愰啋</el-button>
+ <el-button size="mini" type="primary" @click="delayAppRemind(60 * 60)">1灏忔椂鍚庢彁閱�</el-button>
+ <el-button :loading="upgrading" size="mini" type="primary" @click="goToUpdate"> 鍓嶅線鏇存柊</el-button>
+ </div>
+ </div>
+
+ <div class="wifi-pop" :class="showWifiList ? 'wifi-pop-show' : ''">
+ <div class="top-title">
+ <div class="text">鏃犵嚎缃戠粶</div>
+ <el-switch v-model="isOpenWifi" active-color="rgba(61, 104, 225, 1)"> </el-switch>
+ </div>
+
+ <div class="wifi-list">
+ <div
+ class="item"
+ :class="i == activeWifi ? 'item-active' : ''"
+ v-for="(x, i) in wifiList"
+ :key="i"
+ @click="pickWifi(x, i)"
+ >
+ <!-- -->
+ <div class="top">
+ <span class="icon iconfont"></span>
+ <div class="name">
+ <span style="font-size: 14px">{{ x.name }}</span>
+ <span>瀹夊叏</span>
+ </div>
+ </div>
+ <div class="bot" v-if="x.showBottom">
+ <el-checkbox v-model="x.checked">鑷姩杩炴帴</el-checkbox>
+ <el-button size="mini">杩炴帴</el-button>
+ </div>
+ </div>
+ </div>
</div>
</div>
</template>
<script>
+import { logout, updatePwd } from "@/api/login"
+import {
+ getUpgradeNotice,
+ delayUpgradeNotice,
+ getAppUpgradeNotice,
+ upgradeNewVersion,
+ delayAppNotice,
+ getWifi
+} from "@/api/system"
export default {
name: "Tools",
data() {
+ var validatePass = (rule, value, callback) => {
+ if (value === "") {
+ callback(new Error("璇疯緭鍏ュ瘑鐮�"))
+ } else {
+ if (this.passwdForm.checkPwd !== "") {
+ this.$refs.ruleForm.validateField("checkPwd")
+ }
+ callback()
+ }
+ }
+ var validatePass2 = (rule, value, callback) => {
+ if (value === "") {
+ callback(new Error("璇峰啀娆¤緭鍏ュ瘑鐮�"))
+ } else if (value !== this.passwdForm.newPwd) {
+ callback(new Error("涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!"))
+ } else {
+ callback()
+ }
+ }
return {
publicPath: process.env.BASE_URL,
notificationCenterVisible: false,
- notificationCenterMessageCount: 0
- };
+ notificationCenterMessageCount: 0,
+ userInfo: {},
+ activeWifi: null,
+ wifiList: [
+ { name: "缃戠粶1", connected: false, showBottom: false, checked: false },
+ { name: "缃戠粶2", connected: false, showBottom: false, checked: false },
+ { name: "缃戠粶3", connected: true, showBottom: false, checked: false }
+ ],
+ linkList: [{ name: "鏂囨。涓績" }, { name: "绯荤粺鐩戞帶鍣�" }, { name: "鏃ュ織绠＄悊" }],
+ showPasswdForm: false,
+ showWifiList: false,
+ rules: {
+ oldPwd: [{ required: true, message: "璇疯緭鍏ユ棫瀵嗙爜", trigger: "blur" }],
+ newPwd: [{ required: true, validator: validatePass, trigger: "blur" }],
+ checkPwd: [{ required: true, validator: validatePass2, trigger: "blur" }]
+ },
+ showFastPath: false,
+ showSysRemind: false,
+ showAppRemind: false,
+ sysTimeout: 60 * 60 * 1000,
+ sysTimer: null,
+ appTimeout: 60 * 60 * 1000,
+ upgrading: false,
+ isOpenWifi: false,
+ passwdForm: {
+ oldPwd: "",
+ newPwd: "",
+ checkPwd: ""
+ }
+ }
},
created() {
- let _that = this;
+ let _that = this
+ this.userInfo = sessionStorage.getItem("userInfo") && JSON.parse(sessionStorage.getItem("userInfo"))
if (window.toolIntervalArr) {
- window.toolIntervalArr.forEach(item => clearInterval(item));
+ window.toolIntervalArr.forEach((item) => clearInterval(item))
}
window.toolIntervalArr = [
- setInterval(function () {
- _that.notificationCenterMessageCount += 1;
+ setInterval(function() {
+ _that.notificationCenterMessageCount += 1
}, 600)
- ];
+ ]
+ },
+ beforeDestroy() {
+ clearTimeout(this.sysTimer)
+ this.sysTimer = null
+ },
+ mounted() {
+ document.addEventListener("click", (e) => {
+ if (this.showFastPath || this.showWifiList) {
+ this.showFastPath = false
+ this.showWifiList = false
+ }
+ })
+ this.askSysUpdate()
+ this.askAppUpdate()
+ this.askWifiConfig()
},
methods: {
- notificationCenterClick: function () {
- this.notificationCenterVisible = !this.notificationCenterVisible;
- this.$store.commit(
- "desktop/changeNotificationCenterVisible",
- this.notificationCenterVisible
- );
+ askWifiConfig() {
+ getWifi().then((res) => {
+ this.wifiList = []
+ if (res && res.data) {
+ this.wifiList = res.data
+ }
+ })
},
- notificationCenterNoMessage: function () {
- return this.$store.state.desktop.messageNotices.length === 0;
+ askAppUpdate() {
+ getAppUpgradeNotice().then((res) => {
+ if (res.code == 200) {
+ if (res.data.NeedUpdate && res.data.NoticeStatus) {
+ if (res.data.LastNoticeTime == 0) {
+ this.showAppRemind = true
+ } else {
+ this.appTimeout = res.data.LastNoticeTime * 1000
+ this.delayAppAsk()
+ }
+ }
+ }
+ })
},
- notificationCenterMessageFlicker: function () {
- return (
- this.notificationCenterMessageCount % 2 === 0 &&
- !this.notificationCenterNoMessage()
- );
+ pickWifi(x, i) {
+ this.wifiList.forEach((x) => {
+ x.showBottom = false
+ })
+ x.showBottom = !x.showBottom
+ this.activeWifi = i
+ },
+ goToUpdate() {
+ this.showAppRemind = false
+ window.parent.postMessage({ msg: `toAI?activeName=鏇存柊` }, "*")
+ },
+ goToWireSet() {
+ window.parent.postMessage({ msg: `toSetting?menu=缃戠粶璁剧疆&subMenu=鏈夌嚎缃戠粶` }, "*")
+ },
+ updateSysNow() {
+ window.parent.postMessage({ msg: `toVindicate?autoUpdate=1` }, "*")
+ },
+ delaySysRemind(sec) {
+ delayUpgradeNotice({
+ delaySecond: sec
+ }).then((res) => {
+ if (res.code == 200) {
+ this.$notify.success("璁剧疆鎴愬姛")
+ this.showSysRemind = false
+ this.sysTimeout = res.data.LastNoticeTime * 1000
+ this.delaySysAsk()
+ }
+ })
+ },
+ delayAppRemind(sec) {
+ delayAppNotice({
+ delay: sec
+ }).then((res) => {
+ if (res.code == 200) {
+ this.$notify.success("璁剧疆鎴愬姛")
+ this.showAppRemind = false
+ this.appTimeout = res.data.LastNoticeTime * 1000
+ this.delayAppAsk()
+ }
+ })
+ },
+ delaySysAsk() {
+ this.sysTimer = setTimeout(() => {
+ this.askSysUpdate()
+ }, this.sysTimeout)
+ },
+ delayAppAsk() {
+ this.appTimer = setTimeout(() => {
+ this.askAppUpdate()
+ }, this.appTimeout)
+ },
+ askSysUpdate() {
+ getUpgradeNotice().then((res) => {
+ if (res.data.HaveNewVersion > 0 && res.data.NoticeStatus) {
+ if (res.data.LastNoticeTime == 0) {
+ this.showSysRemind = true
+ } else {
+ this.sysTimeout = res.data.LastNoticeTime * 1000
+ this.delaySysAsk()
+ }
+ }
+ })
+ },
+ toggleShowWifi() {
+ this.notificationCenterVisible = false
+ this.showWifiList = !this.showWifiList
+ this.$store.commit("desktop/changeNotificationCenterVisible", this.notificationCenterVisible)
+ },
+ submitForm(formName) {
+ this.$refs[formName].validate((valid) => {
+ if (valid) {
+ let json = {
+ oldPwd: this.passwdForm.oldPwd,
+ newPwd: this.passwdForm.checkPwd
+ }
+ updatePwd(json)
+ .then((res) => {
+ this.$notify({
+ type: res.success ? "success" : "error",
+ message: res.msg
+ })
+ if (res.success) {
+ this.cancelPasswordChange()
+ }
+ })
+ .catch((err) => {
+ this.$notify({
+ type: "error",
+ message: err.msg
+ })
+ })
+ } else {
+ console.log("error submit!!")
+ return false
+ }
+ })
+ },
+ notificationCenterClick: function() {
+ this.notificationCenterVisible = !this.notificationCenterVisible
+ this.$store.commit("desktop/changeNotificationCenterVisible", this.notificationCenterVisible)
+ },
+ notificationCenterNoMessage: function() {
+ return this.$store.state.desktop.messageNotices.length === 0
+ },
+ notificationCenterMessageFlicker: function() {
+ return this.notificationCenterMessageCount % 2 === 0 && !this.notificationCenterNoMessage()
},
togglePreference() {
- //this.$store.commit("desktop/togglePreference");
- //鏄剧ず妗岄潰,鏈�灏忓寲宸叉墦寮�鐨勫簲鐢�
- debugger;
- this.$store.state.desktop.frames.forEach(frame => {
- this.$store.commit('desktop/addMinDock', {
+ this.showFastPath = !this.showFastPath
+ this.$store.state.desktop.frames.forEach((frame) => {
+ this.$store.commit("desktop/addMinDock", {
id: frame.id,
src: frame.icon,
alt: frame.title,
- type: "3"
- });
+ type: "3",
+ screenshot: ""
+ })
})
},
dockClick(dock) {
if (dock.type === "1") {
- window.open(dock.url);
+ window.open(dock.url)
} else if (dock.type === "2") {
this.$store.dispatch("desktop/addFrame", {
id: dock.id,
icon: dock.src,
title: dock.name,
url: dock.url
- });
+ })
} else if (dock.type === "3") {
- this.$store.commit("desktop/resetMinFrame", dock.id);
+ this.$store.commit("desktop/resetMinFrame", dock.id)
+ //鐐瑰嚮鐨刬frame缃《骞堕珮浜�
+ this.$store.commit("desktop/refreshFrame", dock)
+ }
+ },
+ clickFastPath(name) {
+ this.$emit("jumpToDock", name)
+ },
+ toLogout() {
+ let _this = this
+ this.$confirm("纭畾閫�鍑虹櫥褰曞悧锛�", "鎻愮ず", {
+ type: "warning",
+ cancelButtonClass: "comfirm-class-cancle",
+ confirmButtonClass: "comfirm-class-sure"
+ })
+ .then((_) => {
+ logout().then((res) => {
+ if (res.success) {
+ this.$notify.success(res.msg)
+ location.assign("/view/index")
+ sessionStorage.removeItem("userInfo")
+ // 鎵嬪姩閫�鍑�, 鍙栨秷鑷姩鐧诲綍
+ sessionStorage.removeItem("autoLogin")
+ _this.userInfo = {}
+ } else {
+ this.$notify({
+ title: "鎻愮ず",
+ type: "success",
+ message: "閫�鍑哄け璐�!"
+ })
+ }
+ })
+ })
+ .catch((_) => {
+ console.log("閫�鍑哄け璐�")
+ })
+ },
+ cancelPasswordChange() {
+ this.showPasswdForm = false
+ this.passwdForm = {
+ oldPwd: "",
+ newPwd: "",
+ checkPwd: ""
}
}
}
-};
+}
</script>
-<style scoped>
+<style scoped lang="scss">
.tools {
width: 100%;
position: fixed;
@@ -137,7 +484,7 @@
margin: auto;
}
.tools .tools-left {
- width: 200px;
+ width: 275px;
height: 100%;
float: left;
margin-left: 14px;
@@ -146,6 +493,7 @@
float: left;
position: relative;
}
+
.tools .tools-middle::before {
width: 1px;
height: 20px;
@@ -164,12 +512,13 @@
border-bottom: 2px solid transparent;
position: relative;
}
-.tools .tools-middle .dock-item-wrap:hover,
-.tools .tools-middle .dock-item-wrap.clicked {
+.tools .tools-middle .dock-item-wrap:hover {
color: white;
background-color: #98aabe;
+}
+.tools-middle .dock-item-wrap.actived {
border-color: #40c3ff;
- cursor: pointer;
+ background-color: #98aabe;
}
.dock-item-wrap a {
height: 100%;
@@ -194,16 +543,220 @@
text-align: center;
height: 100%;
display: inline-block;
- vertical-align: top;
+ vertical-align: bottom;
+
line-height: 56px;
padding: 0 15px;
+ position: relative;
+ .iconfont {
+ display: block;
+ line-height: 42px;
+ font-size: 25px;
+ }
+}
+@keyframes move {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+.fast-path {
+ height: 310px;
+ position: absolute;
+ width: 200px;
+ top: 55px;
+ border-radius: 6px;
+ background-color: rgba(255, 255, 255, 1);
+ transition: 0.2s;
+ display: none;
+ padding-top: 5px;
+ box-sizing: border-box;
+ .top {
+ display: flex;
+ align-items: center;
+ height: 70px;
+ box-sizing: border-box;
+ padding: 0 30px;
+ img {
+ height: 50px;
+ width: 50px;
+ border-radius: 50%;
+ }
+ .username {
+ width: fit-content;
+ height: 30px;
+ line-height: 30px;
+ font-size: 16px;
+ margin-left: 15px;
+ }
+ }
+ .link-list {
+ height: 180px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ .list-item {
+ display: flex;
+ width: 90%;
+ box-sizing: border-box;
+ padding: 0 20px;
+ border-radius: 5px;
+ font-size: 14px;
+ line-height: 25px;
+ height: 25px;
+ cursor: pointer;
+ margin: 5px;
+ }
+ .list-item:hover {
+ background-color: rgba(231, 231, 231, 1);
+ }
+ }
+ .bot {
+ position: absolute;
+ bottom: 0;
+ height: 60px;
+ display: flex;
+ width: 100%;
+ justify-content: space-around;
+ .set,
+ .exit {
+ display: flex;
+ align-items: center;
+ width: 28%;
+ justify-content: space-evenly;
+ font-size: 14px;
+ cursor: pointer;
+ }
+ }
}
-.tools .tools-icon:hover,
-.tools .tools-icon.clicked {
+.sys-remind {
+ background-color: white;
+ width: 400px;
+ position: absolute;
+ right: 5px;
+ top: 45px;
+ border-radius: 5px;
+ .remind-title {
+ box-sizing: border-box;
+ text-align: left;
+ padding: 0 20px;
+ border-bottom: 1px solid lightgray;
+ font-size: 16px;
+ line-height: 35px;
+ }
+ .remind-content {
+ text-align: left;
+ line-height: 20px;
+ font-size: 14px;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 15px 20px;
+ }
+ .btns {
+ padding: 0px 12px 8px 12px;
+ /* background-color: antiquewhite; */
+ text-align: right;
+ }
+}
+
+.tools-icon img {
+ -webkit-user-drag: none;
+}
+.tools .tools-icon:not(.no-hover-style):hover,
+.tools .tools-icon:not(.no-hover-style).clicked {
color: white;
background-color: #98aabe;
cursor: pointer;
+}
+
+.wifi-pop {
+ position: absolute;
+ width: 210px;
+ top: 55px;
+ height: 400px;
+ border-radius: 6px;
+ background-color: white;
+ transition: 0.2s;
+ display: none;
+ box-sizing: border-box;
+ right: 100px;
+ .top-title {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ box-sizing: border-box;
+ padding: 0 20px;
+ font-size: 14px;
+ border-bottom: 1px solid lightgray;
+ }
+ .wifi-list {
+ overflow: auto;
+ height: 340px;
+ .item-active {
+ background-color: rgba(66, 102, 153, 1);
+ color: white;
+ }
+ .item {
+ box-sizing: border-box;
+ cursor: pointer;
+ /* background-color: aqua; */
+ padding: 10px 20px;
+ .top {
+ display: flex;
+ .icon {
+ font-size: 20px;
+ margin-right: 10px;
+ }
+ .name {
+ display: flex;
+ flex-direction: column;
+ line-height: 20px;
+ text-align: left;
+ }
+ }
+ .bot {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ .el-checkbox {
+ color: white;
+ .el-checkbox__input.is-checked + .el-checkbox__label {
+ color: white;
+ }
+ .el-checkbox__label {
+ padding-left: 5px;
+ font-size: 12px;
+ }
+ .el-checkbox__inner {
+ width: 12px;
+ height: 12px;
+
+ .el-checkbox__inner::after {
+ height: 6px;
+ left: 3px;
+ }
+ }
+ }
+
+ .el-button--mini,
+ .el-button--mini.is-round {
+ padding: 5px 10px;
+ }
+ }
+ }
+ }
+}
+.wifi-pop-show {
+ animation: move linear 0.2s 1;
+ display: block;
+}
+
+.fast-path-show {
+ animation: move linear 0.2s 1;
+ display: block;
}
.tools .tools-right {
@@ -211,4 +764,12 @@
height: 100%;
margin-right: 14px;
}
-</style>
\ No newline at end of file
+
+.smart-ai {
+ height: 65%;
+}
+
+.el-dropdown-menu {
+ top: 40px !important;
+}
+</style>
--
Gitblit v1.8.0