页面重构

ColorWhiteDeveloper

2022-09-19 0cf2375b6de4c9b65a10aa1c9d4cef9bb5936fe1

 src/views/layout/components/Header/index.vue

@@ -1,182 +1,76 @@
<template>
  <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="menuRight">
        <div class="search">
          <el-input placeholder="请输入搜索内容" suffix-icon="el-icon-search" v-model="search">
          </el-input>
      <div class="header-title">
        <div class="bell">
          <el-icon class="el-icon-bell" style="color: white"></el-icon>
        </div>
        <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 class="userinfo">
          <div class="avatar"></div>
          <span class="username">admin</span>
        </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 class="loginout" @click="loginout">退出登录</div>
      </div>
    </el-header>
  </div>
</template>

<script>
import hamburger from "@/components/hamburger";
export default {
  data() {
    return {
      opened: false,
      search:'',
      nav:[
        {
          name:'驾驶舱',
          checked:true,
        },
        {
          name:'视频查询',
          checked:false,
        },
        {
          name:'执法管理',
          checked:false,
        }
      ]
    };
  },
  components: {
    hamburger,
  },
  methods: {
    loginout() {
      // 清除token
      localStorage.clear();
      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);
      this.$router.push({path:"/login"})
    }
  },
  mounted() {
    const idx = localStorage.getItem("navIdx");
    if(idx){
      this.handleChange(idx);
    }
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

<style lang="scss" >
.el-header {
  background-color: rgb(0, 121, 254);
  background-color: #071a38;
  color: #333;
  text-align: center;
  line-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  justify-content: flex-end;
  padding: 0;
  position: fixed;
  width: 100%;
  top: 0px;
  z-index: 9999;
  .menuLeft {
    color: #fff;

    .icon {
      margin: 0 20px;
    }

    .systemName {
      width: 185px;
      font-weight: 650;
      font-size: 18px;
    }

    ul,
    .icon {
  .header-title {
      display: flex;
      align-items: center;
    }

    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;
    width: 280px;
    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;
    .bell {
      background-color: #00d1fa;
      width: 25px;
      height: 25px;
      border-radius: 5px;
      text-align: center;
      line-height: 25px;
    }
    .userinfo {
      width: 100xp;
      display: flex;
      align-items: center;
      justify-content: center;
      .userIcon {
        width: 20px;
        height: 20px;
      .avatar {
        width: 25px;
        height: 25px;
        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;