导航同步

components/header.vue

@@ -1,427 +1,432 @@
 <template>
   <div id="proginn-header" :class="{ transparent: transparent }" :style="{ position: customPosition }">
     <div class="list">
-      <a :href="baseUrl"  @click="cnzz('导航栏目','logo','')" class="nav-item">
-        <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 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>
-            <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="rightShow">
+                <div
+                  class="rightBigCell"
+                  v-for="(big, bigIndex) in dropDownData"
+                  :key="bigIndex"
+                  :class="{ ok: selectedDrop === bigIndex }"
                 >
-                  <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>
+                  <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>
-      </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}/outsource/hirernew?is_package=1&hotsale_id=4`">
-                  <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}/outsource/sitePublicity?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}/cloud?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> -->
+        
+        <!-- 解决方案 -->
+        <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>
-            </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>
+                <el-dropdown-item>
+                  <a class="more-item fuwu-item" @click="cnzz('导航栏目','需求梳理','')" :href="`${baseUrl}/outsource/hirernew?is_package=1&hotsale_id=4`">
+                    <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>
-            </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>
+            <div class="deal-item">
+              <div class="big-title">
+                <img src="@/assets/img/header/new/jiejuefangan2@2x.png" alt="招聘用人" >
+                <span>招聘用人</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>
+                <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>
+                <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>
               </div>
-            </a>
-          </el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
-      <!-- 搜索 -->
-      <div>
-        <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>
+            </div>
+          </el-dropdown-menu>
+        </el-dropdown>
 
-      <!-- 更多 -->
-      <el-dropdown class="more-dropdown" placement="bottom-start">
-        <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">
-          <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 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="workstation"  @click="cnzz('导航栏目','待办任务','')" :href="baseUrl + '/wo/work_todo'">
-                <i class="el-icon-edit"></i>待办任务
+              <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="workstation" @click="cnzz('导航栏目','整包项目','')" :href="baseUrl + '/wo/work_platform'">
-                <i class="el-icon-date"></i>整包项目
+              <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="workstation" @click="cnzz('导航栏目','按月雇佣','')" :href="baseUrl + '/wo/work_hire'">
-                <i class="el-icon-news"></i>按月雇佣
+              <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="workstation" :href="baseUrl + '/wo/work_cloud'">
-                <i class="el-icon-service"></i>我的远程
+              <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-menu>
         </el-dropdown>
-        <el-dropdown class="nav-dropdown">
-          <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>
+      </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
-              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>
+              <a class="more-item" @click="cnzz('导航栏目','开发屋','')" :href="kaifainUrl">
+                <img :src="KaifainIcon" alt="" >
+                <span>开发屋</span>
+              </a>
             </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>
+              <a class="more-item"  @click="cnzz('导航栏目','技术圈','')" :href="jishuBaseUrl">
+                <img :src="JishuinIcon" alt="" >
+                <span>技术圈</span>
+              </a>
             </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>
+              <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
-              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>
+              <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>
-        <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>
-            <span class="nickname">{{ myInfo.nickname }}</span>
-          </div>
-          <div class="menu">
-            <div v-if="myInfo.is_vip" class="vip-info vip-info-com">
-              <div class="vip-info-top">
+
+        <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
-                  class="vip-icon"
+                  v-if="myInfo.is_vip"
+                  class="header-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>
+              </a>
+              <span class="nickname">{{ myInfo.nickname }}</span>
+            </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-arcs">
+              <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-arc"
-                  :class="vipTextClass"
-                  :href="baseUrl + '/type/vip/' + vipType"
-                  >查看权益</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-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
+                  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>
-            <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"
-          @click="cnzz('导航栏目','APP下载','')"
-          style="margin-right: 40px"
-          :href="baseUrl + '/index/app'"
-          >APP下载</a
-        >
-        <a class="account-ctrl" @click="cnzz('导航栏目','登录','')" :href="loginUrl">登录</a>
-        <a
-          class="account-ctrl"
-          @click="cnzz('导航栏目','注册','')"
-          style="margin-left: 40px;"
-          :href="baseUrl + '/user/register'"
-          >注册</a
-        >
+          </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>
@@ -831,9 +836,16 @@ export default {
 .list {
   display: flex;
   justify-content: space-between;
-  align-items: center;
   width: 1200px;
 }
+.header-left {
+  display: flex;
+  align-items: center;
+}
+.header-right {
+  display: flex;
+  align-items: center;
+}
 
 .nav-item {
   display: flex;
@@ -843,6 +855,11 @@ export default {
   color: #515151;
   /* padding: 0 15px; */
   box-sizing: border-box;
+  padding: 0 14px;
+}
+.nav-item.logo {
+  margin-right: 24px;
+  padding: 0;
 }
 
 .nav-item:first-child {
@@ -889,7 +906,9 @@ export default {
   border: 1px solid #ebebeb;
   font-size: 13px;
 }
-
+.more-dropdown {
+  padding: 0 14px;
+}
 .el-icon-search {
   position: absolute;
   top: 12px;