chuanshan_static/src/views/layout/header.vue

<template>
  <div class="header primary">
    <div class="h-content">
      <div class="logo">
        <span @click="gotoHome">川陕苏区税收文物陈列展</span>
      </div>

      <ul class="navs">
        <li
          @click="navigateTo(item)"
          :class="{ navActive: item.id === activeIdx }"
          v-for="(item, i) in navs"
          :key="i"
        >
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

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

const navs = [
  {
    name: "首页",
    link: { path: "/" },
    id: 1,
  },
  {
    name: "三维场景",
    link: { path: "/digital" },
    id: 2,
  },
  {
    name: "藏品鉴赏",
    link: { name: "collection", params: { type: 0 } },
    id: 3,
  },
  {
    name: "资料文库",
    link: { path: "/spirit" },
    id: 4,
  },
  {
    name: "影音内容",
    link: { path: "/dynamic" },
    id: 5,
  },
];

const navsId = {
  home: 1,
  dynamic: 2,
  spirit: 3,
  collection: 4,
  digital: 5,
  message: 6,
};

const colors = [
  {
    name: "酒红",
    id: "juhong",
    color: "#b9412e",
  },
  {
    name: "橄榄绿",
    id: "ganlanlv",
    color: "#548550",
  },
  {
    name: "暗黄",
    id: "anhuang",
    color: "#c48f48",
  },
  {
    name: "天蓝",
    id: "tianlan",
    color: "#09bce1",
  },
];

export default {
  data() {
    return {
      navs,
      colors,
      showSearch: false,
      keyword: "",
      date: "",
      activeIdx: this.$route.meta.id,
    };
  },
  computed: {
    // activeIdx: {
    //   get: function () {
    //     return this.$route.meta.id
    //   },
    //   set: function () {
    //   }
    // },
    userName() {
      let condition = window.localStorage.getItem("webuserInfo");
      let userInfo =
        (condition &&
          condition != "undefined" &&
          JSON.parse(window.localStorage.getItem("webuserInfo"))) ||
        "";
      return userInfo.userName;
    },
    ...mapState({
      theme: (state) => state.common.theme,
    }),
  },
  watch: {
    "$route.meta.id": function(newVal) {
      this.activeIdx = newVal;
    },
    "$route.path": function() {
      this.showSearch = false;
    },
    showSearch() {
      this.keyword = "";
    },
  },
  methods: {
    gotoHome() {
      if (this.$route.path == "/") {
        this.$bus.$emit("backtotop");
      } else {
        this.$router.push({ path: "/" });
      }
    },

    navigateTo(item) {
      this.$router.push(item.link);
      this.activeIdx = item.id;
    },
  },
  mounted() {
    this.$bus.$on("activeId", (data) => {
      this.activeIdx = navsId[data];
    });
  },
};
</script>

<style lang="less" scoped>
.header {
  color: #fff;
  box-shadow: 0 0.08rem 0.42rem rgba(0, 0, 0, 0.8);
  font-size: 0;
  padding: 0;
  z-index: 99999;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  .h-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    .logo {
      flex: 1;
      display: flex;
      text-align: center;
      justify-content: flex-start;
      align-items: center;
      font-weight: bold;
      letter-spacing: 0.08rem;
      > img {
        cursor: pointer;
      }
      > span {
        font-size: 1.75rem;
        cursor: pointer;
      }
    }
    .navs {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 3.4375rem;
      line-height: 3.4375rem;
      box-sizing: border-box;
      li {
        position: relative;
        cursor: pointer;
        height: 3.4375rem;
        line-height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 10px;
        width: 20%;
        img {
          margin-top: 0.5rem;
          width: 1.38rem;
        }
        span {
          display: block;
          font-size: .875rem;
        }
        .child-nav {
          display: none;
        }
        &:hover {
          .child-nav {
            width: calc(100% - 1.67rem);
            display: block;
            position: absolute;
            background: #fff;
            color: #9e9e9e;
            font-size: 0.58rem;
            font-weight: normal;
            top: 2.33rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 99;
            li {
              line-height: 2.5;
              height: auto;
              padding: 0;
              margin: 0;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 70.83rem) {
  .header {
    .h-content {
      width: 90%;
    }
    .navs {
      min-width: 25rem;
      > li {
        padding: 0 0.42rem;
      }
    }
    .right {
      .colors {
        margin-right: 0;
      }
    }
  }
}
</style>