hyyfClient/src/components/HeaderElement.vue

<template>
  <div class="headers" :style="{backgroundColor: color}">
    <el-row :gutter="20" style="height: 100%">
      <el-col :span="1" style="height: 100%">
        <div class="logo"></div>
      </el-col>
      <el-col :span="4" style="height: 100%">
        <span class="title">数智牧场管理系统</span>
      </el-col>
      <el-col :span="7" :offset="12" style="height: 100%">
        <div class="flex">
          <div class="user" style="width: 250px;">
            <div>
              <el-switch
                  style="display: block"
                  v-model="$store.state.mode"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="多级导航"
                  inactive-text="折叠导航"
                  @change="changeMode">
              </el-switch>
            </div>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="user">
            <div>
              <i class="el-icon-user-solid" style="font-size: 28px"></i>
            </div>
            <div>
              <el-popover
                  placement="bottom"
                  width="400"
                  trigger="hover">
                  <div style="padding: 10px">
                    <div style="width: 100%;">
                      <span style="color: #BBBBBB;">账户信息</span>
                      <span class="user-right">账户设置</span>
                    </div>
                    <el-divider></el-divider>
                    <ul>
                      <li>职位： <span class="user-color">厂长</span></li>
                      <li>本次登录： <span class="user-color">厂长</span></li>
                      <li>本次登录： <span class="user-color">厂长</span></li>
                      <li>上次登录： <span class="user-color">厂长</span></li>
                    </ul>
                  </div>
                <span slot="reference">{{userName}}</span>
              </el-popover>
            </div>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="user">
            <div style="width: 100%; text-align: center">
              <i class="home" title="首页"></i>
            </div>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="user">
            <div style="width: 100%; text-align: center">
              <el-popover
                  placement="bottom"
                  width="400"
                  trigger="hover">
                <div class="color_flex">
                  <div v-for="item in colorList" :style="{backgroundColor: item.color}" :key="item.id" class="box" @click="cut(item.color)">
                    <span>点击换肤</span>
                  </div>
                </div>
                <i slot="reference" class="colour"></i>
              </el-popover>
            </div>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="user">
            <div style="width: 100%; text-align: center">
              <i class="guanbi" @click="logout" title="退出登录"></i>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { findUpdate } from '../utils/api';
export default {
  name: "HeaderElement",
  computed: {
    ...mapState(['color'])
  },
  data() {
    return {
      userName: localStorage.getItem('UserName'),
      colorList: [
        {
          id: 1,
          color: '#31C3A6'
        },
        {
          id: 2,
          color: '#3498DB'
        },
        {
          id: 3,
          color: '#ED6E4D'
        },
        {
          id: 4,
          color: '#FABB3D'
        },
        {
          id: 5,
          color: '#AA7AB3'
        },
        {
          id: 6,
          color: '#9AD0B9'
        },
        {
          id: 7,
          color: '#EA94BE'
        },
        {
          id: 8,
          color: '#C1374A'
        },
      ]
    }
  },
  methods: {
    ...mapActions(['setModeAsync', 'setColorAsync']),
    cut(data) {
      this.setColorAsync(data)
      let params = {
        id: localStorage.getItem('UserId'),
        color: data
      }
      findUpdate(params).then(res => {
        console.log(res)
      })
    },
    changeMode(val) {
      let params = {
        id: localStorage.getItem('UserId'),
        mode: val
      }
      findUpdate(params).then(res => {
        console.log(res)
      })
      this.setModeAsync(val)
    },
    logout() {
      localStorage.removeItem('UserName');
      localStorage.removeItem('accessToken');
      localStorage.removeItem('UserId');
      this.$router.replace('/login');
    }
  }
}
</script>

<style scoped>
p {
  margin: 0;
  display: inline-block;
  position: relative;
}
/deep/.el-row {
  margin: 0 !important;
}
/deep/.el-divider--vertical {
  margin: 0 15px;
}
/deep/.el-switch__label {
  color: white;
}
.headers {
  width: 100%;
  height: 50px;
}
.logo {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  background-image: url("../assets/logo.png");
  background-size: 100% 100%;
}
.title {
  font-size: 18px;
  font-weight: 700;
  line-height: 50px;
  color: #fff;
}
.flex {
  width: 100%;
  height: 50px;
  color: #fff;
  display: flex;
  align-items: center;
}
.user {
  width: 80px;
  height: 50px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.user-right {
  float: right;
  margin-right: 10px;
  cursor: pointer;
  color: #31C3A6;
}
li {
  margin-bottom: 10px;
  color: #BBBBBB;
}
.user-color {
  color: #000
}
.colour {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url("../assets/images/colour.png");
  background-size: 100% 100%;
}
.color_flex {
  width: 100%;
  height: 200px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.box {
  cursor: pointer;
  text-align: center;
  color: #fff;
  line-height: 80px;
}
.box:hover {
  content: '点击换肤';
}
.guanbi {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url("../assets/images/guanbi.png");
  background-size: 100% 100%;
}
.home {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: url("../assets/images/home.png");
  background-size: 100% 100%;
}
</style>