添加通知侧边栏基础代码， 业务内容没明确，暂时隐藏

src/components/app-header/app-header.vue

@@ -52,6 +52,7 @@
               :class="{inRecycle:isInRecycle}"
             />
           </span>
+        <!-- <system-notify /> -->
         <user-center v-if="showUserCenter" />
       </div>
     </div>
@@ -60,10 +61,12 @@
 
 <script>
 import UserCenter from './components/user_center';
+// import SystemNotify from './components/system-notify';
 import system from '@/services/system';
 export default {
   components: {
     UserCenter,
+    // SystemNotify,
   },
   props: {
     // 主题 默认为灰色

src/components/app-header/components/close-btn.vue

@@ -1,51 +1,17 @@
 <template>
-    <div class="close-wrap"
-         @mouseenter="mouseEnterNow"
-         @mouseleave="mouseLeaveNow">
-    <img v-show="!isCloseHover"
+    <div class="close-wrap">
+      <div class="close-icon vert-hori-center" />
+    <!-- <img v-show="!isCloseHover"
         class="close-icon vert-hori-center" 
         src="/static/img/operate-pop-window/关闭.svg" alt />
     <img v-show="isCloseHover"
         class="close-icon vert-hori-center" 
-        src="/static/img/operate-pop-window/关闭激活.svg" alt />
+        src="/static/img/operate-pop-window/关闭激活.svg" alt /> -->
     </div>
 
 </template>
 
-<script>
-export default {
-    data() {
-        return {
-          
-        }
-    },
-    props: {
-      isCloseHover: {
-        type: Boolean,
-        default: false,
-      }
-    },
-    methods: {
-      mouseEnterNow() {
-        this.$emit('mouseEnterNow');
-      },
-      mouseLeaveNow() {
-        this.$emit('mouseLeaveNow');
-      }
-    }
-}
-</script>
-
 <style scoped lang="scss">
-.close-wrap {
-  position: relative;
-  height: 100%;
-}
-
-/* 关闭弹窗 */
-.close-wrap:hover {
-  background-color: #d6243a;
-}
 .close-wrap {
   position: absolute;
   top: 8px;
@@ -61,7 +27,16 @@ export default {
 
   cursor: pointer;
   .close-icon {
+    width: 100%;
+    height: 100%;
+    background: url(/static/img/operate-pop-window/关闭.svg) no-repeat center center;
     cursor: pointer;
   }
+  &:hover {
+    background-color: #d6243a;
+    .close-icon {
+      background-image: url(/static/img/operate-pop-window/关闭激活.svg);
+    }
+  }
 }
 </style>

src/components/app-header/components/system-notify/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="system_notify" @click.stop="">
+    <i
+      class="Cicon icon el-icon-message-solid"
+      title="通知"
+      @click.stop="panelVisible = true"
+    />
+
+    <!-- 用户中心弹窗模块 -->
+    <div :class="yiyunAnimated + ' flex_right_pain'">
+      <div class="flex_right_pain_body_box">
+        <div class="flex_right_pain_head">
+          <div class="EC_col_12">
+            <h4 class="RdiaheaderTitle system_notify_title">
+              <i class="Cicon icon el-icon-message-solid" />
+              通知
+            </h4>
+          </div>
+          <div class="EC_col_12">
+            <close-btn @click.native.stop="panelVisible = false" />
+          </div>
+        </div>
+        <div class="pxline"></div>
+        <div class="flex_right_pain_body">
+        </div>
+      </div>
+      
+    </div>
+  </div>
+</template>
+
+<script>
+import CloseBtn from '@/components/app-header/components/close-btn';
+import { getUserInfo } from "@/services/user";
+
+export default {
+  components: {
+    CloseBtn,
+  },
+  computed: {
+    yiyunAnimated() {
+      return this.panelVisible ? 'AnimatedRightIn' : '';
+    }
+  },
+  async mounted() {
+    const userInfo = await getUserInfo(this.$store.state.accountId);
+    this.user = userInfo;
+  },
+  data() {
+    return {
+      panelVisible: false,
+    };
+  },
+  watch: {
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+.system_notify {
+  display: inline-block;
+  vertical-align: top;
+  color: #000;
+  &_title {
+    display: flex;
+    align-items: center;
+    .icon {
+      margin-right: 12px;
+      color: #7850FF;
+    }
+  }
+  .flex_right_pain_body {
+    font-size: 16px;
+    height: calc(100% - 50px) !important;
+  }
+  .flex_right_pain_body_box {
+    height: 100%;
+  }
+}
+
+</style>