FE_zhixinyun_website/src/components/Topbar.vue

<template>
  <div class="topbar">
    <!-- 大学logo -->
    <div>
      <img src="../assets/images/logo1.png" alt="" srcset="">
    </div>
    <!-- 标题导航 -->
    <ul class="clearfix">
      <li
        v-for="value in columnall"
        :key="value.id"
        @click="route(value.id, value.columnName)"
      >
        <span
          :class="{
            active:
              $route.path.indexOf('ChuanDa/' + value.id) > 0 ? true : false,
          }"
          >{{ value.columnName }}</span>
      </li>
    </ul>
    
    <div class="posit">
      <div class="line"></div>
      <div class="circle clearfix" @click="mange()">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
</template>

<script>
import { allColumn } from "@/apis/request.js";
export default {
  data() {
    return {
      columnall: [],//导航栏内容
    };
  },
  methods: {
    fun(a) {
      this.$router.push(a);
    },
    mange() {
      location.href = "http://121.37.12.51/mange/#/login";
    },
    route(id, name) {
      console.log(name);
      const { href } = this.$router.resolve({
        path: `/ChuanDa/` + id + "/leftmenu/0",
      });
      window.open(href, "_self");
      this.$store.state.columnmessage.id = id;
    },
  },
  computed: {},
  mounted() {
    allColumn().then((res) => {//获取导航栏
      this.columnall = res;
      this.columnall = this.columnall.filter((res) => {
        if (res.isShow == 0) {
          return res;
        }
      });
    });
  },
};
</script>

<style lang="less">
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  height: 50px;
  display: flex;
  position: relative;
  background: #fff;
  .posit {
    display: flex;
    right: 10px;
    width: 24px;
    justify-content: space-between;
  }
  .line {
    width: 1px;
    height: 30px;
    margin-top: 10px;
    background: rgba(0, 0, 0, 0.678);
  }
  img {
    height: 50px;
  }
  color: #000;
  // .clearfix::after {
  //   content: "";
  //   display: block;
  //   clear: both;
  //   height: 0;
  // }
  ul {
    width: 60%;
    height: 30px;
    font-size: 16px;
    line-height: 50px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  ul li {
    // float: left;
    list-style: none;
    text-align: center;
    cursor: pointer;
    span {
      display: inline-block;
      height: 30px;
      font-size: 18px;
      font-family: "Source Han Serif CN";
      color: rgba(0, 0, 0, 0.678);
    }
  }
  ul li:hover {
    span {
      color: #409eff;
    }
  }
  // ul li:first-child {
  //   margin-left: 160px;
  // }
  .circle {
    margin-top: 10px;
    width: 4px;
    height: 50px;
  }
  .circle:hover {
    cursor: pointer;
  }
  .circle > div {
    margin-top: 5px;
    height: 4px;
    width: 4px;
    background: rgba(0, 0, 0, 0.678);
    border-radius: 2px;
  }
  .active {
    color: #409eff;
  }
}
</style>