zhywpt-sp/subpackage/orders/signUserAgreement.vue

<template>
	<view class="wrapper">
		<view class="content-wrap">
			<view class="content">
				<view class="title">XX协议</view>
				<view class="content-box">
					请您在使用本产品之前，请务必仔细阅读并理解《用户许可使用协议》（以下简称“本协议”）中规定的多有权利和限制。我们一向尊重并会严格保护用户在使用本产品时的合
					xxxxxxxxxxxxxxxxxxxxxxxxxx省略
				</view>
			</view>
			<view class="sign-wrap">
				<text class="sign-wrap-text">签名区域</text>
				<Sign />
			</view>
			<view class="btn-wrap">
				<view class="btn-box"><text class="btn-text">拒绝</text></view>
				<view class="btn-green"><text class="btn-text-1">同意</text></view>
			</view>
		</view>
		
	</view>
</template>

<script setup lang="ts">
	import Sign from "./sign.vue"
</script>
<style lang="scss" scoped>
	.wrapper {
		padding-bottom: 20rpx;
	}

	.content {
		margin: 90rpx 60rpx;

		.title {
			font-size: 36rpx;
			font-weight: 700;
			color: #333333;
			text-align: center;
		}

		.content-box {
			color: #666666;
			font-size: 30rpx;
			text-indent: 2rpx;
		}
	}

	.sign-wrap {
		margin: 0 60rpx;
		padding: 30rpx;
		width: 634rpx;
		background: #FFFFFF;
		border: 1px solid #DCDCDC;
		.sign-wrap-text {
			font-size: 30rpx;
			color: #666666;
		}
	}

	.btn-wrap {
		display: flex;
		margin-top: 150rpx;
		justify-content: center;
		.btn-box {
			width: 313rpx;
			height: 83rpx;
			background: #FFFFFF;
			border: 3px solid #DCDCDC;
			box-shadow: 0rpx 4rpx 11rpx 1rpx rgba(223, 223, 223, 0.5);
			border-radius: 40rpx;
			margin-right: 48rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.btn-text {
				font-size: 32rpx;
				font-weight: 400;
				color: #666666;
			}
		}

		.btn-green {
			width: 310rpx;
			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;
			display: flex;
			justify-content: center;
			align-items: center;

			.btn-text-1 {
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>