优化用户通知组件,增加通知列表容器样式以支持滚动,提升用户体验

This commit is contained in:
jxxghp
2025-05-02 13:28:59 +08:00
parent 95edaa99b6
commit 9fe434849c
+15 -1
View File
@@ -86,7 +86,8 @@ onBeforeUnmount(() => {
</template> </template>
</VCardItem> </VCardItem>
<VDivider /> <VDivider />
<div v-if="notificationList.length > 0"> <div class="notification-list-container">
<div v-if="notificationList.length > 0" class="notification-list">
<VListItem v-for="(item, i) in notificationList" :key="i" lines="two" class="mb-1"> <VListItem v-for="(item, i) in notificationList" :key="i" lines="two" class="mb-1">
<template #prepend> <template #prepend>
<VAvatar rounded> <VAvatar rounded>
@@ -112,6 +113,19 @@ onBeforeUnmount(() => {
<VIcon icon="mdi-bell-sleep-outline" size="40" class="mb-3" /> <VIcon icon="mdi-bell-sleep-outline" size="40" class="mb-3" />
<div>{{ t('notification.empty') }}</div> <div>{{ t('notification.empty') }}</div>
</div> </div>
</div>
</VCard> </VCard>
</VMenu> </VMenu>
</template> </template>
<style scoped>
.notification-list-container {
max-height: 50vh;
overflow: hidden;
}
.notification-list {
max-height: 100%;
overflow-y: auto;
}
</style>