1262 lines
27 KiB
Vue
1262 lines
27 KiB
Vue
<script lang="ts" setup>
|
|
import type { AnnouncementLogDto } from '@/api';
|
|
import type { CloseType } from '@/stores/modules/announcement';
|
|
import { getSystemAnnouncements } from '@/api';
|
|
import { ElMessage } from 'element-plus';
|
|
import { storeToRefs } from 'pinia';
|
|
import { useAnnouncementStore } from '@/stores';
|
|
|
|
const announcementStore = useAnnouncementStore();
|
|
const isLoadingData = ref(false);
|
|
|
|
const activeTab = ref('activity');
|
|
|
|
// 窗口宽度响应式状态
|
|
const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1920);
|
|
|
|
// 监听窗口大小变化
|
|
onMounted(() => {
|
|
const handleResize = () => {
|
|
windowWidth.value = window.innerWidth;
|
|
};
|
|
window.addEventListener('resize', handleResize);
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', handleResize);
|
|
});
|
|
});
|
|
|
|
// 响应式弹窗宽度
|
|
const dialogWidth = computed(() => {
|
|
if (windowWidth.value < 768)
|
|
return '95%';
|
|
if (windowWidth.value < 1024)
|
|
return '90%';
|
|
return '700px';
|
|
});
|
|
|
|
// 从store获取数据
|
|
const { announcements, isDialogVisible } = storeToRefs(announcementStore);
|
|
|
|
// 分离活动和系统公告
|
|
const activities = computed(() => {
|
|
if (!Array.isArray(announcements.value))
|
|
return [];
|
|
return announcements.value.filter(a => a.type === 'Activity');
|
|
});
|
|
const systemAnnouncements = computed(() => {
|
|
if (!Array.isArray(announcements.value))
|
|
return [];
|
|
return announcements.value.filter(a => a.type === 'System');
|
|
});
|
|
|
|
// 处理关闭弹窗
|
|
function handleClose(type: CloseType) {
|
|
announcementStore.closeDialog(type);
|
|
|
|
const messages = {
|
|
today: '一周内不再显示',
|
|
permanent: '公告已关闭',
|
|
};
|
|
|
|
ElMessage.success(messages[type]);
|
|
}
|
|
|
|
// 格式化时间
|
|
function formatTime(time: string) {
|
|
const date = new Date(time);
|
|
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
|
|
}
|
|
|
|
// 判断活动状态
|
|
function getActivityStatus(activity: AnnouncementLogDto): 'active' | 'expired' {
|
|
if (!activity.endTime)
|
|
return 'active';
|
|
const now = new Date();
|
|
const endTime = new Date(activity.endTime);
|
|
return now > endTime ? 'expired' : 'active';
|
|
}
|
|
|
|
// 监听弹窗显示状态，每次打开时从后端获取最新数据
|
|
watch(isDialogVisible, async (newValue) => {
|
|
if (newValue) {
|
|
// 弹窗打开时，从后端获取最新数据
|
|
isLoadingData.value = true;
|
|
try {
|
|
const res = await getSystemAnnouncements();
|
|
if (res && res.data && Array.isArray(res.data)) {
|
|
announcementStore.setAnnouncementData(res.data);
|
|
}
|
|
else {
|
|
announcementStore.setAnnouncementData([]);
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.error('获取系统公告失败:', error);
|
|
ElMessage.error('获取公告数据失败，请稍后重试');
|
|
announcementStore.setAnnouncementData([]);
|
|
}
|
|
finally {
|
|
isLoadingData.value = false;
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<el-dialog
|
|
v-model="isDialogVisible"
|
|
title="系统公告"
|
|
:width="dialogWidth"
|
|
:close-on-click-modal="true"
|
|
class="announcement-dialog"
|
|
>
|
|
<div v-loading="isLoadingData" class="announcement-dialog-content">
|
|
<el-tabs v-model="activeTab" class="announcement-tabs">
|
|
<!-- 活动Tab -->
|
|
<el-tab-pane label="活动" name="activity">
|
|
<div class="tab-content-wrapper">
|
|
<div class="activity-content">
|
|
<!-- 活动列表 -->
|
|
<div v-if="activities.length > 0" class="activity-list">
|
|
<div
|
|
v-for="(activity, index) in activities"
|
|
:key="index"
|
|
class="activity-item"
|
|
>
|
|
<!-- 活动图片 -->
|
|
<div v-if="activity.imageUrl" class="activity-image-wrapper">
|
|
<img :src="activity.imageUrl" :alt="activity.title" class="activity-image">
|
|
<!-- 图片上的状态标签 -->
|
|
<div class="activity-status-badge">
|
|
<el-tag
|
|
v-if="getActivityStatus(activity) === 'active'"
|
|
type="success"
|
|
size="small"
|
|
effect="dark"
|
|
>
|
|
进行中
|
|
</el-tag>
|
|
<el-tag
|
|
v-else
|
|
type="info"
|
|
size="small"
|
|
effect="dark"
|
|
>
|
|
已结束
|
|
</el-tag>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="activity-body">
|
|
<div class="activity-header">
|
|
<h3 class="activity-title">
|
|
{{ activity.title }}
|
|
</h3>
|
|
</div>
|
|
|
|
<!-- 活动内容 -->
|
|
<div class="activity-content-list">
|
|
<p v-for="(line, idx) in activity.content" :key="idx" class="content-line">
|
|
{{ line }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="activity-footer">
|
|
<div class="activity-time-range">
|
|
<span class="activity-time">{{ formatTime(activity.startTime) }}</span>
|
|
<span v-if="activity.endTime" class="activity-time">至 {{ formatTime(activity.endTime) }}</span>
|
|
</div>
|
|
<!-- 查看详情按钮 -->
|
|
<a
|
|
v-if="activity.url"
|
|
:href="activity.url"
|
|
target="_blank"
|
|
class="detail-link"
|
|
>
|
|
查看详情
|
|
<span class="detail-icon">→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-empty v-else description="暂无活动" />
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
|
|
<!-- 公告Tab -->
|
|
<el-tab-pane label="公告" name="announcement">
|
|
<div class="tab-content-wrapper">
|
|
<div class="announcement-content">
|
|
<!-- 系统公告列表 -->
|
|
<div v-if="systemAnnouncements.length > 0">
|
|
<el-timeline>
|
|
<el-timeline-item
|
|
v-for="(announcement, index) in systemAnnouncements"
|
|
:key="index"
|
|
:timestamp="formatTime(announcement.startTime)"
|
|
placement="top"
|
|
>
|
|
<div class="announcement-item">
|
|
<div class="announcement-header">
|
|
<h4 class="announcement-title">
|
|
{{ announcement.title }}
|
|
</h4>
|
|
</div>
|
|
|
|
<!-- 公告内容 -->
|
|
<div class="announcement-content-list">
|
|
<p v-for="(line, idx) in announcement.content" :key="idx" class="content-line">
|
|
{{ line }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</el-timeline-item>
|
|
</el-timeline>
|
|
</div>
|
|
<el-empty v-else description="暂无公告" />
|
|
</div>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
|
|
<!-- 底部按钮 -->
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button @click="handleClose('today')">
|
|
关闭一周
|
|
</el-button>
|
|
<el-button type="primary" @click="handleClose('permanent')">
|
|
关闭公告
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
// 弹窗遮罩动画
|
|
:deep(.el-overlay) {
|
|
backdrop-filter: blur(4px);
|
|
animation: fadeIn 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// 确保弹窗本身不会溢出
|
|
:deep(.el-dialog) {
|
|
margin-top: 5vh !important;
|
|
margin-bottom: 5vh !important;
|
|
max-height: 90vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
|
|
animation: slideInDown 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
@keyframes slideInDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-30px) scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
:deep(.el-dialog__header) {
|
|
padding: 24px 28px;
|
|
border-bottom: none;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -50%;
|
|
right: -5%;
|
|
width: 200px;
|
|
height: 200px;
|
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -20%;
|
|
left: -3%;
|
|
width: 150px;
|
|
height: 150px;
|
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.el-dialog__title {
|
|
color: #fff;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
|
|
&::before {
|
|
content: '📣';
|
|
font-size: 24px;
|
|
animation: bounce 2s infinite;
|
|
}
|
|
}
|
|
|
|
.el-dialog__headerbtn {
|
|
top: 24px;
|
|
right: 24px;
|
|
z-index: 1;
|
|
|
|
.el-dialog__close {
|
|
color: #fff;
|
|
font-size: 22px;
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.15);
|
|
backdrop-filter: blur(10px);
|
|
transition: all 0.3s;
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
background: rgba(255, 255, 255, 0.25);
|
|
transform: rotate(90deg);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 100% {
|
|
transform: translateY(0);
|
|
}
|
|
50% {
|
|
transform: translateY(-5px);
|
|
}
|
|
}
|
|
|
|
:deep(.el-dialog__body) {
|
|
overflow: hidden;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 !important;
|
|
background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #667eea 100%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 3s linear infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: -200% 0;
|
|
}
|
|
100% {
|
|
background-position: 200% 0;
|
|
}
|
|
}
|
|
|
|
:deep(.el-dialog__footer) {
|
|
padding: 20px 28px;
|
|
border-top: 1px solid #e4e7ed;
|
|
background: linear-gradient(to top, #fafbfc 0%, #ffffff 100%);
|
|
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.03);
|
|
}
|
|
|
|
.announcement-dialog-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.announcement-tabs {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
|
|
:deep(.el-tabs__header) {
|
|
flex-shrink: 0;
|
|
margin: 0 20px;
|
|
padding-top: 16px;
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
:deep(.el-tabs__nav-wrap::after) {
|
|
display: none;
|
|
}
|
|
|
|
:deep(.el-tabs__active-bar) {
|
|
background-color: #667eea;
|
|
height: 3px;
|
|
}
|
|
|
|
:deep(.el-tabs__item) {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: #606266;
|
|
|
|
&:hover {
|
|
color: #667eea;
|
|
}
|
|
|
|
&.is-active {
|
|
color: #667eea;
|
|
}
|
|
}
|
|
|
|
:deep(.el-tabs__content) {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
:deep(.el-tab-pane) {
|
|
height: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.tab-content-wrapper {
|
|
height: 60vh;
|
|
max-height: 60vh;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: 20px 24px 24px;
|
|
flex-shrink: 0;
|
|
|
|
// 自定义滚动条样式
|
|
&::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-track {
|
|
background: #f1f3f5;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 4px;
|
|
transition: background 0.3s;
|
|
|
|
&:hover {
|
|
background: linear-gradient(180deg, #5568d3 0%, #65408b 100%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.activity-content {
|
|
min-height: min-content;
|
|
|
|
.activity-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.activity-item {
|
|
position: relative;
|
|
padding: 0;
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
border: 2px solid transparent;
|
|
background-clip: padding-box;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-radius: 16px;
|
|
padding: 2px;
|
|
background: linear-gradient(135deg, transparent 0%, transparent 100%);
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
opacity: 0;
|
|
transition: opacity 0.4s;
|
|
}
|
|
|
|
&:hover {
|
|
transform: translateY(-8px) scale(1.01);
|
|
box-shadow: 0 16px 40px rgba(102, 126, 234, 0.25);
|
|
border-color: #667eea;
|
|
|
|
&::before {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
opacity: 1;
|
|
}
|
|
|
|
.activity-image {
|
|
transform: scale(1.1);
|
|
filter: brightness(1.05);
|
|
}
|
|
|
|
.detail-link {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: #fff;
|
|
padding-right: 16px;
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
|
|
|
.detail-icon {
|
|
transform: translateX(6px) scale(1.2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.activity-image-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 220px;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
|
z-index: 1;
|
|
animation: shine 3s infinite;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 100px;
|
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes shine {
|
|
0% {
|
|
left: -100%;
|
|
}
|
|
50%, 100% {
|
|
left: 100%;
|
|
}
|
|
}
|
|
|
|
.activity-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.activity-status-badge {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
z-index: 2;
|
|
animation: fadeInScale 0.5s ease-out 0.3s both;
|
|
|
|
:deep(.el-tag) {
|
|
border-radius: 20px;
|
|
padding: 7px 18px;
|
|
font-weight: 700;
|
|
font-size: 13px;
|
|
border: none;
|
|
backdrop-filter: blur(12px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
transition: all 0.3s;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
|
|
&.el-tag--success.el-tag--dark {
|
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.95));
|
|
color: #fff;
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
&.el-tag--info.el-tag--dark {
|
|
background: rgba(148, 163, 184, 0.95);
|
|
color: #fff;
|
|
}
|
|
|
|
&:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInScale {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.5);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
|
|
}
|
|
50% {
|
|
box-shadow: 0 4px 20px rgba(16, 185, 129, 0.6);
|
|
}
|
|
}
|
|
|
|
.activity-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.activity-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.activity-title {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #1a1a1a;
|
|
flex: 1;
|
|
line-height: 1.4;
|
|
background: linear-gradient(135deg, #1a1a1a 0%, #4a5568 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
transition: all 0.3s;
|
|
|
|
.activity-item:hover & {
|
|
letter-spacing: 0.3px;
|
|
}
|
|
}
|
|
|
|
.activity-content-list {
|
|
padding: 0;
|
|
margin: 0 0 16px 0;
|
|
color: #4a5568;
|
|
font-size: 14px;
|
|
line-height: 1.8;
|
|
|
|
.content-line {
|
|
margin: 8px 0;
|
|
padding-left: 18px;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 11px;
|
|
width: 6px;
|
|
height: 6px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.activity-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding-top: 16px;
|
|
border-top: 1px dashed #e8e9eb;
|
|
}
|
|
|
|
.activity-time-range {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.activity-time {
|
|
font-size: 13px;
|
|
color: #718096;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
|
|
&:first-child::before {
|
|
content: '🕐';
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.detail-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 18px;
|
|
background: linear-gradient(135deg, #f0f1f3 0%, #e8eaed 100%);
|
|
color: #667eea;
|
|
border-radius: 24px;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
white-space: nowrap;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
transform: translate(-50%, -50%);
|
|
transition: width 0.6s, height 0.6s;
|
|
}
|
|
|
|
&:hover::before {
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
|
|
&:hover {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: #fff;
|
|
transform: translateX(4px) scale(1.05);
|
|
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
|
|
}
|
|
|
|
.detail-icon {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
span:not(.detail-icon) {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.announcement-content {
|
|
min-height: min-content;
|
|
|
|
:deep(.el-timeline) {
|
|
padding-left: 20px;
|
|
}
|
|
|
|
:deep(.el-timeline-item__node) {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border: 3px solid #fff;
|
|
box-shadow: 0 0 0 2px #e8e9eb;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
:deep(.el-timeline-item__tail) {
|
|
border-left: 2px dashed #d1d5db;
|
|
}
|
|
|
|
:deep(.el-timeline-item__timestamp) {
|
|
color: #718096;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
margin-bottom: 10px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
white-space: nowrap;
|
|
|
|
&::before {
|
|
content: '📅';
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
.announcement-item {
|
|
position: relative;
|
|
padding: 24px;
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
margin-bottom: 16px;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
border: 1px solid #e8e9eb;
|
|
border-left: 4px solid #e8e9eb;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 4px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
transform: scaleY(0);
|
|
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.05), transparent);
|
|
transform: translateY(-50%);
|
|
transition: left 0.6s;
|
|
}
|
|
|
|
&:hover {
|
|
transform: translateX(8px) scale(1.02);
|
|
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
|
|
border-color: transparent;
|
|
background: linear-gradient(to right, rgba(102, 126, 234, 0.03), #fff);
|
|
|
|
&::before {
|
|
transform: scaleY(1);
|
|
}
|
|
|
|
&::after {
|
|
left: 100%;
|
|
}
|
|
|
|
.announcement-title {
|
|
color: #667eea;
|
|
transform: translateX(4px);
|
|
}
|
|
}
|
|
}
|
|
|
|
.announcement-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.announcement-title {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #1a1a1a;
|
|
line-height: 1.4;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
transition: all 0.3s;
|
|
|
|
&::before {
|
|
content: '📢';
|
|
font-size: 20px;
|
|
animation: swing 2s ease-in-out infinite;
|
|
transform-origin: top center;
|
|
}
|
|
}
|
|
|
|
@keyframes swing {
|
|
0%, 100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
10%, 30% {
|
|
transform: rotate(-10deg);
|
|
}
|
|
20%, 40% {
|
|
transform: rotate(10deg);
|
|
}
|
|
50% {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
|
|
.announcement-content-list {
|
|
padding: 0;
|
|
margin: 0;
|
|
color: #4a5568;
|
|
font-size: 14px;
|
|
line-height: 1.8;
|
|
|
|
.content-line {
|
|
margin: 8px 0;
|
|
padding-left: 18px;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 11px;
|
|
width: 6px;
|
|
height: 6px;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dialog-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
|
|
:deep(.el-button) {
|
|
border-radius: 24px;
|
|
padding: 12px 28px;
|
|
font-weight: 600;
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 0;
|
|
height: 0;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
transform: translate(-50%, -50%);
|
|
transition: width 0.6s, height 0.6s;
|
|
}
|
|
|
|
&:active::before {
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
|
|
&:not(.el-button--primary) {
|
|
border: 2px solid #d1d5db;
|
|
color: #4a5568;
|
|
background: #fff;
|
|
|
|
&:hover {
|
|
border-color: #667eea;
|
|
color: #667eea;
|
|
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
|
|
}
|
|
}
|
|
|
|
&.el-button--primary {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border: none;
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
|
|
|
&:hover {
|
|
background: linear-gradient(135deg, #5568d3 0%, #65408b 100%);
|
|
transform: translateY(-3px) scale(1.02);
|
|
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.5);
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(-1px) scale(0.98);
|
|
}
|
|
}
|
|
|
|
span {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 空状态样式优化
|
|
:deep(.el-empty) {
|
|
padding: 60px 0;
|
|
|
|
.el-empty__image {
|
|
width: 120px;
|
|
}
|
|
|
|
.el-empty__description {
|
|
color: #9ca3af;
|
|
font-size: 14px;
|
|
margin-top: 16px;
|
|
}
|
|
}
|
|
|
|
// 移动端适配
|
|
@media screen and (max-width: 768px) {
|
|
:deep(.el-dialog) {
|
|
margin: 5vh auto !important;
|
|
max-height: 90vh;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
:deep(.el-dialog__header) {
|
|
padding: 16px 20px;
|
|
|
|
.el-dialog__title {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
:deep(.el-dialog__footer) {
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.announcement-tabs {
|
|
:deep(.el-tabs__header) {
|
|
margin: 0 12px;
|
|
padding-top: 12px;
|
|
}
|
|
|
|
:deep(.el-tabs__item) {
|
|
font-size: 14px;
|
|
padding: 0 16px;
|
|
}
|
|
}
|
|
|
|
.tab-content-wrapper {
|
|
height: calc(90vh - 230px);
|
|
max-height: calc(90vh - 230px);
|
|
padding: 16px 16px 20px;
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
}
|
|
|
|
.activity-content {
|
|
.activity-list {
|
|
gap: 16px;
|
|
}
|
|
|
|
.activity-item {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.activity-image-wrapper {
|
|
height: 180px;
|
|
}
|
|
|
|
.activity-body {
|
|
padding: 16px;
|
|
}
|
|
|
|
.activity-header {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.activity-title {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.activity-content-list {
|
|
margin-bottom: 12px;
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.activity-footer {
|
|
padding-top: 12px;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 12px;
|
|
}
|
|
|
|
.detail-link {
|
|
width: 100%;
|
|
justify-content: center;
|
|
padding: 10px 16px;
|
|
}
|
|
}
|
|
|
|
.announcement-content {
|
|
:deep(.el-timeline) {
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.announcement-item {
|
|
padding: 16px;
|
|
border-radius: 10px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.announcement-title {
|
|
font-size: 15px;
|
|
|
|
&::before {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
.announcement-content-list {
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
}
|
|
}
|
|
|
|
.dialog-footer {
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
|
|
:deep(.el-button) {
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 11px 24px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 平板适配 (768px - 1024px)
|
|
@media screen and (min-width: 768px) and (max-width: 1024px) {
|
|
:deep(.el-dialog) {
|
|
margin: 5vh auto !important;
|
|
max-height: 90vh;
|
|
}
|
|
|
|
.announcement-tabs {
|
|
max-height: calc(90vh - 200px);
|
|
}
|
|
|
|
.activity-content {
|
|
.activity-image-wrapper {
|
|
height: 200px;
|
|
}
|
|
}
|
|
|
|
.announcement-content {
|
|
.announcement-item {
|
|
padding: 18px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 添加入场动画
|
|
@keyframes slideInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px) scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
|
|
.activity-item {
|
|
animation: slideInUp 0.5s ease-out both;
|
|
|
|
@for $i from 1 through 10 {
|
|
&:nth-child(#{$i}) {
|
|
animation-delay: #{$i * 0.08}s;
|
|
}
|
|
}
|
|
}
|
|
|
|
.announcement-item {
|
|
animation: slideInUp 0.5s ease-out both;
|
|
}
|
|
|
|
// 滚动条美化
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #f1f3f5;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 4px;
|
|
transition: background 0.3s;
|
|
|
|
&:hover {
|
|
background: linear-gradient(180deg, #5568d3 0%, #65408b 100%);
|
|
}
|
|
}
|
|
|
|
// 添加标签页切换动画
|
|
:deep(.el-tabs__content) {
|
|
.el-tab-pane {
|
|
animation: fadeInContent 0.4s ease-out;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInContent {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|