<template>
	<view class="page">
		<view class="topbar">
			<text class="back" @click="goBack">返回</text>
			<text class="title">用户协议与隐私政策</text>
			<text class="ghost"> </text>
		</view>

		<scroll-view class="content" scroll-y="true" show-scrollbar="false">
			<view class="card">
				<text class="h1">用户协议</text>
				<text class="p">1. 本应用为商城系统示例/项目使用。
				</text>
				<text class="p">2. 你在使用本应用服务时，应遵守法律法规与平台规则。
				</text>
				<text class="p">3. 账号与密码由你自行保管，因泄露造成的损失由你自行承担。
				</text>

				<view class="divider"></view>

				<text class="h1">隐私政策</text>
				<text class="p">1. 我们可能会收集你提供的邮箱等信息，用于账号注册与登录。
				</text>
				<text class="p">2. 我们会采取合理的安全措施保护你的信息安全。
				</text>
				<text class="p">3. 你可以在账号相关页面申请修改或删除个人信息（以实际功能为准）。
				</text>
			</view>

			<view class="footer">
				<button class="primary" @click="goBack">我已阅读并同意</button>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="uts">
	export default {
		methods: {
			goBack() {
				uni.navigateBack();
			}
		}
	};
</script>

<style>
	.page {
		flex: 1;
		background: #f7f8fa;
		display: flex;
		flex-direction: column;
	}

	.topbar {
		height: 96rpx;
		padding: 0 24rpx;
		background: rgba(255, 255, 255, 0.96);
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.back {
		font-size: 26rpx;
		color: #ff4d4f;
		width: 120rpx;
	}

	.title {
		font-size: 30rpx;
		font-weight: 700;
		color: #111;
	}

	.ghost {
		width: 120rpx;
	}

	.content {
		flex: 1;
		padding: 18rpx 24rpx 24rpx;
		box-sizing: border-box;
	}

	.card {
		background: rgba(255, 255, 255, 0.96);
		border: 1rpx solid rgba(0, 0, 0, 0.06);
		border-radius: 20rpx;
		padding: 24rpx 22rpx;
		box-shadow: 0 16rpx 36rpx rgba(0, 0, 0, 0.06);
	}

	.h1 {
		font-size: 32rpx;
		font-weight: 700;
		color: #111;
		margin-bottom: 12rpx;
	}

	.p {
		font-size: 26rpx;
		color: rgba(0, 0, 0, 0.65);
		line-height: 44rpx;
		margin-bottom: 12rpx;
	}

	.divider {
		height: 1rpx;
		background: rgba(0, 0, 0, 0.08);
		margin: 18rpx 0;
	}

	.footer {
		margin-top: 18rpx;
	}

	.primary {
		width: 100%;
		height: 92rpx;
		border-radius: 18rpx;
		background: linear-gradient(135deg, #ff4d4f 0%, #ff7a45 100%);
		color: #fff;
		font-size: 30rpx;
		font-weight: 700;
		box-shadow: 0 16rpx 32rpx rgba(255, 77, 79, 0.24);
	}
</style>
