zhywpt-sp/subpackage/orders/order-cardQuota-apply.vue

<template>
	<nav-bar title="补卡额申请"></nav-bar>
	<view class="cardQuota">
		<view class="details">
			<view class="head">
				<view class="head-row" style="margin-bottom: 30rpx;">
					<view class="">
						流水单号：<text style="color: #333333;">MA89200010</text>
					</view>
					<view>
						交易金额
					</view>
				</view>
				<view class="head-row">
					<view class="">
						ETC卡号：<text style="color: #333333;">0110200001</text>
					</view>
					<view class="price">
						￥<text style="font-size: 36rpx;">104</text>.00
					</view>
				</view>
			</view>
			<view class="content">
				<view class="">
					<view>贵阳西</view>
					<view>12:09</view>
					<text>2023-01-08</text>
				</view>
				<view class="">
					<view>XXXXX</view>
					<view>18:52</view>
					<text>2023-01-08</text>
				</view>
				<view class="icon-left">
					<text>粤A12345</text>
					<image :src="`${$imgUrl}order/arrowCard.png`" mode=""></image>
				</view>
			</view>
		</view>

		<view class="uploadbox">
			<view class="inputbox">
				<view class="input_row">
					<text style="color: red;">*</text>补卡金额
				</view>
				<view class="line">
					<u-input v-model="value" :type="type" placeholder-style="font-size:28rpx;" />
				</view>
			</view>
			<view class="inputbox" style="margin-bottom: 30rpx;">
				<view class="input_row">
					<text style="color: red;">*</text>上传凭证 <text style="font-size: 22rpx;color: #999999">（最多上传3张）</text>
				</view>
			</view>

			<view class="uploadBtn">
				<image :src="`${$imgUrl}order/addBtn.png`" mode=""></image>
			</view>
		</view>

		<button class="submit">补卡额申请</button>
	</view>
</template>




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


<style>
	page {
		width: 100%;
		height: 100%;
	}
</style>

<style lang="scss" scoped>
	.cardQuota {
		width: 100%;
		height: 100%;
		background-color: #EEF7F7;
		padding: 30rpx;

		.details {
			height: 338rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;

			.head {
				border-bottom: 1rpx solid #DCDCDC;
				padding: 30rpx;

				.head-row {
					display: flex;
					justify-content: space-between;

					view {
						font-size: 26rpx;
						font-family: Noto Sans S Chinese;
						font-weight: 400;
						color: #999999;
					}

					.price {
						font-size: 25rpx;
						font-family: Noto Sans S Chinese;
						font-weight: 400;
						color: #333333;
					}
				}
			}

			.content {
				display: flex;
				flex: 1;
				justify-content: space-between;
				padding: 20rpx 60rpx;
				line-height: 45rpx;
				position: relative;

				view {
					text-align: center;
					font-size: 30rpx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #333333;
				}

				text {
					font-size: 24rpx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #999999;
				}

				.icon-left {
					position: absolute;
					left: 50%;
					transform: translate(-50%);
					top: 35rpx;
					 text {
						font-size: 26rpx;
						font-family: Noto Sans S Chinese;
						font-weight: 400;
						color: #666666;
					}

					image {
						width: 186rpx;
						height: 12rpx;
						display: block;
					}
				}
			}
		}

		.uploadbox {
			margin-top: 30rpx;
			height: 450rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
			border-radius: 20rpx;
			padding: 0 30rpx;
			padding-top: 70rpx;

			.uploadBtn {
				width: 161rpx;
				height: 161rpx;
				background: #F3F3F3;
				border: 1px solid #DCDCDC;
				border-radius: 6rpx;
				position: relative;
				image {
					width: 74rpx;
					height: 74rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.inputbox {
				display: flex;
				align-items: center;
				margin-bottom: 60rpx;

				.input_row {
					font-size: 28rpx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;

				}

				.line {
					text-align: center;
					border-bottom: 1rpx solid #DCDCDC;
					margin-left: 40rpx;
					width: 300rpx;

					::v-deep .u-input {
						input {
							text-align: center;
							font-size: 48rpx;
							font-family: Noto Sans S Chinese;
							font-weight: 400;
							color: #333333;
						}
					}
				}
			}
		}

		.submit {
			width: 670rpx;
			height: 80rpx;
			background: linear-gradient(-90deg, #43A1E0 0%, #13E7C1 100%);
			box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(223, 223, 223, 0.5);
			border-radius: 40rpx;
			margin-top: 60rpx;
			font-size: 32rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 80rpx;
		}
	}
</style>