refactor: enhance HomeView layout and styling; improve PaymentView with new payment methods and QR code handling; clean up SecurityView by removing unused sections
This commit is contained in:
@@ -1,68 +1,76 @@
|
||||
<template>
|
||||
<div class="min-h-screen flex flex-col bg-slate-50">
|
||||
<TopNavbar />
|
||||
<main class="flex-grow pt-16">
|
||||
<div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 py-8 flex gap-8">
|
||||
<!-- Sidebar -->
|
||||
<aside class="w-[280px] flex-shrink-0 hidden lg:block">
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden sticky top-24">
|
||||
<!-- User Brief -->
|
||||
<div class="p-6 border-b border-slate-100 bg-slate-50/50">
|
||||
<div class="flex items-center gap-4">
|
||||
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix" class="w-12 h-12 rounded-full border-2 border-white shadow-sm" />
|
||||
<div class="overflow-hidden">
|
||||
<div class="font-bold text-slate-900 truncate">Felix Demo</div>
|
||||
<div class="text-xs text-slate-500">ID: 9527330</div>
|
||||
<div class="min-h-screen flex flex-col bg-slate-50">
|
||||
<TopNavbar />
|
||||
<main class="flex-grow pt-16">
|
||||
<div class="mx-auto max-w-screen-xl py-8 flex gap-8">
|
||||
<!-- Sidebar -->
|
||||
<aside class="w-[280px] flex-shrink-0 hidden lg:block">
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden sticky top-24">
|
||||
<!-- User Brief -->
|
||||
<div class="p-6 border-b border-slate-100 bg-slate-50/50">
|
||||
<div class="flex items-center gap-4">
|
||||
<img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Felix"
|
||||
class="w-12 h-12 rounded-full border-2 border-white shadow-sm" />
|
||||
<div class="overflow-hidden">
|
||||
<div class="font-bold text-slate-900 truncate">Felix Demo</div>
|
||||
<div class="text-xs text-slate-500">ID: 9527330</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Menus -->
|
||||
<nav class="p-4 space-y-1">
|
||||
<router-link to="/me" exact-active-class="bg-primary-50 text-primary-600 font-semibold" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
||||
<i class="pi pi-home text-lg"></i>
|
||||
<span>概览</span>
|
||||
</router-link>
|
||||
<router-link to="/me/orders" active-class="bg-primary-50 text-primary-600 font-semibold" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
||||
<i class="pi pi-shopping-bag text-lg"></i>
|
||||
<span>我的订单</span>
|
||||
</router-link>
|
||||
<router-link to="/me/wallet" active-class="bg-primary-50 text-primary-600 font-semibold" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
||||
<i class="pi pi-wallet text-lg"></i>
|
||||
<span>我的钱包</span>
|
||||
</router-link>
|
||||
<router-link to="/me/library" active-class="bg-primary-50 text-primary-600 font-semibold" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
||||
<i class="pi pi-book text-lg"></i>
|
||||
<span>已购内容</span>
|
||||
</router-link>
|
||||
<router-link to="/me/notifications" active-class="bg-primary-50 text-primary-600 font-semibold" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
||||
<i class="pi pi-bell text-lg"></i>
|
||||
<span>消息中心</span>
|
||||
</router-link>
|
||||
<div class="my-2 border-t border-slate-100"></div>
|
||||
<router-link to="/me/profile" active-class="bg-primary-50 text-primary-600 font-semibold" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
||||
<i class="pi pi-user text-lg"></i>
|
||||
<span>个人资料</span>
|
||||
</router-link>
|
||||
<router-link to="/me/security" active-class="bg-primary-50 text-primary-600 font-semibold" class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
||||
<i class="pi pi-shield text-lg"></i>
|
||||
<span>账号安全</span>
|
||||
</router-link>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-grow min-w-0">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<AppFooter />
|
||||
</div>
|
||||
<!-- Menus -->
|
||||
<nav class="p-4 space-y-1">
|
||||
<router-link to="/me" exact-active-class="bg-primary-50 text-primary-600 font-semibold"
|
||||
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
||||
<i class="pi pi-home text-lg"></i>
|
||||
<span>概览</span>
|
||||
</router-link>
|
||||
<router-link to="/me/orders" active-class="bg-primary-50 text-primary-600 font-semibold"
|
||||
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
||||
<i class="pi pi-shopping-bag text-lg"></i>
|
||||
<span>我的订单</span>
|
||||
</router-link>
|
||||
<router-link to="/me/wallet" active-class="bg-primary-50 text-primary-600 font-semibold"
|
||||
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
||||
<i class="pi pi-wallet text-lg"></i>
|
||||
<span>我的钱包</span>
|
||||
</router-link>
|
||||
<router-link to="/me/library" active-class="bg-primary-50 text-primary-600 font-semibold"
|
||||
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
||||
<i class="pi pi-book text-lg"></i>
|
||||
<span>已购内容</span>
|
||||
</router-link>
|
||||
<router-link to="/me/notifications" active-class="bg-primary-50 text-primary-600 font-semibold"
|
||||
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
||||
<i class="pi pi-bell text-lg"></i>
|
||||
<span>消息中心</span>
|
||||
</router-link>
|
||||
<div class="my-2 border-t border-slate-100"></div>
|
||||
<router-link to="/me/profile" active-class="bg-primary-50 text-primary-600 font-semibold"
|
||||
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
||||
<i class="pi pi-user text-lg"></i>
|
||||
<span>个人资料</span>
|
||||
</router-link>
|
||||
<router-link to="/me/security" active-class="bg-primary-50 text-primary-600 font-semibold"
|
||||
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors">
|
||||
<i class="pi pi-shield text-lg"></i>
|
||||
<span>账号安全</span>
|
||||
</router-link>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="flex-grow min-w-0">
|
||||
<router-view />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<AppFooter />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import TopNavbar from '../components/TopNavbar.vue';
|
||||
import AppFooter from '../components/AppFooter.vue';
|
||||
import TopNavbar from '../components/TopNavbar.vue';
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user