proginn-frontend/components/header.vue

<template>
  <section id="proginn-header">
    <section class="list">
      <a href="/" class="nav-item">
        <img class="logo" src="https://dev.test.proginn.com/Public/image/common/logo_new.png">
      </a>
      <a href="/" class="nav-item">首页</a>
      <a href="/cloud?from=top_nav" class="nav-item">云端工作</a>
      <a href="/users/" class="nav-item">程序员</a>
      <a href="/community" class="nav-item">技术圈</a>
      <section>
        <section style="position: relative;">
          <input class="input" autocomplete="off" placeholder="搜索您感兴趣的程序员" v-model="keywork" @keyup.enter="clickInputEnter">
          <i class="el-icon-search"></i>
        </section>
        <div class="dropdown" style="display:none;"></div>
        <div class="dropdown" style="display:none;"></div>
      </section>
      <el-dropdown class="nav-dropdown">
        <el-button type="text" style="color: #515151;">
          <i class="el-icon-tickets"></i>工作台
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <a href="/wo/work_todo"><i class="el-icon-edit"></i>我的待办</a>
          </el-dropdown-item>
          <el-dropdown-item>
            <a href="/wo/work_platform"><i class="el-icon-date"></i>我的项目</a>
          </el-dropdown-item>
          <el-dropdown-item>
            <a href="/wo/work_hire"><i class="el-icon-news"></i>我的雇佣</a>
          </el-dropdown-item>
          <el-dropdown-item>
            <a href="/wo/work_cloud"><i class="el-icon-service"></i>我的云端</a>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown class="nav-dropdown">
        <el-button type="text" class="message-box" style="color: #515151;">
          <i class="el-icon-message"></i>消息
          <span class="message-count message-total">{{messageCount.total}}</span>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item class='message-box'>
            <i class="circle blue"></i>系统消息
            <span v-if="messageCount.system" class="message-count">{{messageCount.system}}</span>
          </el-dropdown-item>
          <el-dropdown-item class='message-box'>
            <i class="circle orange"></i>工作通知
            <span v-if="messageCount.work" class="message-count">{{messageCount.work}}</span>
          </el-dropdown-item>
          <el-dropdown-item class='message-box'>
            <i class="circle red"></i>评论回复
            <span v-if="messageCount.reply" class="message-count">{{messageCount.reply}}</span>
          </el-dropdown-item>
          <el-dropdown-item class='message-box'>
            <i class="circle green"></i>@我的
            <span v-if="messageCount.at" class="message-count">{{messageCount.at}}</span>
          </el-dropdown-item>
          <el-dropdown-item class='message-box'>
            <i class="circle pink"></i>赞及其它
            <span v-if="messageCount.community_other" class="message-count">{{messageCount.community_other}}</span>
          </el-dropdown-item>
          <el-dropdown-item class='message-box'>
            <i class="circle yellow"></i>收支信息
            <span v-if="messageCount.balance" class="message-count">{{messageCount.balance}}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-popover class="nav-popover" placement="bottom" width="226" trigger="hover">
        <section class="ref" slot="reference">
          <a class="nav-header" href="/wo/work_todo">
            <img
              class="header-user"
              src="https://programmerinn.b0.upaiyun.com/useralbum/64168/icon641681476172013.jpg!mediumicon"
              alt="header"
            >
            <img
              class="header-vip-icon"
              src="https://dev.test.proginn.com/Public/image/h5/vip_icon_com.png?v=v1547884005"
              alt="vip-icon"
            >
          </a>
          <span class="nickname dib">yyyy</span>
        </section>
        <section class="menu">
          <section class="vip-info vip-info-com">
            <section class="vip-info-top">
              <img
                class="vip-icon"
                src="https://dev.test.proginn.com/Public/image/h5/vip_icon_com.png?v=v1547884005"
                alt="vip-icon"
              >
              <span class="vip-content">
                <span class="vip-title">企业会员</span>
                <br>
                <span class="vip-end-date">2022-08-01到期</span>
              </span>
            </section>
            <section class="vip-arcs">
              <a class="vip-arc" href="/type/vip">查看权益</a>
              <a class="vip-arc" href="/vip/pay?number=3&amp;product_id=1&amp;next=/type/vip">立即续费</a>
            </section>
          </section>
          <section class="vip-items">
            <a class="vip-item divider" href="/wo/work_platform">
              <i class="el-icon-date"></i>我的项目
            </a>
            <a class="vip-item" href="/wo/work_hire">
              <i class="el-icon-news"></i>我的雇佣
            </a>
            <a class="vip-item" href="/wo/work_cloud">
              <i class="el-icon-service"></i>我的云端
            </a>
            <a class="vip-item divider" href="/wo/64168">
              <i class="el-icon-document"></i>我的主页
            </a>
            <a class="vip-item" href="/index/app">
              <i class="el-icon-view"></i>关注微信
            </a>
            <a class="vip-item divider">
              <i class="el-icon-back"></i>退出
            </a>
          </section>
        </section>
      </el-popover>
    </section>
  </section>
</template>

<script>
export default {
  data() {
    return {
      // 搜索的关键词
      keywork: '',
      // 消息数量
      messageCount: {},
    }
  },
  mounted() {
    this.getMessageCount()
  },
  methods: {
    clickInputEnter() {
      this.$router.push({
        path: '/search',
        query: {
          keyword: this.keywork
        }
      })
    },
    async getMessageCount() {
      let res = await this.$get('/api/message/getUnreadCount')
      this.messageCount = res.data
    }
  }
}
</script>

<style scoped>
#proginn-header {
  display: flex;
  justify-content: center;
  width: 100%;
  background: white;
}
.list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 1000px;
}
.nav-item {
  display: flex;
  height: 80px;
  align-items: center;
  font-size: 15px;
  color: #515151;
}
.nav-dropdown,
.nav-popover {
  --imgWidth: 28px;
  height: 40px;
}
.nav-popover > .ref {
  display: flex;
  align-items: center;
}
.nav-header {
  position: relative;
  width: var(--imgWidth);
  height: var(--imgWidth);
  margin-right: 10px;
}
.logo {
  width: 120px;
  height: auto;
}
.input {
  width: 234px;
  height: 40px;
  border-radius: 20px;
  background: #f6f6f6;
  padding: 0 40px;
}

.el-icon-search {
  position: absolute;
  top: 12px;
  right: 20px;
  transform: scale(1.5);
  color: grey;
}

i {
  margin-right: 4px;
}

i.circle {
  display: inline-block;
  --width: 12px;
  width: var(--width);
  height: var(--width);
  border-radius: calc(var(--width) / 2);
}
i.blue {
  background: #3b83c0;
}
i.orange {
  background: #e07b53;
}
i.red {
  background: #d95c5c;
}
i.green {
  background: #5bbd72;
}
i.pink {
  background: #d9499a;
}
i.yellow {
  background: #f2c61f;
}
.message-box {
  position: relative;
  display: flex;
  align-items: center;
}
.message-count {
  color: white;
  margin-left: 4px;
  display: block;
  line-height: 18px;
  padding: 0 8px;
  border-radius: 9px;
  background: grey;
}
.message-count.message-total {
  position: absolute;
  top: 0px;
  right: -10px;
  background: #d95c5c;
}
span.other-icon {
  display: block;
  margin-left: 30px;
}
.vip-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 206px;
  height: 120px;
}
.vip-info-top {
  display: flex;
  width: 142px;
}
.vip-title {
  color: #cb9d53;
  font-size: 16px;
  line-height: 36px;
}
.vip-icon {
  width: 24px;
  height: 24px;
  margin: 10px 8px 0 0;
}
.vip-end-date {
  font-size: 12px;
  color: #999;
}
.vip-arcs {
  display: flex;
  justify-content: space-between;
  width: 142px;
  margin-top: 11px;
}
.vip-arc {
  flex: 1;
  font-size: 13px;
  color: #cb9d53;
  text-align: center;
}
.vip-arc:first-child {
  border-right: 1px solid rgba(245, 245, 245, 1);
}
.vip-info-com .vip-title {
  color: rgb(113, 177, 253);
}
.vip-info-com .vip-arc {
  color: rgb(113, 177, 253);
}
.header-user {
  width: var(--imgWidth);
  height: var(--imgWidth);
  border-radius: 20px;
}
.header-vip-icon {
  position: absolute;
  top: 16px;
  left: 18px;
  width: 16px;
  height: 16px;
}
.vip-items {
  display: flex;
  flex-direction: column;
}
.vip-item {
  line-height: 32px;
  color: #606266;
}
.vip-item > i {
  margin: 0 10px;
}
.divider {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  margin-top: 10px;
  padding-top: 10px;
}
</style>