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

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

@@ -12,7 +12,7 @@
<div class="text-blue-100 text-sm font-medium mb-1">账户余额 (元)</div>
<div class="text-5xl font-bold font-mono">128.50</div>
</div>
<button @click="showRecharge = !showRecharge" class="px-8 py-3 bg-white text-blue-600 font-bold rounded-full shadow-sm hover:bg-blue-50 transition-all active:scale-95">
<button @click="showRecharge = !showRecharge" class="px-8 py-3 bg-white text-blue-600 font-bold rounded-full shadow-sm hover:bg-blue-50 transition-all active:scale-95 cursor-pointer">
立即充值
</button>
</div>
@@ -26,7 +26,7 @@
v-for="amount in [10, 30, 50, 100, 200, 500]"
:key="amount"
@click="selectedAmount = amount; customAmount = ''"
class="h-14 rounded-lg border-2 font-bold text-lg transition-all"
class="h-14 rounded-lg border-2 font-bold text-lg transition-all cursor-pointer active:scale-95"
:class="selectedAmount === amount ? 'border-blue-600 bg-blue-50 text-blue-600' : 'border-slate-200 bg-white text-slate-600 hover:border-blue-300'"
>
{{ amount }}元
@@ -37,22 +37,22 @@
@focus="selectedAmount = null"
type="number"
placeholder="自定义金额"
class="w-full h-14 pl-4 pr-4 rounded-lg border-2 border-slate-200 focus:border-blue-600 focus:outline-none text-lg font-bold"
class="w-full h-14 pl-4 pr-4 rounded-lg border-2 border-slate-200 focus:border-blue-600 focus:outline-none text-lg font-bold transition-colors"
>
</div>
</div>
<h3 class="font-bold text-slate-900 mb-4">支付方式</h3>
<div class="flex gap-4 mb-8">
<button class="flex items-center gap-2 px-6 py-3 border-2 border-blue-600 bg-blue-50 text-blue-700 rounded-lg font-medium">
<button class="flex items-center gap-2 px-6 py-3 border-2 border-blue-600 bg-blue-50 text-blue-700 rounded-lg font-medium cursor-pointer active:scale-95 transition-transform">
<i class="pi pi-wechat text-xl text-green-600"></i> 微信支付
</button>
<button class="flex items-center gap-2 px-6 py-3 border-2 border-slate-200 text-slate-600 rounded-lg hover:bg-white font-medium">
<button class="flex items-center gap-2 px-6 py-3 border-2 border-slate-200 text-slate-600 rounded-lg hover:bg-white hover:border-slate-300 font-medium cursor-pointer active:scale-95 transition-all">
<i class="pi pi-alipay text-xl text-blue-500"></i> 支付宝
</button>
</div>
<button class="w-full py-4 bg-blue-600 text-white rounded-xl font-bold text-lg hover:bg-blue-700 transition-colors shadow-lg shadow-blue-200">
<button class="w-full py-4 bg-blue-600 text-white rounded-xl font-bold text-lg hover:bg-blue-700 transition-all shadow-lg shadow-blue-200 cursor-pointer active:scale-[0.98]">
确认支付 ¥ {{ displayAmount }}
</button>
</div>