<template> <view class="page"> <u-navbar title="余额使用明细" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37' title-size='36' height='40' id="navbar"> </u-navbar> <view class="list"> <view class="list_item" v-for="(item,index) in 20" :key="index"> <view class="time"> 2024-11-21 15:22 </view> <view class="bd"> <view class="lt"> <image src="https://api.ccttiot.com/smartmeter/img/static/uyMDOBjjEi3oXwITLrHh" mode=""></image> <view class="cx"> <view class="one"> 微信充值-某某路店 </view> <view class="two"> +200.00 </view> </view> </view> <view class="rt"> <view class=""> 1592.00 </view> <view class="" style="margin-top: 8rpx;"> 剩余金额 </view> </view> </view> </view> </view> </view> </template> <script> export default { data() { return { bgc: { backgroundColor: "#fff", }, } }, onLoad() { }, methods: { } } </script> <style lang="scss"> page { background: #fff; .list{ width: 674rpx; height: 84vh; background: #FFFFFF; box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(0,0,0,0.15); border-radius: 30rpx; margin: auto; margin-top: 40rpx; padding: 28rpx 44rpx; box-sizing: border-box; overflow: scroll; .list_item{ border-bottom: 1rpx solid #D8D8D8; padding-bottom: 34rpx; box-sizing: border-box; margin-top: 30rpx; .time{ font-size: 24rpx; color: #3D3D3D; } .bd{ display: flex; justify-content: space-between; margin-top: 22rpx; .lt{ display: flex; image{ width: 80rpx; height: 80rpx; margin-right: 30rpx; } .cx{ .one{ font-weight: 600; font-size: 28rpx; color: #3D3D3D; } .two{ font-weight: 600; font-size: 32rpx; color: #48893B; margin-top: 8rpx; } } } .rt{ font-size: 28rpx; color: #3D3D3D; } } } } } </style>