From 17792a8900da5a2dbdc32c1dd865a92c027a1ca6 Mon Sep 17 00:00:00 2001
From: ColorWhiteDeveloper <2632970487@qq.com>
Date: 星期一, 19 九月 2022 11:02:50 +0800
Subject: [PATCH] 系统框架重新搭建

---
 src/views/layout/components/Header/index.vue |  164 +++++++++++++++++++++++++++++++++++++++++++-----------
 1 files changed, 130 insertions(+), 34 deletions(-)

diff --git a/src/views/layout/components/Header/index.vue b/src/views/layout/components/Header/index.vue
index 32a4177..57e97b0 100644
--- a/src/views/layout/components/Header/index.vue
+++ b/src/views/layout/components/Header/index.vue
@@ -2,83 +2,179 @@
   <div>
     <!-- 澶撮儴 -->
     <el-header>
+      <!-- 宸︿晶鑿滃崟 -->
+      <div class="menuLeft">
+        <div class="icon">
+          <img style="width:30px;height:30px"
+            src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__155eeb2ceaac89ec717869a050964a36.svg"
+            alt="">
+        </div>
+        <div class="systemName">閬傛槍鏅烘収鎵ф硶骞冲彴</div>
+        <ul class="headerNav">
+          <li v-for="(item,index) in nav" :key="item.name" :class="item.checked?'activeIndex':''" @click="handleChange(index)">{{item.name}}</li>
+        </ul>
+      </div>
       <!-- 鍙充晶鑿滃崟 -->
-      <div class="header-title">
-        <div class="bell">
-          <el-icon class="el-icon-bell" style="color: white"></el-icon>
+      <div class="menuRight">
+        <div class="search">
+          <el-input placeholder="璇疯緭鍏ユ悳绱㈠唴瀹�" suffix-icon="el-icon-search" v-model="search">
+          </el-input>
         </div>
-        <div class="userinfo">
-          <div class="avatar"></div>
-          <span class="username">admin</span>
+        <div class="userinfo userItem">
+          <div class="userIcon"></div>
+          <span class="username">admin<i class="el-icon-arrow-down" style="margin-left:3px"></i></span>
         </div>
-        <div class="loginout" @click="loginout">閫�鍑虹櫥褰�</div>
+        <div class="userMessage userBtn"><i class="el-icon-message-solid"></i></div>
+        <div class="userSetting userBtn"><i class="el-icon-s-tools"></i></div>
+        <div class="userLoginout userBtn" @click="loginout"><i class="el-icon-switch-button"></i></div>
       </div>
     </el-header>
-    <!-- <NavBar /> -->
   </div>
 </template>
 
 <script>
 import hamburger from "@/components/hamburger";
-// import NavBar from "../NavBar";
 export default {
   data() {
     return {
       opened: false,
+      search:'',
+      nav:[
+        {
+          name:'椹鹃┒鑸�',
+          checked:true,
+        },
+        {
+          name:'瑙嗛鏌ヨ',
+          checked:false,
+        },
+        {
+          name:'鎵ф硶绠＄悊',
+          checked:false,
+        }
+      ]
     };
   },
   components: {
     hamburger,
-    // NavBar,
   },
-  methods:{
-    loginout(){
-      this.$router.push({path:"/login"})
+  methods: {
+    loginout() {
+      this.$router.push({ path: "/login" })
+    },
+    handleChange(idx){
+      // 璁剧疆nav婵�娲�
+      this.nav.forEach((item,index)=>{
+        index==idx?item.checked = true:item.checked = false;
+      })
+      localStorage.setItem('navIdx',idx);
     }
-  }
+  },
+  mounted() {
+    const idx = localStorage.getItem("navIdx");
+    if(idx){
+      this.handleChange(idx);
+    }
+  },
 };
 </script>
 
-<style lang="scss" >
+<style lang="scss" scoped>
+* {
+  margin: 0;
+  padding: 0;
+}
+
 .el-header {
-  background-color: #071a38;
+  background-color: rgb(0, 121, 254);
   color: #333;
   text-align: center;
   line-height: 60px;
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: space-between;
   padding: 0;
-  .header-title {
-    display: flex;
-    align-items: center;
-    width: 280px;
-    justify-content: space-evenly;
-    .bell {
-      background-color: #00d1fa;
-      width: 25px;
-      height: 25px;
-      border-radius: 5px;
-      text-align: center;
-      line-height: 25px;
+  position: fixed;
+  width: 100%;
+  top: 0px;
+  z-index: 9999;
+  .menuLeft {
+    color: #fff;
+
+    .icon {
+      margin: 0 20px;
     }
-    .userinfo {
-      width: 100xp;
+
+    .systemName {
+      width: 185px;
+      font-weight: 650;
+      font-size: 18px;
+    }
+
+    ul,
+    .icon {
       display: flex;
       align-items: center;
-      .avatar {
-        width: 25px;
-        height: 25px;
+    }
+
+    li {
+      list-style: none;
+      width: 100px;
+      &:hover{
+        cursor: pointer;
+      }
+    }
+
+    .activeIndex {
+      height: 30px;
+      line-height: 30px;
+      border-radius: 20px;
+      background-color: #53a5ff;
+    }
+
+    display: flex;
+  }
+
+  .menuRight {
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    .search{
+      .el-input{
+        width: 200px;
+        margin: 0 10px;
+      }
+      .el-input__inner{
+        height: 30px;
+      }
+    }
+    .userItem{
+      width: 120px;
+    }
+    .userBtn{
+      width: 60px;
+      color: #fff;
+      font-size: 20px;
+    }
+    .userinfo {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .userIcon {
+        width: 20px;
+        height: 20px;
         border-radius: 50%;
         background-image: url("@/assets/imgs/user/default-avatar.jpg");
         background-size: cover;
       }
+
       .username {
         margin: 0 5px;
         color: #22d3eb;
         font-size: 14px;
       }
     }
+
     .loginout {
       color: #22d3eb;
       font-size: 14px;

--
Gitblit v1.8.0