<template>
	<view class="page">
		<u-navbar :is-back="false" title="蜂箱" :border-bottom="false" :background="bgc" title-color='#3D3D3D '
			title-size='36' height='45' id="navbar">
		</u-navbar>
		<view class="top_cont">
			<view class="top_box">
				<view class="search">
					<image src="https://api.ccttiot.com/smartmeter/img/static/um5GxgXufKY8IK2qkaWR" mode=""></image>
					<view class="search_center">
						<input type="text" class="ips" @confirm="changserch" v-model="code" placeholder="请输入蜂箱编号"
							placeholder-class="my-placeholder" />
					</view>
				</view>
				<view class="add" @click="addApiary()">
					<image src="https://api.ccttiot.com/smartmeter/img/static/uR30yYn3IsHDu5qWV0ML" mode=""></image>
				</view>
			</view>
		</view>
		<!-- <view class="no_cont" v-if="logoflag">
			<view class="img">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uUZ3MF84e3bKgwAei8Rz" mode=""></image>
			</view>
			<view class="txt">
				当前还没有添加蜂箱哦
			</view>
		</view> -->
		<view class="fd">
			<!-- 刷新动画 -->
			<!-- <view class="shuaxin">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uO9UFjzbzS9YlabzL4HV" mode="aspectFit"></image>
			</view> -->
			
			<view class="fd_top u-skeleton-fillet">
				<view class="fd_da">
					<view class="fd_lt"
						:style="{ transform: `translateX(${-curtitidx * 100 > -300 ? 0 : -curtitidx * 120}rpx)`}">
						<view class="fd_tit" v-for="(item,index) in miyuancolumns" :key="index"
							:class="index == curtitidx ? 'act1' : ''" @click="btntab(index,item)">
							{{item.name == null ? '--' : item.name}} <text v-if="item.count != '-1'">({{item.count == null ? '0' : item.count}})</text>
							<view :class="index == curtitidx ? 'active' : ''"></view>
						</view>
					</view>
				</view>
			</view>
		
			<swiper class="swiper" style="height: 100%;" :current='curtitidx' @change="swiperchange"
				@touchstart="touchStart" @touchend="touchEnd">
				<swiper-item v-for="(items,index) in miyuancolumns" :key="index" class="">
					<view class="" v-if="items && items.wateringList && items.wateringList.length == 0"
						style="width: 100%;height: 200rpx;margin: auto;margin-top: 230rpx;text-align: center;">
						<image style="width: 200rpx;height: 200rpx;"
							src="https://api.ccttiot.com/smartmeter/img/static/uUZ3MF84e3bKgwAei8Rz" mode="aspectFit"></image>
						<view class="" style="font-size: 28rpx;color: #808080;margin-top: 30rpx;">暂未添加蜂箱...</view>
					</view>
					<view class="swiper_item">
						<view class="card_box" v-for="(item,indexs) in items.wateringList" :key="indexs" @click="todetail(item.beehiveId)">
							<view class="card">
								<view class="card_top">
									<view class="name">
										{{item.name == null ? '--' : item.name}}
									</view>
									<view class="online" :id="item.onlineStatus == 0 ? 'status' : ''">
										{{item.onlineStatus == 0 ? '离线' : '在线'}}
									</view>
									<view class="ele">
										<view class="type" @click.stop="btngengxin(item,index)">
											更新数据	
										</view>
										<view class="one">
											<image style="height: 25rpx;" v-if="item.surplusPowerPoint <= 100 && item.surplusPowerPoint >= 80" src="https://api.ccttiot.com/smartmeter/img/static/uWbKPMvIuFZjzviEJjmP" mode=""></image>
											<image style="height: 25rpx;" v-if="item.surplusPowerPoint < 80 && item.surplusPowerPoint >= 50" src="https://api.ccttiot.com/smartmeter/img/static/u0mCXpSrvcROLCMsahNh" mode=""></image>
											<image style="height: 25rpx;" v-if="item.surplusPowerPoint < 50 && item.surplusPowerPoint >= 20" src="https://api.ccttiot.com/smartmeter/img/static/uGGgEPbe8ryHspQPL2o8" mode=""></image> 
											<image style="height: 25rpx;" v-if="item.surplusPowerPoint < 20" src="https://api.ccttiot.com/smartmeter/img/static/uIRhPmP5WUJaIg0nft9E" mode=""></image> 
											{{item.surplusPowerPoint == null ? '--' : item.surplusPowerPoint}}%
										</view>
									</view>
								</view>
								<view class="card_top" style="margin-top: 20rpx;">
									<view class="txt">
										{{item.sn == null ? '--' : item.sn}}
									</view>
									<view class="line"></view>
									<view class="txt">
										{{item.apiaryName == null ? '--' : item.apiaryName}}
									</view>
									<view class="line"></view>
									<view class="txt">
										{{item.lastOnlineTime == null ? '--' : item.lastOnlineTime}}
									</view>
								</view>
								<view class="info_cont">
									<view class="info_li" v-for="(val,index) in item.modelTags" :key="index" v-if="val == 1">
										<view class="li_top">
											<image src="https://api.ccttiot.com/smartmeter/img/static/uk7CvwzeU0ukxvS9cBtD" mode=""></image>
											<view class="li_txt">
												{{item.totalWeight == 999999 ? '--' : (item.totalWeight / 1000).toFixed(1)}}
												<span>kg</span>
											</view>
										</view>
										<view class="li_bot">
										重量
										</view>
									</view>
									<view class="info_li" v-for="(val,index) in item.modelTags" :key="index" v-if="val == 3">
										<view class="li_top">
											<image src="https://api.ccttiot.com/smartmeter/img/static/una6Kbd2gdBZ9gG6lg44 " mode=""></image>
											<view class="li_txt">
												{{item.innerTemperature < -40 || item.innerTemperature > 100  ? '--' : item.innerHumidity}}
												<span>%</span>
											</view>
										</view>
										<view class="li_bot">
										箱内湿度
										</view>
									</view>
									<view class="info_li" v-for="(val,index) in item.modelTags" :key="index" v-if="val == 3">
										<view class="li_top">
											<image src="https://api.ccttiot.com/smartmeter/img/static/uWjV9HEHrP5g0B5AHD1j" mode=""></image>
											<view class="li_txt">
												{{item.innerTemperature  < -40 || item.innerTemperature > 100 ? '--' : item.innerTemperature}}
												<span>℃</span>
											</view>
										</view>
										<view class="li_bot">
										箱内温度
										</view>
									</view>
									<view class="info_li" v-for="(val,index) in item.modelTags" :key="index" v-if="val == 2">
										<view class="li_top">
											<image src="https://api.ccttiot.com/smartmeter/img/static/uhsU6Y1K35jxA4aRauzy" mode=""></image>
											<view class="li_txt">
												{{item.ioCountDay == null ? '--' : item.ioCountDay}}
												<span>次</span>
											</view>
										</view>
										<view class="li_bot">
										出勤
										</view>
									</view>
									<view class="info_li" v-for="(val,index) in item.modelTags" :key="index" v-if="val == 4">
										<view class="li_top">
											<image src="https://api.ccttiot.com/smartmeter/img/static/una6Kbd2gdBZ9gG6lg44" mode=""></image>
											<view class="li_txt">
												{{ item.outerHumidity < -40 || item.outerHumidity > 100 || item.outerTemperature < -40 || item.outerTemperature > 100 ? '--' : item.outerHumidity}}
												<span>%</span>
											</view>
										</view>
										<view class="li_bot">
										箱外湿度 
										</view>
									</view>
									<view class="info_li" v-for="(val,index) in item.modelTags" :key="index" v-if="val == 4">
										<view class="li_top">
											<image src="https://api.ccttiot.com/smartmeter/img/static/uWjV9HEHrP5g0B5AHD1j" mode=""></image>
											<view class="li_txt">
												{{item.outerTemperature  < -40 || item.outerTemperature > 100 || item.outerHumidity < -40 || item.outerHumidity > 100 ? '--' : item.outerTemperature}}
												<span>℃</span>
											</view>
										</view>
										<view class="li_bot">
										箱外温度
										</view>
									</view>
									<view class="info_li" v-for="(val,index) in item.modelTags" :key="index" v-if="val == 9">
										<view class="li_top">
											<image src="https://api.ccttiot.com/smartmeter/img/static/um4lfl5q2O7FNM1EQc2L" mode=""></image>
											<view class="li_txt">
												{{item.innerCo2 == 0 ? '--' : item.innerCo2}}
												<span>ppm</span>
											</view>
										</view>
										<view class="li_bot">
										二氧化碳
										</view>
									</view>

									<view class="info_li" v-for="(val,index) in item.modelTags" :key="index" v-if="val == 10">
										<view class="li_top">
											<image src="https://api.ccttiot.com/smartmeter/img/static/up9IaGzSg1RKhIZz3V7a" mode=""></image>
											<view class="li_txt">
												{{item.volume / 1000 == 0 ? '--' : (item.volume / 1000).toFixed(1)}}
												<span>khz</span>
											</view>
										</view>
										<view class="li_bot">
										频率
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		

		<tab-bar :indexs='2' style=""></tab-bar>
        <u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: " #FAFDFD",
				},
				code: '',
				swiperHeight:554,
				curtitidx:0,
				miyuancolumns: [{name:'全部',count:'0'}],
				pagesum: 1,
				pagesize: 99,
				pagesizes: 10,
				fxlist:[],
				total: '',
				apiaryId:'',
				indextab:0,
				logoflag:false,
				wateringList:[],
				touchStartX: 0, // 触屏起始点x
				touchStartY: 0, // 触屏起始点y  
				qingqiuflag:true,
				shujuflag: false,
			}
		},
		onLoad() {
			
		},
		onShow() {
		   this.indextab = 0
		   this.pagesum = 1
		   this.miyuancolumns = []
           this.getmiyuancolumns()
		},
		onUnload() {
			
		},
		methods: {
			
			touchStart(e) {
				this.touchStartX = e.touches[0].clientX;
				this.touchStartY = e.touches[0].clientY;
			},
			// 松开
			touchEnd(e) {
				let deltaX = e.changedTouches[0].clientX - this.touchStartX;
				let deltaY = e.changedTouches[0].clientY - this.touchStartY;
				if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
					if (deltaX >= 0) {
						// console.log("左滑")  
					} else {
						// console.log("右滑")  
					}
				} else if (Math.abs(deltaY) > 50 && Math.abs(deltaX) < Math.abs(deltaY)) {
					if (deltaY < 100) {
						console.log("上滑")  
						if(this.qingqiuflag == true){
							if (this.miyuancolumns[0].wateringList.length  < this.total) {
								this.qingqiuflag = false
								this.getlist() 
							}
						}
					} else {
						console.log(deltaY)
						if (deltaY > 250) {
				
						}
					}
				}
			},
			

			// 刷新蜂箱最新数据
			btngengxin(item, index) {
				uni.showLoading({
				    title: '数据更新中...',
				    mask: true
				});
				this.$u.put(`app/beehive/iot/${item.beehiveId}/upload`).then(res => {
					if(res.code == 200){
						setTimeout(()=>{
							this.$u.get(`app/beehive/${item.beehiveId}?refreshIot=true`).then(res => {
							    if (res.code === 200) {
							        uni.showToast({
							            title: res.msg,
							            icon: 'success',
							            duration: 2000
							        })
							        const wateringList = this.miyuancolumns[index].wateringList;
							        const matchingIndex = wateringList.findIndex(val => val.beehiveId === item.beehiveId);
							        if (matchingIndex !== -1) {
							            console.log('Before update:', wateringList[matchingIndex]); // 检查更新前的对象
							            Object.assign(wateringList[matchingIndex], res.data);
							            console.log('After update:', wateringList[matchingIndex]); // 检查更新后的对象
							        }
							    } else {
							        uni.showToast({
							            title: res.msg,
							            icon: 'none',
							            duration: 2000
							        })
							    }
							}).catch(error => {
							    uni.showToast({
							        title: '请求失败，请稍后再试',
							        icon: 'none',
							        duration: 2000
							    })
							})
						},2000)
					}
				})
			},
			// 进行蜂箱搜索
			changserch(){
				this.pagesum = 1
				this.getlist()
			},
			// 点击蜂箱详情进行页面跳转
			todetail(beehiveId){
				uni.navigateTo({
					url:'/page_Beehive/Beehive_detail?beehiveId=' + beehiveId
				})
			},
			// 点击tab请求tab中的蜂箱
			btntab(index,item){
				this.curtitidx = index
				this.pagesum = 1
				this.apiaryId = this.miyuancolumns[this.curtitidx].value
				this.getlist()
			},
			// 请求蜂箱列表
			getlist(){
				let data = {
					pageNum:this.pagesum,
					pageSize:this.pagesizes,
					apiaryId:this.apiaryId,
					refreshIot:true,
					name:this.code,
				}
				this.$u.get('/farm/beehive/list', data).then(res => {
					if(res.code == 200){
						uni.hideLoading()
						this.total = res.total
							if(this.pagesum > 1){
								this.wateringList = res.rows
								this.qingqiuflag = true
								this.miyuancolumns.forEach(groupItem => {
								    groupItem.wateringList 
								})
								this.wateringList.forEach(wateringItem => {  
								    this.miyuancolumns[0].wateringList.push(wateringItem)
								})
								this.wateringList.forEach(wateringItem => {  
								    this.miyuancolumns.forEach(groupItem => {  
								        if (groupItem.value !== null && wateringItem.apiaryId !== null && groupItem.value == wateringItem.apiaryId) {  
								            if (!groupItem.wateringList.some(item => item.apiaryId === wateringItem.apiaryId)) {  
								                groupItem.wateringList.push(wateringItem)
								            }  
								        }  
								    })  
								})
								uni.hideLoading()
								if(this.total > this.miyuancolumns.length){
									this.pagesum++
								}
							}else{
								this.wateringList = res.rows  
								this.qingqiuflag = true
								this.miyuancolumns.forEach(groupItem => {  
								    groupItem.wateringList = []
								})
								this.wateringList.forEach(wateringItem => {  
								    this.miyuancolumns[0].wateringList.push(wateringItem);  
								})
								this.wateringList.forEach(wateringItem => {  
								    this.miyuancolumns.forEach(groupItem => {  
								       if (groupItem.value !== null && wateringItem.apiaryId !== null && groupItem.value == wateringItem.apiaryId) {  
								           groupItem.wateringList.push(wateringItem)
								       }
								    })
								})   
								uni.hideLoading()
								if(this.total > this.miyuancolumns.length){
									this.pagesum++
								}
							}
					}else{
						uni.hideLoading()
					}
				})
			},
			// 请求蜂箱tab导航栏
			getmiyuancolumns() {
				let data = {
					pageNum: this.pagesum,
					pageSize: this.pagesize
				};
				this.$u.get('/farm/apiary/list', data).then((res) => {
					if (res.code === 200) {
						this.miyuancolumns = res.rows.map(item => ({
							value: item.apiaryId,
							name: item.name,
							count:item.beehiveCount
						}))
						this.miyuancolumns.unshift({ name: '全部',value:'',count:'-1'})
						console.log(this.miyuancolumns);
						this.apiaryId = this.miyuancolumns[0].value
						this.getlist()
					} else {
				
					}
				})
			},
			swiperchange(e) {
				this.curtitidx = e.detail.current
				this.pagesum = 1
				this.apiaryId = this.miyuancolumns[this.curtitidx].value
				this.getlist()
			},
			// 点击跳转到添加蜂箱页面
			addApiary(){
				uni.navigateTo({
					url:'/page_Beehive/add_Beehive'
				})
			}
		}
	}
</script>

<style lang="scss">
	.active{
		border-bottom: 3px solid #FFC107;
		font-weight: 600;
		font-size: 40rpx;
		display: block !important; 
		width: 46rpx;
		height: 46rpx;
		background: #FFC107;
		border-radius: 50%;
		position: absolute;
		top: 4rpx;
		left: 0rpx;
		opacity: .7;
		z-index: -1;
	}
	#status{
		background-color: #808080;
	}
	page {
		background-color: #FAFDFD;
	}
	.card_top{
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		.txt{
			font-weight: 500;
			font-size: 24rpx;
			color: #808080;
		}
		.line{
			margin-left: 18rpx;
			margin-right: 18rpx;
			width: 0rpx;
			height: 30rpx;
			border: 2rpx solid #808080;
		}
		.name{
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
		}
		.online{
			margin-left: 26rpx;
			padding: 6rpx 10rpx;
			background: #4CD964;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
		}
		.type{
			margin-left: 24rpx;
			padding: 6rpx 10rpx;
			background: #FFC107;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
		}
		.ele{
			margin-left: auto;
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			font-weight: 400;
			font-size: 28rpx;
			color: #808080;
			.type{
				margin-left: 24rpx;
				padding: 6rpx 10rpx;
				background: #FFC107;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				margin-right: 20rpx;
			}
			image{
				margin-right: 12rpx;
				width: 46rpx;
				height: 46rpx;
			}
		}
	}
	.info_cont{
		display: flex;
		flex-wrap: wrap;
		.info_li:nth-child(3n){
			margin-right: 0;
		}
		.info_li{
			margin-top: 28rpx;
			width: 33%;
			.li_top{
				display: flex;
				flex-wrap: nowrap;
				image{
					width: 36rpx;
					height: 36rpx;
				}
				.li_txt{
					margin-left: 12rpx;
					display: flex;
					align-items: flex-start;
					font-weight: 600;
					font-size: 30rpx;
					color: #3D3D3D;
					span{
						font-size: 20rpx;
					}
				}
			}
			.li_bot{
				margin-left: 4rpx;
				margin-top: 14rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #3D3D3D;
			}
		}
	} 
	.page {
		width: 750rpx;
		.swiper {
			height: 62vh !important;
			// padding-bottom: 230rpx;
			box-sizing: border-box;
			.swiper-item {
		        overflow: scroll;
				height: 100%;
				.card_box {
					margin: 0 auto;
					padding: 20rpx 24rpx;
					margin-top: 24rpx;
					width: 674rpx;
					max-height: 100%;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.15);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
				}
			}
		}
		.top_cont {
			padding: 0 38rpx;
			.tabbar::-webkit-scrollbar {
				width: 0 !important;
			}
			.tabbar {
				display: flex;
				overflow-y: hidden;
				overflow-x: auto;
				white-space: nowrap;
				/* 防止换行 */
				-webkit-overflow-scrolling: touch;
				/* 优化触摸滚动 */
				.cont {
					margin-right: 30rpx;
					font-weight: 400;
					font-size: 36rpx;
					color: #3D3D3D;
					position: relative;
					.gl{
						width: 46rpx;
						height: 46rpx;
						background: #FFC107;
						border-radius: 50%;
						position: absolute;
						top: 4rpx;
						left: 0rpx;
						opacity: .7;
						z-index: -1;
						display: none;
					}
				}
			}
			.top_box {
				margin: 42rpx auto;
				display: flex;
				flex-wrap: nowrap;
				width: 664rpx;
                align-items: center;
				.search {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					padding: 20rpx 26rpx;
					width: 566rpx;
					height: 82rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					image {
						width: 35.97rpx;
						height: 35.97rpx;
					}
					.search_center {
						margin-left: 34rpx;
						width: 480rpx;
						.ips {
							// 基本样式设置
							width: 100%; // 根据需要调整
						}
						.my-placeholder {
							font-weight: 400;
							font-size: 32rpx;
							color: #808080;
						}
					}
				}
				.add {
					margin-left: 30rpx;
					width: 66rpx;
					height: 66rpx;
				}
			}
		}
		.no_cont {
			margin: 152rpx auto 0;
			width: 432rpx;
			.img {
				image {
					width: 432rpx;
					height: 432rpx;
				}
			}
			.txt {
				margin-top: 50rpx;
				width: 100%;
				text-align: center;
				font-weight: 500;
				font-size: 32rpx;
				color: #808080;
			}
		}
	}
	.fd {
		margin-top: 20rpx;
		padding: 0 40rpx;
		padding-bottom: 200rpx;
		height: 100%;
	
		.fz {
			margin: 0 -40rpx;
			position: fixed;
			bottom: 0;
			width: 750rpx;
			height: 830rpx;
			background: #F7FAFE;
			border-radius: 30rpx 30rpx 0 0;
			z-index: 10071;
			opacity: 0;
			animation-name: fadeIn;
			animation-duration: 1s;
			animation-fill-mode: forwards;
	
			.fz_top {
				margin: 18rpx 0 auto;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
	
				.icon-shanchu {
					margin-left: 40rpx;
					font-size: 50rpx;
				}
	
				.tit {
					font-size: 36rpx;
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					color: #000000;
				}
	
				.txt {
					margin-right: 40rpx;
					font-size: 36rpx;
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					color: #2A82E4;
	
				}
			}
	
			.card_cont {
				width: 750rpx;
				padding-left: 30rpx;
				height: 100%;
				overflow-y: auto;
				overflow-x: hidden;
	
				.cards {
					margin-top: 32rpx;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					justify-content: space-between;
					padding: 0 40rpx;
					width: 682rpx;
					border-radius: 30rpx;
					height: 114rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
	
					.txt {
						font-size: 36rpx;
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						color: #000000;
					}
	
					.num {
						font-size: 36rpx;
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						color: #000000;
					}
				}
			}
		}
	
		.fd_top {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
	        margin-bottom: 20rpx;
			.fd_da {
				width: 664rpx;
				overflow: hidden;
				overflow-x: auto;
				white-space: nowrap;
				-ms-overflow-style: none;
				/* 去除IE和Edge的默认滚动条 */
				scrollbar-width: none;
	
				/* 去除Firefox的默认滚动条 */
				&::-webkit-scrollbar {
					display: none;
				}
	
				.fd_lt {
					display: flex;
					transition: transform 0.3s ease;
					padding-top: 10rpx;
	
					.fd_tit {
						text-align: center;
						padding: 0 15rpx;
						box-sizing: border-box;
						font-size: 34rpx;
						font-weight: 400;
						color: #666;
	                    position: relative;
					}
				}
			}
	
			.act1 {
				font-size: 36rpx !important;
				font-weight: 700 !important;
				color: #000000 !important;
			}
	
	
	
	
			.right {
				margin-left: auto;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
	
				.fd_set {
					font-size: 60rpx;
				}
	
				.icon-liebiao {
					margin-top: 10rpx;
					margin-left: 20rpx;
					font-size: 40rpx;
				}
			}
	
		}
	
		.shebei {
			width: 750rpx;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			text-align: center;
			padding-top: 300rpx;
			font-size: 32rpx;
			color: #ccc;
		}
	
		.swiper {
	
			.swiper_item {
				height: 100vh;
				overflow-y: auto;
				padding-bottom: 660rpx;
	
				.card_box {
					margin-top: 34rpx;
					display: flex;
					flex-wrap: wrap;
	
					.card {
						// display: flex;
						// margin-top: 20rpx;
						width: 680rpx;
						max-height: 500rpx;
						padding-bottom: 20rpx;
						box-sizing: border-box;
						background: #fff;
						padding: 20rpx;
						// box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(255, 255, 255, 0);
						 box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
						border-radius: 24rpx 24rpx 24rpx 24rpx;
	
						.card_left {
							width: 100%;
							margin-top: 20rpx;
							margin-left: 50rpx;
	
							.card_left_tit {
								font-size: 36rpx;
								font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
								font-weight: 600;
								color: #8883F0;
							}
	
							.card_left_sta {
	
								padding-top: 15rpx;
								display: flex;
								flex-wrap: nowrap;
								align-items: center;
	
								image {
									width: 23.32rpx;
									height: 36.47rpx;
	
								}
	
								.sta_txt {
									// margin-left: 15rpx;
									color: #262B37;
									font-size: 26rpx;
									font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
									font-weight: 400;
								}
							}
	
							.card_left_no {
								padding-top: 15rpx;
								font-size: 26rpx;
								font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
								font-weight: 400;
								color: #95989D;
							}
						}
	
						.card_right {
							margin-top: 30rpx;
							margin-left: auto;
							margin-right: 50rpx;
	
							image {
								width: 180rpx;
								height: 180rpx;
								border-radius: 10rpx;
							}
						}
					}
				}
			}
		}
	
	}
</style>