zhywpt-sp/subpackage/orders/refund-confirm.vue

<template>
	<nav-bar title="支付确认"></nav-bar>
	<view class="oderPage">
		<view class="details">
			<view class="header">
				<image :src="`${$imgUrl}user/icon-ETC.png`" class="icon"></image>
				<text>GZ92400001</text>
			</view>
			<view class="row">
				<view class="">
					补缴金额
				</view>
				<text>
					<text class="icon">￥</text>
					99.00
				</text>
			</view>
			<view class="footer">
				<view class="">
					卡账金额：
				</view>
				<text>38.00</text>
			</view>
		</view>
		
		<button class="submit">去支付</button>
	</view>

</template>

<script setup lang="ts">
	import {
		ref,
		reactive
	} from "vue";

	const reason = ref('')


	// 单选
	const radioChange = (n) => {
		console.log('radioChange', n);
	}
</script>


<style>
	page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #F3F3F3;
	}
</style>
<style lang="scss" scoped>
	.oderPage {
		flex: 1;
		width: 100%;
		background-color: #EEF7F7;
		padding: 20rpx;

		.details {
			width: 100%;
			height: 405rpx;
			border-radius: 20rpx;
			padding: 30rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
			border-radius: 20rpx;

			.header {
				align-items: center;
				display: flex;
				padding-bottom: 30rpx;
				border-bottom: 1px solid #DCDCDC;

				image {
					width: 50rpx;
					height: 45rpx;
				}

				text {
					font-size: 30rpx;
					margin-left: 20rpx;
					font-weight: 600;
				}
			}

			.row {
				display: flex;
				align-items: center;
				flex-direction: column;
				height: 220rpx;
				justify-content: space-evenly;

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

				text {
					font-size: 60rpx;
					font-family: Noto Sans S Chinese;
					font-weight: 400;
					color: #333333;
					line-height: 30rpx;

					.icon {
						font-size: 27rpx;
						font-family: Noto Sans S Chinese;
						font-weight: 400;
						color:black;
						line-height: 30rpx;
					}
				}
			}

			.footer {
				display: flex;
				margin: 20rpx 0;
				font-size: 26rpx;
				font-family: Noto Sans S Chinese;
				font-weight: 400;
				color: #333333;
				line-height: 30rpx;

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

				}

			}
		}
		.submit{
			margin-top: 60rpx;
			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;
			font-size: 32rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 80rpx;
		}
	}
</style>