<template>
	<view class="container">
		<!-- <image src="../../static/sjfx.png" mode="" class="bgimg"></image> -->
		<view class="pj">
			<view class="pjtitle">
				面源污染治理效果评价
			</view>
			<view class="ybecharts">
				<image src="../../static/data_bg_img.png" mode=""></image>
				<view class="ybechartstext">
					{{pjnr}}
				</view>
			</view>
			<view class="bot3">
				<view class="bot3_left" v-for="(item,index) in pjlist.slice(0,3)" :key="index">
					<view class="bfb">
						{{item.detailValue}}
					</view>
					<view class="bfbname">
						{{item.detailCode}}
					</view>
				</view>
			</view>
		</view>
		<view class="qst">
			<view class="qsttitle">
				重要污染物趋势图
			</view>
			<view class="search">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">{{array[index]}}
						<image src="../../static/data_btn_sanjiao_xia.png"></image>
					</view>
				</picker>
			</view>
			<view class="uni-form-item uni-column">
				<radio-group class="radio-group" @change="radioChange">
					<label class="radio-label" v-for="(item, index) in timList" :key="item.value">
						<radio :value="item.value" :checked="index === current" />
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>
			<view class="uni-list-cell-db qstim">
				<picker mode="date" :value="dateqs" :start="startDate" :end="endDate" @change="bindDateqsChange">
					<view class="uni-input">{{dateqs}} <image src="../../static/data_btn_sanjiao_xia.png"></image></view>
				</picker>
			</view>
			<view class="qstcontent">
				<qiun-data-charts 
				  type="line"
				  :opts="opts"
				  :chartData="chartData"
				  :enableScroll="true"
				  :ontouch="true"
				  canvas2d
				/>
			</view>
		</view>
		<view class="znyj">
			<view class="znyj_top">
				<view class="znyjtop_left">
					智能预警
				</view>
				<view class="znyjtop_right">
					预警次数 <span class="numbers">{{cutMoneyFiter(total) || 0}}</span>次
				</view>
			</view>
			<view class="sxbox">
				<view class="leftsxbox">
					<picker @change="bindPickerChange1" :value="index1" :range="array1">
						<view class="uni-input1">{{array1[index1]}}
							<image src="../../static/data_btn_sanjiao_xia.png"></image>
						</view>
					</picker>
				</view>
				<view class="rightsxbox">
					<picker mode="date" fields="year" :value="date" :start="startDate" :end="endDate"
						@change="bindDateChange">
						<view class="uni-input2">{{date}}
							<image src="../../static/data_btn_sanjiao_xia.png"></image>
						</view>
					</picker>
				</view>
			</view>
			<view class="list_item_bot">
				<view class="scrolltop">
					<view class="tabitem" v-for="(item,index) in tabList" :key="index">
						{{item}}
					</view>
				</view>
				<scroll-view style="height: 530rpx;" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
					<view class="lists_item" v-for="(item,index) in list" :key="index">
						<block>
							<view class="jczbs" v-if="item.stationName">
								{{item.stationName}}
							</view>
							<view class="jczbs" v-else></view>
						</block>
						<block>
							<view class="zbz" v-if="item.alertContent">
								{{item.alertContent[0].name}}
							</view>
							<view class="zbz" v-else></view>
						</block>
						<block>
							<view class="zbzs" v-if="item.alertContent">
								{{item.alertContent[0].val}}{{item.alertContent[0].unit}}
							</view>
							<view class="zbzs" v-else></view>
						</block>
						<block>
							<view class="sbsj" v-if="item.datetime">
								{{item.datetime}}
							</view>
							<view class="sbsj" v-else></view>
						</block>
					</view>
					<view class="load">
						<uni-load-more :status="loadStatus"></uni-load-more>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="pagebot">

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

<script>
	import uniEcCanvas from '../../components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '../../components/uni-ec-canvas/echarts.js'
	export default {
		components: {
			uniEcCanvas,
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				height: 0,
				scorllheight: 0,
				zt: '',
				date: new Date().getFullYear(),
				array: [],
				index: '',
				index1: '',
				array1: [],
				arrays: [],
				list: [],
				tabList: ['站点名称', '告警指标', '指标值', '告警时间'],
				pjlist: [],
				chartData: {},
				opts: {
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					padding: [15,10,0,15],
					dataLabel: false,
					dataPointShape: false,
					enableScroll: true,
					legend: {},
					xAxis: {
					   disableGrid: true, // 禁用网格线
					   type: 'grid', // 网格类型
					   gridType: 'dash', // 虚线样式
					   itemCount: 3, // 单屏显示数据数量
					   scrollShow: true, // 显示滚动条
					   scrollAlign: 'left', // 滚动条初始位置
					   scrollBackgroundColor: '#F7F7FF', // 滚动条背景色
					   scrollColor: '#DEE7F7' // 滚动条颜色
					},
					yAxis: {
					  gridType: "dash",
					  dashLength: 2,
					  data: [
						{
						  min: 0,
						  max: 150
						}
					  ]
					},
					extra: {
					  line: {
						type: "curve",
						width: 2,
						activeType: "hollow",
						linearType: "custom",
						onShadow: true,
						animation: "horizontal"
					  }
					}
				},
				pjnr: '',
				pageNo: 1,
				pageSize: 9,
				allNum: '',
				isLastpage: '',
				intervalId: null,
				loadStatus: 'more', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
				isLoadMore: false, //是否加载中
				show: false,
				show1: false,
				top: 0,
				total: 0,
				yearStr: null,
				stationName1: '',
				stationCode1: null,
				stationCode: '',
				arrays1: [],
				zxtdata: [],
				timList: [{
						value: 'yearMonth',
						name: '年',
						checked: 'true'
					},
					{
						value: 'monthDays',
						name: '月'
					},
					{
						value: 'dayhours',
						name: '日'
					},
				],
				current: 0,
				dateqs:new Date().getFullYear(),
				datetwo:currentDate,
				riqinumber:'yearMonth',
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					var pxToRpxScale = 750 / res.windowWidth
					var ktxStatusHeight = res.statusBarHeight * pxToRpxScale
					var navigationHeight = 44 * pxToRpxScale
					this.height = res.windowHeight * pxToRpxScale //将px 转换rpx		
					this.scorllheight = this.height
				}
			});
			this.index = 0
			this.index1 = 0
			this.getpj()
			this.getazsurvMulchRecord()
			this.getyjList()
			// this.gettj()
			this.qushicov()
		},
		methods: {
			// 获取监测站点数据
			getazsurvMulchRecord() {
				this.array = []
				this.arrays = []
				this.array1 = ['全部监测站点', ]
				this.arrays1 = [{
					label: '全部监测站点',
					value: ''
				}]
				this.$http.get('/applet/survStationInfo/list').then(res => {
					for (var i = 0; i < res.data.data.length; i++) {
						this.arrays.push({
							label: res.data.data[i].stationName,
							value: res.data.data[i].stationCode
						})
						this.arrays1.push({
							label: res.data.data[i].stationName,
							value: res.data.data[i].stationCode
						})
						this.array.push(res.data.data[i].stationName)
						this.array1.push(res.data.data[i].stationName)
					}
				})
			},
			// 获取预警列表
			getyjList() {
				let params = {}
				params.pageNo = this.pageNo
				params.pageSize = this.pageSize
				params.stationCode = this.stationCode1
				params.yearStr = this.yearStr
				uni.showLoading({
					title: '加载中'
				});
				this.list = []
				this.$http.get('/applet/wxclient/alertRecord', {
					params: params
				}).then(res => {
					if (res.data.code == 0) {
						var data = res.data.data.records
						for (var i = 0; i < data.length; i++) {
							data[i].times = data[i].alertTime.replace(" ", ":").replace(/\:/g, "-").split("-");
							data[i].nian = data[i].times[0];
							data[i].yue = data[i].times[1] - 1;
							data[i].ri = data[i].times[2];
							data[i].shi = data[i].times[3];
							data[i].fen = data[i].times[4];
							data[i].miao = data[i].times[5];
							data[i].datetime = data[i].yue + '-' + data[i].ri + ' ' + data[i].shi + ':' + data[i]
								.fen
							if (data[i].alertContent.indexOf('监测数据名称:') != -1) {
								data[i].alertContent = data[i].alertContent.replace('监测数据名称:', '')
							}
						}
						this.list = this.list.concat(data)
						this.total = res.data.data.total
						if (res.data.data.total != 0) {
							this.allNum = Number(res.data.data.total) / Number(this.pageSize) + '';
							if (this.allNum.indexOf('.') == -1) {
								this.allNum = this.allNum;
							} else {
								this.allNum = parseInt(Number(this.allNum) + 1);
							}
							if (this.pageNo == this.allNum) {
								this.isLastpage = true;
								this.loadStatus = 'nomore'
							} else {
								this.isLastpage = false;
								// this.isLoadMore=true
								this.loadStatus = 'more'
							}
						} else {
							this.isLastpage = true;
							this.loadStatus = 'nomore'
						}
					}
					uni.hideLoading();
					this.isRefresher = false
				})
			},
			// 分页加载
			lower() {
				// 最后一页了，取消下拉功能
				if (this.isLastpage) {
					return
				}
				clearInterval(this.intervalId);
				var num = 1;
				this.intervalId = setInterval(() => {
					num = num + 1;
				}, 1000)
				this.pageNo = this.pageNo + 1;
				let params = {}
				params.pageNo = this.pageNo
				params.pageSize = this.pageSize
				params.stationCode = this.stationCode1
				params.yearStr = this.yearStr
				this.$http.get('/applet/wxclient/alertRecord', {
					params: params
				}).then(res => {
					if (res.data.code == 0) {
						var data = res.data.data.records
						for (var i = 0; i < data.length; i++) {
							data[i].times = data[i].alertTime.replace(" ", ":").replace(/\:/g, "-").split("-");
							data[i].nian = data[i].times[0];
							data[i].yue = data[i].times[1] - 1;
							data[i].ri = data[i].times[2];
							data[i].shi = data[i].times[3];
							data[i].fen = data[i].times[4];
							data[i].miao = data[i].times[5];
							data[i].datetime = data[i].yue + '-' + data[i].ri + ' ' + data[i].shi + ':' + data[i]
								.fen
							if (data[i].alertContent.indexOf('监测数据名称:') != -1) {
								data[i].alertContent = data[i].alertContent.replace('监测数据名称:', '')
							}
						}
						this.list = this.list.concat(data)
						if (res.data.data.total != 0) {
							if (this.pageNo == this.allNum) {
								this.isLastpage = true;
								this.loadStatus = 'nomore'
							} else {
								this.isLastpage = false;
								// this.isLoadMore=true
								this.loadStatus = 'more'
							}
						} else {
							this.isLastpage = true;
							this.loadStatus = 'nomore'
						}
					}
				})
			},
			// 获取评价
			getpj() {
				this.$http.post('/applet/wxclient/displayInfo?infoType=' + 'effect_assess').then(res => {
					let data = res.data.data.effect_assess.detailList
					this.pjlist = data
					for (var i = 0; i < data.length; i++) {
						if (data[i].detailCode == '综合评价') {
							this.pjnr = data[i].detailValue
						}
					}
				})
			},
			// 选择年月日
			radioChange(e){
				this.riqinumber = e.detail.value
				console.log("0000000000000",this.datetwo)
				this.bindDateqsChange(this.datetwo,'twotime')
			},
			// 趋势时间
			bindDateqsChange(e,tiem) {
				if (tiem=='twotime') {
					let selectedDate = e
					if (this.riqinumber === 'monthDays') {
					  this.dateqs = selectedDate.slice(0, 7); // YYYY-MM
					} else if (this.riqinumber === 'yearMonth') {
					  this.dateqs = selectedDate.slice(0, 4); // YYYY
					} else {
					  this.dateqs = selectedDate; // YYYY-MM-DD
					}
				} else {
					let selectedDate = e.detail.value;
					if (this.riqinumber === 'monthDays') {
					  this.dateqs = selectedDate.slice(0, 7); // YYYY-MM
					} else if (this.riqinumber === 'yearMonth') {
					  this.dateqs = selectedDate.slice(0, 4); // YYYY
					} else {
					  this.dateqs = selectedDate; // YYYY-MM-DD
					}
				}
			    
			    this.qushicov();
			},
			// 趋势接口
			// 在 qushicov 方法中修改
			qushicov() {
			  let data = {
			    summrayMode: this.riqinumber,
			    startTime: this.dateqs,
			  }
			  this.$http.post('/applet/survDeviceDeploy/waterIntegrateStatistic', data).then(iem => {
			    console.log("接口返回数据", iem)
			    let lynum = iem.data.data
			    
			    setTimeout(() => {
			      let categories = [];
			      let series = [];
			      let allValues = []; // 收集所有数值
			      
			      if (lynum.tableHead && lynum.tableHead.length > 0) {
			        categories = lynum.tableIndex;
			        
			        lynum.tableHead.forEach((header, index) => {
			          const seriesData = lynum.tableData2.map(row => {
			            const value = row[index] === "0" ? 0 : parseFloat(row[index]) || 0;
			            allValues.push(value); // 收集数值
			            return value;
			          });
			          
			          series.push({
			            name: header.eleDesc,
			            data: seriesData
			          });
			        });
			        
			        // 动态计算Y轴范围
			        const maxValue = Math.max(...allValues);
			        const minValue = Math.min(...allValues);
			        
			        // 设置合适的上下边界，增加一些余量
			        const padding = maxValue * 0.1; // 10%的余量
			        const yAxisMax = maxValue + padding;
			        const yAxisMin = Math.max(0, minValue - padding); // 确保最小值不小于0
			        
			        // 更新opts中的yAxis配置
			        this.opts = {
			          ...this.opts,
			          yAxis: {
			            gridType: "dash",
			            dashLength: 2,
			            data: [
			              {
			                min: yAxisMin,
			                max: yAxisMax
			              }
			            ]
			          }
			        };
			      }
			      
			      let res = {
			        categories: categories,
			        series: series
			      };
			      
			      console.log("处理后的图表数据", res);
			      this.chartData = JSON.parse(JSON.stringify(res));
			    }, 500);
			  })
			},
			// 获取折线图
			gettj() {
				if (!this.stationCode) {
					this.stationCode = 'S_1'
				}
				this.$http.post('/applet/wxclient/getPplutionSummry?stationCode=' + this.stationCode).then(res => {
					this.zxtdata = res.data.data[0]
					this.ec.option.legend.data = ['总磷', '总氮', '硝态氮']
					this.ec.option.color = ['#19D58A', '#FFC53B', '#3BA0FF']
					this.ec.option.series = [{
							name: '总磷',
							type: 'line',
							stack: 'Total1',
							areaStyle: { //区域填充渐变颜色
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: 'rgba(25, 213, 138, 1)' // 0% 处的颜色
									}, {
										offset: 1,
										color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							},
							emphasis: {
								focus: 'series'
							},
							data: this.zxtdata.TPSummry
						},
						{
							name: '总氮',
							type: 'line',
							stack: 'Total2',
							areaStyle: { //区域填充渐变颜色
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: 'rgba(255, 197, 59, 1)' // 0% 处的颜色
									}, {
										offset: 1,
										color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							},
							emphasis: {
								focus: 'series'
							},
							data: this.zxtdata.TNSummry
						},
						{
							name: '硝态氮',
							type: 'line',
							stack: 'Total3',
							areaStyle: { //区域填充渐变颜色
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: 'rgba(59, 160, 255, 1)' // 0% 处的颜色
									}, {
										offset: 1,
										color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							},
							emphasis: {
								focus: 'series'
							},
							data: this.zxtdata.NOSummry
						},
					]
					if (this.array[this.index].indexOf('畜禽') != -1) {
						this.ec.option.legend.data = ['总磷', '总氮', 'COD', '氨氮']
						this.ec.option.color = ['#19D58A', '#FFC53B', '#3BA0FF', '#FF3B3B']
						this.ec.option.series = [{
								name: '总磷',
								type: 'line',
								stack: 'Total1',
								areaStyle: { //区域填充渐变颜色
									color: {
										type: 'linear',
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
											offset: 0,
											color: 'rgba(25, 213, 138, 1)' // 0% 处的颜色
										}, {
											offset: 1,
											color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
										}],
										global: false // 缺省为 false
									}
								},
								emphasis: {
									focus: 'series'
								},
								data: this.zxtdata.TPSummry
							},
							{
								name: '总氮',
								type: 'line',
								stack: 'Total2',
								areaStyle: { //区域填充渐变颜色
									color: {
										type: 'linear',
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
											offset: 0,
											color: 'rgba(255, 197, 59, 1)' // 0% 处的颜色
										}, {
											offset: 1,
											color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
										}],
										global: false // 缺省为 false
									}
								},
								emphasis: {
									focus: 'series'
								},
								data: this.zxtdata.TNSummry
							},
							{
								name: 'COD',
								type: 'line',
								stack: 'Total3',
								areaStyle: { //区域填充渐变颜色
									color: {
										type: 'linear',
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
											offset: 0,
											color: 'rgba(59, 160, 255, 1)' // 0% 处的颜色
										}, {
											offset: 1,
											color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
										}],
										global: false // 缺省为 false
									}
								},
								emphasis: {
									focus: 'series'
								},
								data: this.zxtdata.CODSummry
							},
							{
								name: '氨氮',
								type: 'line',
								stack: 'Total4',
								areaStyle: { //区域填充渐变颜色
									color: {
										type: 'linear',
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
											offset: 0,
											color: 'rgba(255, 59, 59, 1)' // 0% 处的颜色
										}, {
											offset: 1,
											color: 'rgba(255, 255, 255, 1)' // 100% 处的颜色
										}],
										global: false // 缺省为 false
									}
								},
								emphasis: {
									focus: 'series'
								},
								data: this.zxtdata.NHSummry
							},
						]
					}
				})
			},
			// 折线图切换站点
			bindPickerChange: function(e) {
				this.index = e.detail.value
				this.stationName = this.array[this.index]
				for (var i = 0; i < this.arrays.length; i++) {
					if (this.stationName == this.arrays[i].label) {
						this.stationCode = this.arrays[i].value
					}
				}
				// this.gettj()
				this.qushicov()
			},
			// 预警切换站点
			bindPickerChange1: function(e) {
				this.index1 = e.detail.value
				this.stationName1 = this.array1[this.index1]
				for (var i = 0; i < this.arrays.length; i++) {
					if (this.stationName1 == this.arrays1[i].label) {
						this.stationCode1 = this.arrays1[i].value
					}
				}
				if (this.stationName1 == '全部监测站点') {
					this.stationCode1 = null
				}
				this.pageNo = 1
				this.getyjList()
			},
			// 预警切换日期
			bindDateChange: function(e) {
				this.yearStr = e.detail.value
				this.date = e.detail.value
				this.pageNo = 1
				this.getyjList()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 10;
				} else if (type === 'end') {
					year = year + 10;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss">
	page {
		// height: 100%;
		background-color: #0f6efe;
	}

	.container {
		// height: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;
		overflow-y: scroll;
		overflow-x: hidden;
	}

	.bgimg {
		width: 100%;
		height: 2022rpx;
	}

	.pj {
		background: #FFFFFF;
		border-radius: 34rpx;
		padding: 41rpx 31rpx 33rpx;
	}

	.pjtitle {
		font-size: 32rpx;
		font-family: Source Han Sans SC;
		font-weight: bold;
		color: #2F3841;
		margin-bottom: 31rpx;
	}

	.ybecharts {
		width: 100%;
		height: 279rpx;
		margin-bottom: 38rpx;
		display: flex;
		justify-content: center;
		position: relative;
	}

	.ybecharts image {
		// position: absolute;
		width: 90%;
		height: 100%;
	}

	.ybechartstext {
		color: #2DC37B;
		font-size: 60rpx;
		position: absolute;
		bottom: 13rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.bot3 {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.bot3_left {
		border-right: 2rpx solid #E6E9EF;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 33%;
	}

	.bot3_left:last-child {
		border: none;
	}

	.bfb {
		font-size: 42rpx;
		font-family: DIN Next LT Pro;
		font-weight: 500;
		color: #184C9A;
	}

	.bfbname {
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #9CA9BE
	}

	.qst {
		background: #FFFFFF;
		border-radius: 34rpx;
		padding-top: 43rpx;
		padding-bottom: 34rpx;
		margin-top: 26rpx;
	}

	.qsttitle {
		font-size: 32rpx;
		font-family: Source Han Sans SC;
		font-weight: bold;
		color: #2F3841;
		padding-left: 33rpx;
	}

	.qstcontent {
		height: 400rpx;
		width: 98%;
		padding-left: 20rpx;
	}

	.uni-ec-canvas {
		width: 100%;
		height: 500rpx;
	}

	.search {
		height: 72rpx;
		padding: 0 32rpx 0;
		margin-top: 32rpx;
	}

	.uni-input {
		width: 100%;
		height: 72rpx;
		font-size: 28rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #667482;
		background: #F6F6F6;
		border-radius: 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 22rpx 25rpx;
	}

	.uni-input image {
		width: 44rpx;
		height: 44rpx;
	}

	.znyj {
		padding: 43rpx 31rpx 43rpx 32rpx;
		background: #FFFFFF;
		border-radius: 34rpx;
		margin-top: 26rpx;
	}

	.znyj_top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 32rpx;
	}

	.znyjtop_left {
		font-size: 32rpx;
		font-family: Source Han Sans SC;
		font-weight: bold;
		color: #2F3841;
	}

	.znyjtop_right {
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #B3C1D1;
	}

	.numbers {
		font-size: 34rpx;
		font-family: DIN Next LT Pro;
		font-weight: 500;
		color: #FF4343;
		margin-left: 9rpx;
		margin-right: 11rpx;
	}

	.sxbox {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.leftsxbox {
		width: 60%;
	}

	.rightsxbox {
		width: 35%;
	}

	.uni-input1 {
		width: 100%;
		height: 72rpx;
		background: #F6F6F6;
		border-radius: 16rpx;
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #667482;
		padding: 22rpx 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.uni-input1 image {
		width: 44rpx;
		height: 44rpx;
	}

	.uni-input2 {
		width: 100%;
		height: 72rpx;
		background: #F6F6F6;
		border-radius: 16rpx;
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #667482;
		padding: 22rpx 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.uni-input2 image {
		width: 44rpx;
		height: 44rpx;
	}

	.scrolltop {
		padding: 34rpx 0rpx 16rpx 0rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #F6F8FB;
	}

	.tabitem {
		font-size: 26rpx;
		font-family: Source Han Sans SC;
		font-weight: 500;
		color: #2F3841;
		display: inline-block;
		padding-bottom: 26rpx;
	}

	.tabitem:first-child {
		width: 31%;
		// text-align: center
	}

	.tabitem:nth-child(2) {
		width: 27%;
		// text-align: center
	}

	.tabitem:nth-child(3) {
		width: 19%;
		// text-align: center
	}

	.tabitem:nth-child(4) {
		flex: 1 // text-align: center
	}

	.scroll-Y {
		box-sizing: border-box;
	}

	.lists_item {
		padding-top: 35rpx;
		box-sizing: border-box;
		display: flex;
	}

	// .lists_item:first-child {
	// 	padding-top: 0;
	// }

	.jczbs {
		width: 32%;
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #667482;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		// text-align: center
	}

	.zbz {
		width: 27%;
		font-size: 24rpx;
		font-family: DIN Next LT Pro;
		font-weight: 400;
		padding-right: 10rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		// text-align: center
	}

	.sbsj {
		font-size: 24rpx;
		font-family: Source Han Sans SC;
		font-weight: 400;
		color: #667482;
		flex: 1;
		// text-align: center
		// text-align: right;
	}

	.szqss {
		width: 24rpx;
	}

	.zbzs {
		width: 19%;
		font-size: 24rpx;
		font-family: DIN Next LT Pro;
		font-weight: 400;
		padding-right: 10rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		// text-align: center
	}

	.load {
		// height: 50rpx;
		// line-height: 50rpx;
		text-align: center;
		color: #c6c6c6;
	}

	.pagebot {
		height: 100rpx;
	}
	// 选择年月日
	.radio-group {
		display: flex;
		justify-content: space-around;
		margin: 20rpx 32rpx 0;
		background: #F6F9FF;
		border-radius: 16rpx;
		.radio-label {
			display: flex;
			align-items: center;
			padding: 16rpx 32rpx;
			border-radius: 12rpx;
			transition: all 0.3s ease;
			// background: #F6F9FF;
			&:active {
				background: rgba(15, 110, 254, 0.1);
			}
			
			.radio-item {
				transform: scale(0.9);
				
				// 选中状态样式
				&.radio-checked {
					background-color: #0f6efe;
					border-color: #0f6efe;
				}
			}
			
			.radio-text {
				font-size: 28rpx;
				font-family: Source Han Sans SC;
				font-weight: 500;
				color: #667482;
				margin-left: 16rpx;
				transition: color 0.3s ease;
			}
			
			// 选中状态的文字样式
			// .radio-item[checked] + .radio-text {
			// 	color: #0f6efe;
			// 	font-weight: 600;
			// }
		}
	}
	
	// 适配暗色模式
	// @media (prefers-color-scheme: dark) {
	// 	.radio-group {
	// 		background: #1a1a1a;
	// 		.radio-label {
	// 			.radio-text {
	// 				color: #fff;
	// 			}
				
	// 			.radio-item[checked] + .radio-text {
	// 				color: #0f6efe;
	// 			}
	// 		}
	// 	}
	// }
	.qstim{
		width: 40%;
		display: block;
		margin: 0 auto;
		margin-top: 20rpx;
	}
	.qstim image {
		width: 44rpx;
		height: 44rpx;
	}
</style>