113 lines
2.4 KiB
Vue
113 lines
2.4 KiB
Vue
<script setup lang="ts">
|
||
import { storeToRefs } from 'pinia';
|
||
import { useAnnouncementStore } from '@/stores';
|
||
|
||
const announcementStore = useAnnouncementStore();
|
||
const { announcements } = storeToRefs(announcementStore);
|
||
|
||
// 计算未读公告数量（系统公告数量）
|
||
const unreadCount = computed(() => {
|
||
if (!Array.isArray(announcements.value))
|
||
return 0;
|
||
return announcements.value.filter(a => a.type === 'System').length;
|
||
});
|
||
|
||
// 打开公告弹窗
|
||
function openAnnouncement() {
|
||
announcementStore.openDialog();
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="announcement-btn-container" data-tour="announcement-btn">
|
||
<el-badge
|
||
is-dot
|
||
class="announcement-badge"
|
||
>
|
||
<!-- :value="unreadCount" -->
|
||
<!-- :hidden="unreadCount === 0" -->
|
||
<!-- :max="99" -->
|
||
<div
|
||
class="announcement-btn"
|
||
title="查看公告"
|
||
@click="openAnnouncement"
|
||
>
|
||
<!-- PC端显示文字 -->
|
||
<span class="pc-text">公告</span>
|
||
<!-- 移动端显示图标 -->
|
||
<svg
|
||
class="mobile-icon"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
width="20"
|
||
height="20"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
|
||
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
|
||
</svg>
|
||
</div>
|
||
</el-badge>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.announcement-btn-container {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.announcement-badge {
|
||
:deep(.el-badge__content) {
|
||
background-color: #f56c6c;
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.announcement-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
cursor: pointer;
|
||
font-size: 1.2rem;
|
||
font-weight: bold;
|
||
color: #409eff;
|
||
transition: all 0.2s;
|
||
|
||
&:hover {
|
||
color: #66b1ff;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
// PC端显示文字，隐藏图标
|
||
.pc-text {
|
||
display: inline;
|
||
margin: 0 12px;
|
||
|
||
}
|
||
|
||
.mobile-icon {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 移动端显示图标，隐藏文字
|
||
@media (max-width: 768px) {
|
||
.announcement-btn-container {
|
||
.announcement-btn {
|
||
.pc-text {
|
||
display: none;
|
||
}
|
||
|
||
.mobile-icon {
|
||
display: inline;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|