From f20a554bdb24e9dfde9dc6a69d78595944f61d15 Mon Sep 17 00:00:00 2001
From: mark <mark18340872469@163.com>
Date: 星期二, 25 十月 2022 14:53:57 +0800
Subject: [PATCH] 设备管理 样式调整

---
 src/components/IndexHeader.vue |  241 +++++++++++++++++++++++++++++------------------
 1 files changed, 147 insertions(+), 94 deletions(-)

diff --git a/src/components/IndexHeader.vue b/src/components/IndexHeader.vue
index 60089bc..e6f9bca 100644
--- a/src/components/IndexHeader.vue
+++ b/src/components/IndexHeader.vue
@@ -1,116 +1,111 @@
 <template>
   <div class="IndexHeader">
     <div class="header" :class="{ showBox: isShow, disOpacity: !opacity }">
-      <!-- 鍙充晶 -->
+      <!-- 宸︿晶 -->
       <div class="left">
-        <img class="logo" src="/images/index/LOGO.png" alt="" />
-        <div class="title">宸ヤ笟鐗╄仈缃戝钩鍙�</div>
-        <div class="label"><router-link to="/">棣栭〉</router-link></div>
+        <router-link to="/">
+          <img class="logo" src="/images/index/LOGO.png" alt="" />
+        </router-link>
+        <div class="title" @click="$router.push('/')">宸ヤ笟浜掕仈缃戝钩鍙�</div>
+        <div class="label" @click="$router.push('/')">棣栭〉</div>
         <div class="label">浜戞湇鍔�</div>
-        <div class="label">
-          <router-link to="/equipmentManagement">绠＄悊涓績</router-link>
-        </div>
-        <div class="label">搴旂敤鍟嗗煄</div>
+        <div class="label" @click="$router.push('/manageCenter')">绠＄悊涓績</div>
+        <div class="label" @click="$router.push('/product')">搴旂敤鍟嗗煄</div>
       </div>
 
-      <!-- 宸︿晶 -->
+      <!-- 鍙充晶 -->
       <div class="right">
         <el-input
           placeholder="璇疯緭鍏ュ叧閿瘝"
           v-model="keyWord"
           @focus="showInputBox(true)"
+          :class="{ Unlogin: !userInfo }"
         >
           <div class="iconList" slot="suffix">
             <i class="search iconfont" v-if="!isShow">&#xe607;</i>
-            <i class="search iconfont" v-if="isShow">&#xe607;</i>
-            <i class="del iconfont" v-if="isShow" @click="showInputBox(false)"
-              >&#xe60f;</i
-            >
+            <i class="search iconfont" @click="search" v-if="isShow">&#xe607;</i>
+            <i class="del iconfont" v-if="isShow" @click="showInputBox(false)">&#xe60f;</i>
           </div>
         </el-input>
 
         <!-- 鏈櫥褰曟儏鍐� -->
-        <div class="headerLogin" v-if="!userInfo">
-          <router-link to="/login"> 鐧诲綍</router-link>
+        <div class="headerLogin" v-if="!userInfo" @click="$router.push('/login')">
+          鐧诲綍
         </div>
-        <div class="register" v-if="!userInfo">
-          <router-link to="/register"> 鍏嶈垂娉ㄥ唽 </router-link>
+        <div class="register" v-if="!userInfo" @click="$router.push('/register')">
+          鍏嶈垂娉ㄥ唽
         </div>
 
         <!-- 宸茬櫥褰曟儏鍐� -->
         <img
           class="userImg"
-          src="/images/index/榛樿澶村儚-01.png"
+          src="/images/index/8.jpg"
           alt=""
           v-if="userInfo"
           @mouseenter="showUserBox"
           @mouseleave="hiddenUserBox"
+          style="border-radius: 50%"
         />
       </div>
     </div>
 
     <!-- 鐢ㄦ埛涓嬫媺妗� -->
-    <div
-      class="userBox"
-      v-if="userInfo && isShowUserBox"
-      @mouseenter="showUserBox"
-      @mouseleave="hiddenUserBox"
-    >
+    <div class="userBox" v-if="userInfo && isShowUserBox" @mouseenter="showUserBox" @mouseleave="hiddenUserBox">
       <div class="userName">{{ userInfo.username }}</div>
       <ul>
-        <li class="money">
+        <!--   <li class="money">
           <div class="label">浣欓</div>
           <div class="content">
             <span class="button">鍏呭��</span>
-            <span class="number">锟�4900.82</span>
+            <span class="number">锟�0</span>
           </div>
         </li>
-
+ -->
         <li class="personal">
           <div class="label">
             <router-link to="/personalCenter">涓汉涓績</router-link>
           </div>
 
-          <div class="content">
-            <span class="iconfont">&#xe605;</span> 宸插疄鍚嶈璇�
-          </div>
+          <div class="content"><span class="iconfont">&#xe605;</span> 宸插疄鍚嶈璇�</div>
         </li>
 
         <li>
-          <div class="label">璁㈠崟绠＄悊</div>
+          <div class="label" @click="jump(0)">璁㈠崟绠＄悊</div>
         </li>
 
-        <li>
+        <!--  <li>
           <div class="label">浜у搧缁垂</div>
-        </li>
+        </li> -->
 
-        <li>
+        <!--  <li>
           <div class="label">鏈娑堟伅</div>
+        </li> -->
+
+        <li>
+          <div class="label" @click="jump(0, 1)">鏈敮浠樿鍗�</div>
         </li>
 
         <li>
-          <div class="label">鏈敮浠樿鍗�</div>
-        </li>
-
-        <li>
-          <div class="label">绠＄悊涓績</div>
+          <div class="label">
+            <router-link to="/manageCenter">绠＄悊涓績</router-link>
+          </div>
         </li>
       </ul>
       <div class="logOut" @click="logOut">閫�鍑虹櫥褰�</div>
     </div>
 
     <!-- 杈撳叆涓嬫媺妗� -->
-    <div class="inputBox" v-if="isShowBox">
+    <div class="inputBox" :class="{ Unlogin: !userInfo }" v-if="isShowBox">
       <div class="hotKey">
         <div class="title">鐑棬鎼滅储</div>
         <ul class="keyCard">
-          <li class="keyItem" v-for="(item, index) in hotKeyArr" :key="index">
+          <li class="keyItem" @click="jumpToSearch(item)" v-for="(item, index) in hotKeyArr" :key="index">
             {{ item }}
           </li>
         </ul>
       </div>
 
-      <div class="historyKey">
+      <!-- <div class="historyKey">
         <div class="title colorLight">鍘嗗彶鎼滅储</div>
 
         <ul class="keyCard">
@@ -122,7 +117,7 @@
             {{ item }}
           </li>
         </ul>
-      </div>
+      </div> -->
     </div>
 
     <!-- 閬僵灞� -->
@@ -131,19 +126,19 @@
 </template>
 
 <script>
-import { logout } from "@/api/login";
+import { logout } from "@/api/login"
 
 export default {
   props: {
     opacity: {
       type: Boolean,
-      default: true,
-    },
+      default: true
+    }
   },
   name: "Header",
   created() {
     //灏濊瘯浠巗ession涓嬁鐢ㄦ埛淇℃伅
-    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
+    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"))
     /*  document.addEventListener("click", () => {
       this.showUserBox = false;
     }); */
@@ -152,56 +147,87 @@
     return {
       keyWord: "", //杈撳叆妗嗗唴瀹�
       isShow: false, //鏄剧ず涓嬫媺妗�
-      hotKeyArr: ["绠楁硶", "鏅鸿兘AI", "浜戞湇鍔�", "绠＄悊涓績", "瀹炴椂闊宠棰�", "鐭俊"], //鐑棬鍏抽敭璇�
+      hotKeyArr: ["鎵撶數璇�", "绂诲矖", "鐫″矖", "鍏ヤ镜", "绂诲矖", "瀹夊叏甯�"], //鐑棬鍏抽敭璇�
       historyKeyArr: ["浜戞湇鍔�", "绠楁硶", "绠＄悊鏈嶅姟", "搴旂敤"], //鍘嗗彶鍏抽敭璇�
       isShowBox: false, //杈撳叆涓嬫媺妗�
       userInfo: null, //鐢ㄦ埛淇℃伅
       isShowUserBox: false, //鐢ㄦ埛淇℃伅寮瑰眰
-      UserTimer: null, // 鎺у埗寮瑰眰鐨勫畾鏃跺櫒
-    };
+      UserTimer: null // 鎺у埗寮瑰眰鐨勫畾鏃跺櫒
+    }
   },
   methods: {
     // 鎺у埗杈撳叆妗哹ox
     showInputBox(toggle) {
-      this.isShow = toggle;
-      this.isShowBox = toggle;
-      this.$emit("showInputBox", toggle);
+      this.isShow = toggle
+      this.isShowBox = toggle
+      this.keyWord = ""
+      this.$emit("showInputBox", toggle)
     },
 
     //鎺у埗鐢ㄦ埛淇℃伅box
     showUserBox() {
       if (this.UserTimer) {
-        clearTimeout(this.UserTimer);
-        this.UserTimer = null;
+        clearTimeout(this.UserTimer)
+        this.UserTimer = null
       }
-      this.isShowUserBox = true;
+      this.isShowUserBox = true
     },
     hiddenUserBox() {
-      const _this = this;
+      const _this = this
       this.UserTimer = setTimeout(() => {
-        _this.isShowUserBox = false;
-      }, 100);
+        _this.isShowUserBox = false
+      }, 200)
     },
 
     logOut() {
       logout().then(() => {
-        sessionStorage.removeItem("loginedInfo");
-        sessionStorage.removeItem("expires_in");
-        sessionStorage.removeItem("userInfo");
+        sessionStorage.removeItem("loginedInfo")
+        sessionStorage.removeItem("expires_in")
+        sessionStorage.removeItem("userInfo")
         this.$router.push({
-          path: "/login",
-        });
+          path: "/login"
+        })
         this.$notify({
           title: "鎻愮ず",
           type: "success",
           message: "閫�鍑烘垚鍔燂紒",
           duration: 2500,
-          offset: 57,
-        });
-      });
+          offset: 57
+        })
+      })
     },
-  },
-};
+
+    jump(id, type) {
+      if (type) {
+        sessionStorage.setItem("type", type)
+      }
+      this.$router.push({
+        path: "/personalCenter",
+        query: {
+          id: id
+        }
+      })
+    },
+
+    search() {
+      this.$router.push({
+        path: "/product",
+        query: {
+          keyWord: this.keyWord
+        }
+      })
+    },
+
+    jumpToSearch(keyWord) {
+      this.$router.push({
+        path: "/product",
+        query: {
+          keyWord
+        }
+      })
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -209,10 +235,10 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 62px;
+  height: 50px;
   width: 100%;
   min-width: 1280px;
-  background-color: rgba(255, 255, 255, 0.25);
+  background-color: #1f2a3e;
   color: #fff;
   font-size: 14px;
 
@@ -222,14 +248,16 @@
 
     .logo {
       margin: 0 7px 0 20px;
+      cursor: pointer;
     }
 
     .title {
-      margin-right: 10px;
+      margin-right: 30px;
+      cursor: pointer;
     }
 
     .label {
-      margin: 0 20px;
+      margin-right: 20px;
       cursor: pointer;
     }
   }
@@ -237,13 +265,14 @@
   .right {
     position: relative;
     display: flex;
+    justify-content: flex-end;
     align-items: center;
 
     .el-input ::v-deep {
       input {
-        height: 62px;
+        height: 50px;
         width: 180px;
-        background-color: rgba(255, 255, 255, 0.5);
+        background-color: rgba(255, 255, 255, 0.05) !important;
         border: none;
         border-radius: 0;
         color: #fff;
@@ -254,13 +283,14 @@
       }
 
       .el-input__suffix {
-        padding-top: 23px;
-        padding-right: 23px;
+        padding-top: 17px;
+        padding-right: 19px;
       }
-
-      .search {
-        color: #fff;
-        cursor: pointer;
+      .iconList {
+        .search {
+          color: #fff !important;
+          cursor: pointer;
+        }
       }
     }
 
@@ -285,8 +315,8 @@
     }
 
     .userImg {
-      height: 48px;
-      width: 48px;
+      height: 28px;
+      width: 28px;
       margin: 0 20px;
     }
   }
@@ -294,16 +324,25 @@
   &:hover,
   &.showBox,
   &.disOpacity {
-    background-color: #fff;
+    background-color: #1f2a3e;
 
     .left {
+      font-family: PingFang SC Regular;
+      font-size: 14px;
+      font-weight: normal;
+      line-height: 20px;
+      letter-spacing: 0px;
+      color: #ffffff;
       .title {
-        color: #3d3d3d;
+        // color: #3d3d3d;
         font-weight: 700;
       }
 
       .label {
-        color: #3d3d3d;
+        // color: #3d3d3d;
+        &:hover {
+          color: #0065ff;
+        }
       }
     }
     .right {
@@ -332,10 +371,15 @@
   &.showBox .right .el-input {
     position: absolute;
     z-index: 4;
-    top: 0;
-    right: 158px;
+    top: -7px;
+    right: 88px;
     width: 300px;
     background-color: #fff;
+
+    &.Unlogin {
+      right: 158px;
+    }
+
     ::v-deep input {
       width: 300px;
       background-color: #fff;
@@ -353,12 +397,17 @@
   box-sizing: border-box;
   position: absolute;
   top: 62px;
-  right: 158px;
+  right: 88px;
   padding: 12px 20px 8px 20px;
   width: 300px;
   background-color: #fff;
   border-top: 1px solid rgb(204, 204, 204);
   z-index: 4;
+
+  &.Unlogin {
+    top: 52px;
+    right: 158px;
+  }
 
   .hotKey,
   .historyKey {
@@ -402,12 +451,12 @@
 .userBox {
   box-sizing: border-box;
   position: absolute;
-  z-index: 3;
+  z-index: 10;
   right: 20px;
   top: 64px;
   padding: 0 20px;
   width: 240px;
-  height: 427px;
+  height: 327px;
   background-color: #fff;
   box-shadow: 0px 4px 12px rgba(96, 100, 106, 0.12);
   border-radius: 4px;
@@ -419,7 +468,7 @@
   }
 
   ul {
-    height: 300px;
+    height: 200px;
     border-top: 1px solid #e9ebee;
     border-bottom: 1px solid #e9ebee;
 
@@ -461,8 +510,12 @@
   .logOut {
     margin-top: 20px;
     font-size: 16px;
-    color: #0065ff;
+    color: #3d3d3d;
     cursor: pointer;
+
+    &:hover {
+      color: #0065ff;
+    }
   }
 }
-</style>
\ No newline at end of file
+</style>

--
Gitblit v1.8.0