[update] 把头部的消息通知加回来

src/components/tools/HeaderNotice.vue

@@ -9,61 +9,23 @@
     :overlayStyle="{ width: '330px', top: '50px' }">
     <template slot="content">
       <a-spin :spinning="loadding">
-        <a-tabs>
+        <div class="notice-title">系统通知</div>
-          <a-tab-pane :tab="msg1Title" key="1">
+        <a-list>
-            <!--<a-list>
+          <a-list-item :key="index" v-for="(record, index) in announcement2">
-              <a-list-item>
+            <div style="margin-left: 5%;width: 80%">
-                <a-list-item-meta title="你收到了 14 份新周报" description="一年前">
+              <p><a @click="showAnnouncement(record)">{{ record.titile }}</a></p>
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
+              <p style="color: rgba(0,0,0,.45);margin-bottom: 0">{{ record.createTime }} 发布</p>
-                </a-list-item-meta>
+            </div>
-              </a-list-item>
+            <div style="text-align: right">
-              <a-list-item>
+              <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'L'" color="blue">一般消息</a-tag>
-                <a-list-item-meta title="你推荐的 IT大牛 已通过第三轮面试" description="一年前">
+              <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'M'" color="orange">重要消息</a-tag>
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
+              <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'H'" color="red">紧急消息</a-tag>
-                </a-list-item-meta>
+            </div>
-              </a-list-item>
+          </a-list-item>
-              <a-list-item>
+          <div style="margin-top: 5px;text-align: center">
-                <a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
+            <a-button @click="toMyAnnouncement()" type="dashed" block>{{ $t('header.lookMore') }}</a-button>
-                  <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
+          </div>
-                </a-list-item-meta>
+        </a-list>
-              </a-list-item>
-            </a-list>-->
-            <a-list>
-              <a-list-item :key="index" v-for="(record, index) in announcement1">
-                <div style="margin-left: 5%;width: 80%">
-                  <p><a @click="showAnnouncement(record)">{{ record.titile }}</a></p>
-                  <p style="color: rgba(0,0,0,.45);margin-bottom: 0">{{ record.createTime }} 发布</p>
-                </div>
-                <div style="text-align: right">
-                  <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'L'" color="blue">一般消息</a-tag>
-                  <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'M'" color="orange">重要消息</a-tag>
-                  <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'H'" color="red">紧急消息</a-tag>
-                </div>
-              </a-list-item>
-              <div style="margin-top: 5px;text-align: center">
-                <a-button @click="toMyAnnouncement()" type="dashed" block>{{ $t('header.lookMore') }}</a-button>
-              </div>
-            </a-list>
-          </a-tab-pane>
-          <a-tab-pane :tab="msg2Title" key="2">
-            <a-list>
-              <a-list-item :key="index" v-for="(record, index) in announcement2">
-                <div style="margin-left: 5%;width: 80%">
-                  <p><a @click="showAnnouncement(record)">{{ record.titile }}</a></p>
-                  <p style="color: rgba(0,0,0,.45);margin-bottom: 0">{{ record.createTime }} 发布</p>
-                </div>
-                <div style="text-align: right">
-                  <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'L'" color="blue">一般消息</a-tag>
-                  <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'M'" color="orange">重要消息</a-tag>
-                  <a-tag @click="showAnnouncement(record)" v-if="record.priority === 'H'" color="red">紧急消息</a-tag>
-                </div>
-              </a-list-item>
-              <div style="margin-top: 5px;text-align: center">
-                <a-button @click="toMyAnnouncement()" type="dashed" block>{{ $t('header.lookMore') }}</a-button>
-              </div>
-            </a-list>
-          </a-tab-pane>
-        </a-tabs>
       </a-spin>
     </template>
     <span @click="fetchNotice" class="header-notice">
@@ -323,12 +285,18 @@ export default {
   }
 </style>
 <style lang="less" scoped>
-  .header-notice{
+.notice-title {
-    display: inline-block;
+  text-align: center;
-    transition: all 0.3s;
+  padding: 3px 0;
+  border-bottom: 1px solid #e8e8e8;
+  letter-spacing: 1px;
+}
+.header-notice{
+  display: inline-block;
+  transition: all 0.3s;
 
-    span {
+  span {
-      vertical-align: initial;
+    vertical-align: initial;
-    }
   }
+}
 </style>

src/components/tools/UserMenu.vue

@@ -31,7 +31,7 @@
     <!--    <a-icon type="question-circle-o"></a-icon>-->
     <!--  </a>-->
     <!--</span>-->
-    <!--<header-notice class="action"/>-->
+    <header-notice class="action"/>
     <!--<span style="padding: 12px">-->
     <!--  <a-avatar class="avatar" size="small" :src="getAvatar()"/>-->
     <!--</span>-->
@@ -46,9 +46,9 @@
     <!--  </span>-->
     <!--</div>-->
     <!--<a-dropdown>-->
-      <span class="action">
+    <span class="action">
-        <span v-if="isDesktop()">{{ $t('header.welcome') }}，{{ nickname() }}</span>
+      <span v-if="isDesktop()">{{ $t('header.welcome') }}，{{ nickname() }}</span>
-      </span>
+    </span>
     <!--  <a-menu slot="overlay" class="user-dropdown-menu-wrapper">-->
     <!--    <a-menu-item key="0">-->
     <!--      <router-link :to="{ name: 'account-center' }">-->