增加报警提示组建

ybf_admin/src/assets/style/theme/theme-base.scss

@@ -85,13 +85,12 @@
         padding: 0px;
         position: relative;
         overflow: hidden;
+        height: calc(100vh - 92px);
         .d2-theme-container-main-layer {
           position: absolute;
           top: 0px;
           bottom: 0px;
-          // left: 0px;
-          // Z-Style
-          left: 20px;
+          left: 16px;
           right: 0px;
         }
         .d2-theme-container-main-body {

ybf_admin/src/layout/header-aside/components/header-alarm-notify/index.vue

+<template>
+  <div class="alarm-notify">
+    <p>温馨提示：此处为告警通知栏</p>
+  </div>
+</template>
+
+<script>
+  export default {
+
+  }
+</script>
+
+<style lang="scss">
+.alarm-notify{
+  width: 100%;
+  height: 32px;
+  background-color: #fff;
+  height:32px;
+  box-shadow:0px 2px 4px 0px rgba(221,221,221,1);
+  p{
+    padding-left: 36px;
+    font-size:12px;
+    color:rgba(102,102,102,1);
+    line-height:12px;
+  }
+}
+</style>

ybf_admin/src/layout/header-aside/layout.vue

@@ -11,48 +11,27 @@
       <!-- 顶栏 -->
       <div
         class="d2-theme-header"
-        :style="{
-          opacity: this.searchActive ? 0.5 : 1
-        }"
-
+        :style="{   opacity: this.searchActive ? 0.5 : 1 }"
         flex-box="0"
         flex
       >
         <img class="zlogos" :src="`/image/logo.png`" />
-        <!-- <img :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/all.png`" /> -->
-        <!-- <router-link
-          to="/index"
-          class="logo-group"
-          :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}"
-          flex-box="0"
-        >
-          <img
-            v-if="asideCollapse"
-            :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`"
-          />
-          <img v-else :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/all.png`" />
-          <img class="zlogos" :src="`/image/logo.png`" />
-          <div>亿百分营销管理系统</div>
-        </router-link>-->
-        <!-- <div class="toggle-aside-btn" @click="handleToggleAside" flex-box="0">
-          <d2-icon name="bars" />
-        </div>-->
         <d2-menu-header class="header-menus" flex-box="1" />
         <!-- 顶栏右侧 -->
         <div class="d2-header-right" flex-box="0">
           <!-- 如果你只想在开发环境显示这个按钮请添加 v-if="$env === 'development'" -->
-          <!-- <d2-header-search @click="handleSearchClick" />
-          <d2-header-log />
+         <!--<d2-header-search @click="handleSearchClick" />-->
+          <!--<d2-header-log />-->
           <d2-header-fullscreen />
-          <d2-header-theme />
-          <d2-header-size />
-          <d2-header-locales />
-          <d2-header-color />-->
+          <!--<d2-header-theme />-->
+          <!--<d2-header-size />-->
+          <!--<d2-header-locales />-->
+          <!--<d2-header-color />-->
           <d2-header-user />
         </div>
       </div>
       <!-- 下面 主体 -->
-      <div class="d2-theme-container" flex-box="1" flex>
+      <div class="d2-theme-container" flex-box="1" flex flex="dir:top">
         <!-- 主体 侧边栏 -->
         <!-- <div
           flex-box="0"
@@ -64,8 +43,10 @@
           }">
           <d2-menu-side/>
         </div>-->
+        <!--通知栏-->
+        <d2-header-alarm-notify ></d2-header-alarm-notify>
         <!-- 主体 -->
-        <div class="d2-theme-container-main" flex-box="1" flex>
+        <div class="d2-theme-container-main">
           <!-- 搜索 -->
           <!-- <transition name="fade-scale">
             <div v-if="searchActive" class="d2-theme-container-main-layer" flex>
@@ -83,7 +64,7 @@
               <div
                 class="d2-theme-container-main-body"
                 flex-box="1"
-                style="border:0px solid red;margin: 10px 0px 10px 0px;"
+                style="margin: 16px 0px 16px 0px;"
               >
                 <transition :name="transitionActive ? 'fade-transverse' : ''">
                   <keep-alive :include="keepAlive">
@@ -111,6 +92,7 @@ import d2HeaderTheme from './components/header-theme'
 import d2HeaderUser from './components/header-user'
 import d2HeaderLog from './components/header-log'
 import d2HeaderColor from './components/header-color'
+import d2HeaderAlarmNotify from './components/header-alarm-notify'
 import { mapState, mapGetters, mapActions } from 'vuex'
 import mixinSearch from './mixins/search'
 export default {
@@ -127,7 +109,8 @@ export default {
     d2HeaderTheme,
     d2HeaderUser,
     d2HeaderLog,
-    d2HeaderColor
+    d2HeaderColor,
+    d2HeaderAlarmNotify
   },
   data () {
     return {