proginn-frontend/components/wx_header.vue

<template>
  <section class="wx-header">
    <img class="logo" src="https://stacdn.proginn.com/image/common/logo3@2x.png" alt="icon">
    <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/">
            <i class="el-icon-phone"></i><span>合作伙伴</span>
          </a>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </section>
</template>

<script>
export default {

}
</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>