From 95fc665771abeb335b29e6d59fe74d69cf9c446f Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期四, 23 七月 2020 08:49:20 +0800
Subject: [PATCH] 首页更新,加入算法管理

---
 src/pages/desktop/index/components/Tools.vue |  124 ++++++++++++++++++++++++++---------------
 1 files changed, 78 insertions(+), 46 deletions(-)

diff --git a/src/pages/desktop/index/components/Tools.vue b/src/pages/desktop/index/components/Tools.vue
index ea2a2b0..385e1d2 100644
--- a/src/pages/desktop/index/components/Tools.vue
+++ b/src/pages/desktop/index/components/Tools.vue
@@ -1,36 +1,53 @@
 <template>
   <div class="tools">
-    <div class="tools-left">
-      <div
-        :class="['tools-icon', {clicked:this.$store.state.desktop.preferenceVisiable}]"
-        @click="togglePreference()"
-      >
-        <span class="fa fa-apple"></span>
+    <div class="center">
+      <div class="tools-left">
+        <div
+          :class="['tools-icon', {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>
+        <div class="tools-icon" @click="openSafari()">
+          <!-- <span class="fa fa-safari"></span> -->
+          <img class="smart-ai" :src="`${publicPath}images/header-icon/SmartAI.png`" alt="">
+        </div>
       </div>
-      <div class="tools-icon" @click="openSafari()">
-        <span class="fa fa-safari"></span>
-      </div>
-    </div>
-    <div class="tools-middle"></div>
-    <div class="tools-right">
-      <div class="tools-icon">
-        <span class="fa fa-battery-full"></span>
-      </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 class="tools-icon tools-show-desktop">
-        <span>&nbsp;</span>
+      <div class="tools-middle"></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-icon">
+          <!-- <span class="fa fa-battery-full"></span> -->
+          <img :src="`${publicPath}images/header-icon/help.png`" alt="">
+        </div>
+        <div class="tools-icon">
+          <!-- <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 class="tools-icon tools-show-desktop">
+          <span>&nbsp;</span>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import Timer from './Timer';
+import Timer from "./Timer";
 
 export default {
   name: "Tools",
@@ -39,40 +56,47 @@
   },
   data() {
     return {
+      publicPath: process.env.BASE_URL,
       notificationCenterVisible: false,
-      notificationCenterMessageCount: 0,
-    }
+      notificationCenterMessageCount: 0
+    };
   },
   created() {
     let _that = this;
     if (window.toolIntervalArr) {
       window.toolIntervalArr.forEach(item => clearInterval(item));
     }
-    window.toolIntervalArr = [setInterval(function () {
-      _that.notificationCenterMessageCount += 1;
-    }, 600)];
+    window.toolIntervalArr = [
+      setInterval(function() {
+        _that.notificationCenterMessageCount += 1;
+      }, 600)
+    ];
   },
   methods: {
-    notificationCenterClick: function () {
+    notificationCenterClick: function() {
       this.notificationCenterVisible = !this.notificationCenterVisible;
-      this.$store.commit('desktop/changeNotificationCenterVisible',
-        this.notificationCenterVisible);
+      this.$store.commit(
+        "desktop/changeNotificationCenterVisible",
+        this.notificationCenterVisible
+      );
     },
-    notificationCenterNoMessage: function () {
+    notificationCenterNoMessage: function() {
       return this.$store.state.desktop.messageNotices.length === 0;
     },
-    notificationCenterMessageFlicker: function () {
-      return ((this.notificationCenterMessageCount % 2) === 0)
-        && !this.notificationCenterNoMessage();
+    notificationCenterMessageFlicker: function() {
+      return (
+        this.notificationCenterMessageCount % 2 === 0 &&
+        !this.notificationCenterNoMessage()
+      );
     },
-    openSafari: function () {
+    openSafari: function() {
       this.$store.commit("desktop/openSafari");
     },
-    togglePreference: function () {
+    togglePreference: function() {
       this.$store.commit("desktop/togglePreference");
     }
   }
-}
+};
 </script>
 
 <style scoped>
@@ -80,31 +104,39 @@
   width: 100%;
   position: fixed;
   top: 0;
-  height: 30px;
-  line-height: 30px;
-  background-color: rgba(15, 15, 0, 0.4);
+  height: 40px;
+  line-height: 40px;
+  background-color: #d9e5f1;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   z-index: 120;
-  color: #fff;
+  color: #000;
 }
-
+.tools .center {
+  width: 1300px;
+  height: 40px;
+  margin: auto;
+}
 .tools .tools-left {
   width: 200px;
   height: 100%;
   float: left;
   margin-left: 8px;
+
 }
 
 .tools-icon {
   text-align: center;
-  width: 30px;
   height: 100%;
   display: inline-block;
+  vertical-align: top;
+  line-height: 56px;
+  margin-right: 28px;
 }
 
 .tools .tools-icon:hover,
 .tools .tools-icon.clicked {
   color: white;
-  background-color: rgba(49, 156, 241, 0.71);
+  background-color: #98aabe;
   cursor: pointer;
 }
 

--
Gitblit v1.8.0