rogee/quyun-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 调整通知视图的样式，优化标签和内容的排版，提升可读性

Browse Source
This commit is contained in:
Rogee
2025-12-26 22:30:11 +08:00
parent a6e737fdaf
commit 4ba5f9e951
2 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/portal/src/layout/LayoutCreator.vue
View File

@@ -1,9 +1,10 @@
<template> <template>
<div class="min-h-screen flex flex-col bg-slate-50"> <div class="min-h-screen flex flex-col bg-slate-50">
<TopNavbar /> <TopNavbar />
<main class="flex-grow pt-16"> <main class="flex-grow pt-16">
<div class="mx-auto max-w-screen-xl py-8 flex gap-8"> <div class="mx-auto max-w-screen-xl py-8 flex gap-8">
<!-- Creator Sidebar (Dark Theme) --> <aside class="w-[260px] flex-shrink-0 hidden lg:block"> <!-- Creator Sidebar (Dark Theme) -->
<aside class="w-[280px] flex-shrink-0 hidden lg:block">
<div <div
class="bg-slate-900 rounded-2xl shadow-sm overflow-hidden sticky top-24 text-slate-300 min-h-[600px] flex flex-col"> class="bg-slate-900 rounded-2xl shadow-sm overflow-hidden sticky top-24 text-slate-300 min-h-[600px] flex flex-col">
<!-- Header --> <!-- Header -->

12
frontend/portal/src/views/user/NotificationsView.vue
View File

@@ -7,14 +7,14 @@
v-for="tab in tabs" v-for="tab in tabs"
:key="tab.value" :key="tab.value"
@click="currentTab = tab.value" @click="currentTab = tab.value"
class="pb-4 text-sm font-medium transition-colors border-b-2 cursor-pointer focus:outline-none relative" class="pb-4 text-base font-bold transition-colors border-b-2 cursor-pointer focus:outline-none relative"
:class="currentTab === tab.value ? 'text-primary-600 border-primary-600' : 'text-slate-500 border-transparent hover:text-slate-700'" :class="currentTab === tab.value ? 'text-primary-600 border-primary-600' : 'text-slate-500 border-transparent hover:text-slate-700'"
> >
{{ tab.label }} {{ tab.label }}
<span v-if="tab.count > 0" class="absolute -top-1 -right-3 min-w-[1.25rem] h-5 px-1 bg-red-500 text-white text-xs rounded-full flex items-center justify-center scale-75">{{ tab.count }}</span> <span v-if="tab.count > 0" class="absolute -top-1 -right-4 min-w-[1.25rem] h-5 px-1.5 bg-red-500 text-white text-[10px] rounded-full flex items-center justify-center">{{ tab.count }}</span>
</button> </button>
</div> </div>
<button class="mb-4 text-sm text-slate-500 hover:text-primary-600 cursor-pointer flex items-center gap-1"> <button class="mb-4 text-base font-medium text-slate-500 hover:text-primary-600 cursor-pointer flex items-center gap-1">
<i class="pi pi-check-circle"></i> 全部已读 <i class="pi pi-check-circle"></i> 全部已读
</button> </button>
</div> </div>
@@ -37,13 +37,13 @@
<!-- Content --> <!-- Content -->
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="flex items-center justify-between mb-1"> <div class="flex items-center justify-between mb-1">
<h3 class="font-bold text-slate-900 text-sm group-hover:text-primary-600 transition-colors flex items-center gap-2"> <h3 class="font-bold text-slate-900 text-lg group-hover:text-primary-600 transition-colors flex items-center gap-2">
<span v-if="!item.read" class="w-2 h-2 bg-blue-600 rounded-full inline-block"></span> <span v-if="!item.read" class="w-2 h-2 bg-blue-600 rounded-full inline-block"></span>
{{ item.title }} {{ item.title }}
</h3> </h3>
<span class="text-xs text-slate-400 whitespace-nowrap">{{ item.time }}</span> <span class="text-sm text-slate-400 whitespace-nowrap">{{ item.time }}</span>
</div> </div>
<p class="text-sm text-slate-600 line-clamp-2">{{ item.content }}</p> <p class="text-base text-slate-600 line-clamp-2">{{ item.content }}</p>
</div> </div>
</div> </div>
</div> </div>