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 + '/cat/'"
          @click="cnzz('导航栏目', '程序员', '')"
          class="nav-item"
        >程序员</a
        >

        <!-- 解决方案 -->
        <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/jiejuefangan2@2x.png"
                  alt="招聘用人"
                />
                <span>招聘用人</span>
              </div>
              <div>
                <el-dropdown-item>
                  <a
                    class="more-item fuwu-item"
                    @click="cnzz('导航栏目', '自由工作', '')"
                    :href="`${baseUrl}/b/cloud`"
                  >
                    <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/jiejuefangan1@2x.png"
                  alt="项目研发"
                />
                <span>项目研发</span>
              </div>
              <div>
                <el-dropdown-item>
                  <a
                    class="more-item fuwu-item"
                    @click="cnzz('导航栏目', '需求梳理', '')"
                    :href="`${baseUrl}/b/p1980`"
                  >
                    <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}/b/outsource`"
                  >
                    <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/jiejuefangan1@2x.png"
                  alt="云服务"
                />
                <span>云服务</span>
              </div>
              <div>
                <el-dropdown-item>
                  <a
                    class="more-item fuwu-item"
                    @click="cnzz('导航栏目', '需求梳理', '')"
                    :href="`https://unisms.apistd.com/`"
                  >
                    <span class="big">UniSMS</span>
                    <span class="small">合一短信&nbsp聚合API短信平台</span>
                  </a>
                </el-dropdown-item>
              </div>
            </div>
          </el-dropdown-menu>
        </el-dropdown>
        <a :href="baseUrl + '/works/'" class="nav-item">技术</a>
        <!--        <a target="_blank" href="https://unisms.apistd.com/" class="nav-item">合一短信</a>-->
        <!-- 搜索 -->
        <div class="btn_search" style="margin-left:40px;">
          <div style="position: relative;" class="">
            <input
              class="input"
              autocomplete="off"
              placeholder="搜索您感兴趣的内容"
              v-model="keywork"
              @keyup.enter="clickInputEnter"
            />
            <i class="el-icon-search" @click="clickInputEnter"></i>
            <span class="input-line"></span>
          </div>
          <div class="dropdown" style="display:none;"></div>
          <div class="dropdown" style="display:none;"></div>
        </div>
      </div>
      <div class="header-right">
        <!--

          发布需按钮显示逻辑
          1。未登录，需要显示
          2.企业身份：需要显示
          3.开发者身份：需要展示
         -->
        <div @click="goToCompanyHome" class="nav-button nav-button-type1">
          发布需求
        </div>
        <!--

          开发者入住按钮显示逻辑
          1。未登录，需要显示
          2.其余情况不显示
         -->
        <div
          @click="goToPersonalHome"
          v-if="!myInfo.uid"
          class="nav-button nav-button-type2"
        >
          开发者入驻
        </div>

        <template v-if="myInfo.nickname">
          <el-button
            type="text"
            style="padding-right: 30px"
            @click="cnzz('导航栏目', '工作台', '')"
            class="dashboard-title"
          >
            <a class="workstation" :href="baseUrl + '/wo/work_todo'">
              工作台
            </a>
          </el-button>

          <el-dropdown class="nav-dropdown" style="">
            <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" class="xiaoxi-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>

          <a
            class="account-change"
            style="margin-right:40px"
            :href="baseUrl + '/frontend/accountchange'"
          >切换身份</a
          >

          <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">
              <!-- 是否vip -->

              <template v-if="myInfo.is_vip">
                <!-- 企业vip -->
                <div
                  class="ma-vip-area"
                  :class='{
                    "ma-company-vip":vipType == "enterprise" ? true:false,
                    "ma-develop-vip":vipType == "developer"? true:false
                  }'
                >
                  <div class="ma-vip-title">
                    <img
                      v-if="vipType == 'enterprise'"
                      src="@/assets/img/header/company_vip.png"
                      class="ma-vip-icon"
                    />
                    <img
                      v-else
                      src="@/assets/img/header/develop_vip.png"
                      class="ma-vip-icon"
                    />
                    <span>{{vipText}}</span>
                  </div>
                  <div class="ma-vip-time">{{ vipInfo.endDate }}到期</div>
                  <div class="ma-vip-link">
                    <a :href="baseUrl + '/type/vip/' + vipType">查看权益</a>
                    <a
                      :href="
                        baseUrl +
                          '/vip/pay?number=3&amp;product_id=' +
                          this.$store.state.userinfo.vip_type_id +
                          '&amp;next=/type/vip/' +
                          vipType
                      "
                    >立即续费</a
                    >
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="ma-vip-area ma-not-vip">
                  <div class="ma-vip-title">
                    <img
                      src="@/assets/img/header/not_vip.png"
                      class="ma-vip-icon"
                    />
                    <span>{{isCompanyAccount ? '企业版会员':"开发者会员"}}</span>
                  </div>
                  <div class="ma-vip-apply">
                    <span>未开通,</span>
                    <a v-if="isCompanyAccount" :href="baseUrl + '/type/vip/enterprise'">立即开通</a>
                    <a v-else :href="baseUrl + '/type/vip/developer'">立即开通</a>
                  </div>
                </div>
              </template>

              <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 + '/b/credit'"
                >
                  <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-right:25px"
            @click="cnzz('导航栏目', 'APP下载', '')"
            :href="baseUrl + '/index/app'"
          >APP</a
          >
          <span class="account-ctrl" style="margin-right:37px;">
            <a class="account-ctrl" :href="loginUrl">登录</a>
            /
            <a class="account-ctrl" :href="baseUrl + '/user/register'">注册</a>
          </span>
        </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 DownloadIcon from "@/assets/img/header/new/download.png";
  // import DropDownData from "./headers/dropDownData.js";

  export default {
    props: ["transparent"],
    data() {
      return {
        KaifainIcon,
        JishuinIcon,
        YesDevIcon,
        DownloadIcon,
        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
        };
      },

      isPersonalAccount() {
        let userinfo = this.$store.state.userinfo;
        return userinfo.home_page_type == 2 ? true:false;
      },
      isCompanyAccount() {
        let userinfo = this.$store.state.userinfo;
        return userinfo.home_page_type == 1 ? true:false;
      },
      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: {
      goToCompanyHome() {
        // 点击发布需求
        // 如没登录，跳到登录页
        if (this.myInfo.nickname) {
          location.href = this.baseUrl + "/frontend/requirements";
        } else {
          location.href = this.baseUrl + "/type/service";
        }
      },
      goToPersonalHome() {
        // 点击开发者入驻
        // 如没登录，跳到登录页
        if (this.myInfo.nickname) {
        } else {
          location.href = this.loginUrl;
        }
      },
      async clickQuit() {
        this.cnzz("我的", "退出登录", "");
        location.href = this.baseUrl + "/user/quit";
      },
      clickMessages(url) {
        location.href = this.baseUrl + url;
      },
      clickInputEnter() {
        let url = "/search?keyword=" + this.keywork;
        console.log(this.$route);
        if (this.$route.name === "job") {
          url = "/search?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>
  @media only screen and (max-width: 1220px) {
    .btn_search {
      display: none;
    }
  }

  .header-left {
    padding-left: 15px;
  }

  .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, 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;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.01);
    .el-dropdown-menu__item {
      line-height: 20px !important;
      padding: 12px 20px !important;
    }
  }
  .gengduo-dropdown {
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.01);
  }
  .jiejuefangan-dropdown {
    display: flex;
    padding: 36px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.01);
    .deal-item{
      padding: 0 20px;
    }
    .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;
    }
  }
  .xiaoxi-dropdown {
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.01);
  }
</style>

<style scoped>
  #proginn-header {
    position: fixed !important;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    width: 100vw;
    height: 65px;
    background: white;
    z-index: 10;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .list {
    display: flex;
    justify-content: space-between;
    max-width: 1440px;
    width: 100%;
    min-width: 1050px;
  }
  .header-left {
    display: flex;
    align-items: center;
  }
  .header-right {
    display: flex;
    align-items: center;
  }

  .nav-item {
    display: flex;
    height: 100%;
    align-items: center;
    font-size: 14px;
    color: #515151;
    box-sizing: border-box;
    padding: 0 20px;

    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
  }
  .nav-item.logo {
    margin-right: 22px;
    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 {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    margin-right: 40px;
  }

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

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

  .logo {
    /* width: 126px; */
    /* height: auto; */
    height: 35px;
  }

  .input {
    width: 218px;
    height: 34px;
    background: #f7f8fa;
    border-radius: 4px;
    padding: 0 45px 0 16px;
    /* border: 1px solid #ebebeb; */
    font-size: 14px;
  }

  .input::-webkit-input-placeholder {
    color: #828c99;
  }
  .more-dropdown {
    padding: 0 20px;
  }
  .more-dropdown .dashboard-title {
    color: #515151;
  }
  .el-icon-search {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 11px;
    color: grey;
    cursor: pointer;
  }
  .input-line {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 39px;
    width: 1px;
    height: 12px;
    border: 1px solid #ebeced;
  }

  .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: -5px;
    right: -15px;
    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;
    width: 30px !important;
    max-width: 30px !important;
  }

  .header-vip-icon {
    position: absolute;
    top: 15px;
    left: 22px;
    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: #0b121a;
    font-size: 14px;
  }
  .account-change {
    color: #308eff;
    font-size: 14px;
  }

  #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: #0b121a;
    font-size: 14px;
    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;
  }

  .nav-button {
    width: 94px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
    font-family: PingFangSC-Regular, PingFang SC;
  }
  .nav-button-type1 {
    background: #308eff;
    border-radius: 2px;
    margin-right: 14px;
  }
  .nav-button-type2 {
    background: #ff7640;
    border-radius: 2px;
    margin-right: 45px;
  }

  .ma-v2-service {
    position: relative;
    left: -7px;
  }

  .ma-vip-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0 12px;
  }
  .ma-vip-title {
    display: flex;
    position: relative;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    align-items: center;
  }
  .ma-vip-icon {
    width: 24px;
    height: 24px;
    margin-right: 6px;
  }

  .ma-vip-time {
    font-size: 11px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #828c99;
    line-height: 16px;
    margin-top: 5px;
  }

  .ma-vip-link {
    margin-top: 14px;
    position: relative;
    display: flex;
    /* width: */
  }

  .ma-vip-link::before {
    content: "";
    position: absolute;
    height: 14px;
    width: 1px;
    background-color: #828c99;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scaleX(0.5);
  }
  .ma-vip-link a {
    display: inline-block;
    margin: 0 22px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 20px;
  }
  .ma-vip-apply {
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    /* color: #0B121A; */
    line-height: 20px;
    margin-top: 6px;
  a {
    color: #308eff;
  }
  }
  .ma-company-vip .ma-vip-title,
  .ma-company-vip a {
    color: #308eff;
  }

  .ma-develop-vip .ma-vip-title,
  .ma-develop-vip a {
    color: #ce9d31;
  }
  .ma-not-vip .ma-vip-title {
    color: #aaa;
  }
</style>