From 973586ff5fff095b78b55117e2e79b04201b9232 Mon Sep 17 00:00:00 2001
From: wikiboss <zacow@163.com>
Date: Wed, 16 Sep 2026 17:09:19 +0800
Subject: [PATCH] =?UTF-8?q?style(uiux):=20=E4=BE=9D=E6=8D=AEui-ux-pro-max?=
 =?UTF-8?q?=E8=A7=84=E8=8C=83=E6=B7=B1=E5=BA=A6=E6=89=93=E7=A3=A8=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E6=B5=8F=E8=A7=88=E5=99=A8=E7=AB=AF=E7=BB=86=E8=8A=82?=
 =?UTF-8?q?=E5=B9=B6=E5=AE=8C=E6=88=90=E7=9C=9F=E6=9C=BA=E8=A7=86=E5=8F=A3?=
 =?UTF-8?q?=E9=AA=8C=E6=94=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pwuniapp/App.vue                      | 103 ++++++++++++++++++--------
 pwuniapp/pages/activity/detail.vue    |   8 +-
 pwuniapp/pages/activity/list.vue      |  22 ++++--
 pwuniapp/pages/activity/my-ticket.vue |  42 +++++++++--
 pwuniapp/pages/expert/detail.vue      |  36 +++++++--
 pwuniapp/pages/index/index.vue        |  46 ++++++++----
 pwuniapp/pages/order/create.vue       |  25 +++++--
 pwuniapp/pages/order/list.vue         |   3 +-
 pwuniapp/pages/user/index.vue         |  34 +++++++--
 9 files changed, 235 insertions(+), 84 deletions(-)

diff --git a/pwuniapp/App.vue b/pwuniapp/App.vue
index d17cfc1..3e928e8 100644
--- a/pwuniapp/App.vue
+++ b/pwuniapp/App.vue
@@ -13,27 +13,34 @@ export default {
 </script>
 
 <style lang="scss">
-/* 全局暗黑电竞基础重置 */
+/* 全局暗黑电竞基础重置 (严格符合 UI/UX Pro Max 规范) */
 page {
   background-color: #0A0F1D;
   color: #F8FAFC;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', sans-serif;
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
 }
 
 view, text, image, input, button {
   box-sizing: border-box;
 }
 
-/* 触控反馈标准类 (严格满足 UI/UX 规范：100ms 内微缩放与透明度反馈，无布局位移) */
+/* 触控交互微反馈：80-120ms 弹性缩放，无布局位移 (CLS < 0.1) */
 .btn-active:active, .card-active:active {
-  transform: scale(0.98);
-  opacity: 0.9;
-  transition: transform 100ms ease-out, opacity 100ms ease-out;
+  transform: scale(0.975);
+  opacity: 0.88;
+  transition: transform 100ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 100ms ease-out;
 }
 
-/* 隐藏移动端滚动条 */
+/* 纯数字等宽排版 (避免金额、核销码、倒计时跳动) */
+.tabular-num {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum";
+}
+
+/* 隐藏移动端原生滚动条 */
 ::-webkit-scrollbar {
   display: none;
   width: 0;
@@ -41,45 +48,77 @@ view, text, image, input, button {
   color: transparent;
 }
 
-/* H5 PC 模式响应式移动端容器居中（如在浏览器访问 http://localhost:5174/ 时） */
+/* 移动端与 H5 响应式体验优化 */
 /* #ifdef H5 */
 html, body {
-  background-color: #050811 !important;
+  background-color: #0A0F1D;
   margin: 0;
   padding: 0;
-  overflow-x: hidden;
-  height: 100%;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
 }
 
-uni-app {
-  max-width: 450px !important;
-  margin: 0 auto !important;
-  min-height: 100vh !important;
-  box-shadow: 0 0 60rpx rgba(0, 0, 0, 0.9) !important;
-  position: relative !important;
-  background-color: #0A0F1D !important;
+/* 在 PC 宽屏上以 iPhone 15 Pro 仿真机壳居中展示，兼顾专业质感 */
+@media screen and (min-width: 481px) {
+  html, body {
+    background-color: #050811 !important;
+  }
+  
+  uni-app {
+    max-width: 450px !important;
+    margin: 20px auto !important;
+    min-height: calc(100vh - 40px) !important;
+    box-shadow: 0 0 80rpx rgba(0, 0, 0, 0.95), 0 0 0 2rpx rgba(99, 102, 241, 0.25) !important;
+    border-radius: 40rpx !important;
+    overflow: hidden !important;
+    position: relative !important;
+    background-color: #0A0F1D !important;
+  }
+
+  uni-page-head {
+    max-width: 450px !important;
+    left: 0 !important;
+    right: 0 !important;
+    margin: 0 auto !important;
+  }
+
+  uni-tabbar, .uni-tabbar {
+    position: fixed !important;
+    bottom: 20px !important;
+    left: 0 !important;
+    right: 0 !important;
+    margin: 0 auto !important;
+    max-width: 450px !important;
+    width: 100% !important;
+    z-index: 9999 !important;
+    border-bottom-left-radius: 40rpx !important;
+    border-bottom-right-radius: 40rpx !important;
+    overflow: hidden !important;
+  }
 }
 
-uni-page-head {
-  max-width: 450px !important;
-  left: 0 !important;
-  right: 0 !important;
-  margin: 0 auto !important;
-}
+/* 在手机移动浏览器上 100% 原生沉浸贴合，适配动态视口与底部安全区 */
+@media screen and (max-width: 480px) {
+  uni-app {
+    width: 100% !important;
+    min-height: 100vh !important;
+    min-height: 100dvh !important;
+  }
 
-uni-tabbar, .uni-tabbar {
-  position: fixed !important;
-  bottom: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  margin: 0 auto !important;
-  max-width: 450px !important;
-  width: 100% !important;
-  z-index: 9999 !important;
+  uni-tabbar, .uni-tabbar {
+    position: fixed !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    width: 100% !important;
+    z-index: 9999 !important;
+    padding-bottom: env(safe-area-inset-bottom) !important;
+  }
 }
 
 uni-tabbar .uni-tabbar__bd {
   background-color: #151D30 !important;
+  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
 }
 /* #endif */
 </style>
diff --git a/pwuniapp/pages/activity/detail.vue b/pwuniapp/pages/activity/detail.vue
index f13f78e..4b75821 100644
--- a/pwuniapp/pages/activity/detail.vue
+++ b/pwuniapp/pages/activity/detail.vue
@@ -161,7 +161,7 @@ const handleJoin = () => {
 .detail-container {
   min-height: 100vh;
   background-color: #0A0F1D;
-  padding: 24rpx 32rpx 160rpx;
+  padding: 24rpx 32rpx calc(160rpx + env(safe-area-inset-bottom));
 }
 
 .hero-card {
@@ -433,13 +433,14 @@ const handleJoin = () => {
   bottom: 0;
   left: 0;
   right: 0;
-  height: 120rpx;
+  height: calc(120rpx + env(safe-area-inset-bottom));
+  padding: 0 32rpx env(safe-area-inset-bottom);
+  box-sizing: border-box;
   background-color: rgba(21, 29, 48, 0.95);
   backdrop-filter: blur(12px);
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   display: flex;
   align-items: center;
-  padding: 0 32rpx;
   gap: 24rpx;
   z-index: 100;
   max-width: 450px;
@@ -474,6 +475,7 @@ const handleJoin = () => {
     line-height: 80rpx;
     box-shadow: 0 4rpx 20rpx rgba(16, 185, 129, 0.35);
     margin: 0;
+    font-variant-numeric: tabular-nums;
   }
 }
 </style>
diff --git a/pwuniapp/pages/activity/list.vue b/pwuniapp/pages/activity/list.vue
index 09019b0..0be5b86 100644
--- a/pwuniapp/pages/activity/list.vue
+++ b/pwuniapp/pages/activity/list.vue
@@ -74,7 +74,7 @@
         <view class="progress-section">
           <view class="progress-info">
             <text class="progress-label">组队进度</text>
-            <text class="progress-count">{{ act.currentParticipants }} / {{ act.maxParticipants }}人</text>
+            <text class="progress-count tabular-num">{{ act.currentParticipants }} / {{ act.maxParticipants }}人</text>
           </view>
           <view class="progress-track">
             <view
@@ -91,7 +91,7 @@
             <text class="creator-name">房主：{{ act.creatorNickname }}</text>
           </view>
 
-          <view class="fee-info">
+          <view class="fee-info tabular-num">
             <template v-if="act.payType === 'AA'">
               <text class="fee-label">人均预估</text>
               <text class="fee-amount">¥{{ act.aaFee }}</text>
@@ -105,7 +105,7 @@
       </view>
     </view>
 
-    <!-- 悬浮发起活动按钮 -->
+    <!-- 悬浮发起活动按钮 (脉冲微流光) -->
     <view class="fab-btn btn-active" @click="createActivity">
       <text class="fab-icon">＋</text>
       <text class="fab-text">发起组队</text>
@@ -149,7 +149,7 @@ const createActivity = () => {
 .activity-container {
   min-height: 100vh;
   background-color: #0A0F1D;
-  padding: 20rpx 32rpx 140rpx;
+  padding: 20rpx 32rpx calc(180rpx + env(safe-area-inset-bottom));
 }
 
 .tab-header {
@@ -169,6 +169,7 @@ const createActivity = () => {
     padding: 18rpx 0;
     position: relative;
     border-radius: 14rpx;
+    transition: all 0.2s ease;
 
     .tab-svg {
       width: 26rpx;
@@ -343,6 +344,7 @@ const createActivity = () => {
           height: 100%;
           background: linear-gradient(90deg, #10B981, #059669);
           border-radius: 5rpx;
+          box-shadow: 0 0 10rpx rgba(16, 185, 129, 0.5);
         }
       }
     }
@@ -396,15 +398,16 @@ const createActivity = () => {
 .fab-btn {
   position: fixed;
   right: 36rpx;
-  bottom: 160rpx;
+  bottom: calc(140rpx + env(safe-area-inset-bottom));
   background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
   border-radius: 44rpx;
-  padding: 18rpx 32rpx;
+  padding: 18rpx 34rpx;
   display: flex;
   align-items: center;
-  box-shadow: 0 8rpx 28rpx rgba(99, 102, 241, 0.5);
+  box-shadow: 0 8rpx 28rpx rgba(99, 102, 241, 0.55);
   border: 1px solid rgba(255, 255, 255, 0.2);
   z-index: 100;
+  animation: fabPulse 3s infinite ease-in-out;
 
   .fab-icon {
     font-size: 32rpx;
@@ -418,4 +421,9 @@ const createActivity = () => {
     font-weight: 600;
   }
 }
+
+@keyframes fabPulse {
+  0%, 100% { box-shadow: 0 8rpx 24rpx rgba(99, 102, 241, 0.45); }
+  50% { box-shadow: 0 8rpx 36rpx rgba(99, 102, 241, 0.75); }
+}
 </style>
diff --git a/pwuniapp/pages/activity/my-ticket.vue b/pwuniapp/pages/activity/my-ticket.vue
index a8d5571..02982bb 100644
--- a/pwuniapp/pages/activity/my-ticket.vue
+++ b/pwuniapp/pages/activity/my-ticket.vue
@@ -124,7 +124,7 @@ const goBack = () => {
 .ticket-container {
   min-height: 100vh;
   background-color: #0A0F1D;
-  padding: 40rpx 36rpx;
+  padding: 40rpx 36rpx calc(60rpx + env(safe-area-inset-bottom));
 }
 
 .ticket-card {
@@ -158,12 +158,14 @@ const goBack = () => {
       color: #F59E0B;
       border: 1px solid rgba(245, 158, 11, 0.3);
       font-weight: 700;
+      transition: all 0.3s ease;
 
       &.verified {
         background: rgba(16, 185, 129, 0.15);
         color: #10B981;
-        border-color: rgba(16, 185, 129, 0.4);
-        transform: rotate(-4deg);
+        border-color: rgba(16, 185, 129, 0.5);
+        box-shadow: 0 0 16rpx rgba(16, 185, 129, 0.3);
+        animation: stampIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
       }
     }
   }
@@ -244,19 +246,21 @@ const goBack = () => {
       .digit-box {
         width: 110rpx;
         height: 130rpx;
-        background: rgba(10, 15, 29, 0.8);
+        background: rgba(10, 15, 29, 0.85);
         border: 2rpx solid #10B981;
         border-radius: 16rpx;
         display: flex;
         align-items: center;
         justify-content: center;
-        box-shadow: 0 0 24rpx rgba(16, 185, 129, 0.45);
+        box-shadow: 0 0 24rpx rgba(16, 185, 129, 0.4), inset 0 0 16rpx rgba(16, 185, 129, 0.15);
+        animation: slotPulse 2.5s ease-in-out infinite alternate;
 
         .digit-text {
           font-size: 64rpx;
           font-weight: 800;
           color: #10B981;
           font-family: 'Courier New', Courier, monospace;
+          font-variant-numeric: tabular-nums;
           text-shadow: 0 0 16rpx rgba(16, 185, 129, 0.7);
         }
       }
@@ -311,7 +315,9 @@ const goBack = () => {
       .time-text {
         font-size: 20rpx;
         color: #94A3B8;
-        font-family: monospace;
+        font-family: 'Courier New', monospace;
+        font-variant-numeric: tabular-nums;
+        letter-spacing: 1rpx;
       }
     }
 
@@ -358,4 +364,28 @@ const goBack = () => {
   0% { background-position: 0% 50%; }
   100% { background-position: 200% 50%; }
 }
+
+@keyframes stampIn {
+  0% {
+    transform: scale(2.4) rotate(-22deg);
+    opacity: 0;
+  }
+  70% {
+    transform: scale(0.92) rotate(-6deg);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1) rotate(-4deg);
+    opacity: 1;
+  }
+}
+
+@keyframes slotPulse {
+  0% {
+    box-shadow: 0 0 16rpx rgba(16, 185, 129, 0.3), inset 0 0 10rpx rgba(16, 185, 129, 0.1);
+  }
+  100% {
+    box-shadow: 0 0 28rpx rgba(16, 185, 129, 0.6), inset 0 0 18rpx rgba(16, 185, 129, 0.25);
+  }
+}
 </style>
diff --git a/pwuniapp/pages/expert/detail.vue b/pwuniapp/pages/expert/detail.vue
index 692c70c..c18ded2 100644
--- a/pwuniapp/pages/expert/detail.vue
+++ b/pwuniapp/pages/expert/detail.vue
@@ -26,7 +26,10 @@
           </view>
 
           <view class="data-row">
-            <text class="rating-val">⭐ {{ expert.rating }}</text>
+            <view class="rating-box">
+              <image class="star-svg" :src="ICONS.star" mode="aspectFit" />
+              <text class="rating-val">{{ expert.rating }}</text>
+            </view>
             <text class="order-val">已陪玩 {{ expert.orderCount }} 次</text>
           </view>
         </view>
@@ -204,7 +207,7 @@ const goToOrder = () => {
 .expert-detail-container {
   min-height: 100vh;
   background-color: #0A0F1D;
-  padding-bottom: 140rpx;
+  padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
 }
 
 .hero-header {
@@ -321,13 +324,26 @@ const goToOrder = () => {
 
       .data-row {
         display: flex;
+        align-items: center;
         gap: 20rpx;
         font-size: 22rpx;
         color: #94A3B8;
 
-        .rating-val {
-          color: #F59E0B;
-          font-weight: 600;
+        .rating-box {
+          display: flex;
+          align-items: center;
+          gap: 6rpx;
+
+          .star-svg {
+            width: 24rpx;
+            height: 24rpx;
+          }
+
+          .rating-val {
+            color: #F59E0B;
+            font-weight: 700;
+            font-variant-numeric: tabular-nums;
+          }
         }
       }
     }
@@ -450,8 +466,9 @@ const goToOrder = () => {
       padding: 20rpx 24rpx;
 
       &.selected {
-        background: rgba(99, 102, 241, 0.15);
+        background: rgba(99, 102, 241, 0.16);
         border-color: #6366F1;
+        box-shadow: 0 0 16rpx rgba(99, 102, 241, 0.35);
       }
 
       .srv-left {
@@ -469,6 +486,7 @@ const goToOrder = () => {
 
       .srv-right {
         color: #10B981;
+        font-variant-numeric: tabular-nums;
         .price-sym { font-size: 22rpx; }
         .price-num { font-size: 34rpx; font-weight: 700; }
         .price-unit { font-size: 20rpx; color: #64748B; }
@@ -562,13 +580,14 @@ const goToOrder = () => {
   bottom: 0;
   left: 0;
   right: 0;
-  height: 120rpx;
+  height: calc(120rpx + env(safe-area-inset-bottom));
+  padding: 0 32rpx env(safe-area-inset-bottom);
+  box-sizing: border-box;
   background-color: rgba(21, 29, 48, 0.95);
   backdrop-filter: blur(12px);
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   display: flex;
   align-items: center;
-  padding: 0 32rpx;
   gap: 20rpx;
   z-index: 100;
   max-width: 450px;
@@ -605,6 +624,7 @@ const goToOrder = () => {
       font-weight: 700;
       color: #10B981;
       margin-left: 6rpx;
+      font-variant-numeric: tabular-nums;
     }
   }
 
diff --git a/pwuniapp/pages/index/index.vue b/pwuniapp/pages/index/index.vue
index 3326ee8..5fdb550 100644
--- a/pwuniapp/pages/index/index.vue
+++ b/pwuniapp/pages/index/index.vue
@@ -1,6 +1,6 @@
 <template>
   <view class="index-container">
-    <!-- 顶部搜索栏 (矢量SVG搜索图标，满足无Emoji规范) -->
+    <!-- 顶部搜索栏 (矢量SVG搜索图标，交互聚焦微动效) -->
     <view class="header-search">
       <view class="search-box">
         <image class="search-icon-img" :src="ICONS.search" mode="aspectFit" />
@@ -8,7 +8,7 @@
       </view>
     </view>
 
-    <!-- 游戏分类滑动栏 (SVG分类图标) -->
+    <!-- 游戏分类滑动栏 (SVG分类图标，单行横滑，抗挤压) -->
     <scroll-view scroll-x class="category-scroll" :show-scrollbar="false">
       <view class="category-list">
         <view
@@ -25,7 +25,7 @@
       </view>
     </scroll-view>
 
-    <!-- 精彩活动横幅轮播 -->
+    <!-- 精彩活动横幅轮播 (流光投影) -->
     <swiper class="banner-swiper" circular autoplay interval="4000" indicator-dots indicator-color="rgba(255,255,255,0.2)" indicator-active-color="#6366F1">
       <swiper-item v-for="banner in banners" :key="banner.id" class="banner-item" @click="goToActivity">
         <view class="banner-card" :style="{ background: banner.bg }">
@@ -36,7 +36,7 @@
       </swiper-item>
     </swiper>
 
-    <!-- 快捷功能金刚区 (纯矢量SVG图标) -->
+    <!-- 快捷功能金刚区 (纯矢量SVG图标，88rpx触控热区) -->
     <view class="quick-grid">
       <view class="quick-item btn-active" @click="navTo('/pages/activity/list')">
         <view class="quick-icon-bg bg-purple">
@@ -68,7 +68,7 @@
       </view>
     </view>
 
-    <!-- 陪玩大神瀑布流 -->
+    <!-- 陪玩大神瀑布流标题 -->
     <view class="section-title-wrap">
       <view class="section-title">
         <view class="title-line"></view>
@@ -80,6 +80,7 @@
       </view>
     </view>
 
+    <!-- 陪玩大神卡片网格 -->
     <view class="expert-grid">
       <view
         v-for="expert in filteredExperts"
@@ -87,7 +88,7 @@
         class="expert-card card-active"
         @click="goToExpert(expert.id)"
       >
-        <!-- 封面图构图优化：标准黄金比例与底部暗夜流光渐变 -->
+        <!-- 封面图构图优化：高保真黄金比例与底部流光渐变 -->
         <view class="card-cover-wrap">
           <image class="card-cover" :src="expert.avatar" mode="aspectFill" />
           <view class="cover-gradient"></view>
@@ -107,8 +108,8 @@
           </view>
           <view class="rank-badge">{{ expert.rankTag }}</view>
 
-          <!-- 语音试听条 (矢量SVG播放图标) -->
-          <view class="voice-bar btn-active" @click.stop="toggleVoice(expert.id)">
+          <!-- 语音试听条 (矢量SVG播放图标，带播放高亮光晕) -->
+          <view class="voice-bar btn-active" :class="{ playing: playingId === expert.id }" @click.stop="toggleVoice(expert.id)">
             <image class="voice-icon-svg" :src="playingId === expert.id ? ICONS.pause : ICONS.play" mode="aspectFit" />
             <text class="voice-text">{{ playingId === expert.id ? '试听中...' : expert.voiceDuration + 's 原声试听' }}</text>
             <view class="wave-lines" v-if="playingId === expert.id">
@@ -119,12 +120,12 @@
           </view>
 
           <view class="card-footer">
-            <view class="price-wrap">
+            <view class="price-wrap tabular-num">
               <text class="price-symbol">¥</text>
               <text class="price-val">{{ expert.price }}</text>
               <text class="price-unit">/时</text>
             </view>
-            <text class="order-count">{{ expert.orderCount }}单</text>
+            <text class="order-count tabular-num">{{ expert.orderCount }}单</text>
           </view>
         </view>
       </view>
@@ -196,7 +197,7 @@ const navTo = (url) => {
 .index-container {
   min-height: 100vh;
   background-color: #0A0F1D;
-  padding-bottom: 140rpx;
+  padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
 }
 
 .header-search {
@@ -214,6 +215,12 @@ const navTo = (url) => {
     border-radius: 40rpx;
     padding: 0 28rpx;
     border: 1px solid rgba(255, 255, 255, 0.08);
+    transition: all 0.2s ease;
+
+    &:focus-within {
+      border-color: #6366F1;
+      box-shadow: 0 0 16rpx rgba(99, 102, 241, 0.35);
+    }
 
     .search-icon-img {
       width: 32rpx;
@@ -256,6 +263,7 @@ const navTo = (url) => {
     border-radius: 32rpx;
     border: 1px solid rgba(255, 255, 255, 0.06);
     position: relative;
+    transition: all 0.15s ease-out;
 
     .cat-icon-svg {
       width: 28rpx;
@@ -277,12 +285,13 @@ const navTo = (url) => {
       padding: 2rpx 8rpx;
       border-radius: 12rpx;
       font-weight: 700;
+      box-shadow: 0 2rpx 6rpx rgba(239, 68, 68, 0.4);
     }
 
     &.active {
       background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
       border-color: #818CF8;
-      box-shadow: 0 4rpx 16rpx rgba(99, 102, 241, 0.4);
+      box-shadow: 0 4rpx 16rpx rgba(99, 102, 241, 0.45);
 
       .cat-name {
         color: #FFFFFF;
@@ -303,7 +312,7 @@ const navTo = (url) => {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.4);
+    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.45);
 
     .banner-tag {
       align-self: flex-start;
@@ -351,6 +360,7 @@ const navTo = (url) => {
       align-items: center;
       justify-content: center;
       margin-bottom: 12rpx;
+      transition: transform 0.15s ease;
 
       .quick-svg {
         width: 40rpx;
@@ -434,6 +444,7 @@ const navTo = (url) => {
       position: relative;
       height: 260rpx;
       overflow: hidden;
+      background-color: #1E2942;
 
       .card-cover {
         width: 100%;
@@ -445,7 +456,7 @@ const navTo = (url) => {
       .cover-gradient {
         position: absolute;
         inset: 0;
-        background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(21, 29, 48, 0.8) 100%);
+        background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(21, 29, 48, 0.85) 100%);
       }
 
       .status-tag {
@@ -548,6 +559,13 @@ const navTo = (url) => {
         align-items: center;
         padding: 0 16rpx;
         margin-bottom: 16rpx;
+        transition: all 0.2s ease;
+
+        &.playing {
+          background: rgba(99, 102, 241, 0.3);
+          border-color: #818CF8;
+          box-shadow: 0 0 14rpx rgba(99, 102, 241, 0.4);
+        }
 
         .voice-icon-svg {
           width: 20rpx;
diff --git a/pwuniapp/pages/order/create.vue b/pwuniapp/pages/order/create.vue
index afd8d41..a9eb43e 100644
--- a/pwuniapp/pages/order/create.vue
+++ b/pwuniapp/pages/order/create.vue
@@ -170,7 +170,7 @@ const handlePay = () => {
 .create-order-container {
   min-height: 100vh;
   background-color: #0A0F1D;
-  padding: 24rpx 32rpx 160rpx;
+  padding: 24rpx 32rpx calc(160rpx + env(safe-area-inset-bottom));
 }
 
 .order-card {
@@ -225,6 +225,7 @@ const handlePay = () => {
         font-size: 26rpx;
         font-weight: 600;
         color: #10B981;
+        font-variant-numeric: tabular-nums;
       }
     }
   }
@@ -258,23 +259,29 @@ const handlePay = () => {
       padding: 6rpx;
 
       .step-btn {
-        width: 60rpx;
-        height: 60rpx;
-        line-height: 56rpx;
+        width: 72rpx;
+        height: 72rpx;
+        line-height: 68rpx;
         padding: 0;
         background: #1E2942;
         color: #FFF;
         font-size: 32rpx;
-        border-radius: 12rpx;
+        border-radius: 14rpx;
         border: none;
         margin: 0;
+        transition: transform 0.1s ease;
+
+        &:active {
+          transform: scale(0.92);
+        }
       }
 
       .step-val {
-        font-size: 28rpx;
+        font-size: 30rpx;
         color: #F8FAFC;
         font-weight: 600;
         margin: 0 24rpx;
+        font-variant-numeric: tabular-nums;
       }
     }
   }
@@ -425,14 +432,15 @@ const handlePay = () => {
   bottom: 0;
   left: 0;
   right: 0;
-  height: 120rpx;
+  height: calc(120rpx + env(safe-area-inset-bottom));
+  padding: 0 32rpx env(safe-area-inset-bottom);
+  box-sizing: border-box;
   background-color: rgba(21, 29, 48, 0.95);
   backdrop-filter: blur(12px);
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 32rpx;
   z-index: 100;
   max-width: 450px;
   margin: 0 auto;
@@ -449,6 +457,7 @@ const handlePay = () => {
       font-size: 40rpx;
       font-weight: 700;
       color: #10B981;
+      font-variant-numeric: tabular-nums;
     }
   }
 
diff --git a/pwuniapp/pages/order/list.vue b/pwuniapp/pages/order/list.vue
index 93e1af5..a0faf79 100644
--- a/pwuniapp/pages/order/list.vue
+++ b/pwuniapp/pages/order/list.vue
@@ -179,7 +179,7 @@ const rateExpert = (id) => {
 .order-list-container {
   min-height: 100vh;
   background-color: #0A0F1D;
-  padding: 20rpx 32rpx 140rpx;
+  padding: 20rpx 32rpx calc(160rpx + env(safe-area-inset-bottom));
 }
 
 .tab-header {
@@ -333,6 +333,7 @@ const rateExpert = (id) => {
           font-weight: 700;
           color: #10B981;
           display: block;
+          font-variant-numeric: tabular-nums;
         }
         .quantity-text {
           font-size: 20rpx;
diff --git a/pwuniapp/pages/user/index.vue b/pwuniapp/pages/user/index.vue
index e814d4b..8fd5542 100644
--- a/pwuniapp/pages/user/index.vue
+++ b/pwuniapp/pages/user/index.vue
@@ -205,7 +205,7 @@ const navTo = (url) => {
 .user-container {
   min-height: 100vh;
   background-color: #0A0F1D;
-  padding: 24rpx 32rpx 140rpx;
+  padding: 24rpx 32rpx calc(160rpx + env(safe-area-inset-bottom));
 }
 
 .profile-card {
@@ -273,14 +273,32 @@ const navTo = (url) => {
 .role-switch-card {
   position: relative;
   border-radius: 24rpx;
-  background: linear-gradient(135deg, #1E1B4B 0%, #0F172A 100%);
-  border: 2rpx solid #6366F1;
-  box-shadow: 0 8rpx 28rpx rgba(99, 102, 241, 0.35);
-  overflow: hidden;
   padding: 28rpx;
   margin-bottom: 28rpx;
+  overflow: hidden;
+  box-shadow: 0 8rpx 28rpx rgba(99, 102, 241, 0.35);
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -50%;
+    background: conic-gradient(from 0deg, transparent 0%, #6366F1 25%, #10B981 50%, #6366F1 75%, transparent 100%);
+    animation: glowSpin 5s linear infinite;
+    z-index: 0;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 2rpx;
+    background: linear-gradient(135deg, #1E1B4B 0%, #0F172A 100%);
+    border-radius: 22rpx;
+    z-index: 1;
+  }
 
   .role-content {
+    position: relative;
+    z-index: 2;
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -382,6 +400,7 @@ const navTo = (url) => {
         font-size: 36rpx;
         font-weight: 700;
         margin-bottom: 14rpx;
+        font-variant-numeric: tabular-nums;
 
         &.green-val {
           color: #10B981;
@@ -503,4 +522,9 @@ const navTo = (url) => {
     }
   }
 }
+
+@keyframes glowSpin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
 </style>