jp-housekeep-electric/pages/businessHall/deductionRecord/deductionDetails.vue

<template>
	<view>
		<u-navbar title="扣费详情"  title-color="#101010" ></u-navbar>
		<view class="background">
			<view class="recharge-details">
				<view class="headline">
					<text>
						<image class="img" src="@/assets/img/Copy PEokWS2 Copy 1@1x.png" mode=""></image>
					</text>1月1日电费
				</view>
				<view class="sum">
					80.00
				</view>
				<view class="state">
					已扣费
				</view>
				<view class="details">
					<view class="item">
						<view class="item-title">
							租户信息
						</view>
						<view class="item-value">
							3~6楼联通公司
						</view>
					</view>
					<view class="item">
						<view class="item-title">
							户号
						</view>
						<view class="item-value">
								00880088
						</view>
					</view>
					<view class="item">
						<view class="item-title">
							收费标准
						</view>
						<view class="item-value">
							1.3元/度
						</view>
					</view>
					<view class="item">
						<view class="item-title">
							度数
						</view>
						<view class="item-value">
							2314度
						</view>
					</view>
				</view>
				
				<view class="details">
					<view class="item">
						<view class="item-title">
							付款方式
						</view>
						<view class="item-value">
							微信支付
						</view>
					</view>
					<view class="item">
						<view class="item-title">
							订单号
						</view>
						<view class="item-value">
					30816112557708460925
						</view>
					</view>
					<view class="item">
						<view class="item-title">
							创建时间
						</view>
						<view class="item-value">
							2023-08-20 10:29:00
						</view>
					</view>
					<view class="item">
						<view class="item-title">
							支付时间
						</view>
						<view class="item-value">
							2023-08-20 10:29:00
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 返回 -->
		<button class="back">返回</button>
	</view> 
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.background{
		position: relative;
		height: 200px;
		background: linear-gradient(180deg, rgba(203,234,255,1) 0%,rgba(203,234,255,0) 100%);
		.recharge-details{
			position: absolute;
			top: 24rpx;
			left: 32rpx;
			right: 32rpx;
			background-color: #fff;
			border-radius: 8px;
			padding: 40rpx 32rpx ;
			text-align: center;
			.headline{
				color: rgb(16,16,16);
				font-size: 36rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.img{
					width: 48rpx;
					height: 48rpx;
					vertical-align: middle;
				}
				
			}
			.sum{
				color: rgb(16,16,16);
				font-size: 48rpx;
				margin-top: 32rpx;

			}
			.state{
				color: rgb(56,158,13);
				margin-top: 8rpx;
			}
			.details{
				margin-top: 40rpx;
				padding-top: 40rpx;
				border-top: 1px solid rgba(241,241,241,1);
				.item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom:16rpx;
					.item-title{
						color: rgb(119,119,119);
					}
					.item-value{
						color: rgb(48,48,48);
					}
				}
			}
		}
	}
 // 返回
 .back{
	 border: 1px solid rgba(205,205,205,1);
	 
	 line-height: 88rpx;
	 background-color: rgba(255,255,255,1);
	 color: rgba(119,119,119,1);
	 font-size: 32rpx;
	 position: absolute;
	 top: 970rpx;
	 left: 32rpx;
	 right: 32rpx;
 }
</style>