<template>
	<view class="agreement-page">
		<!-- 1. 自定义导航栏：解决蓝线 -->
		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-content">
				<view class="back-area" @click="goBack">
					<text class="back-arrow"></text>
				</view>
				<view class="nav-title">用户协议</view>
				<view class="right-placeholder"></view>
			</view>
		</view>

		<scroll-view scroll-y class="content-scroll" :style="{ height: scrollHeight }">
			<view class="article-body">
				<view class="title">ERP 系统用户服务协议</view>
				<view class="update-time">最近更新日期：2024年04月28日</view>
				<rich-text :nodes="agreementNodes"></rich-text>
				<view class="footer-tip">本协议由广东粤铝材实业有限公司负责解释。</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 20,
				agreementNodes: `
					<div style="line-height: 1.8; color: #444; font-size: 14px;">
						<h3 style="color: #000; margin-top: 20px;">1. 账户注册与安全</h3>
						<p>您必须使用真实手机号进行授权登录。您应对账号下的所有活动负责，严禁将账号转借或转让他人使用。</p>
						<h3 style="color: #000; margin-top: 20px;">2. 订购规范</h3>
						<p>用户在提交订单前应核实型号、规格及数量。订单一旦系统确认进入生产环节，不可随意撤回。</p>
						<h3 style="color: #000; margin-top: 20px;">3. 知识产权</h3>
						<p>本平台所有技术文档、图纸及界面设计均受法律保护，未经许可不得擅自抓取或仿造。</p>
					</div>
				`
			}
		},
		computed: {
			scrollHeight() {
				return `calc(100vh - ${this.statusBarHeight + 44}px)`;
			}
		},
		onLoad() {
			const info = uni.getSystemInfoSync();
			this.statusBarHeight = info.statusBarHeight;
		},
		methods: {
			goBack() { uni.navigateBack(); }
		}
	}
</script>

<style scoped>
	.agreement-page { width: 100vw; height: 100vh; background: #ffffff; display: flex; flex-direction: column; }
	
	/* 自定义导航栏样式 */
	.custom-navbar { background: #fff; flex-shrink: 0; }
	.nav-content { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 30rpx; }
	.back-area { width: 60rpx; height: 44px; display: flex; align-items: center; }
	.back-arrow { width: 22rpx; height: 22rpx; border-left: 4rpx solid #333; border-bottom: 4rpx solid #333; transform: rotate(45deg); margin-left: 10rpx; }
	.nav-title { font-size: 34rpx; font-weight: bold; color: #333; }
	.right-placeholder { width: 60rpx; }

	.content-scroll { width: 100%; }
	.article-body { padding: 40rpx; padding-top: 20rpx; }
	.title { font-size: 40rpx; font-weight: bold; color: #1a1a1a; margin-bottom: 16rpx; text-align: center; }
	.update-time { font-size: 24rpx; color: #999; margin-bottom: 40rpx; text-align: center; }
	.footer-tip { margin-top: 60rpx; padding: 30rpx; background: #f8fafc; font-size: 24rpx; color: #888; text-align: center; }
</style>
