jp-housekeep-manage/pages/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/wImage@1x.png" mode=""></image> -->
						<!-- <image class="img"
							
							src="@/assets/img/wImage.png" mode=""></image> -->
						<!-- <image class="img" 
							src="@/assets/img/wImage3.png" mode=""></image> -->
						<!-- <image class="img" 
							src="@/assets/img/wImage4.png" mode=""></image> -->

						<image class="img" src="@/assets/img/Copy PEokWS2 Copy 1@1x.png" mode=""></image>

					</text>1月1日电费
				</view>
				<view class="sum">
					211
					<span>元</span>
				</view>
				<view class="state">
					已扣费
				</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">
							00880088
							
							
						</view>
					</view>
					<view class="item">
						<view class="item-title">
							收费标准
						</view>
						<view class="item-value">
							<template>

							</template>
							<template>
								1.3元/度
							</template>
						</view>
					</view>
					

				<view class="table-box">
					<table class="table1">
						<tr class="tr1">
							<td class="td1"></td>
							<td class="td2">起止码</td>
							<td class="td3">度数</td>
						</tr>
						<tr>
							<td class="td1">五楼总表</td>
							<td class="td2">
								100-161.53
							</td>
							<td class="td3">161.53度</td>
						</tr>
						
						<tr >
							<td class="td1">二级表a</td>
							<td class="td2">
								0-60
							</td>
							<td class="td3">60度</td>
						</tr>
						
				
						<tr style="font-weight: bold;" >
							<td class="td1" colspan="2">扣除后用电量</td>
				
							<td>11.53度</td>
						</tr>
					</table>
				</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 {

		background: linear-gradient(180deg, rgba(203, 234, 255, 1) 0%, rgba(203, 234, 255, 0) 100%);
		padding: 24rpx 32rpx;

		.recharge-details {

			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;

				span {
					font-size: 28rpx;
				}


			}

			.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);
					}
				}
			}
		}
	}


.table-box {
		padding: 24rpx 32rpx;
	}

	.table1 {

		padding-bottom: 20rpx;
		width: 100%;
		border-collapse: collapse;

		td {
			border: 1px solid #e7e7e7;
			text-align: end;
			padding: 2px 8px;
			height: 60rpx;

		}

		.td1 {
			text-align: start;
			width: 264rpx;
		}

		.td2 {
			width: 260rpx;
		}

		.td3 {
			width: 180rpx;
			white-space: pre;
		}

		tr {
			background-color: #f5f5f6
		}

		.tr1 {
			text-align: end;
			font-weight: bold;
		}

		tr:nth-child(even) {
			background-color: #fff;
		}
	}


	// 返回
	.back {
		border: 1px solid rgba(205, 205, 205, 1);
		border-radius: 8px;
		line-height: 88rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(119, 119, 119, 1);
		font-size: 32rpx;
		margin: 0 32rpx;

	}
</style>