hotelHomestayWx/pagesHouse/home/moneyBill.vue

<template>
	<view class="page" :style="{'min-height':(h-th)+'px','padding-top':mt+'px'}">
		<c-nav-bar title="资金账单"></c-nav-bar>
		<view class="time">
			<view>
				<text>2024-02月</text>
				<u-icon name="arrow-down" color="#999" size="25px"></u-icon>
			</view>
			<text>提现¥1000.00</text>
		</view>
		<view class="list">
			<view class="li" v-for="(item,index) in data" :key="index" @click="detail()">
				<view class="left">
					<text>黄沙村渔家乐12客位</text>
					<text>2024-02-23 09:12:34</text>
				</view>
				<view class="right">+12</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight - 87,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				data: [4, 5],
			}
		},
		methods:{
			detail(){
				uni.navigateTo({
					url:"/pagesHouse/home/moneyBillDetail"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.time {
		display: flex;
		justify-content: space-between;
		padding: 24rpx;
		background-color: #F5F8FA;
		&>view {
			display: flex;
			align-items: center;
			text {
				font-size: 30rpx;
				color: #111;
				margin-right: 10rpx;
			}
		}

		&>text {
			font-size: 26rpx;
			color: #999;
		}
	}
	.list{
		padding: 0 24rpx;
		.li {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 0;
			border-bottom: 1rpx solid #EFEFEF;
		
			.left {
				text {
					&:first-child {
						font-size: 28rpx;
						color: #111;
						margin-bottom: 15rpx;
					}
		
					display: block;
					color: #999;
					font-size: 26rpx;
				}
			}
		
			.right {
				color: #111111;
				font-size: 36rpx;
				font-weight: bold;
			}
		}
	}
</style>