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/desktop/index/components/Tools.vue |  743 ++++++++++++++++++++++++++++++++++++++++++++++++++------
 1 files changed, 654 insertions(+), 89 deletions(-)

diff --git a/src/pages/desktop/index/components/Tools.vue b/src/pages/desktop/index/components/Tools.vue
index a874279..957f916 100644
--- a/src/pages/desktop/index/components/Tools.vue
+++ b/src/pages/desktop/index/components/Tools.vue
@@ -1,135 +1,472 @@
 <template>
   <div class="tools">
-    <div class="center">
-      <div class="tools-left">
-        <div
-          :class="['tools-icon','tools-show-desktop', {clicked:this.$store.state.desktop.preferenceVisiable}]"
-          @click="togglePreference()"
-        >
-          <img class="system" :src="`${publicPath}images/header-icon/system.png`" />
-          <!-- <span class="fa fa-apple"></span> -->
+    <div class="tools-left">
+      <div
+        :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`" />
+      </div>
+
+      <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="tools-icon" >
-          <!-- <span class="fa fa-safari"></span> -->
-          <img class="smart-ai" :src="`${publicPath}images/header-icon/SmartAI.png`" alt />
+        <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-middle">
-        <div
-          v-for="dock in this.$store.state.desktop.minDocks"
-          :key="dock.id"
-          class="dock-item-wrap"
-          
-        >
-          <a @click="dockClick(dock)">
-            <img class="dock-item" :src="dock.src" :alt="dock.alt" />
-          </a>
-        </div>
+      <div class="tools-icon no-hover-style">
+        <img class="smart-ai" :src="`${publicPath}images/desktop/header-icon/SmartAI-鏂�.png`" alt />
       </div>
-      <div class="tools-right">
-        <div class="tools-icon">
-          <!-- <span class="fa fa-battery-full"></span> -->
-          <img :src="`${publicPath}images/header-icon/search.png`" alt />
+    </div>
+    <div class="tools-middle">
+      <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" 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">&#xe6dd;</span>
+      </div>
+      <div class="tools-icon my-tools-icon" @click.stop="toggleShowWifi" v-show="wifiList.length">
+        <span class="icon iconfont">&#xe6e5;</span>
+      </div>
+      <div class="tools-icon">
+        <img :src="`${publicPath}images/desktop/header-icon/search.png`" alt />
+      </div>
+      <div class="tools-icon">
+        <img :src="`${publicPath}images/desktop/header-icon/help.png`" alt />
+      </div>
+      <div class="tools-icon" @click="notificationCenterClick()">
+        <img :src="`${publicPath}images/desktop/header-icon/notice.png`" alt />
+      </div>
+      <div class="tools-icon">
+        <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>
+    </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">&#xe6e5;</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 class="tools-icon">
-          <!-- <span class="fa fa-battery-full"></span> -->
-          <img :src="`${publicPath}images/header-icon/help.png`" alt />
-        </div>
-        <div class="tools-icon" @click="notificationCenterClick()">
-          <!-- <span class="fa fa-battery-full"></span> -->
-          <img :src="`${publicPath}images/header-icon/notice.png`" alt />
-        </div>
-        <div class="tools-icon">
-          <!-- <span class="fa fa-battery-full"></span> -->
-          <img :src="`${publicPath}images/header-icon/user.png`" alt />
-        </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>
     </div>
   </div>
 </template>
 
 <script>
-import Timer from "./Timer";
+import { logout, updatePwd } from "@/api/login"
 
+import {
+  getUpgradeNotice,
+  delayUpgradeNotice,
+  getAppUpgradeNotice,
+  upgradeNewVersion,
+  delayAppNotice,
+  getWifi
+} from "@/api/system"
 export default {
   name: "Tools",
-  components: {
-    Timer
-  },
   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;
+        _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: {
+    askWifiConfig() {
+      getWifi().then((res) => {
+        this.wifiList = []
+        if (res && res.data) {
+          this.wifiList = res.data
+        }
+      })
+    },
+    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()
+            }
+          }
+        }
+      })
+    },
+    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
-      );
+      this.notificationCenterVisible = !this.notificationCenterVisible
+      this.$store.commit("desktop/changeNotificationCenterVisible", this.notificationCenterVisible)
     },
     notificationCenterNoMessage: function() {
-      return this.$store.state.desktop.messageNotices.length === 0;
+      return this.$store.state.desktop.messageNotices.length === 0
     },
     notificationCenterMessageFlicker: function() {
-      return (
-        this.notificationCenterMessageCount % 2 === 0 &&
-        !this.notificationCenterNoMessage()
-      );
+      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;
@@ -147,19 +484,20 @@
   margin: auto;
 }
 .tools .tools-left {
-  width: 200px;
+  width: 275px;
   height: 100%;
   float: left;
-  margin-left: 8px;
+  margin-left: 14px;
 }
-.tools .tools-middle{
+.tools .tools-middle {
   float: left;
   position: relative;
 }
-.tools .tools-middle::before{
+
+.tools .tools-middle::before {
   width: 1px;
   height: 20px;
-  content: '';
+  content: "";
   position: absolute;
   top: 10px;
   left: 0;
@@ -172,13 +510,15 @@
   line-height: 54px;
   margin-right: 1px;
   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;
-  border-color: #40C3FF;
-  cursor: pointer;
+}
+.tools-middle .dock-item-wrap.actived {
+  border-color: #40c3ff;
+  background-color: #98aabe;
 }
 .dock-item-wrap a {
   height: 100%;
@@ -187,24 +527,249 @@
   width: auto;
   height: 70%;
 }
+.dock-item-wrap .dock-shot {
+  visibility: hidden;
+  width: 100px;
+  height: 46px;
+  position: absolute;
+  top: 44px;
+  left: -50%;
+}
+.tools .tools-middle .dock-item-wrap:hover .dock-shot,
+.tools .tools-middle .dock-item-wrap.clicked .dock-shot {
+  visibility: visible;
+}
 .tools-icon {
   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 {
   float: right;
   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