hotelHomestayWx/pagesHouse/home/moneyBillDetail.vue

<template>
	<view class="page" :style="{'min-height':(h-th)+'px','padding-top':mt+'px'}">
		<c-nav-bar title="账单详情"></c-nav-bar>
		<view class="box">
			<image src="https://i.ringzle.com/file/20240224/d2b9acd9522747ac89239dcde0894c93.png"></image>
			<text class="tit">黄沙村渔家乐12客位</text>
			<text class="money">+<text>200.00</text></text>
		</view>
		<view class="info">
			<view class="li">
				<text>当前状态</text>
				<text>交易成功</text>
			</view>
			<view class="li">
				<text>创建时间</text>
				<text>2024-02-16 11:39:24</text>
			</view>
			<view class="li">
				<text>订单号</text>
				<text>20987877676667888w</text>
			</view>
			<view class="li">
				<text>交易类型</text>
				<text>结算提现</text>
			</view>
		</view>
	</view>

</template>

<script>

</script>

<style scoped lang="scss">
	.box {
		width: calc(100% - 80rpx);
		padding: 30rpx 0 60rpx;
		color: #333;
		border-bottom: 1rpx solid #EFEFEF;
		text-align: center;

		image {
			width: 80rpx;
			height: 80rpx;
		}

		text {
			display: block;

		}

		.tit {
			margin: 26rpx 0 14rpx;
			font-size: 26rpx;
		}

		.money {
			font-size: 28rpx;
			text {
				display: inline-block;
				font-weight: bold;
				font-size: 32rpx;
			}
		}
	}

	.info {
		padding: 60rpx 40rpx 0;

		.li {
			margin-bottom: 32rpx;
			text{
				&:first-child{
					display: inline-block;
					width: 104rpx;
					color: #999;
				}
				margin-right: 40rpx;
				color: #111;
			}
		}
	}
</style>