proginn-frontend/components/header.vue

<template>
  <div id="proginn-header" :class="{ transparent: transparent }" :style="{ position: customPosition }">
    <div class="list">
      <div class="header-left">
        <a :href="baseUrl"  @click="cnzz('导航栏目','logo','')" class="nav-item logo">
          <img
            class="logo"
            :src="
              transparent
                ? WhiteLogo
                : 'https://stacdn.proginn.com/image/common/logo3@2x.png'
            "
          />
        </a>
        <a :href="baseUrl" @click="cnzz('导航栏目','首页','')" class="nav-item">首页</a>
        <a :href="baseUrl + '/users'" @click="cnzz('导航栏目','程序员','')" class="nav-item">程序员</a>

        <!-- <div class="dropDownArea">
          <el-button
            type="text"
            @click="cnzz('导航栏目','解决方案','')"
            class="dashboard-title"
            :class="{ on: selectedDropTitle === 0 }"
            @mouseover.native="handleTitleMouseover(0)"
            @mouseout.native="handleTitleMouseout(0)">解决方案<i class="el-icon-arrow-down"></i></el-button>
          <el-button
            type="text"
            class="dashboard-title"
            @click="cnzz('导航栏目','服务','')"
            :class="{ on: selectedDropTitle === 1 }"
            style="margin-left: 20px !important;"
            @mouseover.native="handleTitleMouseover(1)"
            @mouseout.native="handleTitleMouseout(1)">服务<i class="el-icon-arrow-down"></i></el-button>

          <div class="showDropDownArea">
            <div class="contentArea">
              <div class="leftSelect">
                <div
                  class="downCell"
                  v-for="(item, index) in dropDownData"
                  @mouseover="selectedDrop = index"
                  :key="index"
                  :class="{ choosed: index === selectedDrop }"
                >
                  <div class="cnName">{{ item.title }}</div>
                  <div class="enName">{{ item.titleEn }}</div>
                </div>
              </div>
              <div class="rightShow">
                <div
                  class="rightBigCell"
                  v-for="(big, bigIndex) in dropDownData"
                  :key="bigIndex"
                  :class="{ ok: selectedDrop === bigIndex }"
                >
                  <a
                    class="smallCell"
                    v-for="(small, smallIndex) in big.list"
                    @click="cnzz('导航栏目',small.title,'')"
                    :href="small.href"
                    :key="smallIndex"
                    :target="small.blank ? '_blank' : ''"
                  >
                    <div class="cellLeftIcon">
                      <img :src="small.icon" alt="" />
                    </div>
                    <div class="cellRightArea">
                      <div class="cellRightName">{{ small.title }}</div>
                      <div class="cellRightDesc">{{ small.desc }}</div>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div> -->

        <!-- 解决方案 -->
        <el-dropdown class="more-dropdown" placement="bottom-start">
          <el-button type="text" @click="cnzz('导航栏目','解决方案','')" class="dashboard-title">解决方案<i class="el-icon-arrow-down"></i></el-button>
          <el-dropdown-menu slot="dropdown" class="jiejuefangan-dropdown">
            <div class="deal-item" style="padidng-right:40px;">
              <div class="big-title">
                <img src="@/assets/img/header/new/jiejuefangan1@2x.png" alt="项目研发" >
                <span>项目研发</span>
              </div>
              <div>
                <el-dropdown-item>
                  <a class="more-item fuwu-item" @click="cnzz('导航栏目','需求梳理','')" :href="`${baseUrl}/fworks/p1980?from=global_publish`">
                    <span class="big">需求梳理</span>
                    <span class="small">规划落地您的想法</span>
                  </a>
                </el-dropdown-item>
                <el-dropdown-item>
                  <a class="more-item fuwu-item" @click="cnzz('导航栏目','项目管理','')" :href="`${baseUrl}/outsource/sitePublicity/28?from=top_nav`">
                    <span class="big">项目管理</span>
                    <span class="small">实现可视化价值交流</span>
                  </a>
                </el-dropdown-item>
                <el-dropdown-item>
                  <a class="more-item fuwu-item" @click="cnzz('导航栏目','整包开发','')" :href="`${baseUrl}/type/service?from=index`">
                    <span class="big">整包开发</span>
                    <span class="small">一站式软件开发</span>
                  </a>
                </el-dropdown-item>
              </div>
            </div>
            <div class="deal-item">
              <div class="big-title">
                <img src="@/assets/img/header/new/jiejuefangan2@2x.png" alt="招聘用人" >
                <span>招聘用人</span>
              </div>
              <div>
                <el-dropdown-item>
                  <a class="more-item fuwu-item" @click="cnzz('导航栏目','自由工作','')" :href="`${baseUrl}/cloud?from=top_nav`">
                    <span class="big">云端工作</span>
                    <span class="small">自由工作、远程工作</span>
                  </a>
                </el-dropdown-item>
                <el-dropdown-item>
                  <a class="more-item fuwu-item" @click="cnzz('导航栏目','人力外包','')" :href="`${baseUrl}/outsource/sitePublicity?from=top_nav`">
                    <span class="big">人力外包</span>
                    <span class="small">高效技术人力灵活用工</span>
                  </a>
                </el-dropdown-item>
              </div>
            </div>
          </el-dropdown-menu>
        </el-dropdown>

        <!-- 服务 -->
        <el-dropdown class="more-dropdown" placement="bottom-start">
          <el-button type="text" @click="cnzz('导航栏目','服务','')" class="dashboard-title">服务<i class="el-icon-arrow-down"></i></el-button>
          <el-dropdown-menu slot="dropdown" class="fuwu-dropdown">
            <el-dropdown-item>
              <a class="more-item fuwu-item" @click="cnzz('导航栏目','资源商城','')" :href="`${baseUrl}/works/?from=top_nav`">
                <img src="@/assets/img/header/new/fuwu1@2x.png" alt="资源商城" >
                <div class="text">
                  <span class="big">资源商城</span>
                  <span class="small">各种源码资源任您挑选</span>
                </div>
              </a>
            </el-dropdown-item>
            <el-dropdown-item>
              <a class="more-item fuwu-item" @click="cnzz('导航栏目','咨询服务','')" :href="`${baseUrl}/consult/?from=top_nav`">
                <img src="@/assets/img/header/new/fuwu2@2x.png" alt="咨询服务" >
                <div class="text">
                  <span class="big">咨询服务</span>
                  <span class="small">技术专家面对面咨询</span>
                </div>
              </a>
            </el-dropdown-item>
            <el-dropdown-item>
              <a class="more-item fuwu-item" @click="cnzz('导航栏目','客栈学院','')" :href="`${baseUrl}/learn/?from=top_nav`">
                <img src="@/assets/img/header/new/fuwu3@2x.png" alt="客栈学院" >
                <div class="text">
                  <span class="big">客栈学院</span>
                  <span class="small">程序员技术学院</span>
                </div>
              </a>
            </el-dropdown-item>
            <el-dropdown-item>
              <a class="more-item fuwu-item" @click="cnzz('导航栏目','开源充电','')" :href="`${baseUrl}/opensource/?from=top_nav`">
                <img src="@/assets/img/header/new/fuwu4@2x.png" alt="开源充电" >
                <div class="text">
                  <span class="big">开源充电</span>
                  <span class="small">程序员开源社区</span>
                </div>
              </a>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="header-right">
         <!-- 搜索 -->
        <div style="margin-right:14px;">
          <div style="position: relative;">
            <input
              class="input"
              autocomplete="off"
              placeholder="搜索您感兴趣的内容"
              v-model="keywork"
              @keyup.enter="clickInputEnter"
            />
            <i class="el-icon-search" @click="clickInputEnter"></i>
          </div>
          <div class="dropdown" style="display:none;"></div>
          <div class="dropdown" style="display:none;"></div>
        </div>

        <!-- 更多 -->
        <el-dropdown class="more-dropdown" placement="bottom-start" style="padding: 0 14px;">
          <el-button type="text" @click="cnzz('导航栏目','更多','')" class="dashboard-title">更多</el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <a class="more-item" @click="cnzz('导航栏目','开发屋','')" :href="kaifainUrl">
                <img :src="KaifainIcon" alt="" >
                <span>开发屋</span>
              </a>
            </el-dropdown-item>
            <el-dropdown-item>
              <a class="more-item"  @click="cnzz('导航栏目','技术圈','')" :href="jishuBaseUrl">
                <img :src="JishuinIcon" alt="" >
                <span>技术圈</span>
              </a>
            </el-dropdown-item>
            <el-dropdown-item>
              <a class="more-item" @click="cnzz('导航栏目','UniSMS','')" href="https://unisms.apistd.com/?source=pi.pc.nav" target="_blank">
                <img src="https://uni-cdn.oss-cn-hangzhou.aliyuncs.com/public/img/unisms-icon.png" alt="" >
                <span>UniSMS (合一短信)</span>
              </a>
            </el-dropdown-item>
            <el-dropdown-item>
              <a class="more-item"  @click="cnzz('导航栏目','YesDev','')"  href="https://www.yesdev.cn/" target="_blank">
                <img :src="YesDevIcon" alt="" >
                <span>YesDev</span>
              </a>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <template v-if="myInfo.nickname">
          <el-dropdown class="nav-dropdown" style="padding:0 14px;">
            <el-button type="text" @click="cnzz('导航栏目','工作台','')"  class="dashboard-title">
              <!-- <i class="el-icon-tickets"></i>工作台 -->
              <a class="workstation" :href="baseUrl + '/wo/work_todo'">
                <!-- <i class="el-icon-tickets"></i> -->
                工作台
              </a>
            </el-button>
            <!-- <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <a class="workstation"  @click="cnzz('导航栏目','待办任务','')" :href="baseUrl + '/wo/work_todo'">
                  <i class="el-icon-edit"></i>待办任务
                </a>
              </el-dropdown-item>
              <el-dropdown-item>
                <a class="workstation" @click="cnzz('导航栏目','整包项目','')" :href="baseUrl + '/wo/work_platform'">
                  <i class="el-icon-date"></i>整包项目
                </a>
              </el-dropdown-item>
              <el-dropdown-item>
                <a class="workstation" @click="cnzz('导航栏目','按月雇佣','')" :href="baseUrl + '/wo/work_hire'">
                  <i class="el-icon-news"></i>按月雇佣
                </a>
              </el-dropdown-item>
              <el-dropdown-item>
                <a class="workstation" :href="baseUrl + '/wo/work_cloud'">
                  <i class="el-icon-service"></i>我的远程
                </a>
              </el-dropdown-item>
            </el-dropdown-menu> -->
          </el-dropdown>
          <el-dropdown class="nav-dropdown" style="padding:0 14px;margin-right: 14px;">
            <el-button type="text" @click="cnzz('导航栏目','消息','')" class="message-box-title">
              <!-- <i class="el-icon-message"></i> -->
              消息
              <span
                v-if="messageCount.total > 0"
                class="message-count message-total"
                >{{ messageCount.total }}</span
              >
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                class="message-box"
                @click.native="clickMessages('/message/system')"
              >
                <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"
                @click.native="clickMessages('/message/project')"
              >
                <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"
                @click.native="clickMessages('/message/comment')"
              >
                <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"
                @click.native="clickMessages('/message/at')"
              >
                <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"
                @click.native="clickMessages('/message/plus')"
              >
                <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"
                @click.native="clickMessages('/message/coin')"
              >
                <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"
          >
            <div class="ref" slot="reference">
              <a class="nav-header" :href="baseUrl + '/wo/work_todo'">
                <img class="header-user" :src="myInfo.icon_url" />
                <img
                  v-if="myInfo.is_vip"
                  class="header-vip-icon"
                  :src="baseUrl + `/Public/image/h5/vip_icon${vipImage}.png`"
                  alt="vip-icon"
                />
              </a>
            </div>
            <div class="menu">
              <div v-if="myInfo.is_vip" class="vip-info vip-info-com">
                <div class="vip-info-top">
                  <img
                    class="vip-icon"
                    :src="baseUrl + `/Public/image/h5/vip_icon${vipImage}.png`"
                    alt="vip-icon"
                  />
                  <span class="vip-content">
                    <span class="vip-title" :class="vipTextClass">{{
                      vipText
                    }}</span>
                    <br />
                    <span class="vip-end-date">{{ vipInfo.endDate }}到期</span>
                  </span>
                </div>
                <div class="vip-arcs">
                  <a
                    class="vip-arc"
                    :class="vipTextClass"
                    :href="baseUrl + '/type/vip/' + vipType"
                    >查看权益</a
                  >
                  <a
                    class="vip-arc"
                    :class="vipTextClass"
                    :href="
                      baseUrl +
                        '/vip/pay?number=3&amp;product_id=' +
                        this.$store.state.userinfo.vip_type_id +
                        '&amp;next=/type/vip/' +
                        vipType
                    "
                    >立即续费</a
                  >
                </div>
              </div>
              <div class="vip-items">
                <!-- <a class="vip-item divider" :href="baseUrl + '/wo/work_platform'">
                  <i class="el-icon-date"></i>我的项目
                </a>
                <a class="vip-item" :href="baseUrl + '/wo/work_hire'">
                  <i class="el-icon-news"></i>我的雇佣
                </a>
                <a class="vip-item" :href="baseUrl + '/wo/work_cloud'">
                  <i class="el-icon-service"></i>我的远程
                </a> -->
                <a
                  class="vip-item divider"
                  @click="cnzz('我的','我的主页','')"
                  :href="baseUrl + `/wo/manage_homepage/`"
                >
                  <i class="el-icon-document"></i>我的主页
                </a>
                <a class="vip-item" @click="cnzz('我的','技术信用','')" :href="baseUrl + '/credit/pages'">
                  <i class="el-icon-credit"></i>技术信用
                </a>
                <a
                  class="vip-item"
                  @click="cnzz('我的','收藏中心','')"
                  :href="baseUrl + '/otherpage/user/collection'"
                >
                  <i class="el-icon-collection"></i>收藏中心
                </a>
                <a class="vip-item divider" @click="cnzz('我的','APP下载','')" :href="baseUrl + '/index/app'">
                  <i class="el-icon-download-app"></i>APP下载
                </a>
                <a class="vip-item" @click="clickQuit">
                  <i class="el-icon-back" style="margin: 0 10px !important;"></i
                  >退出
                </a>
              </div>
            </div>
          </el-popover>
        </template>
        <div v-else>
          <a
            class="account-ctrl"
            style="margin-left: 14px;"
            @click="cnzz('导航栏目','APP下载','')"
            :href="baseUrl + '/index/app'"
            >APP下载</a
          >
          <a class="account-ctrl" @click="cnzz('导航栏目','登录','')" style="margin-left: 26px;margin-right:26px;" :href="loginUrl">登录</a>
          <a
            class="account-ctrl"
            @click="cnzz('导航栏目','注册','')"
            :href="baseUrl + '/user/register'"
            >注册</a
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WhiteLogo from "@/assets/img/white_logo@2x.png";
import KaifainIcon from "@/assets/img/header/new/kaifain2@2x.png"
import JishuinIcon from "@/assets/img/header/new/jishuin@2x.png"
import YesDevIcon from "@/assets/img/header/new/yesdev@2x.png"
// import DropDownData from "./headers/dropDownData.js";

export default {
  props: ["transparent"],
  data() {
    return {
      KaifainIcon,
      JishuinIcon,
      YesDevIcon,
      baseUrl: "",
      jishuBaseUrl: "",
      kaifainUrl: "",
      jobUrl: "",
      // 搜索的关键词
      keywork: "",
      // 消息数量
      messageCount: {},
      WhiteLogo,
      loginUrl: "",
      // dropDownData: [],
      selectedDropTitle: '',
      selectedDrop: 0,
      showDropDown: false
    };
  },
  computed: {
    vipInfo() {
      let userinfo = this.$store.state.userinfo;
      return {
        id: userinfo.vip_type_id,
        endDate: userinfo.vip_end_date
      };
    },
    myInfo() {
      return this.$store.state.userinfo;
    },
    isCom() {
      return this.$store.state.userinfo.vip_type_id === "1";
    },
    vipImage() {
      switch (parseInt(this.$store.state.userinfo.vip_type_id)) {
        case 1:
          return "_com";
        case 2:
          return "";
        case 3:
          return "_premium";
        default:
          return "";
      }
    },
    vipType() {
      switch (parseInt(this.$store.state.userinfo.vip_type_id)) {
        case 1:
        case 3:
          return "enterprise";
          break;
        case 2:
          return "developer";
      }
    },
    vipTextClass() {
      switch (parseInt(this.$store.state.userinfo.vip_type_id)) {
        case 1:
          return "is-newly";
        case 2:
          return "is-dev";
        case 3:
          return "is-premium";
        default:
          return "";
      }
    },
    vipText() {
      switch (parseInt(this.$store.state.userinfo.vip_type_id)) {
        case 1:
          return "初创版会员";
        case 2:
          return "开发者会员";
        case 3:
          return "企业版会员";
        default:
          return "";
      }
    },
    customPosition () {
      let customPosition = 'relative'
      const routeName = this.$route.name

      if (routeName.indexOf('SeoConsultUser') > -1) {
        customPosition = 'fixed'
      }

      return customPosition
    }
  },
  mounted() {
    // console.error(this.app.co)
    if (this.myInfo && this.myInfo.nickname) {
      this.getMessageCount();
    }
    this.loginUrl =
      this.baseUrl +
      "/?loginbox=show&next=" +
      encodeURIComponent(location.href);

    this.keywork = this.$route.query.keyword;
    // console.log("this.keywork = ", this.key)
  },
  methods: {
    async clickQuit() {
      this.cnzz('我的','退出登录','');
      location.href = this.baseUrl + "/user/quit";
    },
    clickMessages(url) {
      location.href = this.baseUrl + url;
    },
    clickInputEnter() {
      let url = "";
      console.log(this.$route)
      if (this.$route.name === "job") {
        url = "/?keyword=" + this.keywork;
      } else if (this.$route.name==="user-searchTopic") {
        url = "/user/searchTopic?keyword=" + this.keywork;
      }
      console.log(url);
      this.cnzz('我的','放大镜搜索','');
      window.location.href = url;
    },
    async getMessageCount() {
      let res = await this.$axios.$get(
        "/api/message/getUnreadCount",
        {},
        { neverLogout: true }
      );
      if (res) {
        this.messageCount = res.data;
      }
    },
    handleTitleMouseover (index) {
      this.selectedDropTitle = index
      this.selectedDrop = index
    },
    handleTitleMouseout (index) {
      this.selectedDropTitle = ''
    }
  },
  created() {
    this.baseUrl = this.$store.state.domainConfig.siteUrl;
    this.jishuBaseUrl = this.$store.state.domainConfig.jishuinUrl;
    this.kaifainUrl = this.$store.state.domainConfig.kaifainUrl;
    this.jobUrl = this.$store.state.domainConfig.jobUrl;
  }
};
</script>

<style lang="scss" scoped>
.dropDownArea {
  position: relative;

  .showDropDownArea {
    display: none;
  }

  &:hover {
    .showDropDownArea {
      margin-top: 28px;
      padding-top: 32px;
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      background: transparent;
      transform: translateX(-30%);

      .contentArea {
        display: flex;
        box-sizing: content-box;
        width: 830px;
        height: 360px;
        background: #ffffff;
        border-radius: 6px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.06);

        .leftSelect {
          width: 180px;
          height: 100%;
          background: #f4f5f9;

          .downCell {
            height: 75px;
            box-sizing: border-box;
            padding-left: 30px;
            display: flex;
            justify-content: center;
            flex-direction: column;

            .cnName {
              height: 23px;
              font-size: 17px;
              text-align: left;
              color: #222222;
              line-height: 23px;
              font-weight: 600;
            }

            .enName {
              height: 17px;
              font-size: 12px;
              text-align: left;
              color: #999999;
              line-height: 17px;
            }

            &.choosed {
              background: #fff;
              position: relative;

              &:after {
                position: absolute;
                content: "";
                width: 3px;
                height: 31px;
                background: #308eff;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
              }
            }
          }
        }

        .rightShow {
          width: 650px;
          background: #fff;
          height: 100%;
          box-sizing: border-box;
          padding: 0 34px 0 23px;

          .rightBigCell {
            display: none;
            justify-content: space-between;
            width: 594px;
            height: auto;
            // box-shadow: 0px -1px 0px 0px #e2e8ee inset;
            padding-bottom: 14px;
            box-sizing: border-box;
            flex-wrap: wrap;

            &:last-child {
              box-shadow: none;
            }

            .smallCell {
              height: 110px;
              margin-top: 14px;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              width: 280px;
              cursor: pointer;
              box-sizing: border-box;
              padding-left: 40px;
              border-radius: 12px;

              .cellLeftIcon {
                flex-shrink: 0;
                width: 40px;
                height: 40px;

                img {
                  width: 40px;
                  height: 40px;
                }
              }

              .cellRightArea {
                margin-left: 11px;

                .cellRightName {
                  height: 24px;
                  font-size: 18px;
                  text-align: left;
                  color: #222222;
                  line-height: 24px;
                  font-weight: 600;
                }

                .cellRightDesc {
                  margin-top: 1px;
                  height: 19px;
                  font-size: 14px;
                  text-align: left;
                  color: #999999;
                  line-height: 19px;
                }
              }
            }

            &.ok {
              display: flex;
              .smallCell {
                background-color: rgb(238, 246, 254);
              }
            }
          }
        }
      }
    }
  }
}
.more-item {
  // padding: 4px 12px 4px 8px;
  display: flex;
  align-items: center;
  img {
    width: 24px;
    height: 24px;
    margin-right: 12px;
  }
  span {
    font-size: 15px;
    color: rgba(0, 0, 0, .85);
    font-weight: 500;
  }
}
.more-item.fuwu-item {
  img {
    width: 28px;
    height: 28px;
  }
  .text {
    display: flex;
    flex-direction: column;
  }
  .big {
    font-size: 15px;
    font-family: PingFangSC, PingFangSC-Semibold;
    font-weight: 600;
    color: #222;
  }
  .small {
    font-size: 12px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #666;
  }
}
.fuwu-dropdown {
  padding: 10px 0;
  // top: 60px;
  .el-dropdown-menu__item {
    line-height: 20px !important;
    padding: 12px 20px !important;
  }
}
.jiejuefangan-dropdown {
  display: flex;
  padding: 36px;
  .big-title {
    display: flex;
    align-items: center;
    padding-bottom: 12px;
    img {
      width: 28px;
      height: 28px;
    }
    span {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      color: #222;
      margin-left: 6px;
    }
  }
  .more-item.fuwu-item {
    flex-direction: column;
    align-items: inherit;
  }
  .el-dropdown-menu__item {
    line-height: 20px !important;
    padding: 10px 10px 10px 34px;
  }
}
</style>

<style scoped>
#proginn-header {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  background: white;
  z-index: 10;
}

.list {
  display: flex;
  justify-content: space-between;
  width: 1200px;
}
.header-left {
  display: flex;
  align-items: center;
}
.header-right {
  display: flex;
  align-items: center;
}

.nav-item {
  display: flex;
  height: 83px;
  align-items: center;
  font-size: 15px;
  color: #515151;
  /* padding: 0 15px; */
  box-sizing: border-box;
  padding: 0 14px;
}
.nav-item.logo {
  margin-right: 24px;
  padding: 0;
}

.nav-item:first-child {
  padding: 0;
}

.nav-item:nth-child(n + 2):hover {
  color: #1782d9;
  border-top: 5px solid transparent;
  border-bottom: 5px solid #1782d9;
}

.nav-dropdown,
.nav-popover {
  --imgWidth: 28px;
  height: 40px;
  display: flex;
  align-items: center;
}

.nav-popover > .ref {
  display: flex;
  align-items: center;
}

.nav-header {
  position: relative;
  width: var(--imgWidth);
  height: var(--imgWidth);
  margin-right: 5px;
}

.logo {
  width: 140px;
  height: auto;
}

.input {
  width: 234px;
  height: 40px;
  border-radius: 20px;
  background: #f6f6f6;
  padding: 0 40px;
  border: 1px solid #ebebeb;
  font-size: 13px;
}
.more-dropdown {
  padding: 0 14px;
}
.el-icon-search {
  position: absolute;
  top: 12px;
  right: 20px;
  color: grey;
  cursor: pointer;
}

.el-icon-credit {
  background: url("~@/assets/img/header/creditIconMine.png") no-repeat;
  background-size: cover;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin: 0 9px !important;
}

.el-icon-download-app {
  background: url("~@/assets/img/header/download@2x.png") no-repeat;
  background-size: cover;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin: 0 9px !important;
}

.el-icon-search::before {
  font-size: 14px;
  font-weight: 800;
}

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

.nickname {
  font-size: 15px;
}

.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;
  cursor: pointer;
}

.vip-info-com .is-dev {
  color: #cb9d53;
}

.vip-info-com .is-newly {
  color: #308eff;
}

.vip-info-com .is-premium {
  color: #00c469;
}

.workstation {
  color: #606266;
}

.account-ctrl {
  color: #606266;
  font-size: 15px;
}

#proginn-header a {
  text-decoration: none !important;
}

#proginn-header.transparent {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#proginn-header.transparent a {
  color: white;
}

.message-box-title,
.dashboard-title {
  color: #515151;
  font-size: 15px;
  font-weight: normal;
}

.dashboard-title.on {
  color: #1782d9;
}

#proginn-header.transparent .message-box-title,
#proginn-header.transparent .dashboard-title {
  color: white;
}

#proginn-header.transparent .nickname {
  color: white;
}
</style>