|
|
|
|
@ -5,33 +5,23 @@
|
|
|
|
|
<transition name="slide"> |
|
|
|
|
<div class="announcement-board" v-if="isShow"> |
|
|
|
|
<div class="announcement-content" v-loading="loading"> |
|
|
|
|
<div |
|
|
|
|
class="announcement-item" |
|
|
|
|
v-for="(item, index) in announcements" |
|
|
|
|
:key="item.id" |
|
|
|
|
@click="showDetails(item, index)" |
|
|
|
|
> |
|
|
|
|
<div class="announcement-item" v-for="(item, index) in announcements" :key="item.id" |
|
|
|
|
@click="showDetails(item, index)"> |
|
|
|
|
<span v-if="isToday(item.releaseTime)" class="red-dot"></span> |
|
|
|
|
<h2>{{ item.title }}</h2> |
|
|
|
|
<p class="date">时间:{{ item.releaseTime }}</p> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<el-empty description="暂无公告通知" v-if="!announcements.length" /> |
|
|
|
|
<el-empty description="暂无公告通知" v-if="!announcements?.length" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="footer"> |
|
|
|
|
<span>消息数: {{ announcements.length }}</span> |
|
|
|
|
<span>消息数: {{ announcements?.length || 0 }}</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</transition> |
|
|
|
|
|
|
|
|
|
<el-dialog |
|
|
|
|
v-model="centerDialogVisible" |
|
|
|
|
:title="currentAnnouncement.title" |
|
|
|
|
width="60%" |
|
|
|
|
center |
|
|
|
|
style="min-height: 500px" |
|
|
|
|
class="el_announcement" |
|
|
|
|
> |
|
|
|
|
<el-dialog v-model="centerDialogVisible" :title="currentAnnouncement.title" width="60%" center |
|
|
|
|
style="min-height: 500px" class="el_announcement"> |
|
|
|
|
<p> |
|
|
|
|
<span class="time">时间: {{ currentAnnouncement.releaseTime }}</span> <br /> |
|
|
|
|
<span class="category">分类：{{ currentAnnouncement.categoryName }}</span> |
|
|
|
|
@ -39,11 +29,13 @@
|
|
|
|
|
<div v-html="currentAnnouncement.content" class="content"></div> |
|
|
|
|
<template #footer> |
|
|
|
|
<div class="dialog-footer"> |
|
|
|
|
<el-button type="primary" @click="Previous" |
|
|
|
|
><el-icon><DArrowLeft /></el-icon> 上一条 |
|
|
|
|
<el-button type="primary" @click="Previous"><el-icon> |
|
|
|
|
<DArrowLeft /> |
|
|
|
|
</el-icon> 上一条 |
|
|
|
|
</el-button> |
|
|
|
|
<el-button type="primary" @click="next" |
|
|
|
|
>下一条<el-icon><DArrowRight /></el-icon> |
|
|
|
|
<el-button type="primary" @click="next">下一条<el-icon> |
|
|
|
|
<DArrowRight /> |
|
|
|
|
</el-icon> |
|
|
|
|
</el-button> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
@ -172,6 +164,7 @@ const toggleAnnouncements = () => {
|
|
|
|
|
border-radius: 8px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
|
|
.announcement-content { |
|
|
|
|
padding: 0 10px; |
|
|
|
|
height: 450px; |
|
|
|
|
@ -219,6 +212,7 @@ const toggleAnnouncements = () => {
|
|
|
|
|
.content { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
p { |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #555; |
|
|
|
|
@ -230,6 +224,7 @@ const toggleAnnouncements = () => {
|
|
|
|
|
white-space: nowrap; // 溢出不换行 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.date { |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #999; |
|
|
|
|
@ -241,6 +236,7 @@ const toggleAnnouncements = () => {
|
|
|
|
|
|
|
|
|
|
/* 响应式设计 */ |
|
|
|
|
@media (max-width: 768px) { |
|
|
|
|
|
|
|
|
|
.el_top, |
|
|
|
|
.announcement-board { |
|
|
|
|
width: 90%; |
|
|
|
|
@ -288,16 +284,19 @@ const toggleAnnouncements = () => {
|
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-evenly; |
|
|
|
|
transform: translate(-56%, 0); |
|
|
|
|
|
|
|
|
|
button { |
|
|
|
|
width: 150px; |
|
|
|
|
height: 50px; |
|
|
|
|
margin: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.footer { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: flex-end; |
|
|
|
|
padding-right: 6px; |
|
|
|
|
|
|
|
|
|
span { |
|
|
|
|
display: flex; |
|
|
|
|
border: 1px solid; |
|
|
|
|
|
