<template>
	<view class="flex-col page">
		<view class="padding-box">
			<!-- 	<view class="loading" v-if="showloading">
				<view class="loading_box">
					<u-loading-icon color='#fff'></u-loading-icon>
					<text>loading...</text>
				</view>
			</view> -->
			<view class="flex-col group">
				<view class="mt-14 flex-row justify-between">
				</view>
			</view>
			<view class="mt-22 flex-col">
				<view class="flex-row justify-center top-img">
					<view @click="fxyujin" class="flex-col section left-card">
						<!-- 左上模块 -->
						<view class="flex-row">

							<view class="flex-col">
								<view class="flex-row self-stretch top-jinbaoqi top-jinbaoqi-top-t">
									<!-- 警报灯 -->
									<view class="img-lef">
										<image class="shrink-0 self-center image_7" src="../../static/jinbao.png" />
										<text class="self-start text_5">24H</text>
									</view>
									<!-- 22 -->
									<text class="self-start text_3 text_4 ml-19">{{formData.warning_count == undefined ? 0 : formData.warning_count}}</text>
									<!-- 左上的箭头 -->
									<image class="ml-28 self-start image_8 image_9" src="../../static/shouye-you.png" />
								</view>
							</view>
						</view>
						<view class="top-jinbaoqi top-jinbaoqi-top-t">
							<view class="flex-row group_3 tac-dainlaing">
								<text class="font_3 text_8 padding-top-bootm">电量不足</text>
								<text
									:id="formData.battery_low_count < 1 ?  'color-text-shu1' : formData.battery_low_count < 5 ? 'color-text-shu2' : 'color-text-shu3'"
									class="font_5 text_12">{{formData.battery_low_count == undefined ? 0 : formData.battery_low_count}}</text>
							</view>
							<view class="flex-row group_5 tac-dainlaing">
								<text class="ml-30 font_3 text_9 padding-top-bootm">震动异常</text>
								<text
									:id="formData.shake_count < 1 ?  'color-text-shu1' : formData.shake_count < 5 ? 'color-text-shu2' : 'color-text-shu3'"
									class="ml-68 font_5">{{formData.shake_count == undefined ? 0 : formData.shake_count}}</text>
							</view>
						</view>

						<view class="top-jinbaoqi top-jinbaoqi-top-t">
							<view class="flex-row group_3 tac-dainlaing">
								<text class="font_3 text_13 padding-top-bootm">出勤异常</text>
								<text
									:id="formData.work_count < 1 ?  'color-text-shu1' : formData.work_count < 5 ? 'color-text-shu2' : 'color-text-shu3'"
									class="font_5 ml-67">{{formData.work_count== undefined ? 0 :formData.work_count}}</text>
							</view>
							<view class="flex-row group_5 tac-dainlaing">
								<text class="font_3 ml-31 padding-top-bootm">重量异常</text>
								<text
									:id="formData.weight_count < 1 ?  'color-text-shu1' : formData.weight_count < 5 ? 'color-text-shu2' : 'color-text-shu3'"
									class="font_5 text_14">{{formData.weight_count== undefined ? 0 :formData.weight_count}}</text>
							</view>
						</view>

						<view class="top-jinbaoqi top-jinbaoqi-top-t">
							<view class="flex-row tac-dainlaing">
								<text class="font_3 text_16 padding-top-bootm">温度异常</text>
								<text
									:id="formData.temperature_count < 1 ?  'color-text-shu1' : formData.temperature_count < 5 ? 'color-text-shu2' : 'color-text-shu3'"
									class="font_5 text_19">{{formData.temperature_count== undefined ? 0 :formData.temperature_count}}</text>
							</view>
							<view class="flex-row group_7 tac-dainlaing">
								<text class="font_3 text_17 ml-31 padding-top-bootm">湿度异常</text>
								<text
									:id="formData.humidity_count < 1 ?  'color-text-shu1' : formData.humidity_count < 5 ? 'color-text-shu2' : 'color-text-shu3'"
									class="font_5 text_20 ml-61">{{formData.humidity_count== undefined? 0 :formData.humidity_count}}</text>
							</view>
						</view>

					</view>
					<!-- 右上 -->
					<view class="ml-16 flex-col right-top-img left-card">
						<view class="flex-col section_2 box-rie">
							<!-- 房子图片 -->
							<view class="flex-row group_2 top-img">
								<view class="flex-col items-center tac-dainlaing">
									<image class="shrink-0 " style="width: 80rpx;height: 102rpx;"
										src="../../static/fx11.png" mode=""></image>
									<!-- <image class="shrink-0 image_6" src="../../static/shouye-fangzi-shang.png" />
									<image class="shrink-0 image_11" src="../../static/shouye-fangzi-xia.png" /> -->
								</view>
								<image class="ml-90 self-start image_8 image_10" src="../../static/shouye-you.png" />
							</view>

							<view class="top-jinbaoqi" @click="topage(1)">
								<view class="mt-8 flex-row tac-dainlaing">
									<text class="font text_6 padding-top-bootm">蜂箱数量</text>
									<text class="self-center font_4 text_3 text_10">{{formData.beehive_count==undefined?0:formData.beehive_count}}</text>

								</view>
								<view class="mt-8 flex-row tac-dainlaing">
									<text
										class="ml-30 font_2 text_7 padding-top-bootm">在线：{{formData.beehive_online_count == undefined ? 0 : formData.beehive_online_count}}</text>
									<text
										class="self-start font_2 text_11 ml-39 ">离线：{{formData.beehive_offline_count == undefined ? 0 : formData.beehive_offline_count}}</text>
								</view>
							</view>
						</view>

						<view class="flex-col section_2 mt-13 box-rie top-jinbaoqi" @click="topage(2)">
							<!-- 左 -->
							<view class="flex-row items-center tac-dainlaing">
								<image class="image_12" src="../../static/shouye-fangchang-shuliang.png" />
								<text class="font padding-top-bootm">蜂场数量</text>
								<text class="font_4 text_3 text_10 padding-top-bootm">{{formData.apiary_count==undefined?0:formData.apiary_count}}</text>
							</view>
							<!-- 右 -->
							<view class="ml-18 flex-col items-end">
								<view class="right-jainto">
									<image class="image_8 image_13 padding-top-bootm"
										src="../../static/shouye-you.png" />
									<!-- </view>
                <text class="font_2 text_15 mt-13 hg-num" v-for="item in formData.apiary_data" :key="item.id">{{item.name}}：{{item.count}}</text>
              </view> -->
								</view>
								<view class="font_2 text_15 mt-13 hg-num" v-if="formData.apiary_data[0]">
									<view>{{formData.apiary_data[0].name==undefined?0:formData.apiary_data[0].name}}</view>
									<view class="taxt-wen">：</view>
									<view class="taxt-wen-1">{{formData.apiary_data[0].count==undefined?0:formData.apiary_data[0].count}}</view>
								</view>
								<view class="font_2 text_15 mt-13 hg-num" v-if="formData.apiary_data[1]">
									<view>{{formData.apiary_data[1].name==undefined?0:formData.apiary_data[1].name}}</view>
									<view class="taxt-wen">：</view>
									<view class="taxt-wen-1">{{formData.apiary_data[1].count==undefined?0:formData.apiary_data[1].count}}</view>
								</view>
								<view class="font_2 text_15 mt-13 hg-num" v-if="formData.apiary_data[2]">
									<view>{{formData.apiary_data[2].name==undefined?0:formData.apiary_data[2].name}}</view>
									<view class="taxt-wen">：</view>
									<view class="taxt-wen-1">{{formData.apiary_data[2].count==undefined?0:formData.apiary_data[2].count}}</view>
								</view>
							</view>

						</view>
					</view>
				</view>

				<!-- 卡片图表 -->
				<!-- 柱状 -->
				<view  class="xin-box" style="margin-top: 20rpx;">
					<view class="xin-box-title" @click="chuqingbianhua" v-if="logoflag">
						<view style="flex: 1;display: flex;align-items: center;">
							<image style="width: 40rpx;height: 40rpx;"
								src="../../static/e5e18447349367492c81f64ccec7ebcb.png"></image>
							<text style="margin-left: 10rpx;">近7天蜜蜂总出勤变化</text>
						</view>
						<image class="image_8 image_13 padding-top-bootm" src="../../static/shouye-you.png" />
					</view>
					<view class="charts-box" >
						<qiun-data-charts v-if="logoflag" type="column" :opts="optsZhu" :chartData="chartDataZhu" :errorShow="false" :errorReload="false" :animation="false" :tooltipShow="false" :tapLegend="false" />
						<view class="" v-else style="color: #ccc;font-size: 36rpx;width: 100%;text-align: center;margin-top: 50rpx;">暂无蜂箱...</view>
					</view>
				</view>
				<!-- 折线 -->
				<view  class="xin-box" v-if="logoflag">
					<view class="xin-box-title" @click="zhongliangbianhua" v-if="logoflag">
						<view style="flex: 1;display: flex;align-items: center;">
							<image style="width: 40rpx;height: 40rpx;" src="../../static/kg.png"></image>
							<text style="margin-left: 10rpx;">近7天蜂箱总重量变化(KG)</text>
						</view>
						<image class="image_8 image_13 padding-top-bootm" src="../../static/shouye-you.png" />
					</view>
					<view class="charts-box">
						<qiun-data-charts v-if="logoflag" type="line" :opts="optsZhe" :chartData="chartDataZhe" :animation="false" :tooltipShow="false" :tapLegend="false" />
						<view class="" v-else style="color: #ccc;font-size: 36rpx;width: 100%;text-align: center;margin-top: 50rpx;">暂无蜂箱...</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import share from "uview-ui/libs/mixin/mpShare.js"
	import request from '../../utils/request'
	export default {
		components: {},
		props: {},
		data() {
			return {
				logoflag:true,
				showloading: false,
				uchartsData: {}, // ucharts 数据
				formData: {}, // 上方三个盒子的数据
				// 折线图
				chartDataZhe: {},
				optsZhe: {
					timing: "easeOut",
					duration: 1000,
					rotate: false,
					rotateLock: false,
					color: ["#89c28c", "#23693f", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [0, 0, 0, 0],
					fontSize: 12,
					fontColor: "#666666",
					dataLabel: false,
					dataPointShape: false,
					dataPointShapeType: "solid",
					touchMoveLimit: 60,
					enableScroll: false,
					enableMarkLine: false,
					legend: {
						show: true,
						position: "top",
						float: "right",
						padding: 5,
						margin: 5,
						backgroundColor: "rgba(0,0,0,0)",
						borderColor: "rgba(0,0,0,0)",
						borderWidth: 0,
						fontSize: 12,
						fontColor: "#666666",
						lineHeight: 11,
						hiddenColor: "#CECECE",
						itemGap: 20
					},
					xAxis: {
						disableGrid: true,
						disabled: false,
						axisLine: true,
						axisLineColor: "#CCCCCC",
						calibration: false,
						fontColor: "#666666",
						fontSize: 12,
						lineHeight: 20,
						marginTop: 0,
						rotateLabel: false,
						rotateAngle: 45,
						itemCount: 5,
						boundaryGap: "center",
						splitNumber: 5,
						gridColor: "#CCCCCC",
						gridType: "solid",
						dashLength: 4,
						gridEval: 1,
						scrollShow: false,
						scrollAlign: "left",
						scrollColor: "#A6A6A6",
						scrollBackgroundColor: "#EFEBEF",
						title: "",
						titleFontSize: 13,
						titleOffsetY: 0,
						titleOffsetX: 0,
						titleFontColor: "#666666",
						format: ""
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "hollow",
							linearType: "none",
							onShadow: false,
							animation: "vertical"
						},
						tooltip: {
							showBox: true,
							showArrow: true,
							showCategory: false,
							borderWidth: 0,
							borderRadius: 0,
							borderColor: "#000000",
							borderOpacity: 0.7,
							bgColor: "#000000",
							bgOpacity: 0.7,
							gridType: "solid",
							dashLength: 4,
							gridColor: "#CCCCCC",
							boxPadding: 3,
							fontSize: 13,
							lineHeight: 20,
							fontColor: "#FFFFFF",
							legendShow: true,
							legendShape: "auto",
							splitLine: true,
							horizentalLine: false,
							xAxisLabel: false,
							yAxisLabel: false,
							labelBgColor: "#FFFFFF",
							labelBgOpacity: 0.7,
							labelFontColor: "#666666"
						},
						markLine: {
							type: "solid",
							dashLength: 4,
							data: []
						}
					}
				},
				// 柱状图
				chartDataZhu: {},
				optsZhu: {
					timing: "linear",
					duration: 1000,
					rotate: false,
					rotateLock: false,
					color: ["#89c28c", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [0, 0, 0, 0],
					fontSize: 13,
					fontColor: "#666666",
					dataLabel: false,
					dataPointShape: false,
					dataPointShapeType: "solid",
					touchMoveLimit: 60,
					enableScroll: false,
					enableMarkLine: false,
					legend: {
						show: false,
						position: "bottom",
						float: "center",
						padding: 5,
						margin: 5,
						backgroundColor: "rgba(0,0,0,0)",
						borderColor: "rgba(0,0,0,0)",
						borderWidth: 0,
						fontSize: 13,
						fontColor: "#666666",
						lineHeight: 11,
						hiddenColor: "#CECECE",
						itemGap: 10
					},
					xAxis: {
						disableGrid: true,
						disabled: false,
						axisLine: false,
						axisLineColor: "#CCCCCC",
						calibration: false,
						fontColor: "#666666",
						fontSize: 10,
						lineHeight: 20,
						marginTop: 10,
						rotateLabel: false,
						rotateAngle: 45,
						itemCount: 5,
						boundaryGap: "center",
						splitNumber: 5,
						gridColor: "#CCCCCC",
						gridType: "dash",
						dashLength: 4,
						gridEval: 1,
						scrollShow: false,
						scrollAlign: "left",
						scrollColor: "#A6A6A6",
						scrollBackgroundColor: "#EFEBEF",
						title: "",
						titleFontSize: 13,
						titleOffsetY: 0,
						titleOffsetX: 0,
						titleFontColor: "#666666",
						format: ""
					},
					yAxis: {
						data: [{
							min: 0,
							disabled: false,
							axisLine: false,
							position: "left",
							calibration: false,
							title: "",
							textAlign: "left",
							titleFontSize: 13,
							max: null,
							format: "",
							titleOffsetY: 0,
							titleOffsetX: 0,
							type: "value"
						}],
						disabled: false,
						disableGrid: false,
						splitNumber: 5,
						gridType: "dash",
						dashLength: 4,
						gridColor: "#CCCCCC",
						padding: 10,
						showTitle: true
					},
					extra: {
						column: {
							type: "group",
							width: 20,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							seriesGap: 2,
							categoryGap: 3,
							barBorderCircle: false,
							barBorderRadius: [
								50,
								50,
								50,
								50
							],
							linearType: "none",
							linearOpacity: 1,
							colorStop: 0,
							meterBorder: 1,
							meterFillColor: "#FFFFFF",
							labelPosition: "outside"
						},
						tooltip: {
							showBox: false,
							showArrow: false,
							showCategory: false,
							borderWidth: 0,
							borderRadius: 0,
							borderColor: "#000000",
							borderOpacity: 0.7,
							bgColor: "#000000",
							bgOpacity: 0.7,
							gridType: "solid",
							dashLength: 4,
							gridColor: "#CCCCCC",
							boxPadding: 3,
							fontSize: 13,
							lineHeight: 20,
							fontColor: "#FFFFFF",
							legendShow: true,
							legendShape: "auto",
							splitLine: true,
							horizentalLine: false,
							xAxisLabel: false,
							yAxisLabel: false,
							labelBgColor: "#FFFFFF",
							labelBgOpacity: 0.7,
							labelFontColor: "#666666"
						},
						markLine: {
							type: "solid",
							dashLength: 4,
							data: []
						}
					}
				},
				tokenflag: false
			};
		},
		onLoad() {

		},
		//分享
		onShareAppMessage: function() {
			return {
				title: "苏他数字蜂箱 首页",
			};
		},
		onShow() {
			this.cheshi();
			this.intervalId = setInterval(() => {
				this.cheshi();
			}, 5000);
			this.getServerDataZhe();
			this.getServerDataZhu();
		},
		mounted() {},
		onHide() {
			// Clear the interval when the component is destroyed
			clearInterval(this.intervalId);
		},
		methods: {
			topage(num) {
				if (this.tokenflag == true) {
					if (num == 1) {
						uni.switchTab({
							url: '/pages/fengxiang/index'
						});
					} else if (num == 2) {
						uni.switchTab({
							url: '/pages/fengchang/index'
						});
					}
				}else{
					uni.navigateTo({
						url:'/pages/login/index'
					})
				}
				
			},
			// 图表数据请求
			async echartsFn() {
				this.showloading = true
				await request.get('/api/index/statistics', ).then(res => {
					if (res.code == 401) {
						this.showloading = false
						this.tokenflag = false
					} else {
						this.uchartsData = {
							...res.data.data
						}
						this.tokenflag = true
					}
					this.showloading = false
				})
				// this.showloading=true
				// const eres = await request.get('/api/index/statistics') // echarts数据


			},
			// 数据请求
			async cheshi() {
				try {
					const res = await request.get('/api/index') // 基本数据
					console.log(res)
					// console.log(eres,'图')
					this.formData = {
						...res.data.data
					}
					this.logoflag = true 
					// console.log(this.formData,'101010')
				} catch (error) {
					this.logoflag = false
					// setTimeout(()=> {
					// 	wx.navigateTo({
					// 		url: '/pages/login/index'
					// 	})
					// },10000)

					// console.log(error)
				}
			},
			// 跳转预警
			fxyujin() {
				// console.log("风向预警");
				if (this.tokenflag == true) {
					uni.navigateTo({
						url: "/pagesFengXiang/pages/fengxiang-yujin/index"
					})
				}else{
					uni.navigateTo({
						url:'/pages/login/index'
					})
				}

			},
			// 跳转折线图
			zhongliangbianhua() {
				
				if (this.tokenflag == true) {
					wx.navigateTo({
						url: '../echartszhe/index'
					})
				}else{
					uni.navigateTo({
						url:'/pages/login/index'
					})
				}
			},
			// 跳转柱状图
			chuqingbianhua() {
				if (this.tokenflag == true) {
					wx.navigateTo({
						url: '../echartszhu/index'
					})
				}else{
					uni.navigateTo({
						url:'/pages/login/index'
					})
				}
				
			},
			// 图表数据
			// 折线
			async getServerDataZhe() {
				await this.echartsFn()
				//模拟从服务器获取数据时的延时
				setTimeout(async () => {
					// console.log(this.uchartsData)
					if(this.uchartsData != ''){
						//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
						let res = {
							categories: [...this.uchartsData.weight_statistics.xData.slice(-7)],
							series: [{
									name: "总重量",
									data: [...this.uchartsData.weight_statistics.yData.slice(-7)]
								},
								{
									name: "日增量",
									data: [...this.uchartsData.weight_statistics.yData_day.slice(-7)]
								}
							]
						};
						this.chartDataZhe = JSON.parse(JSON.stringify(res));
					}else{
						let res = {
							categories: [],
							series: [{
									name: "",
									data: []
								},
								{
									name: "",
									data: []
								}
							]
						};
						this.chartDataZhe = JSON.parse(JSON.stringify(res));
					}
					
				}, 500);
			},
			// 柱状
			async getServerDataZhu() {
				await this.echartsFn()
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					if(this.uchartsData != ''){
						//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
						let res = {
							categories: [...this.uchartsData.work_count_statistics.xData.slice(-7)], // X 轴
							series: [{
								name: "目标值",
								data: [...this.uchartsData.work_count_statistics.yData.slice(-
									7)] // Y 轴
							}]
						};
						
						this.chartDataZhu =  JSON.parse(JSON.stringify(res));
						console.log(this.chartDataZhu, '柱状图数据');
					}else{
						let res = {
							categories: [], // X 轴
							series: [{
								name: "",
								data: [] // Y 轴
							}]
						};
						this.chartDataZhu = JSON.parse(JSON.stringify(res));
					}
					
				}, 500);
			},
		},
	};
</script>

<style scoped lang="scss">
	.loading {
		z-index: 10074;
		width: 224rpx;
		height: 224rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		.loading_box {
			width: 100%;
			height: 100%;
			padding: 40rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;

			image {
				width: 108rpx;
				height: 108rpx;
				display: block;
			}

			text {
				margin-top: 12rpx;
				width: 100%;
				text-align: center;
				display: block;
				font-size: 24rpx;
				font-family: Microsoft YaHei-Regular, Microsoft YaHei;
				font-weight: 400;
				color: #fff;
				line-height: 24rpx;
			}
		}

	}

	.items-end {
		text-align: right;
	}

	// 图标的样式
	.charts-box {
		width: 100%;
		height: 600rpx;
	}

	.charts-h {
		height: 100%;
	}

	// 卡片盒子
	.xin-box {
		// height: 300rpx;
		margin-top: 20rpx;
		background-color: #fff;
		padding: 30rpx;
		border-radius: 30rpx;

		.xin-box-title {
			display: flex;
			align-items: center;
		}
	}

	.text-wen {
		width: 15rpx;
	}

	#color-text-shu1 {
		color: #89c28c;
	}

	#color-text-shu2 {
		color: #ff8f19;
	}

	#color-text-shu3 {
		color: #ff5733;
	}

	.padding-box {
		padding: 0 24rpx;
	}

	.right-jainto {
		padding-bottom: 20rpx;
		// text-align: right;
		padding-left: 120rpx;
	}

	.hg-num {
		margin: 10rpx 0;
		display: flex;
		justify-content: center;
	}

	.taxt-wen {
		flex: 1;
	}

	.taxt-wen-1 {
		width: 30rpx;
		text-align: center;
	}

	.padding-top-bootm {
		margin: 18rpx 0;
	}

	.tac-dainlaing {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.top-img {
		display: flex;
		justify-content: space-between;
	}

	.right-top-img {
		width: 40%;
	}

	.left-card {
		width: 45%;
		border-radius: 5%;
	}

	.box-rie {
		border-radius: 5%;
	}

	.top-jinbaoqi {
		display: flex;
		justify-content: space-between;
	}

	.top-jinbaoqi-top-t {
		margin-top: 10rpx;
	}

	.img-lef {
		display: flex;
		flex-direction: column;
	}

	.page {
		height: 100%;
		width: 100%;
		top: 0px;
		bottom: 0px;
		background-color: #f7f7f7;
		padding: 36rpx 0rpx 10rpx;
		overflow-y: auto;
		overflow-x: hidden;

		.group {
			padding-left: 40rpx;

			.text {
				color: #7d7d7d;
				font-size: 28rpx;
				font-family: SourceHanSansCN;
				font-weight: 700;
				line-height: 21.5rpx;
			}

			.image {
				width: 34rpx;
				height: 22rpx;
			}

			.image_2 {
				width: 30rpx;
				height: 22rpx;
			}

			.image_3 {
				width: 48rpx;
				height: 22.66rpx;
			}

			.image_4 {
				width: 64rpx;
				height: 64rpx;
			}

			.text_2 {
				color: #000000;
				font-size: 36rpx;
				font-family: AlibabaPuHuiTi;
				line-height: 33.52rpx;
			}

			.image_5 {
				filter: drop-shadow(0rpx 4rpx 4rpx #00000040);
				border-radius: 120rpx;
				width: 158rpx;
				height: 60rpx;
			}
		}

		.section {
			padding: 16rpx 20rpx 16rpx 28rpx;
			background-color: #ffffff;
			height: 426rpx;

			.image_7 {
				width: 76rpx;
				height: 68rpx;
			}

			.text_4 {
				margin-top: 24rpx;
				color: #ff5733;
				font-size: 72rpx;
				line-height: 51.9rpx;
			}

			.text_5 {
				margin-left: 12rpx;
				margin-top: 10rpx;
				color: #ff8d1a;
				font-size: 28rpx;
				line-height: 20.18rpx;
			}

			.image_9 {
				margin-top: 6rpx;
			}

			.group_3 {
				padding: 0 4rpx;

				.text_8 {
					line-height: 22.04rpx;
				}

				.text_9 {
					line-height: 22.22rpx;
				}
			}

			.view {
				margin-top: 36rpx;
			}

			.group_5 {

				// margin-top: 20rpx;
				// padding: 0 40rpx;
				.text_12 {
					color: #89c28c;
					line-height: 29.22rpx;
				}

				// .text_14 {
				//   line-height: 28.44rpx;
				// }
			}

			.view_2 {
				margin-top: 28rpx;
			}

			.group_6 {
				margin-top: 28rpx;

				.text_16 {
					line-height: 22.28rpx;
				}

				.text_17 {
					line-height: 22.28rpx;
				}
			}

			.font_3 {
				font-size: 24rpx;
				font-family: 微软雅黑;
				line-height: 22.18rpx;
				color: #888888;
			}

			.group_7 {

				// margin-top: 20rpx;
				// padding: 0 28rpx;
				.text_19 {
					color: #ff5733;
				}

				.text_20 {
					line-height: 28.58rpx;
				}
			}

			.font_5 {
				font-size: 40rpx;
				line-height: 28.82rpx;
			}
		}

		.section_2 {
			margin-bottom: 23rpx;
			padding: 8rpx 16rpx 16rpx 24rpx;
			background-color: #ffffff;

			.group_2 {
				padding-left: 12rpx;

				.image_6 {
					width: 70rpx;
					height: 56rpx;
				}

				.image_11 {
					margin-top: -8rpx;
					width: 54rpx;
					height: 46rpx;
				}

				.image_10 {
					margin-top: 16rpx;
				}
			}

			.font {
				font-size: 24rpx;
				font-family: Nunito;
				line-height: 22.18rpx;
				font-weight: 600;
				color: #42484a;
			}

			.text_6 {
				line-height: 22.24rpx;
			}

			.font_2 {
				font-size: 24rpx;
				font-family: Nunito;
				line-height: 22.18rpx;
				font-weight: 600;
				color: #888888;
			}

			.text_7 {
				color: #23693f;
				line-height: 22.06rpx;
			}

			.group_4 {
				padding: 0 16rpx;

				.text_11 {
					line-height: 22.22rpx;
				}
			}

			.image_12 {
				width: 80rpx;
				height: 90rpx;
			}

			.image_13 {
				margin-right: 4rpx;
			}

			.text_15 {
				font-size: 22rpx;
				line-height: 20.3rpx;
			}

			.text_18 {
				font-size: 22rpx;
				line-height: 20.28rpx;
			}

			.group_8 {
				padding-left: 36rpx;

				.text_21 {
					font-size: 22rpx;
					line-height: 20.24rpx;
				}
			}

			.font_4 {
				font-size: 40rpx;
				font-family: AlimamaShuHeiTi;
				line-height: 28.82rpx;
				color: #23693f;
			}

			.text_10 {
				line-height: 29.04rpx;
			}
		}

		.image_8 {
			width: 18rpx;
			height: 36rpx;
		}

		.text_3 {
			text-transform: uppercase;
		}

		.group_9 {
			padding-bottom: 30rpx;

			.view_3 {
				margin: 0 16rpx;
			}

			.image_17 {
				width: 36rpx;
				height: 58rpx;
			}

			.pos_2 {
				position: absolute;
				left: 0;
				top: 74rpx;
			}

			.image_18 {
				opacity: 0.1;
				filter: blur(1rpx);
				width: 104rpx;
				height: 322rpx;
			}

			.pos_3 {
				position: absolute;
				left: 0;
				bottom: 30rpx;
			}

			.image_16 {
				width: 134rpx;
				height: 340rpx;
			}

			.pos {
				position: absolute;
				left: 0;
				bottom: 30rpx;
			}
		}

		.group_10 {
			overflow: hidden;

			.view_4 {
				margin: 0 14rpx;
			}

			.image-wrapper {
				background-image: url('https://ide.code.fun/api/image?token=655ec7f0fcfbac0011348c61&name=0846bd627e035104ba6a5edd32fd7538.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				width: 58rpx;

				.image_20 {
					width: 60rpx;
					height: 346rpx;
				}
			}

			.pos_4 {
				position: absolute;
				right: 0;
				top: 0;
			}

			.image_22 {
				opacity: 0.5;
				width: 44rpx;
				height: 50rpx;
			}

			.pos_5 {
				position: absolute;
				left: 0;
				bottom: 46.38rpx;
			}
		}

		.section_3 {
			padding: 10rpx 20rpx 0 38rpx;
			background-color: #ffffff;
			border-radius: 30rpx;

			.image_14 {
				width: 42rpx;
				height: 40rpx;
			}

			.font_6 {
				font-size: 30rpx;
				font-family: HarmonyOSSansSC;
				line-height: 28.82rpx;
				color: #42484a;
			}

			.text_22 {
				transform: rotate(0deg);
			}

			.text_23 {
				line-height: 28.42rpx;
			}

			.image_15 {
				margin-top: 10rpx;
			}

			.image_19 {
				margin-left: 52rpx;
				width: 22rpx;
				height: 32rpx;
			}

			.image_21 {
				width: 40rpx;
				height: 40rpx;
			}

			.text_24 {
				margin-left: 16rpx;
				margin-top: 12rpx;
				line-height: 28.36rpx;
			}

			.section_4 {
				margin-left: 12rpx;
				margin-top: 20rpx;
				background-color: #89c28c;
				border-radius: 50%;
				width: 12rpx;
				height: 12rpx;
			}

			.font_7 {
				font-size: 20rpx;
				font-family: HarmonyOSSansSC;
			}

			.text_25 {
				margin-top: 16rpx;
				color: #89c28c;
				line-height: 18.18rpx;
			}

			.section_5 {
				margin-top: 20rpx;
				background-color: #23693f;
				border-radius: 50%;
				width: 12rpx;
				height: 12rpx;
			}

			.text_26 {
				margin-left: 4rpx;
				margin-top: 16rpx;
				color: #23693f;
				line-height: 18.66rpx;
			}

			.image_23 {
				margin-left: 56rpx;
				width: 22rpx;
				height: 38rpx;
			}
		}
	}
</style>