|
@@ -1,7 +1,29 @@
|
|
|
<template>
|
|
|
<basic-container>
|
|
|
+ <!-- 公告预览(全屏容器) -->
|
|
|
+ <div v-if="announcementPreviewVisible" class="announcement-preview-container basic-container">
|
|
|
+ <div class="preview-header">
|
|
|
+ <div class="header-top">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-arrow-left"
|
|
|
+ size="small"
|
|
|
+ class="back-btn"
|
|
|
+ @click="handlePreviewBack"
|
|
|
+ >
|
|
|
+ 返回列表
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ <div class="preview-title">{{ currentDetail.title || '公告预览' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="preview-content">
|
|
|
+ <div class="detail-body" v-html="currentDetail.content"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<!-- 公告表单组件 -->
|
|
|
<announcement-form
|
|
|
+ v-else-if="announcementFormVisible"
|
|
|
:visible.sync="announcementFormVisible"
|
|
|
:is-edit="isEditMode"
|
|
|
:announcement-id="editAnnouncementId"
|
|
@@ -10,7 +32,7 @@
|
|
|
|
|
|
<!-- 公告列表 -->
|
|
|
<avue-crud
|
|
|
- v-if="!announcementFormVisible"
|
|
|
+ v-else
|
|
|
:option="option"
|
|
|
:data="data"
|
|
|
ref="crud"
|
|
@@ -93,16 +115,6 @@
|
|
|
</template>
|
|
|
</avue-crud>
|
|
|
|
|
|
- <!-- 详情对话框 -->
|
|
|
- <el-dialog title="公告详情" :visible.sync="detailVisible" append-to-body width="60%" :close-on-click-modal="false">
|
|
|
- <div class="detail-content" v-if="currentDetail.id">
|
|
|
- <!-- 仅展示富文本内容 -->
|
|
|
- <div class="detail-body" v-html="currentDetail.content"></div>
|
|
|
- </div>
|
|
|
- <span slot="footer" class="dialog-footer">
|
|
|
- <el-button @click="detailVisible = false">关 闭</el-button>
|
|
|
- </span>
|
|
|
- </el-dialog>
|
|
|
</basic-container>
|
|
|
</template>
|
|
|
|
|
@@ -135,4 +147,48 @@ export default {
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@import './index.scss';
|
|
|
+
|
|
|
+.announcement-preview-container {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.preview-header {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start; /* 显式左对齐头部子项,避免外部样式影响 */
|
|
|
+ padding: 12px 16px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 8px 8px 0 0;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.header-top {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.back-btn {
|
|
|
+ padding-left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.preview-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #303133;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 4px;
|
|
|
+ align-self: center; /* 让标题在交叉轴居中 */
|
|
|
+ width: 100%; /* 占满一行,文本居中更明显 */
|
|
|
+}
|
|
|
+
|
|
|
+.preview-content {
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 16px;
|
|
|
+ border-radius: 0 0 8px 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.detail-body {
|
|
|
+ min-height: 300px;
|
|
|
+}
|
|
|
</style>
|