顶部除了图表都搞定

assets/css/common.css

@@ -52,4 +52,7 @@ button {
   margin: 0;
   background: transparent;
   outline: none;
+}
+a {
+  text-decoration: none;
 }

components/footer.vue

@@ -340,7 +340,6 @@ export default {
 .footer-container a,
 .list a {
   color: #4a4a4a;
-  text-decoration: none;
 }
 .footer-container {
   display: flex;

components/header.vue

@@ -1,13 +1,13 @@
 <template>
   <section id="proginn-header">
     <section class="list">
-      <a href="/" class="item">
+      <a href="/" class="nav-item">
         <img class="logo" src="https://dev.test.proginn.com/Public/image/common/logo_new.png">
       </a>
-      <a href="/" class="item">首页</a>
-      <a href="/cloud?from=top_nav" class="item">云端工作</a>
-      <a href="/users/" class="item">程序员</a>
-      <a href="/community" class="item">技术圈</a>
+      <a href="/" class="nav-item">首页</a>
+      <a href="/cloud?from=top_nav" class="nav-item">云端工作</a>
+      <a href="/users/" class="nav-item">程序员</a>
+      <a href="/community" class="nav-item">技术圈</a>
       <section>
         <section style="position: relative;">
           <input class="input" autocomplete="off" placeholder="搜索您感兴趣的程序员">
@@ -16,113 +16,107 @@
         <div class="dropdown" style="display:none;"></div>
         <div class="dropdown" style="display:none;"></div>
       </section>
-      <section class="item item-div">
-        <el-dropdown>
-          <el-button type="text" style="color: #515151;">
-            <i class="el-icon-tickets"></i>工作台
-          </el-button>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item>
-              <i class="el-icon-edit"></i>我的待办
-            </el-dropdown-item>
-            <el-dropdown-item>
-              <i class="el-icon-date"></i>我的项目
-            </el-dropdown-item>
-            <el-dropdown-item>
-              <i class="el-icon-news"></i>我的雇佣
-            </el-dropdown-item>
-            <el-dropdown-item>
-              <i class="el-icon-service"></i>我的云端
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-      </section>
-      <section class="item msg-box">
-        <el-dropdown>
-          <el-button type="text" style="color: #515151;">
-            <i class="el-icon-message"></i>消息
-          </el-button>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item>
-              <i class="circle blue"></i>系统消息
-            </el-dropdown-item>
-            <el-dropdown-item>
-              <i class="circle orange"></i>工作通知
-            </el-dropdown-item>
-            <el-dropdown-item>
-              <i class="circle red"></i>评论回复
-            </el-dropdown-item>
-            <el-dropdown-item>
-              <i class="circle green"></i>@我的
-            </el-dropdown-item>
-            <el-dropdown-item>
-              <i class="circle pink"></i>赞及其它
-            </el-dropdown-item>
-            <el-dropdown-item>
-              <i class="circle yellow"></i>收支信息
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-      </section>
-      <section class="item" style="padding-right: 0;">
-        <a style="position: relative; width: 28px; height: 28px;" href="/wo/work_todo">
-          <img
-            class="header-user"
-            src="https://programmerinn.b0.upaiyun.com/useralbum/64168/icon641681476172013.jpg!mediumicon"
-            alt="header"
-          >
-          <img
-            class="header-vip-icon"
-            src="https://dev.test.proginn.com/Public/image/h5/vip_icon_com.png?v=v1547884005"
-            alt="vip-icon"
-          >
-        </a>
-        <span class="nickname dib">yyyy</span>
-        <!-- <section class="menu">
-            <section class="vip-info vip-info-com">
-              <section class="vip-info-top">
-                <img
-                  class="vip-icon"
-                  src="https://dev.test.proginn.com/Public/image/h5/vip_icon_com.png?v=v1547884005"
-                  alt="vip-icon"
-                >
-                <span class="vip-content">
-                  <span class="vip-title">企业会员</span>
-                  <br>
-                  <span class="vip-end-date">2022-08-01到期</span>
-                </span>
-              </section>
-              <section class="vip-arcs">
-                <a class="vip-arc" href="/type/vip/">查看权益</a>
-                <a class="vip-arc" href="/vip/pay?number=3&amp;product_id=1&amp;next=/type/vip/">立即续费</a>
-              </section>
+      <el-dropdown class="nav-dropdown">
+        <el-button type="text" style="color: #515151;">
+          <i class="el-icon-tickets"></i>工作台
+        </el-button>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>
+            <i class="el-icon-edit"></i>我的待办
+          </el-dropdown-item>
+          <el-dropdown-item>
+            <i class="el-icon-date"></i>我的项目
+          </el-dropdown-item>
+          <el-dropdown-item>
+            <i class="el-icon-news"></i>我的雇佣
+          </el-dropdown-item>
+          <el-dropdown-item>
+            <i class="el-icon-service"></i>我的云端
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <el-dropdown class="nav-dropdown">
+        <el-button type="text" style="color: #515151;">
+          <i class="el-icon-message"></i>消息
+        </el-button>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>
+            <i class="circle blue"></i>系统消息
+          </el-dropdown-item>
+          <el-dropdown-item>
+            <i class="circle orange"></i>工作通知
+          </el-dropdown-item>
+          <el-dropdown-item>
+            <i class="circle red"></i>评论回复
+          </el-dropdown-item>
+          <el-dropdown-item>
+            <i class="circle green"></i>@我的
+          </el-dropdown-item>
+          <el-dropdown-item>
+            <i class="circle pink"></i>赞及其它
+          </el-dropdown-item>
+          <el-dropdown-item>
+            <i class="circle yellow"></i>收支信息
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <el-popover class="nav-popover" placement="bottom" width="226" trigger="hover">
+        <section class="ref" slot="reference">
+          <a class="nav-header" href="/wo/work_todo">
+            <img
+              class="header-user"
+              src="https://programmerinn.b0.upaiyun.com/useralbum/64168/icon641681476172013.jpg!mediumicon"
+              alt="header"
+            >
+            <img
+              class="header-vip-icon"
+              src="https://dev.test.proginn.com/Public/image/h5/vip_icon_com.png?v=v1547884005"
+              alt="vip-icon"
+            >
+          </a>
+          <span class="nickname dib">yyyy</span>
+        </section>
+        <section class="menu">
+          <section class="vip-info vip-info-com">
+            <section class="vip-info-top">
+              <img
+                class="vip-icon"
+                src="https://dev.test.proginn.com/Public/image/h5/vip_icon_com.png?v=v1547884005"
+                alt="vip-icon"
+              >
+              <span class="vip-content">
+                <span class="vip-title">企业会员</span>
+                <br>
+                <span class="vip-end-date">2022-08-01到期</span>
+              </span>
+            </section>
+            <section class="vip-arcs">
+              <a class="vip-arc" href="/type/vip/">查看权益</a>
+              <a class="vip-arc" href="/vip/pay?number=3&amp;product_id=1&amp;next=/type/vip/">立即续费</a>
             </section>
-            <div class="divider"></div>
-            <a class="item" href="/wo/work_platform">
-              <i class="i-icon project-icon"></i>
-              <span class="other-icon">我的项目</span>
+          </section>
+          <section class="vip-items">
+            <a class="vip-item divider" href="/wo/work_platform">
+              <i class="el-icon-date"></i>我的项目
             </a>
-            <a class="item" href="/wo/work_hire">
-              <i class="i-icon hire-icon"></i>
-              <span class="other-icon">我的雇佣</span>
+            <a class="vip-item" href="/wo/work_hire">
+              <i class="el-icon-news"></i>我的雇佣
             </a>
-            <a class="item" href="/wo/work_cloud">
-              <i class="i-icon cloud-icon"></i>
-              <span class="other-icon">我的云端</span>
+            <a class="vip-item" href="/wo/work_cloud">
+              <i class="el-icon-service"></i>我的云端
             </a>
-            <div class="divider"></div>
-            <a class="item" href="/wo/64168">
-              <i class="tags icon"></i>我的主页
+            <a class="vip-item divider" href="/wo/64168">
+              <i class="el-icon-document"></i>我的主页
             </a>
-            <a class="item" href="/index/app">
-              <i class="wechat icon"></i>关注微信
+            <a class="vip-item" href="/index/app">
+              <i class="el-icon-view"></i>关注微信
             </a>
-            <div class="divider"></div>
-            <a class="item J_LogOut" href="javascript:;" rel="nofollow">
-              <i class="power icon"></i> 退出
+            <a class="vip-item divider">
+              <i class="el-icon-back"></i>退出
             </a>
-        </section>-->
-      </section>
+          </section>
+        </section>
+      </el-popover>
     </section>
   </section>
 </template>
@@ -145,13 +139,27 @@ export default {
   align-items: center;
   width: 1000px;
 }
-.item {
+.nav-item {
   display: flex;
   height: 80px;
   align-items: center;
   font-size: 15px;
   color: #515151;
-  text-decoration: none;
+}
+.nav-dropdown,
+.nav-popover {
+  --imgWidth: 28px;
+  height: 40px;
+}
+.nav-popover > .ref {
+  display: flex;
+  align-items: center;
+}
+.nav-header {
+  position: relative;
+  width: var(--imgWidth);
+  height: var(--imgWidth);
+  margin-right: 10px;
 }
 .logo {
   width: 120px;
@@ -255,11 +263,8 @@ span.other-icon {
   color: rgb(113, 177, 253);
 }
 .header-user {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 30px;
-  height: 30px;
+  width: var(--imgWidth);
+  height: var(--imgWidth);
   border-radius: 20px;
 }
 .header-vip-icon {
@@ -269,4 +274,20 @@ span.other-icon {
   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,.05);
+  margin-top: 10px;
+  padding-top: 10px;
+}
 </style>

layouts/default.vue

@@ -29,7 +29,6 @@ html {
   border-radius: 4px;
   border: 1px solid #3b8070;
   color: #3b8070;
-  text-decoration: none;
   padding: 10px 30px;
 }
 
@@ -43,7 +42,6 @@ html {
   border-radius: 4px;
   border: 1px solid #35495e;
   color: #35495e;
-  text-decoration: none;
   padding: 10px 30px;
   margin-left: 15px;
 }