xinjiang_army/web/src/views/layout/header.vue

<template>
  <div class="header primary">
    <div class="logo">
      <div>
        <img
          class="logo_bg"
          :src="require(`@/assets/images/xinjiang/logobg_${theme}.png`)"
          alt=""
        />
        <img
          class="i_logo"
          @click="gotoHome"
          :src="require('@/assets/images/icon/logo.png')"
          alt=""
        />
      </div>
      <span @click="gotoHome"
        >中国人民武装警察部队<br />新疆生产建设兵团总队史馆</span
      >
    </div>

    <div class="nav-right">
      <div class="r-top">
        <div class="date primaryTxt" v-html="date"></div>
        <div class="colors">
          <span>主题色调</span>
          <ul>
            <li
              @click="changeColor(item.id)"
              v-for="(item, i) in colors"
              :key="i"
            >
              <i :style="{ background: item.color }">
                <i v-if="item.id == theme" :style="{ background: item.active }"></i>
              </i>
              <span :style="{color:item.id == theme?item.color:''}">{{ item.name }}</span>
            </li>
          </ul>
        </div>
        <a href="/backstage/index.html" target="_blank" class="backlink">后台管理</a>
      </div>
      <div class="line subBgColor"></div>
      <div class="r-bottom">
        <ul class="navs">
          <li
            @click="navigateTo(item)"
            :class="{ navActive: item.id === activeIdx }"
            v-for="(item, i) in navs"
            :key="i"
          >
            <span>{{ item.name }}</span>
            <img
              v-if="item.id === activeIdx"
              :src="require(`@/assets/images/xinjiang/star_${theme}.png`)"
            />
          </li>
        </ul>
        <div class="btm-right">
          <div class="login" @click="$bus.$emit('showLogin',true)" v-if="!userInfo.nickName">
            <img :src="require(`@/assets/images/xinjiang/userselect_${theme}.png`)" alt="">
          </div>
          <div class="nickname primaryTxt" v-else>
            <img :src="require(`@/assets/images/xinjiang/usericon_${theme}.png`)" alt="">
            <span>{{userInfo.nickName}}</span>
            <ul>
              <li class="pHover" @click="$router.push({path:'/userinfo'})">个人设置</li>
              <li class="pHover" @click="$router.push({path:'/modify'})">修改密码</li>
              <li @click="logout" class="pHover">登出</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

import { formatDate } from "@/config/utils.js";

import { getUserInfo,logout } from "@/config/api";


const navs = [
  {
    name: "数字史馆",
    link: "/",
    id: 1,
  },
  {
    name: "精品典藏",
    link: "/collection",
    id: 2,
  },
  {
    name: "纪念祭扫",
    link: "/spirit",
    id: 3,
  },
  {
    name: "学习园地",
    link: "/dynamic/list/info/none",
    id: 4,
  },
  {
    name: "我要留言",
    link: "/message",
    id: 5,
  },
];


const colors = [
  {
    name: "基因红",
    id: "jiyinhong",
    color: "#D32424",
    active:'#E4AD64'
  },
  {
    name: "橄榄绿",
    id: "ganlanlv",
    color: "#757034",
    active:'#DDDE7A'
  },
  {
    name: "胡杨金",
    id: "huyangjin",
    color: "#EBA348",
    active:'#A64A17'
  }
];


export default {
  data() {
    return {
      navs,
      colors,
      keyword: "",
      date: "",
      activeIdx: this.$route.meta.id
    };
  },
  computed: {
    ...mapState({
      theme: (state) => state.common.theme,
    })
  },
  watch: {
    "$route.meta.id": function(newVal) {
      this.activeIdx = newVal;
    },
  },
  methods: {
    gotoHome() {
      if (this.$route.path == "/") {
        this.$bus.$emit("backtotop");
      } else {
        this.$router.push({ path: "/" });
      }
    },
    getUserInfo() {
      let userId = window.localStorage.getItem("webuserId");
      let token = window.localStorage.getItem("webtoken");

      if (!userId||!token) return;
      getUserInfo({id:userId},res=>{
        this.$store.dispatch("setUserInfo", res.data);
        this.$refs.ifr.contentWindow.postMessage({
            source: "userInfo",
            data:res.data,
        },'*')
      })
    },
    submitLogout() {
      logout(()=>{
        window.localStorage.setItem("webtoken", "");
        window.localStorage.setItem("webuserInfo", "");
        window.localStorage.setItem("webuserId", "");
        this.$store.dispatch("setUserInfo", {});
        window.location.reload();
      })
    },
    logout() {
      let res = window.confirm("是否退出登录?");
      res && this.submitLogout();
    },
    changeColor(id) {
      this.$store.dispatch("changeTheme", id);
      document.getElementById("app").className = "theme" + id;
    },
    navigateTo(item) {
      this.activeIdx = item.id;
      this.$router.push({
        path:item.link
      })
    },
  },
  mounted() {
    this.date = formatDate(new Date());
    this.getUserInfo();
     this.$bus.$on("logout", (data) => {
      this.showLogin = data;
      this.submitLogout()
    });
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
  font-size: 0;
  padding-left: 30px;
  z-index: 99999;
  position: fixed;
  width: 100%;
  height: 100px;
  top: 0;
  left: 0;
  .logo {
    flex: 2;
    display: flex;
    text-align: center;
    justify-content: flex-start;
    align-items: center;
    font-weight: bold;
    font-size: 0;
    height: 100%;
    > div {
      position: relative;
      text-align: center;
      min-width: 118px;
      .logo_bg {
        z-index: -1;
        position: absolute;
        top: -11px;
        width: 100%;
        left: 0;
      }
      .i_logo {
        text-align: center;
        cursor: pointer;
      }
    }
    > span {
      font-size: 24px;
      text-align: left;
      letter-spacing: 2px;
      cursor: pointer;
    }
  }

  .nav-right {
    flex: 4;
    position: relative;
    top: 0;
    height: 100%;
    .r-top {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 8px 50px;
      font-size: 14px;
      .date {
        margin-right: 56px;
      }
      .colors {
        position: relative;
        min-width: 80px;
        margin-right: 36px;
        > span {
          padding-right: 20px;
          cursor: pointer;
          &::after {
            position: absolute;
            right: 2px;
            top: 50%;
            transform: translateY(-50%);
            content: "";
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid #fff;
          }
        }
        ul {
          display: none;
          text-align: center;
          width: 120%;
          position: absolute;
          background: #fff;
          color: #9e9e9e;
          font-size: 14px;
          font-weight: normal;
          top: 22px;
          right: 0;
          z-index: 99;
          > li {
            text-align: left;
            padding-left: 10px;
            line-height: 2;
            font-size: 16px;
            cursor: pointer;
            >i {
              width: 14px;
              height: 14px;
              border-radius: 50%;
              display: inline-block;
              position: relative;
              >i{
                position: absolute;
                z-index: 99;
                width: 6px;
                height: 6px;
                display: inline-block;
                border-radius: 50%;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
              }
            }
            span {
              margin-left: 10px;
            }
          }
        }
        &:hover {
          ul {
            display: block;
          }
        }
      }
      .backlink{
        cursor: pointer;
        color: #fff;
      }
    }

    .r-bottom {
      flex: 4;
      position: relative;
      .navs {
        width: 100%;
        display: flex;
        min-width: 800px;
        justify-content: flex-start;
        align-items: center;
        font-size: 18px;
        height: 62px;
        line-height: 62px;
        box-sizing: border-box;
        >li {
          position: relative;
          cursor: pointer;
          height: 62px;
          line-height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 0 20px;
          margin-right: 40px;
          img {
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;

          }
          span {
            display: block;
            font-size: 18px;
            margin-top: -8px;
          }
          .child-nav {
            display: none;
          }
          &:hover {
            .child-nav {
              width: calc(100% - 40px);
              display: block;
              position: absolute;
              background: #fff;
              color: #9e9e9e;
              font-size: 14px;
              font-weight: normal;
              top: 56px;
              left: 50%;
              transform: translateX(-50%);
              z-index: 99;
              li {
                line-height: 2.5;
                height: auto;
                padding: 0;
                margin: 0;
              }
            }
          }
        }
      }
      .btm-right{
        position: absolute;        
        top: 50%;
        right: 66px;
        transform: translateY(-50%);
        .nickname{
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          cursor: pointer;
          >img{
            width: 36px;
          }
          >span{
            display: inline-block;
            margin-left: 6px;
          }
          >ul{
            position: absolute;
            top: 0;
            z-index: 999;
            display: none;
            padding-top: 48px;
            >li{
              width: 100%;
              min-width: 130px;
              line-height: 50px;
              padding: 0 10px;
              height: 50px;
              background-color: #fff;
              color: #333333;
            }
          }
          &:hover{
            >ul{
              display: block;
            }
          }
        }
        .login{
          >img{
            cursor: pointer;
            width: 36px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1700px) {
  .header {
    .navs {
      min-width: 600px;
      > li {
        padding: 0 10px;
      }
    }
    .right {
      .colors {
        margin-right: 0;
      }
    }
  }
}
</style>