7 changed files with 440 additions and 20 deletions
@ -0,0 +1,9 @@
|
||||
import request from '@/axios'; |
||||
|
||||
export const $_homeList = params => { |
||||
return request({ |
||||
url: '/api/logpm-basic/notice/homeList', |
||||
method: 'get', |
||||
params, |
||||
}); |
||||
}; |
||||
@ -0,0 +1,296 @@
|
||||
<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"> |
||||
<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)" |
||||
> |
||||
<span v-if="isToday(item.releaseTime)" class="red-dot"></span> |
||||
<h2><span>标题：</span>{{ item.title }}</h2> |
||||
<p class="date">时间:{{ item.releaseTime }}</p> |
||||
</div> |
||||
|
||||
<el-empty description="暂无公告通知" v-if="!announcements.length" /> |
||||
</div> |
||||
</div> |
||||
</transition> |
||||
<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> |
||||
</p> |
||||
<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> |
||||
<el-button type="primary" @click="next" |
||||
>下一条<el-icon><DArrowRight /></el-icon> |
||||
</el-button> |
||||
</div> |
||||
</template> |
||||
</el-dialog> |
||||
</template> |
||||
<script setup> |
||||
import { ref, computed } from 'vue'; |
||||
import { $_homeList } from '@/api/bulletinboard/index'; |
||||
|
||||
const loading = ref(false); |
||||
const centerDialogVisible = ref(false); |
||||
const announcements = ref([]); |
||||
|
||||
const isShow = ref(true); |
||||
const currentIndex = ref(null); |
||||
const currentAnnouncement = ref({}); |
||||
|
||||
// 计算当天日期 |
||||
const today = computed(() => { |
||||
const date = new Date(); |
||||
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String( |
||||
date.getDate() |
||||
).padStart(2, '0')}`; |
||||
}); |
||||
|
||||
// 检查日期是否为今天 |
||||
const isToday = releaseTime => { |
||||
const date = new Date(releaseTime); |
||||
return ( |
||||
`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String( |
||||
date.getDate() |
||||
).padStart(2, '0')}` === today.value |
||||
); |
||||
}; |
||||
|
||||
// 页面初始化 |
||||
const onLoad = async () => { |
||||
try { |
||||
loading.value = true; |
||||
let res = await $_homeList(); |
||||
const { code, data } = res.data; |
||||
if (code !== 200) { |
||||
return; |
||||
} |
||||
announcements.value = data; |
||||
} catch (e) { |
||||
console.log(e); |
||||
} finally { |
||||
loading.value = false; |
||||
} |
||||
}; |
||||
|
||||
onLoad(); |
||||
|
||||
// 显示详情 |
||||
const showDetails = (item, index) => { |
||||
currentIndex.value = index; |
||||
currentAnnouncement.value = item; |
||||
centerDialogVisible.value = true; |
||||
}; |
||||
|
||||
// 切换下一条 |
||||
const next = () => { |
||||
if (currentIndex.value < announcements.value.length - 1) { |
||||
currentIndex.value += 1; |
||||
currentAnnouncement.value = announcements.value[currentIndex.value]; |
||||
} |
||||
}; |
||||
|
||||
// 切换上一条 |
||||
const Previous = () => { |
||||
if (currentIndex.value > 0) { |
||||
currentIndex.value -= 1; |
||||
currentAnnouncement.value = announcements.value[currentIndex.value]; |
||||
} |
||||
}; |
||||
|
||||
// 切换公告栏显示 |
||||
const toggleAnnouncements = () => { |
||||
isShow.value = !isShow.value; |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
/* 全局样式 */ |
||||
|
||||
/* 顶部栏 */ |
||||
.el_top { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: 100%; |
||||
max-width: 600px; |
||||
margin: 0 auto; |
||||
padding: 10px 20px; |
||||
background-color: #fff; |
||||
border: 1px solid #ddd; |
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
||||
border-radius: 8px; |
||||
position: relative; |
||||
|
||||
.el_t_button { |
||||
width: 120px; |
||||
height: 40px; |
||||
background-color: #172e60; |
||||
color: #fff; |
||||
border: none; |
||||
border-radius: 4px; |
||||
transition: background-color 0.3s ease; |
||||
|
||||
&:hover { |
||||
background-color: #007bff; |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* 公告栏容器 */ |
||||
.announcement-board { |
||||
width: 100%; |
||||
max-width: 600px; |
||||
margin: 10px auto 0; |
||||
padding: 20px; |
||||
background-color: #fff; |
||||
border: 1px solid #ddd; |
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
||||
border-radius: 8px; |
||||
overflow: hidden; |
||||
position: relative; |
||||
.announcement-content { |
||||
padding: 0 10px; |
||||
height: 450px; |
||||
overflow-y: auto; |
||||
} |
||||
|
||||
/* 公告条目 */ |
||||
.announcement-item { |
||||
position: relative; |
||||
border-bottom: 1px solid #ddd; |
||||
padding: 10px; |
||||
margin-bottom: 15px; |
||||
transition: all 0.3s ease; |
||||
cursor: pointer; |
||||
|
||||
.red-dot { |
||||
position: absolute; |
||||
top: 28%; |
||||
left: -10px; |
||||
transform: translateY(-50%); |
||||
width: 8px; |
||||
height: 8px; |
||||
background-color: red; |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
&:hover { |
||||
background-color: #f9f9f9; |
||||
} |
||||
|
||||
&:last-child { |
||||
border-bottom: none; |
||||
} |
||||
|
||||
h2 { |
||||
font-size: 18px; |
||||
color: #172e60; |
||||
margin: 0 0 10px; |
||||
font-family: 'Arial', sans-serif; |
||||
overflow: hidden; // 超出的文本隐藏 |
||||
text-overflow: ellipsis; // 溢出用省略号显示 |
||||
white-space: nowrap; // 溢出不换行 |
||||
} |
||||
|
||||
.content { |
||||
display: flex; |
||||
align-items: center; |
||||
p { |
||||
font-size: 14px; |
||||
color: #555; |
||||
margin: 0; |
||||
line-height: 1.5; |
||||
font-family: 'Arial', sans-serif; |
||||
overflow: hidden; // 超出的文本隐藏 |
||||
text-overflow: ellipsis; // 溢出用省略号显示 |
||||
white-space: nowrap; // 溢出不换行 |
||||
} |
||||
} |
||||
.date { |
||||
font-size: 12px; |
||||
color: #999; |
||||
margin-top: 5px; |
||||
font-family: 'Arial', sans-serif; |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* 响应式设计 */ |
||||
@media (max-width: 768px) { |
||||
.el_top, |
||||
.announcement-board { |
||||
width: 90%; |
||||
} |
||||
|
||||
.announcement-board { |
||||
.announcement-item { |
||||
h2 { |
||||
font-size: 16px; |
||||
} |
||||
|
||||
p { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.date { |
||||
font-size: 10px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
/* 过渡动画 */ |
||||
.slide-enter-active, |
||||
.slide-leave-active { |
||||
transition: opacity 0.3s ease, transform 0.3s ease; |
||||
transform-origin: top; |
||||
} |
||||
|
||||
.slide-enter-from, |
||||
.slide-leave-to { |
||||
opacity: 0; |
||||
transform: scaleY(0); |
||||
} |
||||
|
||||
.el-dialog { |
||||
min-height: 500px !important; |
||||
} |
||||
|
||||
.dialog-footer { |
||||
position: absolute; |
||||
bottom: 30px; |
||||
left: 50%; |
||||
width: 49%; |
||||
display: flex; |
||||
justify-content: space-evenly; |
||||
transform: translate(-56%, 0); |
||||
button { |
||||
width: 150px; |
||||
height: 50px; |
||||
margin: 0; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue