proginn-frontend/components/wx_header.vue

<template>
  <section class="wx-header" :class="appendClass">
    <img class="logo" src="https://stacdn.proginn.com/image/common/logo3@2x.png" alt="icon" @click="jumpTo">
    <el-dropdown class="nav-dropdown">
      <el-button class="text" type="text" style="font-size: 18px;">
        <i class="el-icon-tickets" style="width: 40px;"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>
          <a class="workstation text" href="https://www.proginn.com/cat/">
            <i class="el-icon-service"></i><span>程序员</span>
          </a>
        </el-dropdown-item>
        <el-dropdown-item>
          <a class="workstation text" href="https://jishuin.proginn.com/">
            <i class="el-icon-message"></i><span>技术圈</span>
          </a>
        </el-dropdown-item>
        <el-dropdown-item>
          <a class="workstation text" href="https://support.proginn.com/">
            <i class="el-icon-question"></i><span>帮助</span>
          </a>
        </el-dropdown-item>
        <el-dropdown-item>
          <a class="workstation text" href="https://inn.proginn.com/sites/index.html">
            <i class="el-icon-phone"></i><span>合作伙伴</span>
          </a>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </section>
</template>

<script>
export default {
  methods: {
    jumpTo() {
      location.href = this.$store.state.domainConfig.siteUrl
    }
  },
  computed: {
    appendClass () {
      let appendClass = ''
      const routeName = this.$route.name

      if (routeName.indexOf('SeoLearnList') > -1 ||
          routeName.indexOf('SeoConsultList') > -1) {
        appendClass = 'wx-header-custom-list'
      } else if (routeName.indexOf('SeoLearnDetail') > -1 ||
          routeName.indexOf('SeoConsultUser') > -1) {
        appendClass = 'wx-header-custom-detail'
      }

      return appendClass
    }
  }
}
</script>

<style scoped>
.wx-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 64px;
  padding: 0 20px;
  background: white;
}
.logo {
  width: auto;
  height: 32px;
}
.text, .text i {
  color: #333;
}
.text span {
  padding-left: 10px;
}
</style>