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

feat(portal): complete user center pages and refine interactive feedback

Browse Source
This commit is contained in:
Rogee
2025-12-26 10:25:26 +08:00
parent 648e3f7c21
commit 6b71ac47d1
7 changed files with 173 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/portal/src/views/HomeView.vue
View File

@@ -80,7 +80,7 @@
</router-link>
<!-- Card Variant 2: No Image (Text Only) -->
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5 hover:shadow-md transition-shadow group">
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5 hover:shadow-md transition-all hover:border-primary-100 cursor-pointer active:scale-[0.99] group">
<div class="flex items-center gap-2 mb-2">
<span class="px-1.5 py-0.5 rounded text-xs font-medium bg-green-50 text-green-600 border border-green-100">限免</span>
<span class="text-xs text-slate-500 border border-slate-200 px-1 rounded">[昆曲]</span>
@@ -102,17 +102,17 @@
</div>
<!-- Card Variant 3: 3 Images -->
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5 hover:shadow-md transition-shadow group">
<div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5 hover:shadow-md transition-all hover:border-primary-100 cursor-pointer active:scale-[0.99] group">
<h3 class="text-lg font-bold text-slate-900 mb-3 group-hover:text-primary-600 transition-colors">[图集] 2024 新年京剧晚会后台探班：名角云集</h3>
<div class="grid grid-cols-3 gap-2 mb-4">
<div class="aspect-[4/3] rounded-lg overflow-hidden bg-slate-100">
<img src="https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
<img src="https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</div>
<div class="aspect-[4/3] rounded-lg overflow-hidden bg-slate-100">
<img src="https://images.unsplash.com/photo-1533174072545-e8d4aa97edf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
<img src="https://images.unsplash.com/photo-1533174072545-e8d4aa97edf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</div>
<div class="aspect-[4/3] rounded-lg overflow-hidden bg-slate-100 relative">
<img src="https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
<img src="https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute bottom-2 right-2 px-1.5 py-0.5 bg-black/60 text-white text-xs rounded">+9</div>
</div>
</div>