重构灾害预警

src/components/BreadcrumbBack.vue

@@ -0,0 +1,16 @@
+<template>
+  <img :src="BackIcon" class="back-icon" @click="router.back()" />
+</template>
+
+<script lang="ts" setup>
+  import { useRouter } from 'vue-router';
+  import BackIcon from 'assets/svg/back.svg';
+  const router = useRouter();
+</script>
+
+<style lang="scss" scoped>
+  .back-icon {
+    width: 16px;
+    cursor: pointer;
+  }
+</style>

src/main.ts

@@ -4,6 +4,7 @@ import { setupStore } from '@/store';
 import './main.scss';
 import 'element-plus/dist/index.css';
 import App from './App.vue';
+import BreadcrumbBack from '@/components/BreadcrumbBack.vue';
 import { setupElement, setupDirectives } from '@/plugins';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
@@ -17,6 +18,7 @@ async function bootstrap() {
 
   // 全局完整引入 element 组件
   setupElement(app);
+  app.component('BreadcrumbBack', BreadcrumbBack); //全局注册面包屑返回按钮
 
   // 注册全局自定义指令，如：v-permission权限指令
   setupDirectives(app);

src/styles/page-details-layout.scss

@@ -19,11 +19,6 @@
     gap: 16px;
     padding: 16px 22px;
     flex-shrink: 0;
-    // 返回按钮
-    .back-icon {
-      width: 16px;
-      cursor: pointer;
-    }
     // 面包屑标题
     .breadcrumb-title {
       font-size: 20px;

src/styles/page-main-layout.scss

@@ -0,0 +1,10 @@
+.search-table-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  gap: 20px;
+  &--button {
+    margin-bottom: 20px;
+  }
+}

src/views/disaster/disaster-warning/PageDefenseNotice.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="disaster-precaution-container">
-    <header class="disaster-precaution-container__header">
-      <span class="disaster-precaution-container__title">管理规定与通知</span>
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <span class="breadcrumb-title">管理规定与通知</span>
     </header>
-    <main class="disaster-precaution-container__main">
-      <div class="disaster-precaution">
+    <main class="safety-platform-container__main">
+      <div class="search-table-container">
         <header class="disaster-precaution__header">
           <el-button
             type="primary"
-            class="disaster-precaution__header--button"
+            class="search-table-container--button"
             :icon="Plus"
             @click="handleCreateDefenseNotice"
             v-if="defenseNoticePermissions"
@@ -241,6 +241,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @use '../style/disaster.scss' as *;
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/page-main-layout.scss' as *;
   @use './src/common.scss' as *;
 </style>

src/views/disaster/disaster-warning/PageDefenseNoticeItem.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="disaster-precaution-container">
-    <header class="disaster-precaution-container__header">
-      <img :src="BackIcon" alt="back" class="back-icon" @click="router.back()" />
-      <span class="disaster-precaution-container__title">{{ headerTitle }}</span>
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <BreadcrumbBack />
+      <span class="breadcrumb-title">{{ headerTitle }}</span>
     </header>
-    <main class="disaster-precaution-container__main">
+    <main class="safety-platform-container__main">
       <component :is="dynamicComponent" :id="id" ref="dynamicComponentRef" />
     </main>
-    <footer class="disaster-precaution-container__footer" v-if="operate">
+    <footer class="safety-platform-container__footer" v-if="operate">
       <el-button @click="router.back()">取消</el-button>
       <el-button type="primary" @click="submit">提交</el-button>
     </footer>
@@ -121,6 +121,6 @@
 </script>
 
 <style lang="scss" scoped>
-  @use '../style/disaster.scss' as *;
+  @use '@/styles/page-details-layout.scss' as *;
   @use './src/common.scss' as *;
 </style>

src/views/disaster/disaster-warning/PageWarningInfo.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="disaster-precaution-container">
-    <header class="disaster-precaution-container__header">
-      <span class="disaster-precaution-container__title">灾害预警信息</span>
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <span class="breadcrumb-title">灾害预警信息</span>
     </header>
-    <main class="disaster-precaution-container__main">
-      <div class="disaster-precaution">
+    <main class="safety-platform-container__main">
+      <div class="search-table-container">
         <header class="disaster-precaution__header">
           <el-button
             type="primary"
-            class="disaster-precaution__header--button"
+            class="search-table-container--button"
             :icon="Plus"
             @click="handleCreateWarningInfo"
             v-if="warningInfoPermissions"
@@ -150,7 +150,6 @@
     TABLE_HEIGHT_DEFAULT,
     TABLE_HEIGHT_PREMISSION,
   } from './src/config';
-  import PlaceHolderWeather from './src/images/placeholder-weather@1X.png';
 
   const { permissions } = useUserInfoHook();
   const { warningTypeDice, disasterLevelDice, getWarningInfoDict, getDisasterLevelDict, getDisasterLevel } =
@@ -165,7 +164,7 @@
   });
   const getWarningIcon = (disasterCode: string) => {
     const icon = warningTypeDice.value.find((item) => item.itemCode === disasterCode)?.imageUrl;
-    return icon ?? PlaceHolderWeather;
+    return icon;
   };
   const getDisasterType = (disasterCode: string) => {
     return warningTypeDice.value.find((item) => item.itemCode === disasterCode)?.itemValue;
@@ -266,7 +265,8 @@
 </script>
 
 <style lang="scss" scoped>
-  @use '../style/disaster.scss' as *;
+  @use '@/styles/page-details-layout.scss' as *;
+  @use '@/styles/page-main-layout.scss' as *;
   @use './src/common.scss' as *;
   .weather-warning-icon {
     width: 50px;

src/views/disaster/disaster-warning/PageWarningInfoItem.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="disaster-precaution-container">
-    <header class="disaster-precaution-container__header">
-      <img :src="BackIcon" alt="back" class="back-icon" @click="router.back()" />
-      <span class="disaster-precaution-container__title">{{ headerTitle }}</span>
+  <div class="safety-platform-container">
+    <header class="safety-platform-container__header">
+      <BreadcrumbBack />
+      <span class="breadcrumb-title">{{ headerTitle }}</span>
     </header>
-    <main class="disaster-precaution-container__main">
+    <main class="safety-platform-container__main">
       <component :is="dynamicComponent" :id="id" ref="dynamicComponentRef" />
     </main>
-    <footer class="disaster-precaution-container__footer" v-if="operate">
+    <footer class="safety-platform-container__footer" v-if="operate">
       <el-button @click="router.back()">取消</el-button>
       <el-button type="primary" @click="submit">提交</el-button>
     </footer>
@@ -22,7 +22,6 @@
   import UploadLoading from '@/components/UploadLoading.vue';
   import type { WarningInfoRuleForm } from './src/type';
   import { createWarningInfoItem, editWarningInfoItem } from '@/api/disaster-warning';
-  import BackIcon from 'assets/svg/back.svg';
 
   const formLoading = ref(false);
   const router = useRouter();
@@ -97,6 +96,6 @@
 </script>
 
 <style lang="scss" scoped>
-  @use '../style/disaster.scss' as *;
+  @use '@/styles/page-details-layout.scss' as *;
   @use './src/common.scss' as *;
 </style>

src/views/disaster/disaster-warning/src/common.scss

@@ -1,4 +1,4 @@
-.disaster-precaution-container__header {
+.safety-platform-container__header {
   flex-direction: row !important;
   justify-content: flex-start !important;
   gap: 8px !important;

src/views/disaster/disaster-warning/src/components/CreateDefenseNoticeItem.vue

@@ -1,43 +1,41 @@
 <template>
-  <div class="info-container">
-    <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
-      <template #disasterType>
-        <el-select v-model="ruleFormData.disasterType" placeholder="请选择灾害类型" filterable>
-          <el-option
-            v-for="item in disasterTypeDice"
-            :key="item.itemCode"
-            :label="item.itemValue"
-            :value="item.itemCode"
-          />
-        </el-select>
-      </template>
-      <template #disasterLevel>
-        <el-select v-model="ruleFormData.disasterLevel" placeholder="请选择灾害等级">
-          <el-option
-            v-for="item in disasterLevelDice"
-            :key="item.itemCode"
-            :label="item.itemValue"
-            :value="item.itemCode"
-          />
-        </el-select>
-      </template>
-      <template #attachmentListRes>
-        <UploadFiles label="上传附件" ref="uploadFilesRef" @uploadSuccess="handleUploadSuccess" />
-      </template>
-      <template #isPush>
-        <el-radio-group v-model="ruleFormData.isPush">
-          <el-radio :value="IS_PUSH.PUSH">是</el-radio>
-          <el-radio :value="IS_PUSH.NOT_PUSH">否</el-radio>
-        </el-radio-group>
-        <SelectGroup
-          v-if="ruleFormData.isPush === IS_PUSH.PUSH"
-          ref="selectGroupRef"
-          :userGroupList="ruleFormData.userGroupList || []"
-          @userGroupListChange="handleUserGroupListChange"
+  <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
+    <template #disasterType>
+      <el-select v-model="ruleFormData.disasterType" placeholder="请选择灾害类型" filterable>
+        <el-option
+          v-for="item in disasterTypeDice"
+          :key="item.itemCode"
+          :label="item.itemValue"
+          :value="item.itemCode"
         />
-      </template>
-    </BasicForm>
-  </div>
+      </el-select>
+    </template>
+    <template #disasterLevel>
+      <el-select v-model="ruleFormData.disasterLevel" placeholder="请选择灾害等级">
+        <el-option
+          v-for="item in disasterLevelDice"
+          :key="item.itemCode"
+          :label="item.itemValue"
+          :value="item.itemCode"
+        />
+      </el-select>
+    </template>
+    <template #attachmentListRes>
+      <UploadFiles label="上传附件" ref="uploadFilesRef" @uploadSuccess="handleUploadSuccess" />
+    </template>
+    <template #isPush>
+      <el-radio-group v-model="ruleFormData.isPush">
+        <el-radio :value="IS_PUSH.PUSH">是</el-radio>
+        <el-radio :value="IS_PUSH.NOT_PUSH">否</el-radio>
+      </el-radio-group>
+      <SelectGroup
+        v-if="ruleFormData.isPush === IS_PUSH.PUSH"
+        ref="selectGroupRef"
+        :userGroupList="ruleFormData.userGroupList || []"
+        @userGroupListChange="handleUserGroupListChange"
+      />
+    </template>
+  </BasicForm>
 </template>
 
 <script setup lang="ts">
@@ -103,6 +101,4 @@
   });
 </script>
 
-<style scoped lang="scss">
-  @use '@/views/disaster/style/info-container.scss' as *;
-</style>
+<style scoped lang="scss"></style>

src/views/disaster/disaster-warning/src/components/CreateWarningInfoItem.vue

@@ -1,40 +1,38 @@
 <template>
-  <div class="info-container">
-    <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
-      <template #disasterType>
-        <el-select v-model="ruleFormData.disasterType" placeholder="请选择预警类型" filterable>
-          <el-option
-            v-for="item in warningTypeDice"
-            :key="item.itemCode"
-            :label="item.itemValue"
-            :value="item.itemCode"
-          />
-        </el-select>
-      </template>
-      <template #disasterLevel>
-        <el-select v-model="ruleFormData.disasterLevel" placeholder="请选择灾害等级">
-          <el-option
-            v-for="item in disasterLevelDice"
-            :key="item.itemCode"
-            :label="item.itemValue"
-            :value="item.itemCode"
-          />
-        </el-select>
-      </template>
-      <template #isPush>
-        <el-radio-group v-model="ruleFormData.isPush">
-          <el-radio :value="IS_PUSH.PUSH">是</el-radio>
-          <el-radio :value="IS_PUSH.NOT_PUSH">否</el-radio>
-        </el-radio-group>
-        <SelectGroup
-          v-if="ruleFormData.isPush"
-          ref="selectGroupRef"
-          :userGroupList="ruleFormData.userGroupList || []"
-          @userGroupListChange="handleUserGroupListChange"
+  <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
+    <template #disasterType>
+      <el-select v-model="ruleFormData.disasterType" placeholder="请选择预警类型" filterable>
+        <el-option
+          v-for="item in warningTypeDice"
+          :key="item.itemCode"
+          :label="item.itemValue"
+          :value="item.itemCode"
         />
-      </template>
-    </BasicForm>
-  </div>
+      </el-select>
+    </template>
+    <template #disasterLevel>
+      <el-select v-model="ruleFormData.disasterLevel" placeholder="请选择灾害等级">
+        <el-option
+          v-for="item in disasterLevelDice"
+          :key="item.itemCode"
+          :label="item.itemValue"
+          :value="item.itemCode"
+        />
+      </el-select>
+    </template>
+    <template #isPush>
+      <el-radio-group v-model="ruleFormData.isPush">
+        <el-radio :value="IS_PUSH.PUSH">是</el-radio>
+        <el-radio :value="IS_PUSH.NOT_PUSH">否</el-radio>
+      </el-radio-group>
+      <SelectGroup
+        v-if="ruleFormData.isPush"
+        ref="selectGroupRef"
+        :userGroupList="ruleFormData.userGroupList || []"
+        @userGroupListChange="handleUserGroupListChange"
+      />
+    </template>
+  </BasicForm>
 </template>
 
 <script setup lang="ts">
@@ -91,6 +89,4 @@
   });
 </script>
 
-<style scoped lang="scss">
-  @use '@/views/disaster/style/info-container.scss' as *;
-</style>
+<style scoped lang="scss"></style>

src/views/disaster/disaster-warning/src/components/EditDefenseNoticeItem.vue

@@ -1,50 +1,46 @@
 <template>
-  <div class="info-container">
-    <section>
-      <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
-        <template #disasterType>
-          <el-select v-model="ruleFormData.disasterType" placeholder="请选择灾害类型" filterable>
-            <el-option
-              v-for="item in disasterTypeDice"
-              :key="item.itemCode"
-              :label="item.itemValue"
-              :value="item.itemCode"
-            />
-          </el-select>
-        </template>
-        <template #disasterLevel>
-          <el-select v-model="ruleFormData.disasterLevel" placeholder="请选择灾害等级">
-            <el-option
-              v-for="item in disasterLevelDice"
-              :key="item.itemCode"
-              :label="item.itemValue"
-              :value="item.itemCode"
-            />
-          </el-select>
-        </template>
-        <template #attachmentListRes>
-          <UploadFiles
-            label="上传附件"
-            ref="uploadFilesRef"
-            :fileList="ruleFormData.attachmentListRes"
-            @uploadSuccess="handleUploadSuccess"
-          />
-        </template>
-        <template #isPush>
-          <el-radio-group v-model="ruleFormData.isPush">
-            <el-radio :value="IS_PUSH.PUSH">是</el-radio>
-            <el-radio :value="IS_PUSH.NOT_PUSH">否</el-radio>
-          </el-radio-group>
-          <SelectGroup
-            v-if="ruleFormData.isPush"
-            ref="selectGroupRef"
-            :userGroupList="ruleFormData.userGroupList || []"
-            @userGroupListChange="handleUserGroupListChange"
-          />
-        </template>
-      </BasicForm>
-    </section>
-  </div>
+  <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
+    <template #disasterType>
+      <el-select v-model="ruleFormData.disasterType" placeholder="请选择灾害类型" filterable>
+        <el-option
+          v-for="item in disasterTypeDice"
+          :key="item.itemCode"
+          :label="item.itemValue"
+          :value="item.itemCode"
+        />
+      </el-select>
+    </template>
+    <template #disasterLevel>
+      <el-select v-model="ruleFormData.disasterLevel" placeholder="请选择灾害等级">
+        <el-option
+          v-for="item in disasterLevelDice"
+          :key="item.itemCode"
+          :label="item.itemValue"
+          :value="item.itemCode"
+        />
+      </el-select>
+    </template>
+    <template #attachmentListRes>
+      <UploadFiles
+        label="上传附件"
+        ref="uploadFilesRef"
+        :fileList="ruleFormData.attachmentListRes"
+        @uploadSuccess="handleUploadSuccess"
+      />
+    </template>
+    <template #isPush>
+      <el-radio-group v-model="ruleFormData.isPush">
+        <el-radio :value="IS_PUSH.PUSH">是</el-radio>
+        <el-radio :value="IS_PUSH.NOT_PUSH">否</el-radio>
+      </el-radio-group>
+      <SelectGroup
+        v-if="ruleFormData.isPush"
+        ref="selectGroupRef"
+        :userGroupList="ruleFormData.userGroupList || []"
+        @userGroupListChange="handleUserGroupListChange"
+      />
+    </template>
+  </BasicForm>
 </template>
 
 <script setup lang="ts">
@@ -119,6 +115,4 @@
   });
 </script>
 
-<style scoped lang="scss">
-  @use '@/views/disaster/style/info-container.scss' as *;
-</style>
+<style scoped lang="scss"></style>

src/views/disaster/disaster-warning/src/components/EditWarningInfoItem.vue

@@ -1,40 +1,38 @@
 <template>
-  <div class="info-container">
-    <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
-      <template #disasterType>
-        <el-select v-model="ruleFormData.disasterType" placeholder="请选择预警类型" filterable>
-          <el-option
-            v-for="item in warningTypeDice"
-            :key="item.itemCode"
-            :label="item.itemValue"
-            :value="item.itemCode"
-          />
-        </el-select>
-      </template>
-      <template #disasterLevel>
-        <el-select v-model="ruleFormData.disasterLevel" placeholder="请选择灾害等级">
-          <el-option
-            v-for="item in disasterLevelDice"
-            :key="item.itemCode"
-            :label="item.itemValue"
-            :value="item.itemCode"
-          />
-        </el-select>
-      </template>
-      <template #isPush>
-        <el-radio-group v-model="ruleFormData.isPush">
-          <el-radio :value="IS_PUSH.PUSH">是</el-radio>
-          <el-radio :value="IS_PUSH.NOT_PUSH">否</el-radio>
-        </el-radio-group>
-        <SelectGroup
-          v-if="ruleFormData.isPush"
-          ref="selectGroupRef"
-          :userGroupList="ruleFormData.userGroupList || []"
-          @userGroupListChange="handleUserGroupListChange"
+  <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
+    <template #disasterType>
+      <el-select v-model="ruleFormData.disasterType" placeholder="请选择预警类型" filterable>
+        <el-option
+          v-for="item in warningTypeDice"
+          :key="item.itemCode"
+          :label="item.itemValue"
+          :value="item.itemCode"
         />
-      </template>
-    </BasicForm>
-  </div>
+      </el-select>
+    </template>
+    <template #disasterLevel>
+      <el-select v-model="ruleFormData.disasterLevel" placeholder="请选择灾害等级">
+        <el-option
+          v-for="item in disasterLevelDice"
+          :key="item.itemCode"
+          :label="item.itemValue"
+          :value="item.itemCode"
+        />
+      </el-select>
+    </template>
+    <template #isPush>
+      <el-radio-group v-model="ruleFormData.isPush">
+        <el-radio :value="IS_PUSH.PUSH">是</el-radio>
+        <el-radio :value="IS_PUSH.NOT_PUSH">否</el-radio>
+      </el-radio-group>
+      <SelectGroup
+        v-if="ruleFormData.isPush"
+        ref="selectGroupRef"
+        :userGroupList="ruleFormData.userGroupList || []"
+        @userGroupListChange="handleUserGroupListChange"
+      />
+    </template>
+  </BasicForm>
 </template>
 
 <script setup lang="ts">
@@ -104,7 +102,4 @@
   });
 </script>
 
-<style scoped lang="scss">
-  @use '@/views/disaster/style/info-container.scss' as *;
-  @use '@/views/disaster/style/basic-form.scss' as *;
-</style>
+<style scoped lang="scss"></style>

src/views/disaster/disaster-warning/src/components/ViewDefenseNoticeItem.vue

@@ -1,65 +1,61 @@
 <template>
-  <div class="info-container">
-    <header class="info-container__header">
-      <el-tooltip
-        :content="defenseNoticeDetail?.title"
-        placement="bottom-start"
-        effect="light"
-        :hide-after="0"
-        v-if="defenseNoticeDetail?.title && defenseNoticeDetail.title.length > 50"
+  <header class="info-container__header">
+    <el-tooltip
+      :content="defenseNoticeDetail?.title"
+      placement="bottom-start"
+      effect="light"
+      :hide-after="0"
+      v-if="defenseNoticeDetail?.title && defenseNoticeDetail.title.length > 50"
+    >
+      <span class="title">{{ defenseNoticeDetail?.title }}</span>
+    </el-tooltip>
+    <span class="title" v-else>{{ defenseNoticeDetail?.title }}</span>
+    <div class="disaster">
+      <p class="info-item">
+        灾害类型：<span class="info-content">{{ getDisasterType(defenseNoticeDetail?.disasterType || '') }}</span>
+      </p>
+      <p class="info-item">
+        灾害等级：<span class="info-content">{{ getDisasterLevel(defenseNoticeDetail?.disasterLevel || '') }}</span>
+      </p>
+    </div>
+    <span class="publish-info">
+      <p class="info-item">
+        <span>{{ defenseNoticeDetail?.pushTime ? '发布人：' : '创建人：' }}</span>
+        <span class="info-content">
+          {{ defenseNoticeDetail?.pushTime ? defenseNoticeDetail.pushName : defenseNoticeDetail?.realname }}
+          &nbsp;&nbsp;
+          {{ defenseNoticeDetail?.pushTime }}
+        </span>
+      </p>
+    </span>
+  </header>
+  <section class="divider"></section>
+  <section class="content">
+    <div v-html="defenseNoticeDetail?.content"></div>
+  </section>
+  <section class="attachment" v-if="defenseNoticeDetail?.attachmentListRes.length">
+    <span class="info-content" style="font-size: 14px">附件({{ defenseNoticeDetail?.attachmentListRes.length }})</span>
+    &nbsp;
+    <a @click="downloadAll">下载全部</a>
+    <div class="attachment-list">
+      <div
+        class="attachment-item"
+        v-for="item in defenseNoticeDetail?.attachmentListRes"
+        :key="item.fileId"
+        @click="previewOnline(item.fileUrl, item.fileType as keyof typeof FILE_TYPE_ICON)"
       >
-        <span class="title">{{ defenseNoticeDetail?.title }}</span>
-      </el-tooltip>
-      <span class="title" v-else>{{ defenseNoticeDetail?.title }}</span>
-      <div class="disaster">
-        <p class="info-item">
-          灾害类型：<span class="info-content">{{ getDisasterType(defenseNoticeDetail?.disasterType || '') }}</span>
-        </p>
-        <p class="info-item">
-          灾害等级：<span class="info-content">{{ getDisasterLevel(defenseNoticeDetail?.disasterLevel || '') }}</span>
-        </p>
-      </div>
-      <span class="publish-info">
-        <p class="info-item">
-          <span>{{ defenseNoticeDetail?.pushTime ? '发布人：' : '创建人：' }}</span>
-          <span class="info-content">
-            {{ defenseNoticeDetail?.pushTime ? defenseNoticeDetail.pushName : defenseNoticeDetail?.realname }}
-            &nbsp;&nbsp;
-            {{ defenseNoticeDetail?.pushTime }}
-          </span>
-        </p>
-      </span>
-    </header>
-    <section class="divider"></section>
-    <section class="content">
-      <div v-html="defenseNoticeDetail?.content"></div>
-    </section>
-    <section class="attachment" v-if="defenseNoticeDetail?.attachmentListRes.length">
-      <span class="info-content" style="font-size: 14px"
-        >附件({{ defenseNoticeDetail?.attachmentListRes.length }})</span
-      >
-      &nbsp;
-      <a @click="downloadAll">下载全部</a>
-      <div class="attachment-list">
-        <div
-          class="attachment-item"
-          v-for="item in defenseNoticeDetail?.attachmentListRes"
-          :key="item.fileId"
-          @click="previewOnline(item.fileUrl, item.fileType as keyof typeof FILE_TYPE_ICON)"
-        >
-          <span class="attachment-item--name">{{ item.fileName }}</span>
-          <div class="attachment-item--footer">
-            <div class="info">
-              <img :src="FILE_TYPE_ICON[item.fileType as keyof typeof FILE_TYPE_ICON]" />
-              <span>{{ item.fileSize }}</span>
-            </div>
-            <a @click.stop="downloadFile(item.fileUrl, item.fileName)">下载</a>
+        <span class="attachment-item--name">{{ item.fileName }}</span>
+        <div class="attachment-item--footer">
+          <div class="info">
+            <img :src="FILE_TYPE_ICON[item.fileType as keyof typeof FILE_TYPE_ICON]" />
+            <span>{{ item.fileSize }}</span>
           </div>
+          <a @click.stop="downloadFile(item.fileUrl, item.fileName)">下载</a>
         </div>
       </div>
-    </section>
-    <PreviewOnline ref="previewOnlineRef" />
-  </div>
+    </div>
+  </section>
+  <PreviewOnline ref="previewOnlineRef" />
 </template>
 
 <script setup lang="ts">
@@ -102,14 +98,10 @@
 </script>
 
 <style scoped lang="scss">
-  .info-container {
+  .info-container__header {
+    display: flex;
+    flex-direction: column;
     width: 100%;
-    height: 100%;
-    &__header {
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-    }
   }
   .title {
     font-size: 20px;