365 lines
7.8 KiB
Vue
365 lines
7.8 KiB
Vue
<script lang="ts" setup>
|
|
import { ElMessage } from 'element-plus';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
// import { getAnnouncementDetail } from '@/api'
|
|
// import type { AnnouncementDetailResponse } from '@/api'
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const loading = ref(false);
|
|
const announcementDetail = ref<any | null>(null);
|
|
|
|
// 获取公告详情
|
|
async function fetchAnnouncementDetail() {
|
|
const id = route.params.id as string;
|
|
if (!id)
|
|
return;
|
|
|
|
loading.value = true;
|
|
try {
|
|
// const res = await getAnnouncementDetail(id)
|
|
// announcementDetail.value = res.data
|
|
}
|
|
catch (error) {
|
|
console.error('获取公告详情失败:', error);
|
|
ElMessage.error('获取公告详情失败');
|
|
}
|
|
finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
// 返回上一页
|
|
function goBack() {
|
|
router.back();
|
|
}
|
|
|
|
// 格式化时间
|
|
function formatDateTime(time?: string) {
|
|
if (!time)
|
|
return '-';
|
|
const date = new Date(time);
|
|
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
|
|
}
|
|
|
|
// 页面加载时获取详情
|
|
onMounted(() => {
|
|
fetchAnnouncementDetail();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="announcement-detail-page">
|
|
<el-card v-loading="loading" class="detail-card">
|
|
<template #header>
|
|
<div class="card-header">
|
|
<el-button type="primary" link @click="goBack">
|
|
<el-icon><i-ep-arrow-left /></el-icon>
|
|
返回
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
|
|
<div v-if="announcementDetail" class="detail-content">
|
|
<!-- 公告头部 -->
|
|
<div class="detail-header">
|
|
<h1 class="detail-title">
|
|
<el-icon v-if="announcementDetail.isImportant" color="#f56c6c" class="important-icon">
|
|
<i-ep-warning />
|
|
</el-icon>
|
|
{{ announcementDetail.title }}
|
|
</h1>
|
|
<div class="detail-meta">
|
|
<el-tag
|
|
v-if="announcementDetail.type === 'latest'"
|
|
type="success"
|
|
size="large"
|
|
>
|
|
最新公告
|
|
</el-tag>
|
|
<el-tag
|
|
v-else
|
|
type="info"
|
|
size="large"
|
|
>
|
|
历史公告
|
|
</el-tag>
|
|
<span class="meta-item">
|
|
<el-icon><i-ep-view /></el-icon>
|
|
浏览 {{ announcementDetail.views || 0 }}
|
|
</span>
|
|
<span class="meta-item">
|
|
<el-icon><i-ep-clock /></el-icon>
|
|
发布时间: {{ formatDateTime(announcementDetail.publishTime) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 公告详细内容 -->
|
|
<div class="detail-body">
|
|
<div class="content-html" v-html="announcementDetail.content" />
|
|
</div>
|
|
|
|
<!-- 公告底部信息 -->
|
|
<div class="detail-footer">
|
|
<el-divider />
|
|
<div class="footer-info">
|
|
<span>创建时间: {{ formatDateTime(announcementDetail.createdAt) }}</span>
|
|
<span v-if="announcementDetail.updatedAt">
|
|
更新时间: {{ formatDateTime(announcementDetail.updatedAt) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<el-empty v-else description="暂无公告详情" />
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.announcement-detail-page {
|
|
padding: 24px;
|
|
background: #f5f7fa;
|
|
min-height: 100vh;
|
|
|
|
.detail-card {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.detail-content {
|
|
.detail-header {
|
|
margin-bottom: 24px;
|
|
padding-bottom: 24px;
|
|
border-bottom: 1px solid #e4e7ed;
|
|
|
|
.detail-title {
|
|
margin: 0 0 16px 0;
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
line-height: 1.4;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
|
|
.important-icon {
|
|
font-size: 30px;
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
}
|
|
|
|
.detail-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
|
|
.meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 14px;
|
|
color: #606266;
|
|
|
|
.el-icon {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.detail-body {
|
|
margin-bottom: 24px;
|
|
|
|
.content-html {
|
|
font-size: 16px;
|
|
color: #303133;
|
|
line-height: 1.8;
|
|
|
|
:deep(img) {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
:deep(p) {
|
|
margin: 12px 0;
|
|
}
|
|
|
|
:deep(h1),
|
|
:deep(h2),
|
|
:deep(h3),
|
|
:deep(h4),
|
|
:deep(h5),
|
|
:deep(h6) {
|
|
margin: 24px 0 12px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
}
|
|
|
|
:deep(ul),
|
|
:deep(ol) {
|
|
padding-left: 24px;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
:deep(li) {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
:deep(blockquote) {
|
|
margin: 16px 0;
|
|
padding: 12px 16px;
|
|
background: #f5f7fa;
|
|
border-left: 4px solid #409eff;
|
|
color: #606266;
|
|
}
|
|
|
|
:deep(code) {
|
|
padding: 2px 6px;
|
|
background: #f5f7fa;
|
|
border-radius: 3px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 14px;
|
|
}
|
|
|
|
:deep(pre) {
|
|
margin: 16px 0;
|
|
padding: 16px;
|
|
background: #282c34;
|
|
border-radius: 4px;
|
|
overflow-x: auto;
|
|
|
|
code {
|
|
background: none;
|
|
padding: 0;
|
|
color: #abb2bf;
|
|
}
|
|
}
|
|
|
|
:deep(table) {
|
|
width: 100%;
|
|
margin: 16px 0;
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
|
|
th,
|
|
td {
|
|
padding: 12px;
|
|
border: 1px solid #e4e7ed;
|
|
text-align: left;
|
|
}
|
|
|
|
th {
|
|
background: #f5f7fa;
|
|
font-weight: 600;
|
|
}
|
|
|
|
tr:hover {
|
|
background: #fafafa;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.detail-footer {
|
|
.footer-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 13px;
|
|
color: #909399;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 移动端适配
|
|
@media screen and (max-width: 768px) {
|
|
.announcement-detail-page {
|
|
padding: 12px;
|
|
|
|
.detail-card {
|
|
:deep(.el-card__header) {
|
|
padding: 12px;
|
|
}
|
|
|
|
:deep(.el-card__body) {
|
|
padding: 12px;
|
|
}
|
|
}
|
|
|
|
.detail-content {
|
|
.detail-header {
|
|
margin-bottom: 16px;
|
|
padding-bottom: 16px;
|
|
|
|
.detail-title {
|
|
font-size: 20px;
|
|
|
|
.important-icon {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
.detail-meta {
|
|
gap: 8px;
|
|
|
|
.meta-item {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.detail-body {
|
|
margin-bottom: 16px;
|
|
|
|
.content-html {
|
|
font-size: 14px;
|
|
|
|
:deep(table) {
|
|
display: block;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
|
|
th,
|
|
td {
|
|
padding: 8px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.detail-footer {
|
|
.footer-info {
|
|
font-size: 11px;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|