mirror of
https://github.com/pure-admin/pure-admin-thin.git
synced 2025-04-25 07:57:18 +08:00
78 lines
1.8 KiB
Vue
78 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import { noticesData } from "./data";
|
|
import NoticeList from "./noticeList.vue";
|
|
import Bell from "@iconify-icons/ep/bell";
|
|
|
|
const noticesNum = ref(0);
|
|
const notices = ref(noticesData);
|
|
const activeKey = ref(noticesData[0].key);
|
|
|
|
notices.value.map(v => (noticesNum.value += v.list.length));
|
|
</script>
|
|
|
|
<template>
|
|
<el-dropdown trigger="click" placement="bottom-end">
|
|
<span class="dropdown-badge navbar-bg-hover select-none">
|
|
<el-badge :value="noticesNum" :max="99">
|
|
<span class="header-notice-icon">
|
|
<IconifyIconOffline :icon="Bell" />
|
|
</span>
|
|
</el-badge>
|
|
</span>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-tabs :stretch="true" v-model="activeKey" class="dropdown-tabs">
|
|
<template v-for="item in notices" :key="item.key">
|
|
<el-tab-pane
|
|
:label="`${item.name}(${item.list.length})`"
|
|
:name="`${item.key}`"
|
|
>
|
|
<el-scrollbar max-height="330px">
|
|
<div class="noticeList-container">
|
|
<NoticeList :list="item.list" />
|
|
</div>
|
|
</el-scrollbar>
|
|
</el-tab-pane>
|
|
</template>
|
|
</el-tabs>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.dropdown-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 60px;
|
|
height: 48px;
|
|
cursor: pointer;
|
|
|
|
.header-notice-icon {
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
.dropdown-tabs {
|
|
width: 330px;
|
|
|
|
.noticeList-container {
|
|
padding: 15px 24px 0;
|
|
}
|
|
|
|
:deep(.el-tabs__header) {
|
|
margin: 0;
|
|
}
|
|
|
|
:deep(.el-tabs__nav-wrap)::after {
|
|
height: 1px;
|
|
}
|
|
|
|
:deep(.el-tabs__nav-wrap) {
|
|
padding: 0 36px;
|
|
}
|
|
}
|
|
</style>
|