rtdeviceApp/pages/index/agreement.vue

<template>
	<view class="content">
		<!-- 个人信息 -->
		<view class="blur-bg-2"></view>
		<view class="top-btn">
		
			<view class="back x-c" @click="$navBack()">
				<image src='/static/image/new/icon_back.svg'></image>
				返回
			</view>
			<view class="title x-c">
				<image src='/static/image/new/img_title1.svg'></image>
				<text>用户协议</text>
				<image src='/static/image/new/img_title2.svg'></image>
			</view>
			<view class="index x-c" @click="goIndex">
				<image src='/static/image/new/icon_home.svg'></image>
				首页
			</view>
		</view>
		<view class="userBox">
			<view class="userInfo y-bc">
			    <view class="desc">
					本设备提供中医体质筛查服务，检测结果仅供健康参考，不替代专业医疗诊断；用户需如实填写信息、配合检测以保证数据准确，我们将加密保护您的个人信息及检测数据，未经授权不向第三方泄露；禁止恶意破坏设备，未成年人需由监护人陪同使用；因个体差异检测结果可能存在偏差，不构成医疗建议，若因依赖本结果延误治疗，平台不承担责任；使用设备即视为同意本须知全部内容，相关条款调整将通过官方渠道告知。 本设备提供中医体质筛查服务，检测结果仅供健康参考，不替代专业医疗诊断；用户需如实填写信息、配合检测以保证数据准确，我们将加密保护您的个人信息及检测数据，未经授权不向第三方泄露；禁止恶意破坏设备，未成年人需由监护人陪同使用；因个体差异检测结果可能存在偏差，不构成医疗建议，若因依赖本结果延误治疗，平台不承担责任；使用设备即视为同意本须知全部内容，相关条款调整将通过官方渠道告知。 设计图展示专用，非法律生效版本.设计图展示专用，非法律生效版本。本设备提供中医体质筛查服务，检测结果仅供健康参考，不替代专业医疗诊断；用户需如实填写信息、配合检测以保证数据准确，我们将加密保护您的个人信息及检测数据，未经授权不向第三方泄露；禁止恶意破坏设备，未成年人需由监护人陪同使用；因个体差异检测结果可能存在偏差，不构成医疗建议，若因依赖本结果延误治疗，平台不承担责任；使用设备即视为同意本须知全部内容，相关条款调整将通过官方渠道告知。 本设备提供中医体质筛查服务，检测结果仅供健康参考，不替代专业医疗诊断；用户需如实填写信息、配合检测以保证数据准确，我们将加密保护您的个人信息及检测数据，未经授权不向第三方泄露；禁止恶意破坏设备，未成年人需由监护人陪同使用；因个体差异检测结果可能存在偏差，不构成医疗建议，若因依赖本结果延误治疗，平台不承担责任；使用设备即视为同意本须知全部内容，相关条款调整将通过官方渠道告知。
				</view>
				<view class="btn-box" @click="goIndex">我知道了</view>
			</view>
             <view class="right-br"></view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfoByUserId,
		getUserInfo
	} from '@/api/user.js';
	export default {
		data() {
			return {
				form: {
					username: '', // 姓名
					phone: '', // 手机号
					sex: 1, // 性别（1-男，0-女）
					age: '', // 年龄
					height: '', // 身高
					weight: '', // 体重
					idCard:'',
					// previousMedicalHistory: '', // 既往病史
					// habitList: [], //饮食习惯
					// historyOfAllergies: '' //过敏史
				},
				// 每个输入框的高亮状态
				highlightStatus: {
					username: false,
					phone: false,
					idCard: false,
					age: false,
					height: false,
					weight: false
				}
			}
		},
		onLoad(option) {
		},
		onShow() {
		},
		methods: {
			//首页
			goIndex(){
				uni.reLaunch({
					url: '/pages/index/index',
					animationType: 'none',
					animationDuration: 2000
				})
			},
			// 性别切换
			genderChange(sex) {
				this.form.sex = sex;
			},
			// 设置输入框高亮状态
			setHighlight(field, status) {
				this.$set(this.highlightStatus, field, status);
			},
		}
	}
</script>


<style scoped lang="scss">
	page {
		background: #fff;
		font-size: 16px
	}

	.content {
		width: 100%;
		height: 100vh;
		background: #D8F6EF;
		padding: 28px;
		display: flex;
		flex-direction: column;
		.blur-bg-2 {
		   width: 350px;
		   height: 350px;
		   background: #FFFDCC;
		   // opacity: 0.47;
		   filter: blur(200px);
		   position: absolute;
		   z-index: 1;
		   top: 60px;
		   right: calc(0px - 107px); 
		   pointer-events: none
		}
	}

	.top-btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
z-index:2;
		.back {
			width: 140px;
			height: 48px;
			background: rgba(255, 255, 255, 0.64);
			border-radius: 45px 45px 45px 45px;
			border: 2px solid #FFFFFF;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 22px;
			color: #327E6F;

			image {
				margin-right: 4px;
				width: 24px;
				height: 24px;
			}
		}

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 36px;
			color: #327E6F;
			line-height: 54px;

			text {
				margin: 0 14px;
			}

			image {

				width: 153px;
				height: 25px;
			}
		}

		.index {
			width: 140px;
			height: 48px;
			background: rgba(255, 255, 255, 0.64);
			border-radius: 55px 55px 55px 55px;
			border: 2px solid #FFFFFF;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 22px;
			color: #327E6F;

			image {
				margin-right: 4px;
				width: 24px;
				height: 24px;
			}
		}
	}

	.userBox {
		flex: 1;
		margin-top: 28px;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 24px 24px 24px 24px;
		padding: 44px 100px;
        z-index: 9;
		position: relative;
		.right-br{
			position: absolute;
			z-index: 6;
			top:44px;
			right: 30px;
			width: 10px;
			height: 131px;
			background: rgba(55,195,160,0.3);
			border-radius: 29px 29px 29px 29px;
		}
	.desc{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24px;
		color: #333333;
		line-height: 48px;
	}

		.btn-box {
			margin-top: 44px;
			// margin-bottom: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 360px;
			height: 68px;
			background: #37C3A0;
			border-radius: 121px 121px 121px 121px;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 28px;
			color: #FFFFFF;
		}
	}
</style>