’新增钱包流水轮播图‘

pages/subcomponent/wallet.vue

@@ -1,15 +1,18 @@
 <template>
     <view class="container">
         <!-- 顶部导航栏 -->
-        <view class="nav-bar" :style="{ height: (statusBarHeight + 88) + 'rpx', paddingTop: statusBarHeight + 'px' }">
+        <view class="nav-bar" :style="{paddingTop: statusBarHeight + 'px'}">
             <view class="back" @tap="goBack">
-                <uni-icons type="left" size="25" color="#fff"></uni-icons>
+                <uni-icons type="left" size="20" color="#fff"></uni-icons>
+            </view>
+            <text class="nav-title">钱包流水</text>
+            <view class="nav-icons">
+                <!-- 占位元素，保持布局对称 -->
             </view>
-            <text class="title">钱包流水</text>
         </view>
         <!-- banner -->
         <view class="banner"
-            :style="{ marginTop: (statusBarHeight + 88) + 'rpx', height: (bannerBaseHeight + statusBarHeight + 88) + 'rpx' }">
+            :style="{ marginTop: 'calc(150rpx)', height: (bannerBaseHeight + statusBarHeight + 88) + 'rpx' }">
             <swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500" circular
                 style="width: 100%; height: 100%;">
                 <swiper-item v-for="(item, index) in bannerList" :key="item.id || index">
@@ -368,12 +371,16 @@ export default {
 .nav-bar {
     display: flex;
     align-items: center;
+    height: calc(150rpx + var(--status-bar-height));
+    padding: 0 32rpx;
     background: linear-gradient(to right, #f68240 0%, #fc8940 10%);
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 999;
+    box-sizing: border-box;
+    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
 }
 
 .back {
@@ -381,14 +388,20 @@ export default {
     margin-left: -20rpx;
 }
 
-.title {
+.nav-title {
     flex: 1;
     text-align: center;
-    font-size: 34rpx;
+    font-size: 32rpx;
     font-weight: 500;
     color: #fff;
 }
 
+.nav-icons {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
 .banner {
     position: relative;
     background: linear-gradient(to right, #f78b49, #fc8940);