看效果

src/components/layout/index.vue

 <template>
   <div>
     <notice></notice>
-    <div class="notice-placeholder"></div>
     <div class="hb-layout" v-loading="fullLoading.visible">
       <main-menu ref="mainMenu" :menu-list="menuList" :actived-code="activedMenu.length > 0 ? activedMenu[0].menuCode : ''" @showLoading="onShowLoading"></main-menu>
       <aside-menu v-show="showAside" :menu-list="activedMenu.length > 0 ? activedMenu[0].childList : []" :actived-code="activedMenu.length > 2 ? activedMenu[2].menuCode : ''"></aside-menu>

src/components/notice/notice.vue

 <template>
-  <div class="notice-box">
+  <div>
     <el-alert v-if="showNotice" class="notice-box" type="warning" show-icon @close="onClose">
       <div class="notice-content" slot="title">
         <div
@@ -34,8 +34,8 @@ export default {
     return {
       showNotice: false,
       expireTip: {
-        show: true,
-        content: '过期过期'
+        show: false,
+        content: ''
       },
       rechargeTip: {
         show: false
@@ -56,7 +56,14 @@ export default {
     getAccountState() {
       // this.loadAccountStateInfo();
       // this.loadExpireData();
-      console.log("getAccountState");
+      console.log('getAccountState');
+      this.expireTip = {
+        show: true,
+        content: '过期过期'
+      };
+      if (this.expireTip.show) {
+        this.updateNoticeShow();
+      }
     },
     loadAccountStateInfo() {
       getAccountStateInfo().then(res => {