bigdata_WX/pages/identifyPest/guidance/guidance.vue

<template>
	<view>
		<!-- 列表 -->
		<view class="fingerpost_ul">
			<view class="fingerpost_li">
				<!-- 标题 -->
				<view class="fingerpost_tltBox">
					<image :src="$imageURL_58003+'/bigservers/' + 'images/Photoguide_1.png'" mode=""></image>
					<view class="fingerpost_tltBox_div">
						<view class="fingerpost_tltBox_divtlt">
							作物分类
						</view>
						<view class="fingerpost_tltBox_divdefail">
							拍摄的照片需以所选作物为场景
						</view>
					</view>
				</view>
				
				<!-- 提示 -->
				<view class="fingerpost_hint">
					例: 当选择作物【葡萄】时
				</view>
				
				<!-- 例图 -->
				<view class="fingerpost_illustration">
					<view class="illustration_true">
						<image :src="$imageURL_58003+'/bigservers/' + 'images/Photoguide_4.png'" class="illustration_true_img" mode=""></image>
						<view class="illustration_true_div">
							<image :src="$imageURL_58003+'/bigservers/' + 'images/detail_4.png'" class="illustration_true_divIcon" mode=""></image>
							<view class="illustration_true_divTxt">
								正确
							</view>
						</view>
					</view>
					
					<view class="illustration_true">
						<image :src="$imageURL_58003+'/bigservers/' + 'images/Photoguide_5.png'" class="illustration_true_img" mode=""></image>
						<view class="illustration_true_div">
							<image style="width: 40rpx; height: 40rpx; margin: 10rpx 0 0 0;" :src="$imageURL_58003+'/bigservers/' + 'images/detail_3.png'" class="illustration_true_divIcon" mode=""></image>
							<view class="illustration_true_divTxt">
								错误
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="fingerpost_li">
				<!-- 标题 -->
				<view class="fingerpost_tltBox">
					<image :src="$imageURL_58003+'/bigservers/' + 'images/Photoguide_2.png'" mode=""></image>
					<view class="fingerpost_tltBox_div">
						<view class="fingerpost_tltBox_divtlt">
							拍摄清晰
						</view>
						<view class="fingerpost_tltBox_divdefail">
							确保所拍作物或虫体清晰完整
						</view>
					</view>
				</view>
				
				<!-- 提示 -->
				<view class="fingerpost_hint">
					例: 当选择作物【葡萄】时
				</view>
				
				<!-- 例图 -->
				<view class="fingerpost_illustration">
					<view class="illustration_true">
						<image :src="$imageURL_58003+'/bigservers/' + 'images/Photoguide_4.png'" class="illustration_true_img" mode=""></image>
						<view class="illustration_true_div">
							<image :src="$imageURL_58003+'/bigservers/' + 'images/detail_4.png'" class="illustration_true_divIcon" mode=""></image>
							<view class="illustration_true_divTxt">
								正确
							</view>
						</view>
					</view>
					
					<view class="illustration_true">
						<image :src="$imageURL_58003+'/bigservers/' + 'images/Photoguide_6.png'" class="illustration_true_img" mode=""></image>
						<view class="illustration_true_div">
							<image style="width: 40rpx; height: 40rpx; margin: 10rpx 0 0 0;" :src="$imageURL_58003+'/bigservers/' + 'images/detail_3.png'" class="illustration_true_divIcon" mode=""></image>
							<view class="illustration_true_divTxt">
								错误
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="fingerpost_li">
				<!-- 标题 -->
				<view class="fingerpost_tltBox">
					<image :src="$imageURL_58003+'/bigservers/' + 'images/Photoguide_3.png'" mode=""></image>
					<view class="fingerpost_tltBox_div">
						<view class="fingerpost_tltBox_divtlt">
							适当距离
						</view>
						<view class="fingerpost_tltBox_divdefail">
							确保所拍作物或虫体清晰完整,保持适当距离,不要太远也不要太近
						</view>
					</view>
				</view>
				
				<!-- 提示 -->
				<view class="fingerpost_hint">
					例: 当选择作物【葡萄】时
				</view>
				
				<!-- 例图 -->
				<view class="fingerpost_illustration">
					<view class="illustration_true">
						<image :src="$imageURL_58003+'/bigservers/' + 'images/Photoguide_4.png'" class="illustration_true_img" mode=""></image>
						<view class="illustration_true_div">
							<image :src="$imageURL_58003+'/bigservers/' + 'images/detail_4.png'" class="illustration_true_divIcon" mode=""></image>
							<view class="illustration_true_divTxt">
								正确
							</view>
						</view>
					</view>
					
					<view class="illustration_true">
						<image :src="$imageURL_58003+'/bigservers/' + 'images/Photoguide_7.png'" class="illustration_true_img" mode=""></image>
						<view class="illustration_true_div">
							<image style="width: 40rpx; height: 40rpx; margin: 10rpx 0 0 0;" :src="$imageURL_58003+'/bigservers/' + 'images/detail_3.png'" class="illustration_true_divIcon" mode=""></image>
							<view class="illustration_true_divTxt">
								错误
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 参考 -->
		<view class="referenceBox">
			<view class="referenceBtn">
				参考图片
			</view>
			<image :src="$imageURL_58003+'/bigservers/' + 'images/Photoguide_8.png'" class="referenceIcon" mode=""></image>
			<image :src="$imageURL_58003+'/bigservers/' + 'images/Photoguide_9.png'" class="referenceIcon" mode=""></image>
		</view>
	</view>
</template>

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

<style lang="scss">
	// 列表
	.fingerpost_ul {
		padding-top: 25rpx;
		.fingerpost_li {
			// border: 1px solid #007AFF;
			width: 660rpx;
			margin: 25rpx auto;
			// 标题
			.fingerpost_tltBox {
				display: flex;
				image {
					width: 70rpx;
					height: 70rpx;
				}
				.fingerpost_tltBox_div {
					// border: 1px solid #19BE6B;
					margin: 0 0 0 15rpx;
					width: 550rpx;
					.fingerpost_tltBox_divtlt {
						font-weight: 550;
						font-size: 18px;
					}
					.fingerpost_tltBox_divdefail {
						font-size: 13px;
						color: #7a7a7a;
						line-height: 35rpx;
					}
				}
			}
		
			// 提示
			.fingerpost_hint {
				// border: 1px solid #000;
				text-align: center;
				font-size: 13px;
				color: #45c785;
				font-weight: 550;
				padding: 10rpx;
			}
		
			// 例图
			.fingerpost_illustration {
				// border: 1px solid #000;
				display: flex;
				justify-content: space-around;
				.illustration_true {
					width: 300rpx;
					.illustration_true_img {
						width: 300rpx;
						height: 350rpx;
					}
					.illustration_true_div {
						// border: 1px solid #000;
						display: flex;
						width: 150rpx;
						margin: 0 auto;
						.illustration_true_divIcon {
							width: 63rpx;
							height: 60rpx;
							display: block;
							vertical-align: middle;
						}
						.illustration_true_divTxt {
							font-size: 16px;
							font-weight: 550;
							color: #464646;
							line-height: 60rpx;
							margin: 0 0 0 15rpx;
						}
					}
				}
			}
		}
	}
	
	// 参考
	.referenceBox {
		padding-bottom: 20rpx;
		.referenceBtn {
			background: #45c785;
			color: #fff;
			text-align: center;
			width: 350rpx;
			margin: 0 auto;
			padding: 10rpx 0 10rpx 0;
			font-size: 18px;
		}
		image {
			margin: 15rpx auto;
			display: block;
		}
	}
</style>