zhywpt-sp/subpackage/orders/cardAmountDetail.vue

<template>
	<!-- 补卡额申请 -->
	<view class="wrapper">
		<!-- 背景颜色充满屏 -->
		<view class="bg-color"></view>
		<view class="card-info">
			<view class="info-wrap">
				<view class="info-left">
					<view class="info-left-text">
						<text class="label">流水单号：</text>
						<text class="val">MA89200010</text>
					</view>
					<view>
						<text class="label">ETC卡号：</text>
						<text class="val">0110200001</text>
					</view>
				</view>
				<view class="info-right">
					<view class="price-label">
						交易金额
					</view>
					<view class="price-val">
						<u-icon name="rmb"></u-icon>
						<text class="price-val-text">104.00</text>
					</view>
				</view>
			</view>
			<view class="card-text-wrap">
				<view class="text-box">
					<text class="name-text">贵阳西</text>
					<text class="time-text">12:09</text>
					<text class="date-text">2023-01-08</text>
				</view>
				<view class="arrow-wrap">
					<text class="arrow-text">粤A12345</text>
					<image class="d-img" :src="`${$imgUrl}order/arrowCard.png`"></image>
				</view>
				<view class="text-box">
					<text class="name-text">XXXXX</text>
					<text class="time-text">18:52</text>
					<text class="date-text">2023-01-08</text>
				</view>
			</view>
		</view>
		<view class="labe-wrap">
			<view class="detail-box">
				<view class="detail-header">
					<text class="detail-name">售后单号：GZ92400001</text>
					<text class="d-green-text">审核中</text>
				</view>
				<view class="detail-content">
					<view class="d-row">
						<text class="d-label">业务类型：</text>
						<text class="d-value">补卡额退费</text>
					</view>
					<view class="d-row">
						<text class="d-label">补卡额：</text>
						<text class="d-value d-green">12.00</text>
					</view>
					<view class="d-row">
						<text class="d-label">创建时间：</text>
						<text class="d-value">2023-01-10 12:09:00</text>
					</view>
					<view class="d-row">
						<text class="d-label">完成时间：</text>
						<text class="d-value">2023-01-10 12:09:00</text>
					</view>
					<view class="d-row">
						<text class="d-label">不通过原因：</text>
						<text class="d-value">XXXXXXXXXXXXXXXXXXXX</text>
					</view>
					<view class="d-row">
						<text class="d-label">业务员：</text>
						<text class="d-value">XXXXXXXX</text>
					</view>
					<view class="d-row">
						<!-- 上传凭证图的列表 -->
						<image :src="`${$imgUrl}order/icon-star-green.png`" mode="" class="img-item"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts"></script>

<style lang="scss" scoped>
	.bg-color {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #EEF7F7;
		z-index: -1;
	}
	.wrapper {
		padding-bottom: 20rpx;
	}
	.card-info {
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
		border-radius: 20rpx;
		margin: 30rpx;
		.info-wrap {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30px;
			border-bottom: 1px solid #dcdcdc;

			.info-left-text {
				margin-bottom: 39rpx;
			}

			.label {
				color: #999999;
				font-size: 26rpx;
				font-weight: 400;
			}

			.val {
				color: #333333;
				font-size: 26rpx;
				font-weight: 400;
			}

			.price-label {
				color: #999999;
				font-size: 24rpx;
				font-weight: 400;
				margin-bottom: 22rpx;
				text-align: center;
			}

			.price-val-text {
				font-size: 36rpx;
				font-weight: 700;
				color: #333333;
				margin-left: 9rpx;
			}

			.price-val {
				font-size: 26rpx;
				color: #333333;
			}

		}

		.card-text-wrap {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 39rpx 60rpx;

			.text-box {
				display: flex;
				flex-direction: column;
				align-items: center;

				.name-text {
					font-size: 30rpx;
					font-weight: 400;
					color: #333333;
				}

				.time-text {
					font-size: 30rpx;
					color: #333333;
					font-weight: 400;
					margin-top: 8rpx;
				}

				.date-text {
					font-size: 24rpx;
					color: #999999;
					font-weight: 400;
					margin-top: 8rpx;
				}
			}

			.arrow-wrap {
				display: flex;
				flex-direction: column;
				align-items: center;

				.d-img {
					width: 186rpx;
					height: 12rpx;
				}

				.arrow-text {
					color: #666666;
					font-size: 26rpx;
				}
			}
		}
	}

	.labe-wrap {
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
		border-radius: 20rpx;
		margin: 30rpx 30rpx 0 30rpx;
		.detail-header {
			display: flex;
			border-bottom: 1rpx solid #DCDCDC;
			padding: 30rpx;
			align-items: center;
			justify-content: space-between;
			.detail-name {
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				margin-left: 12rpx;
			}
			.d-green-text {
				height: 26rpx;
				color: #00B38B;
			}
		}
		.detail-content {
			padding: 28rpx 29rpx 10rpx 29rpx;
		}
		.d-row {
			display: flex;
			margin-bottom: 32rpx;
			.d-label {
				font-size: 26rpx;
				width: 155rpx;
				color: #999999;
				text-align: right;
			}
		
			.d-value {
				font-size: 26rpx;
				color: #333333;
				flex: 1;
				overflow: hidden;
			}
			.d-green {
				color:#00B38B;
			}
			.img-item {
				width: 161rpx;
				height: 161rpx;
			}
		}
	}


</style>