web-test/src/layout/live/head.vue

<template>
  <div id="heads">
    <div class="w_0100">
      <div class="superbanner">
        <img :src="top_bg" />
      </div>
      <div class="supertop">
        <div class="w_1200">
          <p>
            欢迎来到吉林省计算中心科技平台
          </p>
          <p v-if="user && user.uid">
            {{ user.name }}
          </p>
          <p>
            <span v-if="user && user.name">{{ user.name }}</span>
            <button type="button" class="logininfo">登录</button>
            <button type="button" class="logininfo">注册</button>
          </p>
        </div>
      </div>
      <div class="superlogo">
        <div class="w_1200">
          <a href="home">
            <img :src="logo" />
            <span>
              吉林省计算中心科技平台
            </span>
          </a>
        </div>
      </div>
      <div class="supermenu">
        <div class="w_1200">
          <div class="info">
            <ul>
              <!-- <li :class="isTab('index') ? 'active' : ''">
                <a @click="turnTo('home')" target="">首页</a>
              </li> -->
              <li :class="isTab('hallList') ? 'active' : ''">
                <a @click="turnTo('hallList')" target="">直播大厅</a>
              </li>
              <li :class="isTab('market') ? 'active' : ''">
                <a @click="turnTo('market')" target="">科技超市</a>
              </li>
              <li :class="isTab('service') ? 'active' : ''">
                <a @click="fuwu()" target="">创新服务</a>
              </li>
              <li :class="isTab('dynamic') ? 'active' : ''">
                <a @click="turnTo('dynamic')" target="">动态监测</a>
              </li>
              <li :class="isTab('technical') ? 'active' : ''">
                <a @click="turnTo('technical')" target="">技术培训</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'heads',
  props: {},
  components: {},
  data: () => {
    return {
      top_bg: require('@/assets/live/top_bg.png'),
      logo: require('@/assets/live/logo.png'),
    };
  },
  created() {},
  methods: {
    fuwu() {
      this.$router.push({ path: '/live/service' });
    },
    zhibo() {
      this.$router.push({ path: '/technical/zhibolist' });
    },
    turnTo(type) {
      if (type == 'index') {
        console.log('首页未出');
      } else if (type == 'hall_index') this.$router.push({ path: '/live/hall/index' });
      else this.$router.push({ path: `/${type}/index` });
    },
    isTab(type) {
      if (type == 'index') return this.$route.path.includes('/live/index');
      else return this.$route.path.includes(`/${type}`);
    },
  },
  computed: {
    ...mapState(['user']),
  },
};
</script>

<style lang="less" scoped>
@import '~@/style/style.css';
.logininfo {
  font-size: 20px;
  margin: 0 0 0 5px;
}
</style>