header module

assets/css/common.css

@@ -44,6 +44,7 @@ table {
 }
 input {
   outline: none;
+  border: 0;
 }
 button {
   border: 0;

components/footer.vue

@@ -287,7 +287,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 #proginn-footer {
 }
 #friend-links,

components/header.vue

@@ -1,6 +1,141 @@
 <template>
   <section id="proginn-header">
-    proginn-header
+    <section class="list">
+      <a href="/" class="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>
+      <sectoin>
+        <section style="position: relative;">
+          <input class="input" autocomplete="off" placeholder="搜索您感兴趣的程序员">
+          <i class="search link icon"></i>
+        </section>
+        <div class="dropdown" style="display:none;"></div>
+        <div class="dropdown" style="display:none;"></div>
+      </sectoin>
+      <sectoin class="item item-div">
+        <a class="item a-platform" href="/wo/work_todo">
+          <i class="browser icon"></i>工作台
+        </a>
+        <!-- <sectoin class="ui dropdown right top pointing dropdown-platform">
+          <sectoin
+            class="menu platform-menu"
+            style="right: 14px; top: 9px; display: none;"
+          >
+            <a class="item" href="/wo/work_todo">
+              <i class="i-icon todo-icon"></i>
+              <span class="other-icon">我的待办</span>
+            </a>
+            <a class="item" href="/wo/work_platform">
+              <i class="i-icon project-icon"></i>
+              <span class="other-icon">我的项目</span>
+            </a>
+            <a class="item" href="/wo/work_hire">
+              <i class="i-icon hire-icon"></i>
+              <span class="other-icon">我的雇佣</span>
+            </a>
+            <a class="item" href="/wo/work_cloud">
+              <i class="i-icon cloud-icon"></i>
+              <span class="other-icon">我的云端</span>
+            </a>
+          </sectoin>
+        </sectoin>-->
+      </sectoin>
+      <sectoin class="item msg-box">
+        <sectoin class="ui top right pointing dropdown">
+          <span class="header-message">消息</span>
+          <!-- <div class="header-message-nums" id="J_messageNums" style="display: block;">85</div> -->
+          <!-- <sectoin class="menu">
+            <a class="item" href="/message/system">
+              <i class="blue circle icon small"></i>系统消息
+              <div class="ui label" id="message_system_nums" style="display:none;">0</div>
+            </a>
+            <a class="item" href="/message/project">
+              <i class="orange circle icon small"></i>工作通知
+              <div class="ui label" id="message_project_nums" style="display: none;">1</div>
+            </a>
+            <a class="item" href="/message/comment">
+              <i class="red circle icon small"></i>评论回复
+              <div class="ui label" id="message_comment_nums" style="display:none;">0</div>
+            </a>
+            <a class="item" href="/message/at">
+              <i class="green circle icon small"></i>@我的
+              <div class="ui label" id="message_at_nums" style="display:none;">0</div>
+            </a>
+            <a class="item" href="/message/plus">
+              <i class="pink circle icon small"></i>赞及其它
+              <div class="ui label" id="message_plus_nums" style="display:none;">0</div>
+            </a>
+            <a class="item" href="/message/coin">
+              <i class="yellow circle icon small"></i>收支信息
+              <div class="ui label" id="message_coin_nums" style>85</div>
+            </a>
+          </sectoin>-->
+        </sectoin>
+      </sectoin>
+      <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>
+            </section>
+            <div class="divider"></div>
+            <a class="item" href="/wo/work_platform">
+              <i class="i-icon project-icon"></i>
+              <span class="other-icon">我的项目</span>
+            </a>
+            <a class="item" href="/wo/work_hire">
+              <i class="i-icon hire-icon"></i>
+              <span class="other-icon">我的雇佣</span>
+            </a>
+            <a class="item" href="/wo/work_cloud">
+              <i class="i-icon cloud-icon"></i>
+              <span class="other-icon">我的云端</span>
+            </a>
+            <div class="divider"></div>
+            <a class="item" href="/wo/64168">
+              <i class="tags icon"></i>我的主页
+            </a>
+            <a class="item" href="/index/app">
+              <i class="wechat icon"></i>关注微信
+            </a>
+            <div class="divider"></div>
+            <a class="item J_LogOut" href="javascript:;" rel="nofollow">
+              <i class="power icon"></i> 退出
+            </a>
+        </section>-->
+      </section>
+    </section>
   </section>
 </template>
 
@@ -10,8 +145,126 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 #proginn-header {
+  display: flex;
+  justify-content: center;
+  background: white;
+}
+.list {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 1000px;
+}
+.item {
+  display: flex;
+  height: 80px;
+  align-items: center;
+  font-size: 15px;
+  color: #515151;
+  text-decoration: none;
+}
+.logo {
+  width: 120px;
+  height: auto;
+}
+.input {
+  width: 234px;
+  height: 40px;
+  border-radius: 20px;
+  background: #f6f6f6;
+  padding: 0 40px;
+}
+i.i-icon:before {
+  content: "";
+  background-size: 18px 18px;
+  display: block;
+  float: left;
+  width: 18px;
+  height: 18px;
+}
+
+i.project-icon:before {
+  background-image: url(/Public/image/icons/outsource.png);
+}
+
+i.hire-icon:before {
+  background-image: url(/Public/image/icons/hire.png);
+}
+
+i.cloud-icon:before {
+  background-image: url(/Public/image/icons/cloud.png);
+}
+
+i.todo-icon:before {
+  background-image: url(/Public/image/icons/todo.png);
+}
 
+span.other-icon {
+  display: block;
+  margin-left: 30px;
+}
+.vip-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 206px;
+  height: 120px;
+}
+.vip-info-top {
+  display: flex;
+  width: 142px;
+}
+.vip-title {
+  color: #cb9d53;
+  font-size: 16px;
+  line-height: 36px;
+}
+.vip-icon {
+  width: 24px;
+  height: 24px;
+  margin: 10px 8px 0 0;
+}
+.vip-end-date {
+  font-size: 12px;
+  color: #999;
+}
+.vip-arcs {
+  display: flex;
+  justify-content: space-between;
+  width: 142px;
+  margin-top: 11px;
+}
+.vip-arc {
+  flex: 1;
+  font-size: 13px;
+  color: #cb9d53;
+  text-align: center;
+}
+.vip-arc:first-child {
+  border-right: 1px solid rgba(245, 245, 245, 1);
+}
+.vip-info-com .vip-title {
+  color: rgb(113, 177, 253);
+}
+.vip-info-com .vip-arc {
+  color: rgb(113, 177, 253);
+}
+.header-user {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 30px;
+  height: 30px;
+  border-radius: 20px;
+}
+.header-vip-icon {
+  position: absolute;
+  top: 18px;
+  left: 20px;
+  width: 16px;
+  height: 16px;
 }
 </style>