xc/pages/user/xrtd.vue

<template>
	<view class="content">
		<view class="top-bg">
			<image src="../../static/img/xrtd-bg.png" mode=""></image>
		</view>
		<view class="sq-tj">
			<image src="../../static/img/xrtd-log.png" mode=""></image>
			<view class="sq-tj-tit">
				申请条件
			</view>
			<view class="sq-tj-info">
				注册为新人
			</view>
		</view>
		<view class="sq-tj" style="margin-top: 0;margin-bottom: 62rpx;">
			<image src="../../static/img/xrtd-log.png" mode=""></image>
			<view class="sq-tj-tit">
				申请说明
			</view>
			<view class="sq-tj-info">
				身份证名下六单，可提前三分钟抢购
			</view>
		</view>
		<view class="btn-list flex">
			<view class="look-btn" @click="lookJl()">
				查看申请记录
			</view>
			<view class="sub-btn">
				提交申请
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			// 查看申请记录
			lookJl() {
				this.navTo('/pages/user/sqjl')
			},
			// 提交申请
			subSq() {
				
			},
			navTo(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-bg {
		width: 750rpx;
		height: 623rpx;
		image {
			width: 750rpx;
			height: 623rpx;
		}
	}
	.sq-tj {
		position: relative;
		width: 690rpx;
		height: 190rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
		border-radius: 20rpx;
		margin: -160rpx auto 50rpx;
		image {
			width: 224rpx;
			height: 68rpx;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			margin: auto;
		}
		.sq-tj-tit {
			width: 224rpx;
			height: 68rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 68rpx;
			text-align: center;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			margin: auto;
		}
		.sq-tj-info {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #0C1732;
			line-height: 42rpx;
			padding-top: 100rpx;
			text-align: center;
		}
	}
	.btn-list {
		justify-content: space-around;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #375AFE;
		line-height: 83rpx;
		text-align: center;
		.look-btn {
			width: 294rpx;
			height: 83rpx;
			background: #FFFFFF;
			border: 2rpx solid #375AFE;
			border-radius: 10rpx;
		}
		.sub-btn {
			width: 294rpx;
			height: 83rpx;
			background: linear-gradient(0deg, rgba(60, 237, 237, 0.99), #04B8FF, #375AFE);
			border-radius: 10rpx;
			color: #fff;
		}
	}
</style>