<!-- 道路救援 首页-->
<template>
	<view class="content">
		<!-- 顶部 -->
		<view class="content-top" :style="{ paddingTop: homeHeaderPaddingTop + 'px' }">
			<view class="top-two">
				<view class="top-left">
					<view class="left1">
						<text>日期</text>
					</view>
					<view class="left2">
						<text>{{currentTime || ''}}</text>
					</view>
				</view>
				<!-- #ifdef APP-PLUS || H5 -->
				<view class="top-right">
					<view class="">{{positionInfo}}</view>
					<!-- <view class=""> -->
						<image class="top-right-icon" src="@/static/icons/bottom.png" mode="aspectFit"></image>
						<!-- <uni-icons type="location-filled" color="#fff" size="16"></uni-icons> -->
					<!-- </view> -->
				</view>
				<!-- #endif -->
			
			</view>
			<view class="top-menu">
				<view class="top-menu-item" :key="index" v-for="(item, index) in topMenuList" @click="goToMenuPage(item)">
					<image class="top-menu-item-icon" :src="item.icon" mode="aspectFit"></image>
					<text>{{ item.title }}</text>
				</view>
			</view>
		</view>
		<view class="dil">
			<!-- 四个选项 -->
			<!-- #ifdef APP-PLUS || H5 -->
			<view class="four-box-header">
				<text class="four-box-header-title">我的订单</text>
				
				<view class="four-box-header-extra">
					<text style="color: #929292;">待评价</text>
					<uni-icons type="right" color="#929292"></uni-icons>
				</view>
			</view>
			<view class="four-box">
				<view class="boxf" @click="goToOrder(2)">
					<view class="zi2">{{dzfNum}}</view>
					<view class="zi1">
						<image class="zi1-icon" src="@/static/icons/homeOrderCard/dzf.png" mode="aspectFit"></image>
						<text>待支付</text>
					</view>
				</view>
				<view class="boxf1" @click="goToOrder(3)">
					<view class="zi2">{{dqcNum }}</view>
					<view class="zi1">
						<image class="zi1-icon" src="@/static/icons/homeOrderCard/dqc.png" mode="aspectFit"></image>
						<text>待取车</text>
					</view>
				</view>
				<view class="boxf2" @click="goToOrder(1)">
					<view class="zi2">{{jyzNum}}</view>
					<view class="zi1">
						<image class="zi1-icon" src="@/static/icons/homeOrderCard/jyz.png" mode="aspectFit"></image>
						<text>救援中</text>
					</view>
				</view>
				<view class="boxf3" @click="goToOrder(5)">
					<view class="zi2">{{ywcNum }}</view>
					<view class="zi1">
						<image class="zi1-icon" src="@/static/icons/homeOrderCard/ywc.png" mode="aspectFit"></image>
						<text>已完成</text>
					</view>
				</view>
			</view>
			<view class="yijian">
				<view class="y-left" @click="getyi()">
					<view class="">立即救援</view>
				</view>
				<!-- <view class="y-right" @click="goisAppointment()">
				<view class="">预约</view>
			</view> 	 -->

			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="box">
				<!-- <view class="xz-box" id="y1" @click="getsxwhat(1)">
					<view class="box-wenzi">拖车</view>
				</view>
				<view class="xz-box" id="y2" @click="getsxwhat(2)">
					<view class="box-wenzi">送油</view>
				</view>
				<view class="xz-box" id="y3" @click="getsxwhat(3)">
					<view class="box-wenzi">搭电</view>
				</view>
				<view class="xz-box" id="y4" @click="getsxwhat(4)">
					<view class="box-wenzi">换胎</view>
				</view> -->
				<template v-for="(item, index) in busiTypeList">
					<view :key="index" class="xz-box" :class="{ checked: busiType === index + 1 }" @click="getsxwhat(index + 1)">
						<image class="xz-box-icon" :src="item.icon" mode="aspectFit"></image>
						<view class="box-wenzi">{{item.label}}</view>
						<view class="checkedFlag">
						</view>
						<!-- <uni-icons type="plus"></uni-icons> -->
						<uni-icons class="checkedFlagIcon" type="checkmarkempty" size="22" color="#fff"></uni-icons>
					</view>
				</template>
				<!-- 	<view class="xz-box" v-if="role[0] == 'jjdd' " id="y5" @click="getsx(5)">
				<view class="box-wenzi">扣车</view>
			</view> -->
			</view>
			<!-- #endif -->

			<!-- 标签切换  -->


<!-- 			<view class="box-tap">
				<view class="tap-left">

					<view class="left-img1" @click="getone()" v-if="one == true">
						<image src="../../static/jyz.png" mode=""></image>
						<view class="gang"></view>
					</view>
					<view class="zi3" style="margin-right: 20px;" v-if="one == false" @click="getone()">救援中</view> -->

					<!-- <view class="left-img1" v-if="one == false" @click="getone()">
					<image src="../../static/jyls.png" mode=""></image>
					<view class="gang"></view>
				</view> -->

					<!-- <view class="zi3" @click="getone()" v-if="one == true">救援历史</view> -->
<!-- 				</view>
				<view class="tap-right" @click="gohistory()">
					<view class="zi3">
						历史订单
					</view>
					<view class="">
						<uni-icons color: #666666; type="right" size="18"></uni-icons>
					</view>
				</view>
			</view> -->
			<view class="four-box-header">
				<text class="four-box-header-title">救援推荐</text>
				
				<view class="four-box-header-extra" @click="gohistory()">
					<text style="color: #929292;">历史订单</text>
					<uni-icons type="right" color="#929292"></uni-icons>
				</view>
			</view>
			<view class="tap-box">
				<view class="ques" v-if="orderList.length== 0 ">
					<image src="../../static/quesheng.png" mode="aspectFit"></image>
				</view>
				<view style="display: flex;flex-direction: column;row-gap: 10px;" v-else>
					<order-card :status="1" @deleteOk="deleteOrderHandle" @refresh="getlist" v-for="(item, index) in orderList" :key="index" :orderData="item"></order-card>
				</view>
				<!-- <view class="boxt" v-for="(item,index) in orderList" :key="index">
					<view class="boxt-left" @click="godetail(item.id)">
						<view class="left-lan">
							<view class="">{{item.rescueTypeStr}}</view>
						</view>
						<view class="text1">{{item.rescuePosition}}</view>
						<view class="" v-if="item.rescueStatus == 1">
							<view class="lanzi" style="margin-left: 25px; margin-top: 10px;">预约单</view>
							<view class="text2">{{item.rescueTime || ''}}</view>
						</view>
						<view class="" v-if="item.rescueStatus == 2">
							<view class="lanzi" style="margin-left: 25px; margin-top: 10px;">系统正在派单中...</view>
							<view class="text2">{{item.rescueTime || ''}}</view>
						</view>
						<view class="" v-if="item.rescueStatus  > 2">
							<view class="text2"><text class="lanzi">
									{{item.driverName || ''}}</text> <text style="margin-left: 2px;margin-right: 2px;">
									驾驶 </text><text class="lanzi">{{item.driverCarNum||""}}</text></view>
							<view class="text2">救援车辆距 <text class="lanzi"> {{item.distance / 1000 || 0}}KM</text>
							</view>
							<view class="text2">预计 <text class="lanzi">{{item.needTime || 0}}分钟</text> 到达</view>
							<view class="text2">{{item.rescueTime || ''}}</view>
						</view>

					</view>
					<view class="boxt-right">
						<view class="zhtai">
							<view class="">{{item.rescueStatusStr}}</view>
						</view>
						<view class="dianhua" v-if="role == 'ddzx' && item.rescueStatus <= 2  ">
							<view>
								<view @click="getzhipai(item.id)" style="margin-bottom: 20px;" class="">指派司机</view>
								<view class="dianhuad" @click="deleteId(item.id)" v-if="item.rescueStatusStr == '待救援' ">
									<text>删除</text>

								</view>
							</view>
						</view>
						<view class="dianhua" v-if="item.rescueStatus > 2" @click="gettel(item.driverPhoneNum)">
							<view class="ticon">
								<image src="../../static/dh.png" mode=""></image>
							</view>
							<view class="">联系司机</view>
						</view>
					</view>
				</view> -->

			</view>
			<!-- 一键救援 -->

			<view style="width: 100%; height: 80px; "></view>
			<!-- dibu -->
		</view>
		<u-modal :show="showDelete" :title="title" :showCancelButton="true" @confirm="confirm"
			@cancel="cancel"></u-modal>
		<u-popup :show="showp" @close="close" mode="center" :round="10">
			<scroll-view scroll-y style="height: 200px;">
				<view class="box_">
					<view class="title_">车辆提醒</view>
					<view class="size_" v-for="(item,index) in warnList" :key="index">{{item}}</view>

				</view>
			</scroll-view>
			<view class="annaiu" @click="showp=false">
				<view class="">确定</view>
			</view>
		</u-popup>
		<tabBar :msg="msg"></tabBar>
	</view>
</template>

<script>
	import request from '../../utils/request';
	import tabBar from '../../components/tabBar/tabBar.vue'
	import {
		getToken
	} from '@/utils/auth'
// #ifdef APP
	const keepAlivePlugin = uni.requireNativePlugin('Ba-KeepAlive')
	const jyJPush = uni.requireNativePlugin('JY-JPush');
// #endif
	import OrderCard from '@/components/orderCard/OrderCard.vue'
	import {getWXStatusHeight} from '@/utils/utils.js'
	// import { getWeather } from'../../utils/Weather'
	export default {
		data() {
			return {
				// #ifdef MP
				homeHeaderPaddingTop: 0,
				homeHeaderMenuHeight: 0,
				homeHeaderMenuLeft: 0,
				// #endif
				// #ifdef APP || H5
				homeHeaderPaddingTop: uni.upx2px(90),
				homeHeaderMenuHeight: 50,
				homeHeaderMenuLeft: 0,
				// #endif
				busiTypeList: [{
						label: '拖车',
						icon: require('@/static/icons/order/tuoche.png')
					},
					{
						label: '送油',
						icon: require('@/static/icons/order/songyou.png')
					},
					{
						label: '搭电',
						icon: require('@/static/icons/order/dadian.png')
					},
					{
						label: '换胎',
						icon: require('@/static/icons/order/huantai.png')
					},
					// {
					// 	label: '扣车',
					// 	icon: require('@/static/icons/order/tuoche.png')
					// },
				],
				topMenuList: [
					{
						title: '我的订单',
						path: '/pages/rescue/historylist?id=1',
						icon: require('@/static/icons/homeTopMenu/icon_tenement.png')
					},
					{
						title: '车辆管理',
						path: '/pages/my/carManage',
						icon: require('@/static/icons/homeTopMenu/icon_clean.png')
					},
					{
						title: '数据统计',
						path: '/pages/my/StatisticsInfo',
						icon: require('@/static/icons/homeTopMenu/icon_maintain.png')
					},
					{
						title: '消息通知',
						path: '/pages/message/message',
						icon: require('@/static/icons/homeTopMenu/icon_fitment.png')
					}
				],
				msgSocket: this.$msgSocket,
				showp: false,
				title: '是否确认删除',
				content: '是否确认删除',
				dqcNum: 0,
				dzfNum: 0,
				jyzNum: 0,
				ywcNum: 0,
				role: [],
				currentTime: '',
				cityName: '济南',
				positionInfo: '泸州',
				msg: '1',
				total: 0,
				pageNum: 1, //第几页
				pageSize: 10, //一页多少张
				totalPages: 0, //总数
				orderList: [
					// {
					// 	rescueTypeStr: '扣车',
					// 	rescuePosition: '四川省泸州市江阳区酒谷大道四段18号泸州',
					// 	rescueStatus: 2,
					// 	rescueStatusStr: '待救援',
					// 	driverName: '先伟',
					// 	driverCarNum: '川E69752',
					// 	distance: 12800,
					// 	needTime: 26,
					// 	rescueTime: '2024-08-12 08:42'
					// }
				],
				sjlist: [],
				showDelete: false,
				arrbox: [
					// {text:'待支付',id:1},
					// {text:'待评价',id:2},
				],
				keepLive: {
					channelId: 'Ba-KeepAlive',
					channelName: "Ba-KeepAlive",
					title: "蓝安救援正在运行",
					content: "蓝安救援正在运行",
					dataResult: "",
					type: undefined
				},
				one: true,
				warnList: []

			}
		},
		onLoad() {
			this.role = uni.getStorageSync('role')
			this.$startMsgSocket(uni.getStorageSync('userId'))
			this.register()
			this.jyPushStart()
			console.log(require('@/static/icons/homeTopMenu/icon_tenement.png'), "require");
			
			// #ifdef MP
			const {barHeight, barTop, menuButtonLeft} = getWXStatusHeight()
			console.log('barHeight, barTop, menuButtonLeft: ',barHeight, barTop, menuButtonLeft);
			this.homeHeaderPaddingTop = barTop || 0
			this.homeHeaderMenuHeight = barHeight
			this.homeHeaderMenuLeft = menuButtonLeft - 6
			// #endif
		},
		onShow() {
			this.timeWeekFormat()
			//this.getWarnList()
			if (getToken()) {
				this.Fourhammers()
				this.getlist()
			} else {
				return
			}
		},
		onReachBottom() {
			if (this.pageNum >= this.totalPages) {
				uni.showToast({
					title: '没有下一页数据',
					icon: 'none'
				})
			} else {
				this.pageNum++
				this.getlist()
			}
		},
		components: {
			tabBar,
			OrderCard
		},
		methods: {
			jyPushStart() {
				console.log("jyPushStart", jyJPush);
				//  暂时只有安卓支持
				jyJPush.registerSDKCallBack(sdkCallBack => {
					//  这里会返回regid，
					console.log("sdk Callback 结果 " + JSON.stringify(sdkCallBack));
				})

				// 此处只是演示 授权，实际应该弹出自己的隐私授权页面，或者用uniapp提供的隐私协议
				setTimeout(function() {
					jyJPush.setAuth({
						auth: "1"
					}, res => {
						console.log("auth 结果 " + JSON.stringify(res));
						if (res.errorCode == 0) {
							//  安卓需要单独调用
							if (uni.getSystemInfoSync().platform == 'android') {
								jyJPush.android_init(initRes => {
									console.log("init 结果 " + JSON.stringify(initRes));
									jyJPush.deleteJYJPushAlias({
										//  可以不用传值进去，但是需要配置这项数据
									}, result => {

										jyJPush.setJYJPushAlias({
											userAlias: uni.getStorageSync('userId')
										}, result => {
											//  设置成功或者失败，都会通过这个result回调返回数据；数据格式保持极光返回的安卓/iOS数据一致
											//  注：若没有返回任何数据，考虑是否初始化完成
											console.log('setJYJPushAlias', result);
											jyJPush.getJYJPushAlias({
												//  可以不用传值进去，但是需要配置这项数据
											}, result => {
												console.log(
													'getJYJPushAlias',
													result);
											});


										});
									});

								})
							}
						}
					})
				}, 5000);
			},
			msgInfo() {
				if (this.msgSocket) {

					this.msgSocket.onMessage(res => {
						console.log('触发首页的消息回调');
						this.singleList = []
						this.getthreelist()
						this.driverRescuePage()

					})
				}
			},
			/**
			 * 导航菜单跳转
			 */
			goToMenuPage(item) {
				uni.navigateTo({
					url: item.path
				})
			},
			isRunning() { //是否正在运行
				keepAlive.isRunning((res) => {
					console.log('保活服务验证', res);

				});
			},
			restart() { //重启
				keepAlive.restart((res) => {
					console.log('重启保活服务', res);

				})
			},
			register() { //注册
				// #ifdef APP
				console.log('keepAlive', keepAlivePlugin);
				keepAlivePlugin.register({
						channelId: this.keepLive.channelId,
						channelName: this.keepLive.channelName,
						title: this.keepLive.title,
						content: this.keepLive.content,
					},
					(res) => {
						console.log('保活注册', res);
					});
				// #endif
			},
			deleteOrderHandle() {
				this.pageNum = 1
				this.orderList = []
				this.getlist()
			},
			getWarnList() {
				this.warnList = []
				request({
					url: "/system/rescueCar/warnList",
					method: 'get',
				}).then(res => {
					this.warnList = res.data
					if (this.warnList.length > 0) {
						this.showp = true
					}
				})
			},
			goToOrder(type) {
				uni.navigateTo({
					url: '/pages/rescue/historylist?id=' + type
				})
			},
			gettel(num) {
				uni.makePhoneCall({
					phoneNumber: num //仅为示例
				});
			},
			getsxwhat(id) {
				uni.navigateTo({
					url: '/pages/rescue/initiate?id=' + id + '&isAppointment=' + this.isAppointment
				})
			},
			Fourhammers() {

				request({
					url: '/app/rescueInfo/getRescueStatistics',
					method: 'get',
				}).then((res) => {
					console.log('四个', res);
					this.dqcNum = res.data.dqcNum
					this.dzfNum = res.data.dzfNum
					this.jyzNum = res.data.jyzNum
					this.ywcNum = res.data.ywcNum


				})
			},
			timeWeekFormat() {
				//定义一个日期对象;
				var dateTime = new Date();
				//获得系统年份;
				var year = dateTime.getFullYear();
				//获得系统月份;
				var month = dateTime.getMonth() + 1;
				//获得系统当月分天数;
				var day = dateTime.getDate();
				//获得系统小时;
				var hours = dateTime.getHours();
				//获得系统分钟;
				var minutes = dateTime.getMinutes();
				//获得系统秒数;
				var second = dateTime.getSeconds();
				//获得系统星期几;
				var dayCycle = dateTime.getDay();
				//使用数组更改日期样式;
				var dayCycleArray = ["日", "一", "二", "三", "四", "五", "六"];
				for (var i = 0; i < 7; i++) {
					if (dayCycle == i) {
						//将dayCycleArray的数赋值到系统星期几里面中去;
						dayCycle = dayCycleArray[i];
					}
				}
				month < 10 ? month = '0' + month : month;
				day < 10 ? day = '0' + day : day;
				hours < 10 ? hours = '0' + hours : hours;
				minutes < 10 ? minutes = '0' + minutes : minutes;
				second < 10 ? second = '0' + second : second;
				//打印完整的系统日期;
				// this.dateStr = year + '-' + month + '-' + day + ' ';
				this.currentTime = '星期' + dayCycle
				// this.time = hours + ':' + minutes + ':' + second

			},
			getlist() {
				let data = {
					rescueStatus: 1,
					pageSize: this.pageSize,
					pageNum: this.pageNum,
				}
				request({
					url: '/app/rescueInfo/getRescueList',
					method: 'get',
					params: data
				}).then((res) => {
					console.log('首页', res);
					if (res.code == 200) {
						if (this.pageNum != 1) {
							this.orderList = this.orderList.concat(res.rows)
						} else {
							this.orderList = res.rows
						}
						let total = res.total
						this.totalPages = Math.ceil(total / this.pageSize);
					}

				})
			},


			getone() {
				this.one = !this.one
			},
			//一键救援
			getyi() {
				uni.navigateTo({
					url: '/pages/rescue/order'
				})
			},
			goisAppointment() {
				uni.navigateTo({
					url: '/pages/rescue/order?isAppointment=1'
				})
			},
			getsx() {
				uni.navigateTo({
					url: '/pages/Detain/Detain'
				})
			},
			//预约
			getyue() {
				uni.navigateTo({
					url: '/pages/rescue/order'
				})
			},
			godetail(id) {
				uni.navigateTo({
					url: '/pages/details/details?id=' + id
				})
			},
			gohistory() {
				uni.navigateTo({
					url: '/pages/rescue/historylist?id=1'
				})
			}
		}

	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: calc(100vh);
		background-color: #F7F8FC;

	}

	.dil {
		background-color: #F7F8FC;
		box-sizing: border-box;
		padding: 0 40rpx;
	}
	
	.content-top {
		padding: 90rpx 40rpx 0;
		background-color: #327DFB;
	}

	.top-two {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.top-left {
		height: 58rpx;
		box-sizing: border-box;
		// border-radius: 50px;
		// background-color: #D1EDFF;
		display: flex;
		justify-content: space-between;
		overflow: hidden;
	}

	.left1 {
	width: 112rpx;
	height: 58rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 200rpx 0rpx 0rpx 200rpx;
		font-size: 26rpx;
		color: white;
		font-weight: 400;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.left2 {
		width: 146rpx;
		height: 58rpx;
		background: #FFFFFF;
		border-radius: 0rpx 29rpx 29rpx 0rpx;
		font-size: 26rpx;
		color: #207EFE;
		font-weight: 400;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top-right {
		display: flex;
		align-items: center;
		font-size: 34rpx;
		font-weight: 400;
		color: #fff;
		line-height: 1;
		.top-right-icon {
			width: 44rpx;
			height: 44rpx;
		}
	}
	
	.top-menu {
		display: flex;
		justify-content: space-between;
		padding: 50rpx 0 36rpx;
	}
	.top-menu-item {
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		row-gap: 12rpx;
		font-size: 28rpx;
	}
	.top-menu-item-icon {
		width: 60rpx;
		height: 60rpx;
	}

	.four-box-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 34rpx 0;
	}
	.four-box-header-title {
		font-weight: bold;
	}
	.four-box-header-extra {
		font-size: 24rpx;
	}
	.four-box {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 24rpx;
		// margin-top: 15px;
		width: 100%;
	}

	.ques {
		width: 80%;
		margin: 0 auto;

		image {
			width: 100%;
		}
	}

	.boxf {
		height: 140rpx;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 6px;
		padding: 12px;
		background-image: url('~@/static/images/homeOrderCard/dzf.png');
		background-size: cover;
		background-position: center;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
	}

	.boxf1 {
		height: 84px;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 6px;
		padding: 12px;
		background-image: url('~@/static/images/homeOrderCard/dqc.png');
		background-size: cover;
		background-position: center;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
	}

	.boxf2 {
		height: 84px;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 6px;
		padding: 12px;
		background-image: url('~@/static/images/homeOrderCard/jyz.png');
		background-size: cover;
		background-position: center;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
	}

	.boxf3 {
		height: 84px;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 6px;
		padding: 12px;
		background-image: url('~@/static/images/homeOrderCard/ywc.png');
		background-size: cover;
		background-position: center;
		    display: flex;
		    flex-direction: column;
		    justify-content: center;
	}

	.zi1 {
		font-size: 24rpx;
		color: #333;
		display: flex;
		align-items: center;
		column-gap: 10rpx;
		.zi1-icon {
			width: 38rpx;
			height: 38rpx;
		}
	}

	.zi2 {
		width: 100%;
		font-size: 40rpx;
		font-weight: bold;
		color: #000;
	}

	.box-tap {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 25px;
	}

	.tap-left {
		display: flex;

	}

	.tap-right {
		display: flex;
		align-items: center;
	}

	.zi3 {
		font-size: 14px;
		font-weight: 400;
		color: #666666;
	}

	.left-img1 {
		width: 65px;
		height: 15px;
		margin-right: 20px;

		// smargin-bottom: 10px;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.gang {
		width: 60px;
		height: 5px;
		border-radius: 50px;
		margin-top: 6px;
		background: linear-gradient(87deg, #B6E1FF 0%, #339DFF 100%);
	}

	.tap-box {
	}

	.boxt {
		// height: 110px;
		width: 100%;
		background-color: white;
		border-radius: 6px;
		margin-top: 14px;
		overflow: hidden;
		display: flex;
		box-sizing: border-box;
		padding-bottom: 15px;
	}

	.boxt-left {
		width: 100%;
		height: 100%;
	}

	.left-lan {
		width: 50px;
		height: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #207EFE;
		font-size: 14px;
		color: white;
		border-radius: 0px 0px 6px 0px;
	}

	.text1 {
		margin-left: 24px;
		margin-top: 5px;
		color: #333333;
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.lanzi {
		font-weight: bold;
		color: #4C98FF;
	}

	.text2 {
		margin-left: 24px;
		margin-top: 5px;
		color: #333333;
		font-size: 16px;
		font-weight: 400;
		color: #333333;
	}

	.boxt-right {
		width: 50%;
		height: 100%;
		position: relative;
	}

	.zhtai {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 60px;
		height: 25px;
		box-sizing: border-box;
		background: #FFD7D7;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FF4C4C;
		font-size: 14px;

	}

	.zhtait {
		position: absolute;
		top: 50px;
		right: 10px;
		width: 60px;
		height: 25px;
		box-sizing: border-box;
		background: #d5e8ff;
		border-radius: 4px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #53b5ff;
		font-size: 14px;

	}

	.dianhua {
		position: absolute;
		bottom: -120px;
		right: 10px;
		display: flex;
		font-size: 14px;
		font-weight: 400;
		color: #3289FF;

	}

	.dianhuad {

		display: flex;
		font-size: 14px;
		font-weight: 400;
		color: #ff1d3b;


	}

	.ticon {


		width: 12px;
		height: 13px;
		margin-right: 5px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.yijian {
		width: 100%;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 10px;
		height: 40px;
		font-size: 16px;
		background: #327DFB;
		color: #fff;
		margin-top: 30rpx;
	}

	.y-left {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		border-radius: 10px;
		background: #327DFB;
	}

	.y-right {
		width: 30%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.kou {
		position: fixed;
		right: 5px;
		bottom: 80px;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		overflow: hidden;
		z-index: 99;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.box {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	// .xz-box {
	// 	height: 80px;
	// 	width: 48%;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// 	font-size: 16px;
	// 	font-weight: 400;
	// 	color: #FFFFFF;
	// 	background-size: cover;
	// 	background-position: center;
	// 	margin-top: 20px;

	// }
	.xz-box {
		width: 330rpx;
		height: 396rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 16rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 36rpx;
		transition: all ease 400ms;
		overflow: hidden;
	
		.checkedFlagIcon {
			display: none;
		}
	
		&.checked {
			box-sizing: border-box;
			position: relative;
			border: 2rpx solid #478AFA;
	
			.checkedFlag {
				background-color: #478AFA;
				width: 120rpx;
				height: 120rpx;
				position: absolute;
				right: -60rpx;
				bottom: -60rpx;
				transform: rotate(45deg);
				z-index: 1;
			}
	
			.checkedFlagIcon {
				display: inline-block;
				position: absolute;
				z-index: 2;
				bottom: 0;
				right: 0;
			}
		}
	
		.xz-box-icon {
			width: 130rpx;
			height: 130rpx;
			margin-bottom: 26rpx;
		}
	
		.box-wenzi {
			font-size: 28rpx;
			color: #000000;
		}
	}

	#y1 {
		background-image: url('../../static/tc.png');
	}

	#y2 {
		background-image: url('../../static/sy.png');
	}

	#y3 {
		background-image: url('../../static/dd.png');
	}

	#y4 {
		background-image: url('../../static/ht.png');
	}

	#y5 {
		background-image: url('../../static/kc.png');
	}

	.box_ {
		width: 320px;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 15px;
		background: white;
	}

	.title_ {
		width: 100%;
		text-align: center;
		margin-bottom: 10px;
		font-size: 17px;
		font-weight: bold;
	}

	.size_ {
		font-size: 16px;
		color: #666;
		margin: 5px 0px;
		text-align: center;
	}

	.annaiu {
		width: 100%;
		height: 60px;
		border-top: 1px solid #f3f3f3;
		box-sizing: border-box;
		padding-top: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		color: #244ec6;
	}
</style>