rtliveDoctor/pages_user/certificationExample.vue

<template>
	<view class="container">
		<scroll-view class="content" scroll-y>
			<!-- 上传要求 -->
			<view class="section">
				<view class="section-header">
					<view class="section-indicator"></view>
					<text class="section-title">上传要求</text>
				</view>
				<view class="requirement-list">
					<view class="requirement-item">
						<text class="check-icon">✓</text>
						<text>证件需为原件</text>
					</view>
					<view class="requirement-item">
						<text class="check-icon">✓</text>
						<text>露出完整边角</text>
					</view>
					<view class="requirement-item">
						<text class="check-icon">✓</text>
						<text>照片字迹清晰可见</text>
					</view>
				</view>
			</view>
			
			<!-- 老版本需上传至少一张 -->
			<view class="section">
				<view class="section-header">
					<view class="section-indicator"></view>
					<text class="section-title">老版本需上传至少一张</text>
				</view>
				<view class="instruction-list">
					<view class="instruction-item">1.包含头像信息、个人信息、专业信息</view>
					<view class="instruction-item">2.因各省市证件样式不统一,如有2页请拍摄完整</view>
				</view>
				<view class="example-image">
					<image src="@/static/image/img_example4.png" mode=""></image>
					<!-- <view class="image-placeholder">示例图片：老版本职称证</view> -->
					<!-- 请将示例图片放置在 @/static/image/example_old_certificate.png -->
				</view>
			</view>
			
			<!-- 新版本需上传至少一张 -->
			<view class="section">
				<view class="section-header">
					<view class="section-indicator"></view>
					<text class="section-title">新版本需上传至少一张</text>
				</view>
				<view class="instruction-list">
					<view class="instruction-item">1.包含头像信息、个人信息、专业信息</view>
					<view class="instruction-item">2.包含执业证注册信息,主执业机构地点</view>
				</view>
				<view class="example-image">
					<image src="@/static/image/img_example5.png" mode=""></image>
					<!-- <view class="image-placeholder">示例图片：新版本职称证</view> -->
					<!-- 请将示例图片放置在 @/static/image/example_new_certificate.png -->
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #f5f5f5;
}

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

.section {
	background: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 24rpx;
	
	&:last-child {
		margin-bottom: 0;
	}
	
	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
		
		.section-indicator {
			width: 6rpx;
			height: 32rpx;
			background: #388BFF;
			border-radius: 3rpx;
			margin-right: 16rpx;
		}
		
		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	.requirement-list {
		.requirement-item {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;
			font-size: 28rpx;
			color: #333;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.check-icon {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				background: #52C41A;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				margin-right: 16rpx;
			}
		}
	}
	
	.instruction-list {
		margin-bottom: 24rpx;
		
		.instruction-item {
			font-size: 28rpx;
			color: #666;
			line-height: 1.8;
			margin-bottom: 8rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
	
	.example-image {
		width: 100%;
		border-radius: 8rpx;
		overflow: hidden;
		background: #f5f5f5;
		min-height: 400rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.image-placeholder {
			font-size: 28rpx;
			color: #999;
		}
		
		image {
			width: 100%;
			display: block;
		}
	}
}
</style>