fuzhou_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.png`)"
          alt=""
        />
        <img
          class="i_logo"
          @click="gotoHome"
          :src="require('@/assets/images/icon/logo.png')"
          alt=""
        />
      </div>
      <span @click="gotoHome">92403部队</span>
    </div>

    <div class="nav-right">
      <div class="r-top">
        <div class="date" 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>
            <div>
              <h3 class="primaryColor">{{userInfo.nickName}}</h3>
              <img :src="require(`@/assets/images/xinjiang/junxian/${userInfo.level+1}_l.png`)" alt="">
              <div>
                <span>等级</span>
                <span>{{userInfo.level+1}}级</span>
              </div>
              <div>
                <span>积分点</span>
                <span>{{userInfo.level+1}}分</span>
              </div>
              <div>
                <span>在线时长</span>
                <span>{{Math.floor(userInfo.onlineTime / 60 / 60 *100) / 100}}小时</span>
              </div>
              <ul>
                <li @click="$router.push({path:'/userinfo'})">个人设置</li>
                <li @click="$router.push({path:'/modify'})">修改密码</li>
                <li @click="logout">登出</li>
              </ul>
            </div>
            
          </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: "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: 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;
      width: 168px;
      .logo_bg {
        z-index: -1;
        position: absolute;
        top: -21px;
        left: 0;
        width: 100%;
      }
      .i_logo {
        text-align: center;
        cursor: pointer;
        width: 80%;
      }
    }
    > 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: 20px;
          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: 86px;
          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: 44px;
          }
          >span{
            display: inline-block;
            margin-left: 6px;
            line-height: 60px;
            height: 60px;
          }
          >div{
            position: absolute;
            top: 60px;
            padding: 32px 24px;
            right: 0px;
            display:none;
            z-index: 999;
            min-width: 350px;
            background-color: rgba(238, 238, 237, 0.9);
            text-align: left;
            cursor: auto;
            >div{
              display:flex;
              justify-content: space-between;
              align-items: center;
              height: 40px;
              line-height: 40px;
              >span{
                &:first-of-type{
                  color: #999!important;
                }
              }
            }
            >h3{
              font-size: 20px;
            }
            >img{
              width: 210px;
              margin: 12px 0;
            }
            >ul{
              z-index: 999;
              margin-top: 70px;
              text-align: right;
              >li{
                cursor: pointer;
                display: inline-block;
                margin-left: 18px;
                color: #999;
              }
            }
          }
          
          &:hover{
            >div{
              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>