txCar/pages/refundMoney/refundMoney.vue

<template>
	<view class="page flex-col">
		<view class="mod1 flex-col">
			<view class="outer1 flex-col">
				<view class="layer1 flex-row">
					<view class="layer2 flex-col"></view>
					<view class="layer3 flex-col"></view>
					<text class="txt1">1:20&nbsp;PM</text>
					<view class="layer4 flex-col"></view>
					<text class="info1">77%</text>
					<view class="layer5 flex-col"></view>
				</view>
				<view class="layer6 flex-row">
					<view class="section1 flex-col"></view>
					<text class="info2">申请退款</text>
					<view class="section2 flex-col"></view>
				</view>
			</view>
			<view class="outer2 flex-col">
				<view class="section3 flex-col">
					<view class="outer3 flex-row">
						<view class="wrap1">
							<text class="word1">*</text>
							<text class="word2">退款原因</text>
						</view>
						<text class="word3">请选择</text>
						<view class="wrap2 flex-col"></view>
					</view>
					<view class="outer4 flex-col"></view>
					<view class="outer5 flex-row">
						<view class="group1">
							<text class="info3">*</text>
							<text class="txt2">退款金额</text>
						</view>
						<text class="txt3">最多可退&nbsp;¥978.80</text>
					</view>
					<text class="info4">如全额退款，优惠券会退回到您的账户</text>
					<view class="outer6 flex-col"></view>
					<view class="outer7 flex-row">
						<text class="word4">补充描述</text>
						<text class="txt4">选填，请输入补充描述~</text>
					</view>
				</view>
			</view>
			<view class="outer8 flex-col">
				<button class="box1 flex-col" @click="onClick_1">
					<text class="word5">提交</text>
				</button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				constants: {}
			};
		},
		methods: {
			onClick_1() {
				alert(1);
			}
		}
	};
</script>
<style>
	

	.page {
		z-index: 1;
		position: relative;
		width: 750px;
		height: 1334px;
		background-color: rgba(244, 245, 247, 1);
		overflow: hidden;
	}

	.mod1 {
		z-index: auto;
		width: 750px;
		height: 1334px;
	}

	.outer1 {
		z-index: 9;
		height: 128px;
		background-color: rgba(255, 255, 255, 1);
		width: 750px;
	}

	.layer1 {
		z-index: auto;
		width: 729px;
		height: 29px;
		margin: 8px 0 0 13px;
	}

	.layer2 {
		z-index: 25;
		width: 68px;
		height: 12px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng452ce3ab103ee8dfb2f30acdb3456b4ef84746428cf073291168a9e4d8d6a793) 0px -1px no-repeat;
		margin-top: 9px;
	}

	.layer3 {
		z-index: 35;
		width: 24px;
		height: 19px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf764088946be219f0e1e20ecb17f9d76a5752d81662e8f0bbd6f42156a4b2e8e) 100% no-repeat;
		margin: 5px 0 0 8px;
	}

	.txt1 {
		z-index: 39;
		width: 90px;
		display: block;
		overflow-wrap: break-word;
		color: rgba(7, 7, 7, 1);
		font-size: 24px;
		letter-spacing: -0.00042765619582496583px;
		white-space: nowrap;
		line-height: 24px;
		text-align: right;
		margin-left: 217px;
	}

	.layer4 {
		z-index: 47;
		width: 17px;
		height: 28px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng4abf04e6cd04acf8ccbb73524bb6a84abab5a57dc750e108da46635b9c571d86) 100% no-repeat;
		margin: 1px 0 0 189px;
	}

	.info1 {
		z-index: 51;
		width: 50px;
		display: block;
		overflow-wrap: break-word;
		color: rgba(7, 7, 7, 1);
		font-size: 24px;
		letter-spacing: -0.00042765619582496583px;
		white-space: nowrap;
		line-height: 24px;
		text-align: right;
		margin-left: 12px;
	}

	.layer5 {
		z-index: 40;
		width: 50px;
		height: 20px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngd98302c6d0c38d4aaec7f692e3cb2f5eb025d9cb76975ad7055bc28f99c6973e) 0px -1px no-repeat;
		margin: 5px 0 0 4px;
	}

	.layer6 {
		z-index: auto;
		width: 713px;
		height: 58px;
		margin: 20px 0 0 24px;
	}

	.section1 {
		z-index: 10;
		width: 22px;
		height: 40px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng01778e16fd11b94344cd231c28721a04e2d9ce4b2957421c6e59f879a48c2b20) -1px 0px no-repeat;
		margin-top: 9px;
	}

	.info2 {
		z-index: 12;
		width: 147px;
		height: 50px;
		display: block;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 36px;
		letter-spacing: 0.5799999833106995px;
		font-family: PingFangSC-Medium;
		white-space: nowrap;
		line-height: 50px;
		text-align: center;
		margin: 4px 0 0 256px;
	}

	.section2 {
		z-index: 13;
		width: 157px;
		height: 58px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngf8e59685a588a58b7c62a13e209a524a3aa770a898077d5fad993f74b2ac0178) -1px -1px no-repeat;
		margin-left: 131px;
	}

	.outer2 {
		z-index: 52;
		height: 315px;
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 1);
		align-self: center;
		margin-top: 20px;
		width: 702px;
		justify-content: center;
		align-items: center;
	}

	.section3 {
		z-index: auto;
		width: 663px;
		height: 255px;
	}

	.outer3 {
		z-index: auto;
		width: 662px;
		height: 40px;
	}

	.wrap1 {
		z-index: 60;
		width: 129px;
		height: 40px;
		overflow-wrap: break-word;
		text-align: left;
		white-space: nowrap;
		font-size: 0;
	}

	.word1 {
		font-size: 28px;
		color: rgba(255, 36, 0, 1);
		line-height: 40px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.word2 {
		font-size: 28px;
		color: rgba(51, 51, 51, 1);
		line-height: 40px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.word3 {
		z-index: 61;
		width: 86px;
		height: 40px;
		display: block;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 28px;
		letter-spacing: 0.4511111080646515px;
		white-space: nowrap;
		line-height: 40px;
		text-align: left;
		margin-left: 48px;
	}

	.wrap2 {
		z-index: 57;
		width: 14px;
		height: 24px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng49474bcaa6e359b706e1b1c97bab4cbfa7286bcbf1f19cefba6df3f1e5267f1e) -1px 0px no-repeat;
		margin: 8px 0 0 385px;
	}

	.outer4 {
		z-index: 62;
		width: 663px;
		height: 1px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc5f00242238dd5d5fd7ec0841a64364334c0942567ae8990dae6583e879df9da) 100% no-repeat;
		margin-top: 23px;
	}

	.outer5 {
		z-index: auto;
		width: 411px;
		height: 40px;
		margin-top: 24px;
		justify-content: space-between;
	}

	.group1 {
		z-index: 63;
		width: 129px;
		height: 40px;
		overflow-wrap: break-word;
		text-align: left;
		white-space: nowrap;
		font-size: 0;
	}

	.info3 {
		font-size: 28px;
		color: rgba(255, 36, 0, 1);
		line-height: 40px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.txt2 {
		font-size: 28px;
		color: rgba(51, 51, 51, 1);
		line-height: 40px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.txt3 {
		z-index: 64;
		width: 234px;
		height: 40px;
		display: block;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 28px;
		letter-spacing: 0.4511111080646515px;
		white-space: nowrap;
		line-height: 40px;
		text-align: left;
	}

	.info4 {
		z-index: 65;
		width: 381px;
		height: 30px;
		display: block;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 22px;
		letter-spacing: 0.3544444441795349px;
		white-space: nowrap;
		line-height: 30px;
		text-align: left;
		align-self: flex-start;
		margin-top: 10px;
	}

	.outer6 {
		z-index: 66;
		width: 663px;
		height: 1px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc5f00242238dd5d5fd7ec0841a64364334c0942567ae8990dae6583e879df9da) 100% no-repeat;
		margin-top: 23px;
	}

	.outer7 {
		z-index: auto;
		width: 476px;
		height: 40px;
		margin-top: 23px;
		justify-content: space-between;
	}

	.word4 {
		z-index: 54;
		width: 114px;
		height: 40px;
		display: block;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28px;
		letter-spacing: 0.4511111080646515px;
		white-space: nowrap;
		line-height: 40px;
		text-align: left;
	}

	.txt4 {
		z-index: 55;
		width: 299px;
		height: 40px;
		display: block;
		overflow-wrap: break-word;
		color: rgba(153, 153, 153, 1);
		font-size: 28px;
		letter-spacing: 0.4511111080646515px;
		white-space: nowrap;
		line-height: 40px;
		text-align: left;
	}

	.outer8 {
		z-index: 3;
		height: 120px;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0px -2px 20px 0px rgba(153, 153, 153, 0.2);
		margin-top: 751px;
		width: 750px;
		justify-content: center;
		align-items: center;
	}

	.box1 {
		z-index: 5;
		height: 74px;
		border-radius: 37px;
		background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng297690d0623a896815dc437b47e69e43b43fa10e8fadc8b02a4bf5245c86c9f8) 100% no-repeat;
		width: 690px;
		justify-content: center;
		align-items: center;
	}

	.word5 {
		z-index: 6;
		width: 60px;
		height: 42px;
		display: block;
		overflow-wrap: break-word;
		color: rgba(255, 255, 255, 1);
		font-size: 30px;
		font-family: PingFangSC-Medium;
		white-space: nowrap;
		line-height: 42px;
		text-align: center;
	}
</style>