缺少灾害检查和视频监控模块

src/views/disaster/overview/PageOverview.vue

@@ -48,6 +48,9 @@
                   <span class="title">防御通知和规定</span>
                 </div>
               </header>
+              <main class="defensive-notice-and-regulation__main">
+                <DefenseNotice />
+              </main>
             </div>
           </div>
         </div>
@@ -67,6 +70,7 @@
 <script setup lang="ts">
   import { ref, onMounted, onUnmounted } from 'vue';
   import DisasterWarning from './src/components/DisasterWarning.vue';
+  import DefenseNotice from './src/components/DefenseNotice.vue';
   import dayjs from 'dayjs';
 
   const currentDate = ref('');
@@ -151,7 +155,7 @@
   .right-info-section {
     display: flex;
     flex-direction: column;
-    gap: 25cpx;
+    gap: 10cpx;
     padding-top: 20cpx;
     background-color: $white-color;
     &__main {
@@ -168,11 +172,11 @@
   }
   .disaster-loss-and-loss-record {
     width: 100%;
-    height: 397cpx;
+    flex: 1;
   }
   .defensive-notice-and-regulation {
     width: 100%;
-    flex: 1;
+    height: 220cpx;
   }
   .bottom-box--right-item {
     display: flex;

src/views/disaster/overview/src/components/DefenseList.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="defense-list">
+    <NotionList v-for="item in 3" :key="item" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import NotionList from './NotionList.vue';
+</script>
+
+<style scoped lang="scss">
+  @use '../styles/defense-list.scss';
+</style>

src/views/disaster/overview/src/components/DefenseNotice.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="tabs-container">
+    <el-tabs v-model="activeName" class="custom-tabs">
+      <el-tab-pane label="防御通知" name="notice" />
+      <el-tab-pane label="管理规定" name="regulation" />
+    </el-tabs>
+    <main class="tabs-container__main">
+      <component :is="dynamicComponent" />
+    </main>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed, defineAsyncComponent } from 'vue';
+  const activeName = ref('notice');
+  const dynamicComponent = computed(() => {
+    switch (activeName.value) {
+      case 'notice':
+        return defineAsyncComponent(() => import('./DefenseList.vue'));
+      case 'regulation':
+        return defineAsyncComponent(() => import('./RegulationList.vue'));
+    }
+  });
+</script>
+
+<style lang="scss" scoped>
+  @use '../styles/tabs-container.scss';
+  :deep(.el-tabs__header) {
+    padding-left: 48cpx;
+  }
+</style>

src/views/disaster/overview/src/components/DisasterWarning.vue

@@ -32,15 +32,5 @@
 </script>
 
 <style lang="scss" scoped>
-  .tabs-container {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    &__main {
-      width: 100%;
-      flex: 1;
-      overflow: hidden;
-    }
-  }
+  @use '../styles/tabs-container.scss';
 </style>

src/views/disaster/overview/src/components/NotionList.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="notion-list">
+    <section class="notion-list__left">
+      <img :src="Bell" />
+      <span class="notion-title">上飞院关于加强防御台风“贝碧嘉”的通知</span>
+    </section>
+    <section class="notion-list__right">
+      <span>发布人：XXX</span>
+      <span>2024-01-01 23:59:59</span>
+    </section>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import Bell from 'assets/svg/bell.svg';
+</script>
+
+<style lang="scss" scoped>
+  .notion-list {
+    @include flex-center;
+    justify-content: space-between;
+    width: 100%;
+    height: 25cpx;
+    padding: 0 13cpx;
+    &__left {
+      display: flex;
+      align-items: center;
+      gap: 16cpx;
+    }
+    &__right {
+      display: flex;
+      align-items: center;
+      gap: 24cpx;
+      font-size: 12cpx;
+      color: rgba($text-color, 0.45);
+    }
+  }
+  .notion-title {
+    font-size: 16cpx;
+    font-weight: 600;
+    color: rgba($text-color, 0.85);
+  }
+</style>

src/views/disaster/overview/src/components/RegulationList.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="defense-list">
+    <NotionList v-for="item in 2" :key="item" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import NotionList from './NotionList.vue';
+</script>
+
+<style scoped lang="scss">
+  @use '../styles/defense-list.scss';
+</style>

src/views/disaster/overview/src/styles/defense-list.scss

@@ -0,0 +1,7 @@
+.defense-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10cpx;
+  width: 100%;
+  height: 100%;
+}

src/views/disaster/overview/src/styles/tabs-container.scss

@@ -0,0 +1,11 @@
+  .tabs-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    &__main {
+      width: 100%;
+      flex: 1;
+      overflow: hidden;
+    }
+  }