<template>
	<view class="preview-container">
		<!-- 标题 -->
		<view class="title">
			<text>下面我们将拍摄证件照片</text>
		</view>
		<!-- 拍照提示信息 -->
		<view class="guide-text">
			<text>请您在白色的背景前拍照</text>
		</view>
		<!-- 拍照指引图示 -->
		<view class="guide-image">
			<image src="https://data.qicai321.com/minlong/a7f24c02-ca46-47c9-9423-8523d551cda5.jpg" mode="aspectFit"></image>
		</view>
		
		<!-- 拍照要求列表 -->
		<view class="requirements-list">
			<view class="requirement-item">
				<text>· 请摘掉耳饰、发饰、项链等影响拍摄效果的饰品</text>
			</view>
			<view class="requirement-item">
				<text>· 请勿化妆、头发不要遮挡耳朵、眉毛</text>
			</view>
			<view class="requirement-item">
				<text>· 拍照时，请您露出锁骨或衣领</text>
			</view>
			<view class="requirement-item">
				<text>· 在光线充足的环境下拍摄</text>
			</view>
		</view>
		
		<!-- 开始拍摄按钮 -->
		<view class="action-button">
			<button @click="startCapture">准备好了</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 可以添加需要的数据
			}
		},
		methods: {
			// 开始拍摄方法
			startCapture() {
				// 跳转到拍照页面
				uni.navigateTo({
					url: '/pages/face-photo/face-photo'
				});
			}
		}
	}
</script>

<style>
	.preview-container {
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		height: 90vh;
		margin-left: 5%;
		background-color: #ffffff;
	}

	.title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 40rpx;
		
		text-align: left;
	}

	.guide-image {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-bottom: 30rpx;
	}

	.guide-image image {
		width: 570rpx;
		height: 660rpx;
	}

	.guide-text {
		font-size: 32rpx;
		color: #2a3bab;
		margin-bottom: 40rpx;
		text-align: left;
	}

	.requirements-list {
		width: 90%;
		margin-bottom: 60rpx;
	}

	.requirement-item {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 20rpx;
		line-height: 1.5;
	}

	.action-button {
		width: 90%;
		margin-top: auto;
		margin-bottom: 40rpx;
	}

	.action-button button {
		background-color: #0039b3;
		color: white;
		border-radius: 50rpx;
		font-size: 32rpx;
		height: 90rpx;
		line-height: 90rpx;
	}
</style>
