|
|
|
@ -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); |
|
|
|
|
