QZD_New/src/views/layout/header.vue

<template>
  <div class="header primary">
    <div class="logo">
      <div>
        <img class="logo_bg" :src="require(`@/assets/images/icon/logo_dec.png`)" alt="" />
        <img class="i_logo" @click="gotoHome" :src="require('@/assets/images/icon/logo.png')" alt="" />
      </div>
      <span @click="gotoHome">武警北京市总队执勤第十四支队数字史馆</span>
    </div>

    <div class="nav-right">
      <ul class="navs">
        <li @click="navigateTo(item)" :class="{ navActive: item.id === activeIdx }" v-for="(item, i) in navs" :key="i">
          <img v-if="item.id === activeIdx" :src="require(`@/assets/images/xinjiang/qiji.png`)" />
          <span>{{ item.name }}</span>
          <div class="line"></div>
        </li>
      </ul>
    </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: "/honor",
    id: 2,
  },
  {
    name: "精品典藏",
    link: "/collection",
    id: 3,
  },
  {
    name: "我要留言",
    link: "/message",
    id: 4,
  },
];

const colors = [
  {
    name: "海军蓝",
    id: "huyangjin",
    color: "#0194DD",
    active: "#1E4786",
  },
  {
    name: "基因红",
    id: "jiyinhong",
    color: "#CB0000",
    active: "#E4AD64",
  },
  {
    name: "橄榄绿",
    id: "ganlanlv",
    color: "#757034",
    active: "#CCC460",
  },
];

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 &&
          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();
    });
    // window.onunload = ()=>{
    //   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: 80px;
  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;
      width: 100px;
      .logo_bg {
        z-index: -1;
        position: absolute;
        top: -6px;
        left: 0;
        width: 100%;
      }
      .i_logo {
        text-align: center;
        cursor: pointer;
        width: 74%;
      }
    }
    > span {
      font-size: 24px;
      text-align: left;
      letter-spacing: 2px;
      cursor: pointer;
    }
  }

  .nav-right {
    display: flex;
    flex: 4;
    padding: 0 50px;
    height: 100%;
    align-items: center;
    justify-content: space-between;

    .navs {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 18px;
      height: 80px;
      line-height: 80px;
      box-sizing: border-box;
      > li {
        position: relative;
        cursor: pointer;
        height: 100%;
        line-height: 100%;
        width: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 20px;
        margin-right: 20px;
        img {
          width: 40px;
          margin-right: 10px;
          position: absolute;
          left: 14px;
          top: 50%;
          transform: translateY(-50%);
        }
        span {
          display: inline-block;
          font-size: 18px;
          min-width: 140px;
          padding-left: 50px;
        }
        
      }
    }
  }
}

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