From 7f8df6dad106c5c74d91567664ed93b665ac4445 Mon Sep 17 00:00:00 2001
From: Rogee <rogee@ipao.vip>
Date: Fri, 26 Dec 2025 21:39:39 +0800
Subject: [PATCH] refactor: enhance HomeView layout and styling; improve
 PaymentView with new payment methods and QR code handling; clean up
 SecurityView by removing unused sections

---
 frontend/portal/src/components/AppFooter.vue  |  32 +-
 frontend/portal/src/layout/LayoutCreator.vue  |   7 +-
 frontend/portal/src/layout/LayoutUser.vue     | 126 ++---
 frontend/portal/src/views/HomeView.vue        | 476 ++++++++++--------
 .../portal/src/views/order/PaymentView.vue    | 150 +++++-
 .../portal/src/views/user/DashboardView.vue   | 159 +++---
 .../portal/src/views/user/SecurityView.vue    |  36 --
 7 files changed, 590 insertions(+), 396 deletions(-)

diff --git a/frontend/portal/src/components/AppFooter.vue b/frontend/portal/src/components/AppFooter.vue
index df71051..5c4c866 100644
--- a/frontend/portal/src/components/AppFooter.vue
+++ b/frontend/portal/src/components/AppFooter.vue
@@ -1,19 +1,29 @@
 <template>
   <footer class="bg-slate-900 text-slate-400 mt-auto">
-    <div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 py-12">
+    <div class="mx-auto max-w-screen-xl py-12">
       <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
         <!-- Brand -->
         <div class="col-span-1">
-           <div class="flex items-center gap-2 mb-4">
-             <div class="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center text-white font-bold text-xl">Q</div>
-             <span class="text-xl font-bold text-white">Quyun</span>
-           </div>
-           <p class="text-sm leading-relaxed mb-6">专业的租户管理与内容交付平台，连接创作者与用户，探索内容的无限可能。</p>
-           <div class="flex gap-4">
-             <a href="#" class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center hover:bg-white/20 hover:text-white transition-all"><i class="pi pi-twitter"></i></a>
-             <a href="#" class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center hover:bg-white/20 hover:text-white transition-all"><i class="pi pi-github"></i></a>
-             <a href="#" class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center hover:bg-white/20 hover:text-white transition-all"><i class="pi pi-discord"></i></a>
-           </div>
+          <div class="flex items-center gap-2 mb-4">
+            <div class="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center text-white font-bold text-xl">
+              Q
+            </div>
+            <span class="text-xl font-bold text-white">Quyun</span>
+          </div>
+          <p class="text-sm leading-relaxed mb-6">
+            专业的租户管理与内容交付平台，连接创作者与用户，探索内容的无限可能。
+          </p>
+          <div class="flex gap-4">
+            <a href="#"
+              class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center hover:bg-white/20 hover:text-white transition-all"><i
+                class="pi pi-twitter"></i></a>
+            <a href="#"
+              class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center hover:bg-white/20 hover:text-white transition-all"><i
+                class="pi pi-github"></i></a>
+            <a href="#"
+              class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center hover:bg-white/20 hover:text-white transition-all"><i
+                class="pi pi-discord"></i></a>
+          </div>
         </div>
 
         <!-- Links -->
diff --git a/frontend/portal/src/layout/LayoutCreator.vue b/frontend/portal/src/layout/LayoutCreator.vue
index 44dd609..e95d36c 100644
--- a/frontend/portal/src/layout/LayoutCreator.vue
+++ b/frontend/portal/src/layout/LayoutCreator.vue
@@ -1,10 +1,9 @@
 <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 py-8 flex gap-8">
-            <!-- Creator Sidebar (Dark Theme) -->
-            <aside class="w-[260px] flex-shrink-0 hidden lg:block">
+              <main class="flex-grow pt-16">
+                 <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">
                <div
                   class="bg-slate-900 rounded-2xl shadow-sm overflow-hidden sticky top-24 text-slate-300 min-h-[600px] flex flex-col">
                   <!-- Header -->
diff --git a/frontend/portal/src/layout/LayoutUser.vue b/frontend/portal/src/layout/LayoutUser.vue
index 75dad66..56c1b5f 100644
--- a/frontend/portal/src/layout/LayoutUser.vue
+++ b/frontend/portal/src/layout/LayoutUser.vue
@@ -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>
diff --git a/frontend/portal/src/views/HomeView.vue b/frontend/portal/src/views/HomeView.vue
index 682a6fd..a502374 100644
--- a/frontend/portal/src/views/HomeView.vue
+++ b/frontend/portal/src/views/HomeView.vue
@@ -1,224 +1,274 @@
 <template>
-  <div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 py-8">
-    <!-- Hero Banner -->
-    <div class="relative w-full h-[400px] rounded-2xl overflow-hidden bg-slate-900 mb-8 group">
-       <!-- Mock Carousel Image -->
-       <img src="https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" class="w-full h-full object-cover opacity-80 transition-transform duration-700 group-hover:scale-105" alt="Banner">
-       <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
-       <div class="absolute bottom-0 left-0 p-10 max-w-2xl text-white">
-          <div class="inline-block px-3 py-1 bg-red-600 text-white text-xs font-bold rounded mb-3">置顶推荐</div>
-          <h2 class="text-4xl font-bold mb-4 leading-tight">京剧《霸王别姬》全本实录：程派艺术的巅峰演绎</h2>
-          <p class="text-lg text-slate-200 line-clamp-2">梅兰芳大师经典之作，高清修复版独家上线。感受国粹魅力，重温梨园风华。</p>
-       </div>
-       <!-- Arrows (Always visible as per spec) -->
-       <button class="absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-black/30 hover:bg-black/50 text-white rounded-full flex items-center justify-center backdrop-blur-sm transition-all"><i class="pi pi-chevron-left text-xl"></i></button>
-       <button class="absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-black/30 hover:bg-black/50 text-white rounded-full flex items-center justify-center backdrop-blur-sm transition-all"><i class="pi pi-chevron-right text-xl"></i></button>
-       <!-- Indicators -->
-       <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
-          <span class="w-2 h-2 rounded-full bg-white"></span>
-          <span class="w-2 h-2 rounded-full bg-white/50"></span>
-          <span class="w-2 h-2 rounded-full bg-white/50"></span>
-       </div>
-    </div>
+   <div class="mx-auto max-w-screen-xl py-8">
+      <!-- Hero Banner -->
+      <div class="relative w-full h-[400px] rounded-2xl overflow-hidden bg-slate-900 mb-8 group">
+         <!-- Mock Carousel Image -->
+         <img
+            src="https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80"
+            class="w-full h-full object-cover opacity-80 transition-transform duration-700 group-hover:scale-105"
+            alt="Banner">
+         <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent"></div>
+         <div class="absolute bottom-0 left-0 p-10 max-w-2xl text-white">
+            <div class="inline-block px-3 py-1 bg-red-600 text-white text-xs font-bold rounded mb-3">置顶推荐</div>
+            <h2 class="text-4xl font-bold mb-4 leading-tight">京剧《霸王别姬》全本实录：程派艺术的巅峰演绎</h2>
+            <p class="text-lg text-slate-200 line-clamp-2">梅兰芳大师经典之作，高清修复版独家上线。感受国粹魅力，重温梨园风华。</p>
+         </div>
+         <!-- Arrows (Always visible as per spec) -->
+         <button
+            class="absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-black/30 hover:bg-black/50 text-white rounded-full flex items-center justify-center backdrop-blur-sm transition-all"><i
+               class="pi pi-chevron-left text-xl"></i></button>
+         <button
+            class="absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-black/30 hover:bg-black/50 text-white rounded-full flex items-center justify-center backdrop-blur-sm transition-all"><i
+               class="pi pi-chevron-right text-xl"></i></button>
+         <!-- Indicators -->
+         <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
+            <span class="w-2 h-2 rounded-full bg-white"></span>
+            <span class="w-2 h-2 rounded-full bg-white/50"></span>
+            <span class="w-2 h-2 rounded-full bg-white/50"></span>
+         </div>
+      </div>
 
-    <!-- Filter Bar -->
-    <div class="mb-8">
-       <div class="flex items-center gap-8 border-b border-slate-200 pb-4 mb-4">
-          <button class="text-lg font-bold text-primary-600 border-b-2 border-primary-600 -mb-4.5 pb-4 px-2">推荐</button>
-          <button class="text-lg font-medium text-slate-500 hover:text-slate-800 -mb-4.5 pb-4 px-2 transition-colors">最新</button>
-          <button class="text-lg font-medium text-slate-500 hover:text-slate-800 -mb-4.5 pb-4 px-2 transition-colors">热门</button>
-       </div>
-       <!-- Tags -->
-       <div class="flex flex-wrap gap-3">
-          <button class="px-4 py-1.5 rounded-full bg-slate-900 text-white text-sm font-medium">全部</button>
-          <button class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors">京剧</button>
-          <button class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors">昆曲</button>
-          <button class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors">越剧</button>
-          <button class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors">名家名段</button>
-          <button class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors">戏曲教学</button>
-       </div>
-    </div>
+      <!-- Filter Bar -->
+      <div class="mb-8">
+         <div class="flex items-center gap-8 border-b border-slate-200 pb-4 mb-4">
+            <button
+               class="text-lg font-bold text-primary-600 border-b-2 border-primary-600 -mb-4.5 pb-4 px-2">推荐</button>
+            <button
+               class="text-lg font-medium text-slate-500 hover:text-slate-800 -mb-4.5 pb-4 px-2 transition-colors">最新</button>
+            <button
+               class="text-lg font-medium text-slate-500 hover:text-slate-800 -mb-4.5 pb-4 px-2 transition-colors">热门</button>
+         </div>
+         <!-- Tags -->
+         <div class="flex flex-wrap gap-3">
+            <button class="px-4 py-1.5 rounded-full bg-slate-900 text-white text-sm font-medium">全部</button>
+            <button
+               class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors">京剧</button>
+            <button
+               class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors">昆曲</button>
+            <button
+               class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors">越剧</button>
+            <button
+               class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors">名家名段</button>
+            <button
+               class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 hover:bg-slate-200 text-sm font-medium transition-colors">戏曲教学</button>
+         </div>
+      </div>
 
-    <!-- Main Layout: Grid 9:3 -->
-    <div class="grid grid-cols-12 gap-8">
-       <!-- Main Feed (Left 9) -->
-       <div class="col-span-12 lg:col-span-8 xl:col-span-9 space-y-6">
-          
-          <!-- Card Variant 1: Single Image (Right) -->
-          <router-link to="/contents/1" class="block bg-white rounded-xl shadow-sm border border-slate-100 p-5 hover:shadow-md transition-shadow group">
-             <div class="flex gap-6">
-                <div class="flex-1 min-w-0">
-                   <div class="flex items-center gap-2 mb-2">
-                      <span class="px-1.5 py-0.5 rounded text-xs font-medium bg-red-50 text-red-600 border border-red-100">置顶</span>
-                      <span class="text-xs text-slate-500 border border-slate-200 px-1 rounded">[京剧]</span>
-                   </div>
-                   <h3 class="text-lg font-bold text-slate-900 mb-2 leading-snug group-hover:text-primary-600 transition-colors">《锁麟囊》选段：春秋亭外风雨暴 (张火丁亲授版)</h3>
-                   <p class="text-base text-slate-500 line-clamp-2 mb-4 leading-relaxed">张火丁教授亲自讲解程派发音技巧，深度剖析《锁麟囊》中春秋亭一折的唱腔设计与情感表达。包含完整示范与逐句拆解。</p>
-                   <div class="flex items-center justify-between">
-                      <div class="flex items-center gap-3 text-sm text-slate-500">
-                         <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Zhang" class="w-6 h-6 rounded-full">
-                         <span>张火丁工作室</span>
-                         <span class="w-1 h-1 bg-slate-300 rounded-full"></span>
-                         <span>行当：青衣</span>
-                         <span class="w-1 h-1 bg-slate-300 rounded-full"></span>
-                         <span>2小时前</span>
-                      </div>
-                      <div class="flex items-center gap-4">
-                         <span class="text-sm text-slate-400"><i class="pi pi-eye mr-1"></i> 1.2万</span>
-                         <span class="text-lg font-bold text-red-600">¥ 9.90</span>
-                      </div>
-                   </div>
-                </div>
-                <div class="w-[240px] h-[135px] flex-shrink-0 rounded-lg overflow-hidden relative bg-slate-100 hidden sm:block">
-                   <img src="https://images.unsplash.com/photo-1576014131795-d44019d02374?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-full object-cover">
-                   <div class="absolute inset-0 bg-black/20 flex items-center justify-center">
-                      <i class="pi pi-play-circle text-4xl text-white opacity-80"></i>
-                   </div>
-                   <span class="absolute bottom-2 right-2 px-1.5 py-0.5 bg-black/60 text-white text-xs rounded">15:30</span>
-                </div>
-             </div>
-          </router-link>
+      <!-- Main Layout: Grid 9:3 -->
+      <div class="grid grid-cols-12 gap-8">
+         <!-- Main Feed (Left 9) -->
+         <div class="col-span-12 lg:col-span-8 xl:col-span-9 space-y-6">
 
-          <!-- 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-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>
-             </div>
-             <h3 class="text-lg font-bold text-slate-900 mb-3 group-hover:text-primary-600 transition-colors">浅谈昆曲《牡丹亭》中的水磨腔艺术特点</h3>
-             <p class="text-base text-slate-500 line-clamp-3 mb-4 leading-relaxed">昆曲之所以被称为“百戏之祖”，其细腻婉转的水磨腔功不可没。本文将从发音、吐字、行腔三个维度，带您领略昆曲的声韵之美。对于初学者来说，掌握“字头、字腹、字尾”的处理是关键...</p>
-             <div class="flex items-center justify-between">
-                <div class="flex items-center gap-3 text-sm text-slate-500">
-                   <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Li" class="w-6 h-6 rounded-full">
-                   <span>梨园小生</span>
-                   <span class="w-1 h-1 bg-slate-300 rounded-full"></span>
-                   <span>昨天</span>
-                </div>
-                <div class="flex items-center gap-2">
-                   <span class="text-xs text-slate-400 line-through">¥ 5.00</span>
-                   <span class="text-sm font-bold text-green-600 border border-green-200 px-2 py-0.5 rounded">限时免费</span>
-                </div>
-             </div>
-          </div>
+            <!-- Card Variant 1: Single Image (Right) -->
+            <router-link to="/contents/1"
+               class="block bg-white rounded-xl shadow-sm border border-slate-100 p-5 hover:shadow-md transition-shadow group">
+               <div class="flex gap-6">
+                  <div class="flex-1 min-w-0">
+                     <div class="flex items-center gap-2 mb-2">
+                        <span
+                           class="px-1.5 py-0.5 rounded text-xs font-medium bg-red-50 text-red-600 border border-red-100">置顶</span>
+                        <span class="text-xs text-slate-500 border border-slate-200 px-1 rounded">[京剧]</span>
+                     </div>
+                     <h3
+                        class="text-lg font-bold text-slate-900 mb-2 leading-snug group-hover:text-primary-600 transition-colors">
+                        《锁麟囊》选段：春秋亭外风雨暴 (张火丁亲授版)</h3>
+                     <p class="text-base text-slate-500 line-clamp-2 mb-4 leading-relaxed">
+                        张火丁教授亲自讲解程派发音技巧，深度剖析《锁麟囊》中春秋亭一折的唱腔设计与情感表达。包含完整示范与逐句拆解。</p>
+                     <div class="flex items-center justify-between">
+                        <div class="flex items-center gap-3 text-sm text-slate-500">
+                           <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Zhang"
+                              class="w-6 h-6 rounded-full">
+                           <span>张火丁工作室</span>
+                           <span class="w-1 h-1 bg-slate-300 rounded-full"></span>
+                           <span>行当：青衣</span>
+                           <span class="w-1 h-1 bg-slate-300 rounded-full"></span>
+                           <span>2小时前</span>
+                        </div>
+                        <div class="flex items-center gap-4">
+                           <span class="text-sm text-slate-400"><i class="pi pi-eye mr-1"></i> 1.2万</span>
+                           <span class="text-lg font-bold text-red-600">¥ 9.90</span>
+                        </div>
+                     </div>
+                  </div>
+                  <div
+                     class="w-[240px] h-[135px] flex-shrink-0 rounded-lg overflow-hidden relative bg-slate-100 hidden sm:block">
+                     <img
+                        src="https://images.unsplash.com/photo-1576014131795-d44019d02374?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
+                        class="w-full h-full object-cover">
+                     <div class="absolute inset-0 bg-black/20 flex items-center justify-center">
+                        <i class="pi pi-play-circle text-4xl text-white opacity-80"></i>
+                     </div>
+                     <span
+                        class="absolute bottom-2 right-2 px-1.5 py-0.5 bg-black/60 text-white text-xs rounded">15:30</span>
+                  </div>
+               </div>
+            </router-link>
 
-          <!-- Card Variant 3: 3 Images -->
-          <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 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 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 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>
-             <div class="flex items-center justify-between">
-                <div class="flex items-center gap-3 text-sm text-slate-500">
-                   <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Photo" class="w-6 h-6 rounded-full">
-                   <span>戏曲摄影师老王</span>
-                   <span class="w-1 h-1 bg-slate-300 rounded-full"></span>
-                   <span>3天前</span>
-                </div>
-                <span class="text-sm text-slate-400"><i class="pi pi-eye mr-1"></i> 8.5k</span>
-             </div>
-          </div>
+            <!-- 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-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>
+               </div>
+               <h3 class="text-lg font-bold text-slate-900 mb-3 group-hover:text-primary-600 transition-colors">
+                  浅谈昆曲《牡丹亭》中的水磨腔艺术特点</h3>
+               <p class="text-base text-slate-500 line-clamp-3 mb-4 leading-relaxed">
+                  昆曲之所以被称为“百戏之祖”，其细腻婉转的水磨腔功不可没。本文将从发音、吐字、行腔三个维度，带您领略昆曲的声韵之美。对于初学者来说，掌握“字头、字腹、字尾”的处理是关键...</p>
+               <div class="flex items-center justify-between">
+                  <div class="flex items-center gap-3 text-sm text-slate-500">
+                     <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Li" class="w-6 h-6 rounded-full">
+                     <span>梨园小生</span>
+                     <span class="w-1 h-1 bg-slate-300 rounded-full"></span>
+                     <span>昨天</span>
+                  </div>
+                  <div class="flex items-center gap-2">
+                     <span class="text-xs text-slate-400 line-through">¥ 5.00</span>
+                     <span
+                        class="text-sm font-bold text-green-600 border border-green-200 px-2 py-0.5 rounded">限时免费</span>
+                  </div>
+               </div>
+            </div>
 
-          <!-- Load More -->
-          <div class="pt-4 text-center">
-             <button class="px-8 py-3 bg-white border border-slate-200 rounded-full text-slate-600 hover:bg-slate-50 hover:text-primary-600 font-medium transition-all shadow-sm">
-                点击加载更多内容
-             </button>
-          </div>
-       </div>
+            <!-- Card Variant 3: 3 Images -->
+            <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 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 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 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>
+               <div class="flex items-center justify-between">
+                  <div class="flex items-center gap-3 text-sm text-slate-500">
+                     <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Photo" class="w-6 h-6 rounded-full">
+                     <span>戏曲摄影师老王</span>
+                     <span class="w-1 h-1 bg-slate-300 rounded-full"></span>
+                     <span>3天前</span>
+                  </div>
+                  <span class="text-sm text-slate-400"><i class="pi pi-eye mr-1"></i> 8.5k</span>
+               </div>
+            </div>
 
-       <!-- Sidebar (Right 3) -->
-       <div class="hidden lg:block lg:col-span-4 xl:col-span-3 space-y-6">
-          <!-- Announcement -->
-          <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5">
-             <h3 class="font-bold text-slate-900 mb-4 flex items-center gap-2">
-                <i class="pi pi-megaphone text-orange-500"></i> 公告
-             </h3>
-             <ul class="space-y-3 text-sm text-slate-600">
-                <li class="line-clamp-1 hover:text-primary-600 cursor-pointer">• 关于调整创作者收益结算周期的通知</li>
-                <li class="line-clamp-1 hover:text-primary-600 cursor-pointer">• “国粹传承”戏曲短视频大赛开启！</li>
-                <li class="line-clamp-1 hover:text-primary-600 cursor-pointer">• 平台系统维护升级公告 (12.30)</li>
-             </ul>
-          </div>
+            <!-- Load More -->
+            <div class="pt-4 text-center">
+               <button
+                  class="px-8 py-3 bg-white border border-slate-200 rounded-full text-slate-600 hover:bg-slate-50 hover:text-primary-600 font-medium transition-all shadow-sm">
+                  点击加载更多内容
+               </button>
+            </div>
+         </div>
 
-          <!-- Recommended Tenants -->
-          <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5">
-             <h3 class="font-bold text-slate-900 mb-4">推荐名家</h3>
-             <div class="space-y-4">
-                <div class="flex items-center gap-3">
-                   <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Master1" class="w-10 h-10 rounded-full">
-                   <div class="flex-1 min-w-0">
-                      <div class="font-bold text-slate-900 text-sm truncate">梅派传人小林</div>
-                      <div class="text-xs text-slate-500 truncate">粉丝 12.5万</div>
-                   </div>
-                   <button class="px-3 py-1 bg-primary-50 text-primary-600 text-xs font-bold rounded-full hover:bg-primary-100">关注</button>
-                </div>
-                <div class="flex items-center gap-3">
-                   <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Master2" class="w-10 h-10 rounded-full">
-                   <div class="flex-1 min-w-0">
-                      <div class="font-bold text-slate-900 text-sm truncate">豫剧李大师</div>
-                      <div class="text-xs text-slate-500 truncate">粉丝 8.9万</div>
-                   </div>
-                   <button class="px-3 py-1 bg-primary-50 text-primary-600 text-xs font-bold rounded-full hover:bg-primary-100">关注</button>
-                </div>
-                <div class="flex items-center gap-3">
-                   <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Master3" class="w-10 h-10 rounded-full">
-                   <div class="flex-1 min-w-0">
-                      <div class="font-bold text-slate-900 text-sm truncate">越剧小生阿强</div>
-                      <div class="text-xs text-slate-500 truncate">粉丝 5.2万</div>
-                   </div>
-                   <button class="px-3 py-1 bg-slate-100 text-slate-400 text-xs font-bold rounded-full">已关注</button>
-                </div>
-             </div>
-          </div>
+         <!-- Sidebar (Right 3) -->
+         <div class="hidden lg:block lg:col-span-4 xl:col-span-3 space-y-6">
+            <!-- Announcement -->
+            <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5">
+               <h3 class="font-bold text-slate-900 mb-4 flex items-center gap-2">
+                  <i class="pi pi-megaphone text-orange-500"></i> 公告
+               </h3>
+               <ul class="space-y-3 text-sm text-slate-600">
+                  <li class="line-clamp-1 hover:text-primary-600 cursor-pointer">• 关于调整创作者收益结算周期的通知</li>
+                  <li class="line-clamp-1 hover:text-primary-600 cursor-pointer">• “国粹传承”戏曲短视频大赛开启！</li>
+                  <li class="line-clamp-1 hover:text-primary-600 cursor-pointer">• 平台系统维护升级公告 (12.30)</li>
+               </ul>
+            </div>
 
-          <!-- Trending List -->
-          <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5">
-             <h3 class="font-bold text-slate-900 mb-4 flex items-center gap-2">
-                <i class="pi pi-chart-line text-red-500"></i> 本周热门
-             </h3>
-             <ul class="space-y-4">
-                <li class="flex gap-3 items-start">
-                   <span class="text-red-500 font-bold italic text-lg w-4">1</span>
-                   <div class="flex-1">
-                      <h4 class="text-sm font-medium text-slate-800 line-clamp-2 hover:text-primary-600 cursor-pointer">《智取威虎山》选段：今日痛饮庆功酒</h4>
-                      <span class="text-xs text-slate-400 mt-1 block">15.2万 阅读</span>
-                   </div>
-                </li>
-                <li class="flex gap-3 items-start">
-                   <span class="text-orange-500 font-bold italic text-lg w-4">2</span>
-                   <div class="flex-1">
-                      <h4 class="text-sm font-medium text-slate-800 line-clamp-2 hover:text-primary-600 cursor-pointer">【深度解析】京剧脸谱颜色的含义</h4>
-                      <span class="text-xs text-slate-400 mt-1 block">9.8万 阅读</span>
-                   </div>
-                </li>
-                <li class="flex gap-3 items-start">
-                   <span class="text-yellow-500 font-bold italic text-lg w-4">3</span>
-                   <div class="flex-1">
-                      <h4 class="text-sm font-medium text-slate-800 line-clamp-2 hover:text-primary-600 cursor-pointer">黄梅戏《女驸马》全场高清</h4>
-                      <span class="text-xs text-slate-400 mt-1 block">7.5万 阅读</span>
-                   </div>
-                </li>
-             </ul>
-          </div>
+            <!-- Recommended Tenants -->
+            <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5">
+               <h3 class="font-bold text-slate-900 mb-4">推荐名家</h3>
+               <div class="space-y-4">
+                  <div class="flex items-center gap-3">
+                     <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Master1" class="w-10 h-10 rounded-full">
+                     <div class="flex-1 min-w-0">
+                        <div class="font-bold text-slate-900 text-sm truncate">梅派传人小林</div>
+                        <div class="text-xs text-slate-500 truncate">粉丝 12.5万</div>
+                     </div>
+                     <button
+                        class="px-3 py-1 bg-primary-50 text-primary-600 text-xs font-bold rounded-full hover:bg-primary-100">关注</button>
+                  </div>
+                  <div class="flex items-center gap-3">
+                     <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Master2" class="w-10 h-10 rounded-full">
+                     <div class="flex-1 min-w-0">
+                        <div class="font-bold text-slate-900 text-sm truncate">豫剧李大师</div>
+                        <div class="text-xs text-slate-500 truncate">粉丝 8.9万</div>
+                     </div>
+                     <button
+                        class="px-3 py-1 bg-primary-50 text-primary-600 text-xs font-bold rounded-full hover:bg-primary-100">关注</button>
+                  </div>
+                  <div class="flex items-center gap-3">
+                     <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=Master3" class="w-10 h-10 rounded-full">
+                     <div class="flex-1 min-w-0">
+                        <div class="font-bold text-slate-900 text-sm truncate">越剧小生阿强</div>
+                        <div class="text-xs text-slate-500 truncate">粉丝 5.2万</div>
+                     </div>
+                     <button class="px-3 py-1 bg-slate-100 text-slate-400 text-xs font-bold rounded-full">已关注</button>
+                  </div>
+               </div>
+            </div>
 
-          <!-- Ad / Promo -->
-          <div class="rounded-xl overflow-hidden shadow-sm">
-             <img src="https://images.unsplash.com/photo-1557683316-973673baf926?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" class="w-full h-40 object-cover">
-             <div class="bg-white p-3 flex justify-between items-center">
-                <span class="text-xs text-slate-400 border border-slate-200 px-1 rounded">广告</span>
-                <span class="text-sm font-medium text-slate-700">戏曲周边商城上线啦</span>
-             </div>
-          </div>
-       </div>
-    </div>
-  </div>
+            <!-- Trending List -->
+            <div class="bg-white rounded-xl shadow-sm border border-slate-100 p-5">
+               <h3 class="font-bold text-slate-900 mb-4 flex items-center gap-2">
+                  <i class="pi pi-chart-line text-red-500"></i> 本周热门
+               </h3>
+               <ul class="space-y-4">
+                  <li class="flex gap-3 items-start">
+                     <span class="text-red-500 font-bold italic text-lg w-4">1</span>
+                     <div class="flex-1">
+                        <h4
+                           class="text-sm font-medium text-slate-800 line-clamp-2 hover:text-primary-600 cursor-pointer">
+                           《智取威虎山》选段：今日痛饮庆功酒</h4>
+                        <span class="text-xs text-slate-400 mt-1 block">15.2万 阅读</span>
+                     </div>
+                  </li>
+                  <li class="flex gap-3 items-start">
+                     <span class="text-orange-500 font-bold italic text-lg w-4">2</span>
+                     <div class="flex-1">
+                        <h4
+                           class="text-sm font-medium text-slate-800 line-clamp-2 hover:text-primary-600 cursor-pointer">
+                           【深度解析】京剧脸谱颜色的含义</h4>
+                        <span class="text-xs text-slate-400 mt-1 block">9.8万 阅读</span>
+                     </div>
+                  </li>
+                  <li class="flex gap-3 items-start">
+                     <span class="text-yellow-500 font-bold italic text-lg w-4">3</span>
+                     <div class="flex-1">
+                        <h4
+                           class="text-sm font-medium text-slate-800 line-clamp-2 hover:text-primary-600 cursor-pointer">
+                           黄梅戏《女驸马》全场高清</h4>
+                        <span class="text-xs text-slate-400 mt-1 block">7.5万 阅读</span>
+                     </div>
+                  </li>
+               </ul>
+            </div>
+
+            <!-- Ad / Promo -->
+            <div class="rounded-xl overflow-hidden shadow-sm">
+               <img
+                  src="https://images.unsplash.com/photo-1557683316-973673baf926?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
+                  class="w-full h-40 object-cover">
+               <div class="bg-white p-3 flex justify-between items-center">
+                  <span class="text-xs text-slate-400 border border-slate-200 px-1 rounded">广告</span>
+                  <span class="text-sm font-medium text-slate-700">戏曲周边商城上线啦</span>
+               </div>
+            </div>
+         </div>
+      </div>
+   </div>
 </template>
diff --git a/frontend/portal/src/views/order/PaymentView.vue b/frontend/portal/src/views/order/PaymentView.vue
index 8a7f722..673ba83 100644
--- a/frontend/portal/src/views/order/PaymentView.vue
+++ b/frontend/portal/src/views/order/PaymentView.vue
@@ -1,6 +1,150 @@
 <template>
-  <div class="mx-auto max-w-screen-xl my-8 p-8 bg-white rounded-xl shadow-sm">
-    <h1 class="text-2xl font-bold mb-4">Payment Cashier</h1>
-    <p class="text-slate-400">Order ID: {{ $route.params.id }}</p>
+  <div class="min-h-screen bg-slate-50 py-8">
+    <div class="mx-auto max-w-3xl">
+       
+       <!-- Header -->
+       <div class="flex items-center justify-between px-4 mb-6">
+          <div class="flex items-center gap-2">
+             <div class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center text-white font-bold">Q</div>
+             <span class="text-xl font-bold text-slate-900">收银台</span>
+          </div>
+          <div class="text-sm text-slate-500">订单号: {{ orderId }}</div>
+       </div>
+
+       <!-- Main Card -->
+       <div class="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
+          <!-- Countdown Timer -->
+          <div class="bg-orange-50 text-orange-700 text-center py-3 text-sm font-bold border-b border-orange-100">
+             <i class="pi pi-clock mr-1"></i> 支付剩余时间：{{ formatTime(timeLeft) }}
+          </div>
+
+          <div class="p-8 md:p-12">
+             <!-- Amount -->
+             <div class="text-center mb-10">
+                <p class="text-slate-500 mb-2">订单提交成功，请尽快支付</p>
+                <div class="text-4xl font-bold text-slate-900">¥ {{ amount }}</div>
+                <div class="text-sm text-slate-500 mt-2">商品：{{ productName }}</div>
+             </div>
+
+             <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
+                <!-- Payment Methods -->
+                <div class="space-y-4">
+                   <h3 class="font-bold text-slate-900 mb-4">选择支付方式</h3>
+                   
+                   <label class="flex items-center gap-4 p-4 border rounded-xl cursor-pointer transition-all relative overflow-hidden" 
+                      :class="paymentMethod === 'wechat' ? 'border-green-500 bg-green-50/30 ring-1 ring-green-500' : 'border-slate-200 hover:border-slate-300'">
+                      <input type="radio" v-model="paymentMethod" value="wechat" class="hidden">
+                      <i class="pi pi-wechat text-3xl text-green-600"></i>
+                      <div class="flex-1">
+                         <div class="font-bold text-slate-900">微信支付</div>
+                         <div class="text-xs text-slate-500">推荐使用</div>
+                      </div>
+                      <i v-if="paymentMethod === 'wechat'" class="pi pi-check-circle text-green-600 text-xl"></i>
+                   </label>
+
+                   <label class="flex items-center gap-4 p-4 border rounded-xl cursor-pointer transition-all" 
+                      :class="paymentMethod === 'alipay' ? 'border-blue-500 bg-blue-50/30 ring-1 ring-blue-500' : 'border-slate-200 hover:border-slate-300'">
+                      <input type="radio" v-model="paymentMethod" value="alipay" class="hidden">
+                      <i class="pi pi-alipay text-3xl text-blue-500"></i>
+                      <div class="flex-1">
+                         <div class="font-bold text-slate-900">支付宝</div>
+                      </div>
+                      <i v-if="paymentMethod === 'alipay'" class="pi pi-check-circle text-blue-500 text-xl"></i>
+                   </label>
+
+                   <label class="flex items-center gap-4 p-4 border rounded-xl cursor-pointer transition-all opacity-50 bg-slate-50">
+                      <input type="radio" value="balance" disabled class="hidden">
+                      <i class="pi pi-wallet text-3xl text-slate-400"></i>
+                      <div class="flex-1">
+                         <div class="font-bold text-slate-400">余额支付</div>
+                         <div class="text-xs text-slate-400">余额不足 (¥ 0.00)</div>
+                      </div>
+                   </label>
+                </div>
+
+                <!-- QR Code Area -->
+                <div class="flex flex-col items-center justify-center border-t md:border-t-0 md:border-l border-slate-100 pt-8 md:pt-0 md:pl-8">
+                   <div class="bg-white p-4 border border-slate-200 rounded-xl shadow-sm mb-4">
+                      <!-- Mock QR -->
+                      <div class="w-48 h-48 bg-slate-100 flex items-center justify-center relative overflow-hidden">
+                         <i class="pi pi-qrcode text-6xl text-slate-300"></i>
+                         <!-- Loading Overlay -->
+                         <div v-if="isScanning" class="absolute inset-0 bg-white/90 flex flex-col items-center justify-center">
+                            <i class="pi pi-spin pi-spinner text-3xl text-primary-600 mb-2"></i>
+                            <span class="text-xs text-slate-500">正在获取支付结果...</span>
+                         </div>
+                         <!-- Success Overlay -->
+                         <div v-if="isSuccess" class="absolute inset-0 bg-green-500 flex flex-col items-center justify-center text-white animate-in zoom-in">
+                            <i class="pi pi-check-circle text-5xl mb-2"></i>
+                            <span class="font-bold">支付成功</span>
+                         </div>
+                      </div>
+                   </div>
+                   
+                   <div class="text-center">
+                      <p class="text-sm font-bold text-slate-700 mb-1">
+                         使用 {{ paymentMethodName }} 扫一扫
+                      </p>
+                      <p class="text-xs text-slate-400">二维码有效时间 2小时</p>
+                   </div>
+
+                   <!-- Dev Tool -->
+                   <button @click="simulateSuccess" class="mt-8 text-xs text-slate-300 hover:text-slate-500 underline">
+                      [开发调试] 模拟支付成功
+                   </button>
+                </div>
+             </div>
+          </div>
+       </div>
+    </div>
   </div>
 </template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+const route = useRoute();
+const router = useRouter();
+
+const orderId = route.params.id || '82934712';
+const amount = '9.90';
+const productName = '《霸王别姬》全本实录珍藏版';
+
+const paymentMethod = ref('wechat');
+const timeLeft = ref(900); // 15 minutes
+const isScanning = ref(false);
+const isSuccess = ref(false);
+let timer = null;
+
+const paymentMethodName = computed(() => {
+    return paymentMethod.value === 'wechat' ? '微信' : '支付宝';
+});
+
+const formatTime = (seconds) => {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
+};
+
+const simulateSuccess = () => {
+    isScanning.value = true;
+    setTimeout(() => {
+        isScanning.value = false;
+        isSuccess.value = true;
+        setTimeout(() => {
+            router.replace(`/me/orders/${orderId}`);
+        }, 1500);
+    }, 1000);
+};
+
+onMounted(() => {
+    timer = setInterval(() => {
+        if (timeLeft.value > 0) timeLeft.value--;
+    }, 1000);
+});
+
+onUnmounted(() => {
+    if (timer) clearInterval(timer);
+});
+</script>
\ No newline at end of file
diff --git a/frontend/portal/src/views/user/DashboardView.vue b/frontend/portal/src/views/user/DashboardView.vue
index 5a94390..e7d60ee 100644
--- a/frontend/portal/src/views/user/DashboardView.vue
+++ b/frontend/portal/src/views/user/DashboardView.vue
@@ -1,74 +1,93 @@
 <template>
-  <div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 py-8">
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-       <!-- Stat Cards -->
-       <router-link to="/me/wallet" class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-center gap-4 hover:shadow-md hover:border-primary-100 transition-all cursor-pointer">
-          <div class="w-12 h-12 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center text-xl"><i class="pi pi-wallet"></i></div>
-          <div>
-             <div class="text-sm text-slate-500">账户余额</div>
-             <div class="text-2xl font-bold text-slate-900">¥ 128.50</div>
-          </div>
-          <i class="pi pi-chevron-right ml-auto text-slate-300 group-hover:text-primary-400"></i>
-       </router-link>
-       <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-center gap-4 hover:shadow-md hover:border-primary-100 transition-all cursor-pointer group active:scale-[0.98]">
-          <div class="w-12 h-12 rounded-full bg-yellow-50 text-yellow-600 flex items-center justify-center text-xl transition-transform group-hover:scale-110"><i class="pi pi-star"></i></div>
-          <div>
-             <div class="text-sm text-slate-500">我的积分</div>
-             <div class="text-2xl font-bold text-slate-900">2,450</div>
-          </div>
-          <i class="pi pi-chevron-right ml-auto text-slate-300 group-hover:text-primary-400"></i>
-       </div>
-       <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-center gap-4 hover:shadow-md hover:border-primary-100 transition-all cursor-pointer group active:scale-[0.98]">
-          <div class="w-12 h-12 rounded-full bg-red-50 text-red-600 flex items-center justify-center text-xl transition-transform group-hover:scale-110"><i class="pi pi-ticket"></i></div>
-          <div>
-             <div class="text-sm text-slate-500">优惠券</div>
-             <div class="text-2xl font-bold text-slate-900">3 张</div>
-          </div>
-          <i class="pi pi-chevron-right ml-auto text-slate-300 group-hover:text-primary-400"></i>
-       </div>
-    </div>
+   <div>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+         <!-- Stat Cards -->
+         <router-link to="/me/wallet"
+            class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-center gap-4 hover:shadow-md hover:border-primary-100 transition-all cursor-pointer">
+            <div class="w-12 h-12 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center text-xl"><i
+                  class="pi pi-wallet"></i></div>
+            <div>
+               <div class="text-sm text-slate-500">账户余额</div>
+               <div class="text-2xl font-bold text-slate-900">¥ 128.50</div>
+            </div>
+            <i class="pi pi-chevron-right ml-auto text-slate-300 group-hover:text-primary-400"></i>
+         </router-link>
+         <div
+            class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-center gap-4 hover:shadow-md hover:border-primary-100 transition-all cursor-pointer group active:scale-[0.98]">
+            <div
+               class="w-12 h-12 rounded-full bg-yellow-50 text-yellow-600 flex items-center justify-center text-xl transition-transform group-hover:scale-110">
+               <i class="pi pi-star"></i>
+            </div>
+            <div>
+               <div class="text-sm text-slate-500">我的积分</div>
+               <div class="text-2xl font-bold text-slate-900">2,450</div>
+            </div>
+            <i class="pi pi-chevron-right ml-auto text-slate-300 group-hover:text-primary-400"></i>
+         </div>
+         <div
+            class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 flex items-center gap-4 hover:shadow-md hover:border-primary-100 transition-all cursor-pointer group active:scale-[0.98]">
+            <div
+               class="w-12 h-12 rounded-full bg-red-50 text-red-600 flex items-center justify-center text-xl transition-transform group-hover:scale-110">
+               <i class="pi pi-ticket"></i>
+            </div>
+            <div>
+               <div class="text-sm text-slate-500">优惠券</div>
+               <div class="text-2xl font-bold text-slate-900">3 张</div>
+            </div>
+            <i class="pi pi-chevron-right ml-auto text-slate-300 group-hover:text-primary-400"></i>
+         </div>
+      </div>
 
-    <!-- Recent Orders -->
-    <div class="mt-8 bg-white rounded-xl shadow-sm border border-slate-100 p-6">
-       <div class="flex items-center justify-between mb-6">
-          <h2 class="text-xl font-bold text-slate-900">最近订单</h2>
-          <router-link to="/me/orders" class="text-sm text-primary-600 hover:text-primary-700 font-medium px-2 py-1 rounded hover:bg-primary-50 transition-colors">查看全部 <i class="pi pi-angle-right"></i></router-link>
-       </div>
-       
-       <div class="space-y-4">
-          <div @click="$router.push('/me/orders/82934712')" class="flex items-center gap-4 p-4 border border-slate-100 rounded-lg hover:border-primary-100 hover:shadow-sm transition-all cursor-pointer active:scale-[0.99] group">
-             <div class="w-16 h-16 bg-slate-100 rounded object-cover flex-shrink-0">
-                <img src="https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60" class="w-full h-full object-cover rounded transition-transform group-hover:scale-105">
-             </div>
-             <div class="flex-1 min-w-0">
-                <h3 class="font-bold text-slate-900 truncate group-hover:text-primary-600 transition-colors">《霸王别姬》全本实录珍藏版</h3>
-                <div class="text-sm text-slate-500 mt-1">2025-12-24 14:30 · 订单号: 82934712</div>
-             </div>
-             <div class="text-right">
-                <div class="font-bold text-slate-900">¥ 9.90</div>
-                <div class="text-sm text-green-600 mt-1">交易成功</div>
-             </div>
-          </div>
-          <!-- More items... -->
-       </div>
-    </div>
+      <!-- Recent Orders -->
+      <div class="mt-8 bg-white rounded-xl shadow-sm border border-slate-100 p-6">
+         <div class="flex items-center justify-between mb-6">
+            <h2 class="text-xl font-bold text-slate-900">最近订单</h2>
+            <router-link to="/me/orders"
+               class="text-sm text-primary-600 hover:text-primary-700 font-medium px-2 py-1 rounded hover:bg-primary-50 transition-colors">查看全部
+               <i class="pi pi-angle-right"></i></router-link>
+         </div>
 
-    <!-- Recent Views -->
-    <div class="mt-8 bg-white rounded-xl shadow-sm border border-slate-100 p-6">
-       <div class="flex items-center justify-between mb-6">
-          <h2 class="text-xl font-bold text-slate-900">最近浏览</h2>
-          <button class="text-sm text-slate-500 hover:text-slate-700"><i class="pi pi-trash"></i> 清空历史</button>
-       </div>
-       <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
-          <div v-for="i in 5" :key="i" class="group cursor-pointer">
-             <div class="aspect-[16/9] bg-slate-100 rounded-lg overflow-hidden mb-2 relative">
-                <img :src="`https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60`" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
-                <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors"></div>
-             </div>
-             <h4 class="text-sm font-medium text-slate-800 line-clamp-2 group-hover:text-primary-600">京剧名家谈戏曲传承与创新发展的思考</h4>
-             <div class="text-xs text-slate-400 mt-1">10分钟前</div>
-          </div>
-       </div>
-    </div>
-  </div>
+         <div class="space-y-4">
+            <div @click="$router.push('/me/orders/82934712')"
+               class="flex items-center gap-4 p-4 border border-slate-100 rounded-lg hover:border-primary-100 hover:shadow-sm transition-all cursor-pointer active:scale-[0.99] group">
+               <div class="w-16 h-16 bg-slate-100 rounded object-cover flex-shrink-0">
+                  <img
+                     src="https://images.unsplash.com/photo-1514306191717-452ec28c7f31?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=60"
+                     class="w-full h-full object-cover rounded transition-transform group-hover:scale-105">
+               </div>
+               <div class="flex-1 min-w-0">
+                  <h3 class="font-bold text-slate-900 truncate group-hover:text-primary-600 transition-colors">
+                     《霸王别姬》全本实录珍藏版</h3>
+                  <div class="text-sm text-slate-500 mt-1">2025-12-24 14:30 · 订单号: 82934712</div>
+               </div>
+               <div class="text-right">
+                  <div class="font-bold text-slate-900">¥ 9.90</div>
+                  <div class="text-sm text-green-600 mt-1">交易成功</div>
+               </div>
+            </div>
+            <!-- More items... -->
+         </div>
+      </div>
+
+      <!-- Recent Views -->
+      <div class="mt-8 bg-white rounded-xl shadow-sm border border-slate-100 p-6">
+         <div class="flex items-center justify-between mb-6">
+            <h2 class="text-xl font-bold text-slate-900">最近浏览</h2>
+            <button class="text-sm text-slate-500 hover:text-slate-700"><i class="pi pi-trash"></i> 清空历史</button>
+         </div>
+         <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+            <div v-for="i in 5" :key="i" class="group cursor-pointer">
+               <div class="aspect-[16/9] bg-slate-100 rounded-lg overflow-hidden mb-2 relative">
+                  <img
+                     :src="`https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60`"
+                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
+                  <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors"></div>
+               </div>
+               <h4 class="text-sm font-medium text-slate-800 line-clamp-2 group-hover:text-primary-600">
+                  京剧名家谈戏曲传承与创新发展的思考</h4>
+               <div class="text-xs text-slate-400 mt-1">10分钟前</div>
+            </div>
+         </div>
+      </div>
+   </div>
 </template>
diff --git a/frontend/portal/src/views/user/SecurityView.vue b/frontend/portal/src/views/user/SecurityView.vue
index 5f1b79e..12327e1 100644
--- a/frontend/portal/src/views/user/SecurityView.vue
+++ b/frontend/portal/src/views/user/SecurityView.vue
@@ -15,18 +15,6 @@
 
     <!-- Security Items -->
     <div class="space-y-6">
-       <!-- Password -->
-       <div class="flex items-center justify-between py-4 border-b border-slate-50">
-          <div class="flex items-center gap-4">
-             <i class="pi pi-lock text-xl text-slate-400"></i>
-             <div>
-                <div class="font-bold text-slate-900">登录密码</div>
-                <div class="text-sm text-slate-500">已设置，建议定期更换</div>
-             </div>
-          </div>
-          <button @click="openVerify('password')" class="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg hover:bg-slate-50 text-sm font-medium transition-colors">修改</button>
-       </div>
-
        <!-- Phone -->
        <div class="flex items-center justify-between py-4 border-b border-slate-50">
           <div class="flex items-center gap-4">
@@ -39,18 +27,6 @@
           <button @click="openVerify('phone')" class="px-4 py-2 border border-slate-200 text-slate-600 rounded-lg hover:bg-slate-50 text-sm font-medium transition-colors">更换</button>
        </div>
 
-       <!-- Email -->
-       <div class="flex items-center justify-between py-4 border-b border-slate-50">
-          <div class="flex items-center gap-4">
-             <i class="pi pi-envelope text-xl text-slate-400"></i>
-             <div>
-                <div class="font-bold text-slate-900">邮箱绑定</div>
-                <div class="text-sm text-slate-500">未绑定</div>
-             </div>
-          </div>
-          <button @click="openVerify('email')" class="px-4 py-2 text-primary-600 font-medium hover:text-primary-700 text-sm transition-colors">立即绑定</button>
-       </div>
-
        <!-- Real-name Auth -->
        <div class="flex items-center justify-between py-4 border-b border-slate-50">
           <div class="flex items-center gap-4">
@@ -62,18 +38,6 @@
           </div>
           <button @click="$router.push('/creator/apply')" class="px-4 py-2 text-primary-600 font-medium hover:text-primary-700 text-sm transition-colors">去认证</button>
        </div>
-
-       <!-- Delete Account -->
-       <div class="flex items-center justify-between py-4 pt-8">
-          <div class="flex items-center gap-4">
-             <i class="pi pi-exclamation-circle text-xl text-red-400"></i>
-             <div>
-                <div class="font-bold text-slate-900">注销账号</div>
-                <div class="text-sm text-slate-500">注销后账号及资产将无法找回，请谨慎操作</div>
-             </div>
-          </div>
-          <button @click="confirmDelete" class="px-4 py-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 text-sm font-medium transition-colors">注销</button>
-       </div>
     </div>
 
     <!-- Verification Dialog -->