1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
| <script setup>
| import { ref } from 'vue'
| //返回
| function navBackTo(){
| uni.navigateBack()
| }
| const banlanceList = ref([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15])
| </script>
| <template>
| <view class="container">
| <navbar @navBackTo="navBackTo()" title="余额记录"></navbar>
| <view class="date">
| <view>
| <text>2024年09月</text>
| </view>
| <view>
| <text>支出￥5341.05</text>
| <text>充值￥941.59</text>
| </view>
| </view>
| <view class="main">
| <block v-for="(item,index) in banlanceList">
| <view class="item">
| <view class="item-left">
| <text>缴费</text>
| <text class="methods">支付方式：微信</text>
| <text>2024年09月20日 18:25</text>
| </view>
| <view class="item-right">
| <text>-￥125.00</text>
| <text>2000.00</text>
| </view>
| </view>
| </block>
| </view>
| </view>
| </template>
|
| <style lang="scss">
| .container{
| width: 100%;
| height: 100vh;
| background:linear-gradient(to top,#FFFFFF,#E8EFFF);
| .date{
| height: 84rpx;
| width:100%;
| display: flex;
| padding: 0 36rpx;
| box-sizing: border-box;
| justify-content:space-between;
| align-items: center;
| view:first-child{
| font-weight: 300;
| font-size: 32rpx;
| color: #000000;
| }
| view:last-child{
| font-weight: 300;
| font-size: 24rpx;
| color: #7E7E7E;
| text:first-child{
| margin-right:30rpx;
| }
| }
| }
| .main{
| width:99%;
| height: calc(100vh - 84rpx - 176rpx - 70rpx);
| background: #fff;
| border-radius:20rpx;
| margin: 0 auto;
| padding:28rpx 48rpx;
| box-sizing: border-box;
| overflow-y: scroll;
| // background: #7E7E7E;
| .item{
| width:100%;
| height:184rpx;
| // background:rgba(170, 216, 255, 0.2);
| border-bottom:1rpx solid #D8D8D8;
| box-sizing:border-box;
| padding-bottom:38rpx;
| justify-content:space-between;
| align-items: flex-end;
| display: flex;
| .item-left{
| height:100%;
| display:flex;
| flex-direction:column;
| justify-content:space-between;
| align-items: flex-start;
| text:first-child{
| font-weight: 300;
| font-size: 32rpx;
| color: #000000;
| }
| .methods{
| font-weight: 300;
| font-size: 32rpx;
| color: #474646;
| }
| text:last-child{
| font-weight: 300;
| font-size: 24rpx;
| color: #A7A7A7;
| }
| }
| .item-right{
| height:100%;
| display:flex;
| flex-direction:column;
| justify-content:flex-end;
| align-items: flex-end;
| text:first-child{
| font-weight: 300;
| font-size: 32rpx;
| color: #000000;
| }
| text:last-child{
| font-weight: 300;
| font-size: 24rpx;
| color: #A7A7A7;
| }
| }
| }
| }
| }
| </style>
|
|
