|
|
|
|
@ -1,8 +1,5 @@
|
|
|
|
|
<template> |
|
|
|
|
<div class="el_top"> |
|
|
|
|
<div> |
|
|
|
|
通知总数: <span>{{ announcements.length }}</span> |
|
|
|
|
</div> |
|
|
|
|
<el-button class="el_t_button" @click="toggleAnnouncements">公告栏</el-button> |
|
|
|
|
</div> |
|
|
|
|
<transition name="slide"> |
|
|
|
|
@ -15,14 +12,18 @@
|
|
|
|
|
@click="showDetails(item, index)" |
|
|
|
|
> |
|
|
|
|
<span v-if="isToday(item.releaseTime)" class="red-dot"></span> |
|
|
|
|
<h2><span>标题：</span>{{ item.title }}</h2> |
|
|
|
|
<h2>{{ item.title }}</h2> |
|
|
|
|
<p class="date">时间:{{ item.releaseTime }}</p> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<el-empty description="暂无公告通知" v-if="!announcements.length" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="footer"> |
|
|
|
|
<span>消息数: {{ announcements.length }}</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</transition> |
|
|
|
|
|
|
|
|
|
<el-dialog |
|
|
|
|
v-model="centerDialogVisible" |
|
|
|
|
:title="currentAnnouncement.title" |
|
|
|
|
@ -132,7 +133,7 @@ const toggleAnnouncements = () => {
|
|
|
|
|
/* 顶部栏 */ |
|
|
|
|
.el_top { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
width: 100%; |
|
|
|
|
max-width: 600px; |
|
|
|
|
@ -145,7 +146,7 @@ const toggleAnnouncements = () => {
|
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
|
|
.el_t_button { |
|
|
|
|
width: 120px; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 40px; |
|
|
|
|
background-color: #172e60; |
|
|
|
|
color: #fff; |
|
|
|
|
@ -293,4 +294,18 @@ const toggleAnnouncements = () => {
|
|
|
|
|
margin: 0; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.footer { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: flex-end; |
|
|
|
|
padding-right: 6px; |
|
|
|
|
span { |
|
|
|
|
display: flex; |
|
|
|
|
border: 1px solid; |
|
|
|
|
padding: 4px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
border-radius: 15px; |
|
|
|
|
min-width: 80px; |
|
|
|
|
justify-content: center; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
