feat: 优化界面样式

src/components/ChatBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="chat-container">
+  <view class="chat-container" :style="{ paddingTop: navBarHeight + 'px', paddingBottom: `calc(200rpx + ${keyboardHeight}px)` }">
     <!-- 夜空装饰背景 -->
     <view class="night-sky-decoration">
       <view class="star star-1"></view>
@@ -13,19 +13,21 @@
     </view>
 
     <!-- 自定义导航栏 -->
-    <view class="custom-navbar">
+    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
-      <view class="navbar-left">
+      <view class="navbar-content">
-        <view v-if="showBackButton" @tap="goBack" class="left-btn">
+        <view class="navbar-left">
-          <text class="back-icon">←</text>
+          <view v-if="showBackButton" @tap="goBack" class="left-btn">
-          <text class="back-text">返回</text>
+            <text class="back-icon">←</text>
+            <text class="back-text">返回</text>
+          </view>
+          <text class="clear-btn" @tap="clearContext">清空</text>
+        </view>
+        <view class="navbar-center" :class="{'centered': !showBackButton}">
+          <image class="character-avatar" :src="processedAvatar" mode="aspectFill" />
+          <text class="character-name">{{ currentCharacter.name }}</text>
+        </view>
+        <view class="navbar-right">
         </view>
-        <text class="clear-btn" @tap="clearContext">清空</text>
-      </view>
-      <view class="navbar-center" :class="{'centered': !showBackButton}">
-        <image class="character-avatar" :src="processedAvatar" mode="aspectFill" />
-        <text class="character-name">{{ currentCharacter.name }}</text>
-      </view>
-      <view class="navbar-right">
       </view>
     </view>
 
@@ -94,7 +96,7 @@
   </view>
 
   <!-- 输入区域 - 使用 Ant Design X Sender 风格 -->
-  <view class="input-area">
+  <view class="input-area" :style="{ bottom: keyboardHeight + 'px' }">
     <!-- 智能体选择按钮 -->
     <!-- <view class="action-bar" v-if="availableTemplates.length > 0">
       <view class="template-selector-btn" @click="showTemplateSelector">
@@ -115,6 +117,9 @@
           @confirm="sendMessage"
           confirm-type="send"
           @focus="handleInputFocus"
+          @blur="handleInputBlur"
+          :adjust-position="false"
+          :hold-keyboard="false"
         />
 
         <view class="input-actions">
@@ -221,7 +226,7 @@ const props = defineProps({
     type: Object,
     default: () => ({
       modelId: 10,
-      templateId: 6,
+      templateId: 9999,
       ttsId: null,
       sttId: null,
       temperature: 0.7,
@@ -253,6 +258,11 @@ const conversationId = ref(null);
 const isLoading = ref(false);
 const isLoggedIn = ref(false);
 const showBackButton = computed(() => props.uiConfig.showBackButton);
+const keyboardHeight = ref(0); // 键盘高度
+
+// 状态栏高度适配
+const statusBarHeight = ref(0);
+const navBarHeight = ref(0);
 
 // 录音相关
 const isRecordingMode = ref(false);
@@ -323,9 +333,34 @@ watch(() => props.characterConfig, async (newConfig) => {
   }
 }, { immediate: true, deep: true });
 
+// 获取系统状态栏高度
+const getSystemInfo = () => {
+  const systemInfo = uni.getSystemInfoSync();
+  statusBarHeight.value = systemInfo.statusBarHeight || 0;
+  // 导航栏总高度 = 状态栏高度 + 导航栏内容高度（44px）
+  navBarHeight.value = statusBarHeight.value + 44;
+  console.log('状态栏高度:', statusBarHeight.value, '导航栏总高度:', navBarHeight.value);
+};
+
 onMounted(() => {
+  getSystemInfo();     // 获取系统信息
   checkLoginStatus();  // 检查登录状态
   initRecorder();      // 初始化录音器
+
+  // 监听键盘高度变化
+  // #ifdef MP-WEIXIN
+  uni.onKeyboardHeightChange((res) => {
+    console.log('键盘高度变化:', res.height);
+    keyboardHeight.value = res.height;
+
+    // 键盘弹出时，延迟滚动到底部
+    if (res.height > 0) {
+      setTimeout(() => {
+        scrollToBottom();
+      }, 350); // 等待过渡动画完成
+    }
+  });
+  // #endif
 });
 
 // 加载AI配置
@@ -588,7 +623,7 @@ const getAIResponse = async (userMessage) => {
       characterId: currentCharacter.value.id,
       conversationId: conversationId.value,
       modelId: 10,
-      templateId: 6
+      templateId: 9999
     };
 
     if (currentCharacter.value.roleId) {
@@ -909,8 +944,21 @@ const selectTemplate = (template) => {
 };
 
 // 处理输入框聚焦
-const handleInputFocus = () => {
+const handleInputFocus = (e) => {
-  console.log('输入框获得焦点');
+  console.log('输入框获得焦点', e);
+  // 在小程序中，通过 detail.height 获取键盘高度
+  if (e && e.detail && e.detail.height) {
+    keyboardHeight.value = e.detail.height;
+  }
+};
+
+// 处理输入框失焦
+const handleInputBlur = (e) => {
+  console.log('输入框失去焦点', e);
+  // 延迟重置键盘高度，避免闪烁
+  setTimeout(() => {
+    keyboardHeight.value = 0;
+  }, 100);
 };
 
 // 返回
@@ -977,13 +1025,17 @@ const clearContext = async () => {
 };
 </script>
 
-<style scoped>
+<!-- 非 scoped 样式：影响页面根元素，防止键盘弹出时页面被推上去 -->
-/* 页面容器 */
+<style>
 page {
   height: 100vh;
   overflow: hidden;
   background: linear-gradient(180deg, #1a0b2e 0%, #2d1b4e 50%, #1a0b2e 100%);
 }
+</style>
+
+<style scoped>
+/* 页面容器 */
 
 .chat-container {
   width: 100vw;
@@ -995,8 +1047,8 @@ page {
   right: 0;
   bottom: 0;
   overflow: hidden;
-  padding-top: calc(100rpx + env(safe-area-inset-top));
   padding-bottom: 200rpx;
+  transition: padding-bottom 0.3s ease;
 }
 
 /* 夜空装饰 */
@@ -1034,23 +1086,26 @@ page {
 .star-7 { top: 15%; left: 60%; animation-delay: 0.4s; }
 .star-8 { top: 85%; left: 55%; animation-delay: 1.8s; }
 
-/* 导航栏 */
+/* 自定义导航栏 */
 .custom-navbar {
-  height: 100rpx;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
   background: rgba(26, 11, 46, 0.95);
   backdrop-filter: blur(20rpx);
   box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.3);
   border-bottom: 1rpx solid rgba(249, 224, 118, 0.1);
+  z-index: 1000;
+}
+
+.navbar-content {
+  height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 32rpx;
-  padding-top: env(safe-area-inset-top);
+  position: relative;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1000;
 }
 
 .navbar-left {
@@ -1140,7 +1195,7 @@ page {
 
 /* 聊天消息区域 */
 .chat-messages {
-  height: calc(100vh - 100rpx - 200rpx - env(safe-area-inset-top));
+  height: calc(100vh - 200rpx);
   padding: 24rpx;
   overflow-y: auto;
 }
@@ -1329,6 +1384,7 @@ page {
   padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
   box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.3);
   z-index: 1000;
+  transition: bottom 0.3s ease;
 }
 
 .action-bar {

src/pages.json

@@ -18,6 +18,12 @@
 				"navigationStyle": "custom"
 			}
 		},
+		{
+			"path": "pages/chat/chat-box",
+			"style": {
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path": "pages/role-chat/role-chat",
 			"style": {
@@ -111,7 +117,7 @@
 				"text": "设备"
 			},
 			{
-				"pagePath": "pages/chat/chat",
+				"pagePath": "pages/chat/chat-box",
 				"text": "专属"
 			},
 			{

src/pages/chat/chat-box.vue

@@ -0,0 +1,138 @@
+<template>
+  <ChatBox
+    :character-config="characterConfig"
+    :ai-config="aiConfig"
+    :ui-config="uiConfig"
+  />
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import ChatBox from '@/components/ChatBox.vue';
+import { getCharacterById } from '@/utils/aiCharacters.js';
+
+// 角色配置
+const characterConfig = ref({});
+
+// AI 配置
+const aiConfig = ref({
+  modelId: 10,
+  templateId: 9999
+});
+
+// UI 配置
+const uiConfig = ref({
+  showBackButton: false  // 默认不显示返回按钮
+});
+
+// 初始化：解析 URL 参数
+onMounted(() => {
+
+  const pages = getCurrentPages();
+  const currentPage = pages[pages.length - 1];
+  const options = currentPage.options || {};
+
+  // 判断是否需要显示返回按钮
+  if (options.characterId || options.roleId) {
+    uiConfig.value.showBackButton = true;
+  }
+
+  // 场景1: 蔚AI（characterId === 'wei-ai' 或无参数）
+  if (options.characterId === 'wei-ai' || !options.characterId) {
+    characterConfig.value = {
+      id: 'wei-ai',
+      roleId: null,
+      name: options.characterName || '蔚AI',
+      avatar: options.characterAvatar || '/file/avatar/2025/11/09/ccfc630120114984b9f2d6e4990f5cd8.jpg',
+      greeting: options.introMessage ? decodeURIComponent(options.introMessage) : '你好！我是你的虚拟女友！',
+      roleDesc: ''
+    };
+
+    // 蔚AI 使用固定的 AI 配置
+    aiConfig.value = {
+      modelId: 10,
+      templateId: 9999,
+      ttsId: null,
+      sttId: null,
+      temperature: 0.7,
+      topP: 0.9
+    };
+  }
+  // 场景2: AI角色（有 roleId 参数）
+  else if (options.roleId) {
+    characterConfig.value = {
+      id: options.characterId || '',
+      roleId: options.roleId,
+      name: decodeURIComponent(options.roleName || 'AI角色'),
+      avatar: decodeURIComponent(options.avatar || '/static/logo.png'),
+      greeting: decodeURIComponent(options.greeting || '你好！很高兴认识你！'),
+      roleDesc: decodeURIComponent(options.roleDesc || '')
+    };
+    debugger
+    // AI角色使用自定义配置
+    aiConfig.value = {
+      modelId: options.modelId ? parseInt(options.modelId) : 10,
+      templateId: options.templateId ? parseInt(options.templateId) : (options.roleId ? parseInt(options.roleId) : 6),
+      ttsId: options.ttsId || null,
+      sttId: options.sttId || null,
+      temperature: options.temperature ? parseFloat(options.temperature) : 0.7,
+      topP: options.topP ? parseFloat(options.topP) : 0.9
+    };
+  }
+  // 场景3: 默认角色（从 aiCharacters.js 获取）
+  else {
+    const characterId = options.characterId || 5;
+    const character = getCharacterById(characterId);
+
+    if (character) {
+      characterConfig.value = {
+        id: character.id,
+        roleId: null,
+        name: character.name,
+        avatar: character.avatar,
+        greeting: character.greeting,
+        roleDesc: character.description || ''
+      };
+
+      // 默认角色使用固定的 AI 配置
+      aiConfig.value = {
+        modelId: 10,
+        templateId: 9999,
+        ttsId: null,
+        sttId: null,
+        temperature: 0.7,
+        topP: 0.9
+      };
+    } else {
+      // 兜底：如果找不到角色，使用蔚AI
+      characterConfig.value = {
+        id: 'wei-ai',
+        roleId: null,
+        name: '蔚AI',
+        avatar: '/static/avatar/icon_hushi.jpg',
+        greeting: '你好！我是蔚AI，很高兴为您服务！',
+        roleDesc: ''
+      };
+
+      aiConfig.value = {
+        modelId: 10,
+        templateId: 9999,
+        ttsId: null,
+        sttId: null,
+        temperature: 0.7,
+        topP: 0.9
+      };
+    }
+  }
+
+  console.log('chat-box 页面初始化完成:', {
+    characterConfig: characterConfig.value,
+    aiConfig: aiConfig.value,
+    uiConfig: uiConfig.value
+  });
+});
+</script>
+
+<style scoped>
+/* 无需额外样式，所有样式在 ChatBox 组件中 */
+</style>

src/pages/chat/chat.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="chat-container">
+  <view class="chat-container" :style="{ paddingTop: navBarHeight + 'px' }">
     <!-- 夜空装饰背景 -->
     <view class="night-sky-decoration">
       <view class="star star-1"></view>
@@ -13,19 +13,21 @@
     </view>
 
     <!-- 自定义导航栏 -->
-    <view class="custom-navbar">
+    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
-      <view class="navbar-left">
+      <view class="navbar-content">
-        <view v-if="showBackButton" @tap="goBack" class="left-btn">
+        <view class="navbar-left">
-          <text class="back-icon">←</text>
+          <view v-if="showBackButton" @tap="goBack" class="left-btn">
-          <text class="back-text">返回</text>
+            <text class="back-icon">←</text>
+            <text class="back-text">返回</text>
+          </view>
+          <text class="clear-btn" @tap="clearContext">清空</text>
+        </view>
+        <view class="navbar-center" :class="{'centered': !showBackButton}">
+          <image class="character-avatar" :src="currentCharacter.avatar" mode="aspectFill" />
+          <text class="character-name">{{ currentCharacter.name }}</text>
+        </view>
+        <view class="navbar-right">
         </view>
-        <text class="clear-btn" @tap="clearContext">清空</text>
-      </view>
-      <view class="navbar-center" :class="{'centered': !showBackButton}">
-        <image class="character-avatar" :src="currentCharacter.avatar" mode="aspectFill" />
-        <text class="character-name">{{ currentCharacter.name }}</text>
-      </view>
-      <view class="navbar-right">
       </view>
     </view>
 
@@ -216,6 +218,10 @@ const isLoading = ref(false);
 const isLoggedIn = ref(false);
 const showBackButton = ref(true);
 
+// 状态栏高度适配
+const statusBarHeight = ref(0);
+const navBarHeight = ref(0);
+
 // 录音相关
 const isRecordingMode = ref(false);
 const isActuallyRecording = ref(false);
@@ -237,8 +243,18 @@ const currentTemplateName = computed(() => {
   return template?.templateName || '默认智能体';
 });
 
+// 获取系统状态栏高度
+const getSystemInfo = () => {
+  const systemInfo = uni.getSystemInfoSync();
+  statusBarHeight.value = systemInfo.statusBarHeight || 0;
+  // 导航栏总高度 = 状态栏高度 + 导航栏内容高度（44px）
+  navBarHeight.value = statusBarHeight.value + 44;
+  console.log('状态栏高度:', statusBarHeight.value, '导航栏总高度:', navBarHeight.value);
+};
+
 // 生命周期
 onMounted(() => {
+  getSystemInfo(); // 获取系统信息
   initPage();
   initRecorder();
 });
@@ -1015,7 +1031,6 @@ page {
   right: 0;
   bottom: 0;
   overflow: hidden;
-  padding-top: calc(100rpx + env(safe-area-inset-top));
   padding-bottom: 200rpx;
 }
 
@@ -1054,23 +1069,26 @@ page {
 .star-7 { top: 15%; left: 60%; animation-delay: 0.4s; }
 .star-8 { top: 85%; left: 55%; animation-delay: 1.8s; }
 
-/* 导航栏 */
+/* 自定义导航栏 */
 .custom-navbar {
-  height: 100rpx;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
   background: rgba(26, 11, 46, 0.95);
   backdrop-filter: blur(20rpx);
   box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.3);
   border-bottom: 1rpx solid rgba(249, 224, 118, 0.1);
+  z-index: 1000;
+}
+
+.navbar-content {
+  height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 32rpx;
-  padding-top: env(safe-area-inset-top);
+  position: relative;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 1000;
 }
 
 .navbar-left {
@@ -1161,7 +1179,7 @@ page {
 
 /* 聊天消息区域 */
 .chat-messages {
-  height: calc(100vh - 100rpx - 200rpx - env(safe-area-inset-top));
+  height: calc(100vh - 200rpx);
   padding: 24rpx;
   overflow-y: auto;
 }

src/pages/device/index.vue

@@ -13,16 +13,18 @@
     </view>
 
     <!-- 顶部自定义导航栏 -->
-    <view class="custom-navbar fixed-navbar">
+    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
-      <view class="navbar-stars">
+      <view class="navbar-content">
-        <view class="navbar-star star-left"></view>
+        <view class="navbar-stars">
-        <view class="navbar-star star-right"></view>
+          <view class="navbar-star star-left"></view>
+          <view class="navbar-star star-right"></view>
+        </view>
+        <view class="navbar-title">我的设备</view>
       </view>
-      <text class="navbar-title">我的设备</text>
     </view>
 
     <!-- 设备信息卡片 -->
-    <view class="device-card">
+    <view class="device-card" :style="{ marginTop: navBarHeight + 14 + 'px' }">
       <view class="device-header">
         <view class="device-icon" :class="{'connected': deviceConnected}">
           {{ deviceConnected ? '🌟' : '⭕' }}
@@ -116,8 +118,22 @@ const deviceSN = ref('未连接');
 const deviceId = ref('30:ed:a0:12:99:60');
 const connectTime = ref('');
 
+// 状态栏高度适配
+const statusBarHeight = ref(0);
+const navBarHeight = ref(0);
+
+// 获取系统状态栏高度
+const getSystemInfo = () => {
+  const systemInfo = uni.getSystemInfoSync();
+  statusBarHeight.value = systemInfo.statusBarHeight || 0;
+  // 导航栏总高度 = 状态栏高度 + 导航栏内容高度（44px）
+  navBarHeight.value = statusBarHeight.value + 44;
+  console.log('状态栏高度:', statusBarHeight.value, '导航栏总高度:', navBarHeight.value);
+};
+
 // 生命周期
 onMounted(() => {
+  getSystemInfo(); // 获取系统信息
   userStore.init();
   // refreshDeviceStatus(); // API已注释，不需要自动刷新
 });
@@ -313,21 +329,25 @@ const goToLogin = () => {
 .star-7 { top: 15%; left: 60%; animation-delay: 0.4s; }
 .star-8 { top: 85%; left: 55%; animation-delay: 1.8s; }
 
-/* 导航栏 */
+/* 自定义导航栏 */
 .custom-navbar {
-  position: sticky;
+  position: fixed;
   top: 0;
   left: 0;
-  right: 0;
+  width: 100%;
-  height: 88rpx;
   background: rgba(26, 11, 46, 0.95);
   backdrop-filter: blur(20rpx);
+  border-bottom: 1rpx solid rgba(249, 224, 118, 0.1);
+  z-index: 1000;
+}
+
+.navbar-content {
+  height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 30rpx;
-  z-index: 1000;
+  position: relative;
-  border-bottom: 1rpx solid rgba(249, 224, 118, 0.1);
 }
 
 .navbar-stars {
@@ -365,15 +385,16 @@ const goToLogin = () => {
 }
 
 .navbar-title {
-  font-size: 36rpx;
-  font-weight: bold;
   color: #f9e076;
+  font-weight: bold;
+  font-size: 36rpx;
   text-shadow: 0 0 20rpx rgba(249, 224, 118, 0.5);
+  z-index: 1;
 }
 
 /* 设备卡片 */
 .device-card {
-  margin: 40rpx 30rpx;
+  margin: 0 30rpx 40rpx 30rpx;
   background: linear-gradient(135deg, rgba(249, 224, 118, 0.1) 0%, rgba(249, 224, 118, 0.05) 100%);
   border-radius: 30rpx;
   padding: 40rpx;

src/pages/index/index.vue

@@ -163,7 +163,7 @@ const goToWeiAI = () => {
   const introMessage = '你好！我是蔚AI，很高兴为您服务！🌟\n\n我是您的专属AI智能助手，在这里您可以：\n\n✨ 了解我们最新的AI技术和产品\n💡 获取创意灵感和解决方案\n🎯 获得个性化的建议和指导\n🚀 探索AI在各个领域的应用\n\n无论您有什么问题或想法，我都会尽力帮助您。让我们一起开启这段精彩的AI之旅吧！\n\n有什么想了解的吗？';
   
   uni.navigateTo({
-    url: '/pages/chat/chat?characterId=wei-ai&characterName=蔚AI&characterAvatar=/static/logo.png&introMessage=' + encodeURIComponent(introMessage)
+    url: '/pages/chat/chat-box?characterId=wei-ai&characterName=蔚AI&characterAvatar=/static/logo.png&introMessage=' + encodeURIComponent(introMessage)
   });
 };
 

src/pages/mine/mine.vue

@@ -1,28 +1,34 @@
 <template>
   <view class="container">
-    <!-- 头部以上背景区域 -->
+    <!-- 夜空装饰背景 -->
-    <view class="top-background"></view>
+    <view class="night-sky-decoration">
-    
+      <view class="star star-1"></view>
+      <view class="star star-2"></view>
+      <view class="star star-3"></view>
+      <view class="star star-4"></view>
+      <view class="star star-5"></view>
+      <view class="star star-6"></view>
+      <view class="star star-7"></view>
+      <view class="star star-8"></view>
+    </view>
+
     <!-- 顶部自定义导航栏 -->
-    <view class="custom-navbar fixed-navbar">
+    <view class="custom-navbar fixed-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
-      <text class="navbar-title">我的</text>
+      <view class="navbar-content">
+        <view class="navbar-stars">
+          <view class="navbar-star star-left"></view>
+          <view class="navbar-star star-right"></view>
+        </view>
+        <text class="navbar-title">我的</text>
+      </view>
     </view>
     
     <!-- 可滚动内容区域 -->
-    <scroll-view 
+    <scroll-view
-      class="scroll-container" 
+      class="scroll-container"
-      scroll-y="true" 
+      :style="{ marginTop: navBarHeight + 'px' }"
-      enable-back-to-top="false"
+      scroll-y="true"
-      refresher-enabled="false"
-      :refresher-triggered="false"
-      :refresher-threshold="0"
       :show-scrollbar="false"
-      :scroll-with-animation="false"
-      :bounces="false"
-      :always-bounce-vertical="false"
-      :scroll-top="0"
-      :upper-threshold="0"
-      :lower-threshold="0"
     >
       <!-- 用户信息区域 -->
       <view class="user-info">
@@ -122,6 +128,10 @@ const openid = ref('');
 const avatarUrl = ref('/static/default-avatar.png');
 const userBalance = ref(0.00);
 
+// 状态栏高度适配
+const statusBarHeight = ref(0);
+const navBarHeight = ref(0);
+
 // 登录按钮文本
 const loginButtonText = computed(() => {
   return '微信一键登录';
@@ -161,8 +171,19 @@ const initUserInfo = () => {
   }
 };
 
+// 获取系统状态栏高度
+const getSystemInfo = () => {
+  const systemInfo = uni.getSystemInfoSync();
+  statusBarHeight.value = systemInfo.statusBarHeight || 0;
+  // 导航栏总高度 = 状态栏高度 + 导航栏内容高度（44px）
+  navBarHeight.value = statusBarHeight.value + 44;
+  console.log('状态栏高度:', statusBarHeight.value, '导航栏总高度:', navBarHeight.value);
+};
+
 // 页面加载时初始化
 onMounted(() => {
+  // 获取系统信息
+  getSystemInfo();
   // 初始化用户store
   userStore.init();
   // 初始化本地状态
@@ -483,92 +504,171 @@ const goToHistory = () => {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
-.fixed-navbar {
-  position: fixed;
-  top: 100rpx;
-  left: 0;
-  width: 100vw;
-  z-index: 100;
-}
 .container {
-  background: linear-gradient(135deg, #1a0b2e 0%, #4a1e6d 25%, #6b2c9c 50%, #8a2be2 75%, #4b0082 100%);
   min-height: 100vh;
-  padding-top: 200rpx;
+  background: linear-gradient(180deg, #1a0b2e 0%, #2d1b4e 50%, #1a0b2e 100%);
   padding-bottom: 120rpx;
-}
-
-/* 滚动容器样式 */
-.scroll-container {
-  height: calc(100vh - 200rpx);
-  z-index: 2;
   position: relative;
-  background: rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(5px);
   overflow: hidden;
 }
 
-/* 头部以上背景区域 */
+/* 夜空装饰 */
-.top-background {
+.night-sky-decoration {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.star {
+  position: absolute;
+  width: 6rpx;
+  height: 6rpx;
+  background: #f9e076;
+  border-radius: 50%;
+  animation: twinkle 2s infinite;
+  box-shadow: 0 0 10rpx #f9e076;
+}
+
+@keyframes twinkle {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 1; }
+}
+
+.star-1 { top: 10%; left: 15%; animation-delay: 0s; }
+.star-2 { top: 20%; left: 80%; animation-delay: 0.3s; }
+.star-3 { top: 30%; left: 45%; animation-delay: 0.6s; }
+.star-4 { top: 50%; left: 25%; animation-delay: 0.9s; }
+.star-5 { top: 60%; left: 70%; animation-delay: 1.2s; }
+.star-6 { top: 70%; left: 40%; animation-delay: 1.5s; }
+.star-7 { top: 15%; left: 60%; animation-delay: 0.4s; }
+.star-8 { top: 85%; left: 55%; animation-delay: 1.8s; }
+
+/* 自定义导航栏 */
+.custom-navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: rgba(26, 11, 46, 0.95);
+  backdrop-filter: blur(20rpx);
+  border-bottom: 1rpx solid rgba(249, 224, 118, 0.1);
+  z-index: 1000;
+}
+
+.fixed-navbar {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
-  height: 100rpx;
+  z-index: 1000;
-  background: linear-gradient(135deg, #1a0b2e 0%, #4a1e6d 25%, #6b2c9c 50%, #8a2be2 75%, #4b0082 100%);
-  z-index: 99;
 }
-.custom-navbar {
+
-  height: 100rpx;
+.navbar-content {
+  height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, rgba(26, 11, 46, 0.95) 0%, rgba(74, 30, 109, 0.95) 25%, rgba(107, 44, 156, 0.95) 50%, rgba(138, 43, 226, 0.95) 75%, rgba(75, 0, 130, 0.95) 100%);
+  padding: 0 30rpx;
-  backdrop-filter: blur(10px);
+  position: relative;
-  border-bottom: 1rpx solid rgba(251, 191, 36, 0.3);
-  font-weight: bold;
-  font-size: 38rpx;
-  letter-spacing: 2rpx;
 }
+
+.navbar-stars {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.navbar-star {
+  position: absolute;
+  width: 8rpx;
+  height: 8rpx;
+  background: #f9e076;
+  border-radius: 50%;
+  box-shadow: 0 0 15rpx #f9e076;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 0.5; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.2); }
+}
+
+.star-left {
+  top: 50%;
+  left: 30rpx;
+  transform: translateY(-50%);
+}
+
+.star-right {
+  top: 50%;
+  right: 30rpx;
+  transform: translateY(-50%);
+}
+
 .navbar-title {
-  color: #ffffff;
+  color: #f9e076;
-  text-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
+  font-weight: bold;
+  font-size: 36rpx;
+  text-shadow: 0 0 20rpx rgba(249, 224, 118, 0.5);
+  z-index: 1;
+}
+
+/* 滚动容器样式 */
+.scroll-container {
+  flex: 1;
+  min-height: 0;
+  z-index: 1;
+  position: relative;
+  box-sizing: border-box;
 }
 
 /* 用户信息区域 */
 .user-info {
   display: flex;
   align-items: center;
-  padding: 32rpx;
+  padding: 24rpx 28rpx;
-  background: rgba(255, 255, 255, 0.1);
+  margin: 20rpx 30rpx;
+  background: linear-gradient(135deg, rgba(249, 224, 118, 0.1) 0%, rgba(249, 224, 118, 0.05) 100%);
+  border: 2rpx solid rgba(249, 224, 118, 0.2);
+  border-radius: 25rpx;
+  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
   backdrop-filter: blur(10px);
 }
 
 /* 余额区域 */
 .balance-section {
-  padding: 0 24rpx 24rpx;
+  padding: 0 30rpx 20rpx;
 }
 
 .balance-card {
-  background: linear-gradient(135deg, #8a2be2 0%, #6b2c9c 100%);
+  background: linear-gradient(135deg, rgba(249, 224, 118, 0.15) 0%, rgba(249, 224, 118, 0.08) 100%);
-  border-radius: 20rpx;
+  border: 2rpx solid rgba(249, 224, 118, 0.2);
-  padding: 30rpx;
+  border-radius: 25rpx;
+  padding: 24rpx 28rpx;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  color: #fff;
+  color: #f9e076;
-  box-shadow: 0 8rpx 30rpx rgba(138, 43, 226, 0.3);
+  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(10px);
 }
 
 .balance-info .balance-label {
-  font-size: 28rpx;
+  font-size: 24rpx;
-  opacity: 0.9;
+  color: rgba(249, 224, 118, 0.8);
-  margin-bottom: 8rpx;
+  margin-bottom: 6rpx;
 }
 
 .balance-info .balance-amount {
-  font-size: 48rpx;
+  font-size: 40rpx;
   font-weight: bold;
+  color: #f9e076;
 }
 
 .balance-actions {
@@ -578,87 +678,110 @@ const goToHistory = () => {
 
 .balance-actions .recharge-btn,
 .balance-actions .history-btn {
-  background: rgba(255, 255, 255, 0.2);
+  background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
-  color: #fff;
+  color: #1a0b2e;
-  border: 1rpx solid rgba(255, 255, 255, 0.3);
+  border: none;
   border-radius: 30rpx;
-  padding: 16rpx 24rpx;
+  padding: 12rpx 20rpx;
-  font-size: 26rpx;
+  font-size: 24rpx;
-  min-width: 100rpx;
+  font-weight: bold;
+  min-width: 90rpx;
+  box-shadow: 0 8rpx 20rpx rgba(249, 224, 118, 0.3);
+  transition: all 0.3s;
 }
 
-.balance-actions .recharge-btn {
+.balance-actions .recharge-btn:active,
-  background: rgba(255, 255, 255, 0.3);
+.balance-actions .history-btn:active {
+  transform: scale(0.95);
+  box-shadow: 0 4rpx 10rpx rgba(249, 224, 118, 0.3);
 }
 .avatar {
-  width: 140rpx;
+  width: 100rpx;
-  height: 140rpx;
+  height: 100rpx;
   border-radius: 50%;
-  background-color: #e0e0e0;
+  background-color: rgba(249, 224, 118, 0.2);
+  border: 2rpx solid rgba(249, 224, 118, 0.3);
 }
 .user-details {
-  margin-left: 30rpx;
+  margin-left: 24rpx;
   display: flex;
   flex-direction: column;
 }
 .login-text {
-  font-size: 40rpx;
+  font-size: 32rpx;
   font-weight: bold;
-  margin-bottom: 10rpx;
+  margin-bottom: 8rpx;
+  color: #f9e076;
 }
 .user-id {
-  font-size: 28rpx;
+  font-size: 24rpx;
-  color: #999;
+  color: rgba(249, 224, 118, 0.6);
-  margin-bottom: 20rpx;
+  margin-bottom: 16rpx;
 }
 .login-btn {
-  margin-top: 20rpx;
+  margin-top: 12rpx;
-  background-color: #07c160;
+  background: linear-gradient(135deg, #f9e076 0%, #f5d042 100%);
-  color: #fff;
+  color: #1a0b2e;
-  font-size: 28rpx;
+  font-size: 24rpx;
-  border-radius: 40rpx;
+  font-weight: bold;
-  width: 240rpx;
+  border-radius: 30rpx;
-  height: 70rpx;
+  width: 200rpx;
-  line-height: 70rpx;
+  height: 56rpx;
+  line-height: 56rpx;
   padding: 0;
+  border: none;
+  box-shadow: 0 8rpx 20rpx rgba(249, 224, 118, 0.3);
+  transition: all 0.3s;
+}
+
+.login-btn:active {
+  transform: scale(0.95);
+  box-shadow: 0 4rpx 10rpx rgba(249, 224, 118, 0.3);
 }
 
 /* 菜单卡片 */
 .menu-cards {
-  padding: 0 24rpx;
+  padding: 0 30rpx;
 }
 .menu-card {
   display: flex;
   align-items: center;
-  padding: 40rpx 30rpx;
+  padding: 28rpx 24rpx;
-  background: rgba(255, 255, 255, 0.9);
+  background: linear-gradient(135deg, rgba(249, 224, 118, 0.1) 0%, rgba(249, 224, 118, 0.05) 100%);
-  border: 2rpx solid rgba(138, 43, 226, 0.3);
+  border: 2rpx solid rgba(249, 224, 118, 0.2);
-  border-radius: 20rpx;
+  border-radius: 25rpx;
-  margin-bottom: 24rpx;
+  margin-bottom: 20rpx;
-  box-shadow: 0 6rpx 25rpx rgba(138, 43, 226, 0.15);
+  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
-  backdrop-filter: blur(8px);
+  backdrop-filter: blur(10px);
+  transition: all 0.3s;
 }
+
+.menu-card:active {
+  transform: translateY(-4rpx);
+  box-shadow: 0 15rpx 50rpx rgba(249, 224, 118, 0.2);
+  border-color: rgba(249, 224, 118, 0.4);
+}
+
 .card-icon {
-  font-size: 48rpx;
+  font-size: 40rpx;
-  color: #8a2be2;
+  margin-right: 20rpx;
-  margin-right: 24rpx;
+  filter: drop-shadow(0 2rpx 4rpx rgba(249, 224, 118, 0.3));
-  filter: drop-shadow(0 2rpx 4rpx rgba(138, 43, 226, 0.3));
 }
 .card-title {
-  font-size: 32rpx;
+  font-size: 28rpx;
   font-weight: 500;
+  color: #f9e076;
 }
 
 /* 区块样式 */
 .section-block {
-  background: rgba(255, 255, 255, 0.9);
+  background: linear-gradient(135deg, rgba(249, 224, 118, 0.1) 0%, rgba(249, 224, 118, 0.05) 100%);
-  border: 2rpx solid rgba(138, 43, 226, 0.3);
+  border: 2rpx solid rgba(249, 224, 118, 0.2);
-  border-radius: 20rpx;
+  border-radius: 25rpx;
-  margin: 24rpx;
+  margin: 0 30rpx 20rpx;
-  padding: 30rpx;
+  padding: 24rpx 28rpx;
-  margin-bottom: 24rpx;
+  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.3);
-  box-shadow: 0 6rpx 25rpx rgba(138, 43, 226, 0.15);
+  backdrop-filter: blur(10px);
-  backdrop-filter: blur(8px);
 }
 .section-header {
   display: flex;
@@ -666,27 +789,37 @@ const goToHistory = () => {
   align-items: center;
 }
 .section-title {
-  font-size: 32rpx;
+  font-size: 28rpx;
   font-weight: bold;
+  color: #f9e076;
 }
 .view-all {
-  font-size: 28rpx;
+  font-size: 24rpx;
-  color: #999;
+  color: rgba(249, 224, 118, 0.6);
 }
 
 /* 退出登录按钮 */
 .logout-section {
-  padding: 40rpx 24rpx;
+  padding: 40rpx 30rpx;
 }
 .logout-btn {
   width: 100%;
-  background: rgba(255, 255, 255, 0.9);
+  height: 80rpx;
-  color: #8a2be2;
+  line-height: 80rpx;
+  background: linear-gradient(135deg, rgba(249, 224, 118, 0.1) 0%, rgba(249, 224, 118, 0.05) 100%);
+  color: #f9e076;
   font-size: 30rpx;
-  border: 2rpx solid rgba(138, 43, 226, 0.3);
+  font-weight: bold;
-  border-radius: 20rpx;
+  border: 2rpx solid rgba(249, 224, 118, 0.2);
-  box-shadow: 0 4rpx 15rpx rgba(138, 43, 226, 0.2);
+  border-radius: 40rpx;
-  backdrop-filter: blur(8px);
+  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(10px);
+  transition: all 0.3s;
+}
+
+.logout-btn:active {
+  transform: scale(0.95);
+  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.3);
 }
 
 /* 底部留白 */