<template>
	<view class="content">
		<view class="mubu">
			<view class="c-top">
				<view class="topjianjian">
					<view style="width: 10px; height: 100%;" @click="goback()">
						<uni-icons type="left" color="#ffffff" size="22"></uni-icons>
					</view>
					<view class="bai-title">订单详情</view>
					<view style="width: 10px; height: 100%;"></view>
				</view>
				<view class="dis-b" style="margin-top: 16px; box-sizing: border-box; padding: 0px 15px; ">
					<view class="t-left">
						<view class="left-t">
							<view class="sj">
								<image src="../../static/detection/sja.png" mode=""></image>
							</view>
							<view class="t-zi1">
								<text>{{detailsData.rescueStatus}}</text>
							</view>
						</view>
						<view class="t-zi2">请尽快与救援车辆联系</view>
					</view>
					<view class="t-right">

						<view class="" @click="gotel(detailsData.connectionPhone)">
							<view class="ximg">
								<image src="../../static/detection/shouji.png" mode=""></image>
							</view>
							<view class="ai">拨打电话</view>
						</view>
						<view style="margin-left: 10px;" @click="gogogo()">
							<view class="ximg">
								<image src="../../static/detection/xiaofeij.png" mode=""></image>
							</view>
							<view class="ai">到这去</view>
						</view>
						<view style="margin-left: 10px;"
							v-if="detailsData.setMoney&&(!detailsData||detailsData.orderStatus<2)" @click="showCode()">
							<view class="ximg">
								<uni-icons type="scan" color="#ffffff" size="24"></uni-icons>
								<!-- <image src="../../static/detection/xiaofeij.png" mode=""></image> -->
							</view>
							<view class="ai">收款</view>
						</view>
						<view style="margin-left: 10px;" v-if="detailsData&&detailsData.orderStatus>=2">
							<view class="ximg">
								<uni-icons type="checkbox" color="#ffffff" size="24"></uni-icons>
								<!-- <image src="../../static/detection/xiaofeij.png" mode=""></image> -->
							</view>
							<view class="ai">已收款</view>
						</view>

					</view>
				</view>
				<view class="ding-top">

					<view class="dis-bb">
						<view style="display: flex;justify-content: space-between;width: 100%; align-items: center;">
							<view class="xhui">
								救援地点
							</view>
							<view class="ribox" v-if="detailsData.rescueStatus == '救援中'" @click="show = true">
								<text>确认编辑</text>
							</view>
						</view>

						<view class="ja-you">{{detailsData.rescuePosition || ''}}</view>
						<view class="xhui" v-if="detailsData.rescueStatus == '救援中'" @click="getmap1">
							终点位置
						</view>
						<view class="ja-you " @click="getmap1" v-if="detailsData.rescueStatus == '救援中'">
							{{detailsData.destinationInfo || '暂未设置'}} <uni-icons type="paperplane-filled"
								color="#0D2E8D" size="18"></uni-icons>
						</view>
						<!-- 	<view class="xhei">{{detailsData.connectionName || ''}} {{detailsData.connectionPhone || ''}}</view> -->
					</view>
					<view class="dix">
						<text class="huiy">客户车牌:</text>
						<u--input placeholder="客户车牌" style="height: 15px;" v-model="detailsData.licenseNum"></u--input>
					</view>
					<view class="dix">
						<text class="huiy">驾驶车辆:</text>

						<text>{{detailsData.driverCarNum || ''}}</text> <text @click="getCarList()"
							style="margin-left: 20px;color:blue;font-size: 12px;">
							点击选择</text>
					</view>
					<view class="dix">
						<text class="huiy">路段:</text>

						<text>{{detailsData.sectionRoad || ''}}</text> <text @click="getRoadList()"
							style="margin-left: 20px;color:blue;font-size: 12px;">
							点击选择</text>
					</view>
					<view class="dix">
						<text class="huiy">起止公里数:</text>
						<u--input placeholder="救援开始公里数" style="height: 15px;" type="number"
							v-model="detailsData.startScale"></u--input> -
						<u--input placeholder="救援结束公里数" style="height: 15px;" type="number"
							v-model="detailsData.endScale"></u--input>
					</view>
					<view class="dix">
						<text class="huiy">放空公里数:</text>
						<view style="width: 158px;display: flex;align-items: center;"><u--input type="number"
								style="height: 15px; " placeholder="请输入公里数" border="surround"
								v-model="detailsData.emptyNum" clearable></u--input> <text>KM</text></view>
					</view>
					<view class="dix">
						<text class="huiy">过关费:</text>
						<view style="width: 150px;display: flex;align-items: center;margin-left: 28px;"><u--input
								type="number" style="height: 15px; " placeholder="请输入金额" border="surround"
								v-model="detailsData.checkpointMoney" clearable></u--input><text>元</text> </view>




					</view>
					<view class="dix">
						<text class="huiy">联系人:</text>
						<input type="text" :placeholder="detailsData.connectionName"
							v-model="detailsData.connectionName" v-if="detailsData.rescueStatus == '救援中'">
						<text v-if="detailsData.rescueStatus != '救援中'">{{detailsData.connectionName || ''}}</text>
					</view>
					<view class="dix">
						<text class="huiy">手机号:</text>
						<input type="text" :placeholder="detailsData.connectionPhone"
							v-model="detailsData.connectionPhone" v-if="detailsData.rescueStatus == '救援中'">
						<text v-if="detailsData.rescueStatus != '救援中'">{{detailsData.connectionPhone || ''}}</text>
					</view>
					<view class="dix">
						<text class="huiy">车辆类型:</text>
						<text v-if="detailsData.rescueStatus != '救援中'">{{detailsData.carTypeStr || ''}}</text>
						<view class="ribox" v-if="detailsData.rescueStatus == '救援中'"
							:class="{'actbox' : carindex == item.value}" v-for="(item,index) in carList"
							:key="index" @click="getcarindex(item.value)">{{item.label}}</view>
					</view>

					<view class="dix">
						<text class="huiy">收款类型:</text>
						<text v-if="detailsData.rescueStatus != '救援中'">{{detailsData.feeTypeStr || ''}}</text>
						<view class="ribox" v-if="detailsData.rescueStatus == '救援中'"
							:class="{'actbox' : skindex == item.value}" v-for="(item,index) in qdList" :key="index"
							@click="getskindex(item.value)">{{item.label}}</view>
					</view>
					<view class="dix" v-if="detailsData.kcPosition" @click="getmap1">
						<text class="huiy">扣车地点:</text>
						<text>{{detailsData.kcPosition || ''}}</text>
					</view>
					<view class="dix">

						<text class="huiy">救援类型:</text>
						<text>{{detailsData.rescueTypeStr || ''}}</text>

					</view>
					<view style="position: absolute;bottom: 25px; right: 25px;text-align: center; "
						@click="getrescueDetail(id)">
						<uni-icons type="refresh-filled" color="#0D2E8D" size="40"
							style="margin: 5px auto;"></uni-icons>
						<view style="font-size: 14px; color: #0D2E8D;">刷新订单</view>
					</view>

				</view>
				<view class="hui-content">
					<view class="content-box">
						<view class="dis-bb">
							<view class="ja-you" style="margin: 0px;">事情描述:</view>
						</view>
						<u--textarea v-model="detailsData.rescueDetail" v-if="detailsData.rescueStatus == '救援中'"
							placeholder="请输入救援描述" border="bottom" autoHeight></u--textarea>
						<view class="xx-hui" v-if="detailsData.rescueStatus != '救援中'">
							{{detailsData.rescueDetail || '暂无描述'}}
						</view>

					</view>
					<view class="content-box" v-if="detailsData.rescueSceneImageList != null ">
						<view class="dis-bb">
							<view class="ja-you" style="margin: 0px;">现场图片</view>
						</view>
						<view class="img-boxs">
							<view class="g-img" v-for="(item,index) in detailsData.rescueSceneImageList" :key="index">
								<image :src="baseImageUrl + item  " mode=""></image>
							</view>
						</view>

					</view>

					<view class="content-box">
						<view class="dis-bb">
							<view class="ja-you" style="margin: 0px;">救援进程</view>
						</view>
						<view class="lan-ga" v-for="(item,index) in detailList" :key="index">
							<view class="ga-top">
								<view class="gain">{{index + 1}}</view>
								<view class="">{{item.title}}</view>
							</view>
							<view class="xhui" style="margin-left: 20px;">
								{{item.createTime}}
							</view>
							<view class="beizh" style="margin-left: 20px;">
								{{item.remark}}
							</view>
							<view class="wrap-box" style="margin-left: 20px;" v-if="item.images">
								<view class="img-box" v-for="(items,index) in item.images.split(',') "
									@click="lookimg(index,item.images.split(','))" :key="index">
									<image :src="baseImageUrl + items " mode=""></image>
								</view>
							</view>
						</view>


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




		</view>
		<u-picker :show="carNumShow" @cancel="carNumShow = false" @close="carNumShow = false" @confirm="chooseCar"
			:columns="[carNumList]" keyName="rescueCarNum"></u-picker>
		<u-modal :show="show" title="修改" content='您确认修改吗' :showCancelButton="true" @confirm="confirmadd()"
			@cancel="cancelopen()"></u-modal>
		<u-popup :show="codeShow" :round="10" mode="bottom" @close="closeCodePop" :closeable='true'>
			<view class="codePop flex-col align-center">

				<canvas style="width:100px; height: 100px; z-index: 9999999;margin: 40px auto;"
					canvas-id="myQrcode"></canvas>
				<view class="popup-title">收款码</view>
			</view>
		</u-popup>

		<u-picker :show="roadShow" @cancel="roadShow = false" @close="roadShow = false" @confirm="chooseRoad"
			:columns="[roadList]" keyName="label"></u-picker>
	</view>
</template>

<script>
	import request from '../../utils/request';
	import tabBar from '../../components/tabBar/tabBar.vue'
	import drawQrcode from 'weapp-qrcode';
	import dayjs from '../../uni_modules/uview-ui/libs/util/dayjs';
	export default {
		data() {
			return {
				show: false,
				qdList: [],
				skindex: 0,
				carNumList: [],
				carindex: 0,
				codeShow: false,
				carNumShow: false,
				roadShow: false,
				roadList: [],
				carList: [],
				rescueDetail: '',
				id: 0,
				baseUrl: this.$baseUrl,
        baseImageUrl: this.$baseImageUrl,
				type: 'center',
				msgType: 'success',
				imageList: [],
				isLoop: true,
				messageText: '这是一条成功提示',
				msg: '1',
				detailsData: {},
				singleList: [],
				detailList: [],
				tabindex: 0,
				title: 'user',
				checkedindex: false,
				destinationLongitude: '',
				destinationLatitude: '',
				destinationInfo: '请选择',
				province1: '',
				city1: '',
				area1: '',
				four1: '',
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getrescueDetail(option.id)
			this.newtwo()
		},
		onShow() {

		},

		methods: {
			chooseRoad(data) {
				console.log(data);
				this.detailsData.sectionRoad = data.value[0].id
				this.roadShow = false
			},
			chooseCar(data) {
				this.carNumShow = false
				this.detailsData.driverCarNum = data.value[0].rescueCarNum
			},
			getRoadList() {
				request({
					url: '/system/rescueInfo/getRescueRoad',
					method: 'get'
				}).then((res) => {
					this.roadShow = true
					this.roadList = res.data
				})
			},
			getCarList() {

				let data = {
					pageNum: 1,
					pageSize: 100
				}
				request({
					url: '/system/rescueCar/list',
					method: 'get',
					params: data
				}).then((res) => {
					this.carNumShow = true
					console.log('获取车辆信息', res);
					this.carNumList = res.rows
				})
			},

			getmap1() {
				let that = this
				if (this.detailsData.kcPosition) {
					uni.chooseLocation({
						success: function(res) {
							console.log('位置名称：' + res.name);
							console.log('详细地址：' + res.address);
							console.log('纬度：' + res.latitude);
							console.log('经度：' + res.longitude);
							that.destinationLongitude = res.longitude
							that.destinationLatitude = res.latitude
							that.kcPosition = res.address
							var address = res.address;
							var reg = /.+?(省|市|自治区|自治州|县|区)/g;
							let addressList = address.match(reg).toString().split(",");
							if (addressList[0] == '重庆市' || addressList[0] == '北京市' || addressList[0] ==
								'天津市' || addressList[0] == '上海市') {
								that.province1 = addressList[0];
								that.city1 = '市辖区';
								that.area1 = addressList[1];
								that.detailsData.kcPosition = address.replace(that.province, '').replace(that
									.city, '').replace(that.area, '');
							} else {
								that.province1 = addressList[0];
								that.city1 = addressList[1];
								that.area1 = addressList[2];
								that.detailsData.kcPosition = address.replace(that.province, '').replace(that
									.city, '').replace(that.area, '');
							};
							console.log(that.detailsData.kcPosition);

						}
					});


				} else {
					uni.chooseLocation({
						success: function(res) {
							console.log('位置名称：' + res.name);
							console.log('详细地址：' + res.address);
							console.log('纬度：' + res.latitude);
							console.log('经度：' + res.longitude);
							that.destinationLongitude = res.longitude
							that.destinationLatitude = res.latitude
							that.destinationInfo = res.address
							var address = res.address;
							var reg = /.+?(省|市|自治区|自治州|县|区)/g;
							let addressList = address.match(reg).toString().split(",");
							if (addressList[0] == '重庆市' || addressList[0] == '北京市' || addressList[0] ==
								'天津市' || addressList[0] == '上海市') {
								that.province1 = addressList[0];
								that.city1 = '市辖区';
								that.area1 = addressList[1];
								that.detailsData.destinationInfo = address.replace(that.province, '').replace(
									that.city, '').replace(that.area, '');
							} else {
								that.province1 = addressList[0];
								that.city1 = addressList[1];
								that.area1 = addressList[2];
								that.detailsData.destinationInfo = address.replace(that.province, '').replace(
									that.city, '').replace(that.area, '');
							};
							console.log(that.detailsData.destinationInfo);

						}
					});
				}
			},
			lookimg(idx, tmpList) {

				let resList = [];
				tmpList.forEach(it => {
					resList.push(this.baseImageUrl + it)
				})

				uni.previewImage({
					urls: resList,
					current: idx,
					indicator: 'none',
					loop: this.isLoop
				})
			},
			confirmadd() {
				// this.show = false
				let data = this.detailsData

				request({
					url: '/app/rescueInfo/edit',
					method: 'post',
					data: data
				}).then((res) => {
					console.log(res);
					if (res.code == 200) {
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
						this.show = false
						this.getrescueDetail(this.detailsData.id)
					}

				})

			},
			cancelopen() {
				this.show = false
			},
			newtwo() {
				request({
					url: '/rescue/dict/data/type/fee_type',
					method: 'get',
				}).then((res) => {
					console.log('fee_type', res);
					this.qdList = res.data
				})

				request({
					url: '/rescue/dict/data/type/rescue_car_type',
					method: 'get',
				}).then((res) => {
					this.carList = res.data
					console.log('rescue_car_type', res);
				})

			},
			getcarindex(index) {
				this.carindex = index
				this.detailsData.carType = index
			},
			getskindex(index) {
				this.skindex = index
				this.detailsData.feeType = index
			},
			closeCodePop() {
				this.codeShow = false
			},
			showCode() {
				this.codeShow = true
				let data = {
					id: this.id
				}
				request({
					url: '/rescuePayApi/createOrder',
					method: 'post',
					params: data
				}).then((res) => {
					console.log(res.data.code_url);
					drawQrcode({
						width: 100,
						height: 100,
						canvasId: 'myQrcode',
						text: res.data.code_url
					})
				})


			},
			gogogo() {
				console.log('执行');
				uni.openLocation({
					latitude: parseFloat(this.detailsData.rescueLatitude),
					longitude: parseFloat(this.detailsData.rescueLongitude),
					success: function() {
						console.log('success');
					},
					complete: function(res) {
						console.log(res);
					}
				});
			},

			goback() {
				uni.navigateBack()
			},
			gotel(num) {
				uni.makePhoneCall({
					phoneNumber: num //仅为示例
				});
			},
			getrescueDetail(id) {
				uni.showLoading({
					title: '刷新中'
				});
				request({
					url: '/app/driver/rescueDetail?rescueId=' + id,
					method: 'get',
				}).then((res) => {
					console.log('详情', res);
					this.detailsData = res.data.rescueInfo
					this.carindex = res.data.rescueInfo.carType // 回显车型
					this.skindex = res.data.rescueInfo.feeType
					this.detailList = res.data.detailList
					if (this.detailList && this.detailList.length > 0) {
						this.detailList.forEach(item => {
							if (item.createTime) {
								item.createTime = dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss')
							}
						})
					}
					uni.hideLoading();
				})
			},
			dialogToggle() {
				this.$refs.alertDialog.open()
			},
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			dialogClose() {
				console.log('点击关闭')
			},
			dialogInputConfirm(val) {
				this.$refs.inputDialog.close()
			},

			getnaiv() {
				uni.navigateTo({
					url: '/pages/rescue/rescue'
				})
			},
			getcheckedindex() {
				let data = {
					driverId: uni.getStorageSync('driverInfo')
				}
				request({
					url: '/app/driver/updateWork',
					method: 'post',
					params: data
				}).then((res) => {
					console.log(res);
					this.getStatus
				})
				// this.checkedindex =! this.checkedindex
				console.log(this.checkedindex);


			},
			gettab(index) {
				this.tabindex = index
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		box-sizing: border-box;
		// padding-top: 40px;
		// background: #F4F4F4;
		width: 100%;
		// height: calc(100vh);
	}

	.left-t {
		display: flex;
		height: 25px;
	}

	.xx-hui {
		font-size: 15px;
		font-weight: 400;
		color: #666666;
		line-height: 25px;
		margin-top: 10px;
	}

	.img-boxs {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

	}

	.lan-ga {
		width: 100%;
		margin: 10px auto;
		box-sizing: border-box;
		padding-bottom: 15px;
		border-bottom: 1px solid #EEEEEE;
	}

	.ga-top {
		display: flex;
		align-items: center;
		color: #0D2E8D;
		font-weight: bold;
	}

	.img-box {
		width: 70px;
		height: 70px;
		border-radius: 6px;
		overflow: hidden;
		margin-top: 10px;
		margin-right: 10px;

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

	.wrap-box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.beizh {}

	.gain {
		font-style: 18px;
		font-weight: bold;
		margin-right: 10px;
		color: #0D2E8D;
	}

	.g-img {
		width: 30%;
		height: 111px;
		margin-right: 10px;
		margin-top: 5px;

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

	.ximg {
		width: 20px;
		height: 20px;

		margin: 0 auto;
		margin-bottom: 10px;

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

	.sj {
		width: 25px;
		height: 25px;
		margin-right: 10px;

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

	.bai-title {
		font-weight: bold;
		color: #ffffff;

	}

	.ai {
		font-size: 14px;
	}

	.topjianjian {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 40px;
		box-sizing: border-box;
		padding: 15px 15px;

	}

	.dix {
		display: flex;
		align-items: center;
		margin: 10px auto;
	}

	.huiy {
		font-size: 15px;
		font-weight: 400;
		color: #999999;
		margin-right: 8px;
	}

	.htzit {
		display: flex;
		align-items: center;
		font-size: 15px;
		color: #999999;

	}

	.xshui {
		font-size: 15px;
		font-weight: 400;
		color: #333333;
	}

	.changimg {
		width: 58px;
		height: 20px;
		margin-right: 5px;

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

	.shiwuimg {
		width: 15px;
		height: 15px;
		margin-right: 5px;

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

	.inanniu {
		width: 30%;
		height: 38px;
		border-radius: 19px 19px 19px 19px;
		border: 1px solid #3CBC6F;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		color: #3CBC6F;
	}

	.caanniu {
		width: 30%;
		height: 38px;
		border-radius: 19px 19px 19px 19px;
		border: 1px solid #e43d33;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		color: #e43d33;
	}

	.lanniu {
		width: 30%;
		height: 38px;
		border-radius: 19px 19px 19px 19px;
		border: 1px solid #3C9CFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		color: #3C9CFF;
	}

	.anniua {
		width: 30%;
		height: 38px;
		border-radius: 19px 19px 19px 19px;
		border: 1px solid #0D2E8D;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		background: #0D2E8D;
		color: #ffffff;
	}

	.qrxg {
		width: 20%;
		height: 20px;
		background-color: #0D2E8D;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		border-radius: 6px;

		font-size: 14px;
	}

	.dis-bb {
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
		box-sizing: border-box;
		padding-bottom: 15px;
		border-bottom: 1px solid #EEEEEE;
	}

	.dis-tt {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding-top: 15px;
		border-top: 1px solid #EEEEEE;
	}

	.c-top {
		width: 100%;
		height: 180px;
		background: #0D2E8D;
		box-sizing: border-box;
		// padding: 15px;
		// position: relative;
	}

	.ding-top {
		// position: absolute;
		// padding: 15px;
		// bottom: -220px;
		// left: 0px;
		width: 100%;

		background-color: white;
		box-sizing: border-box;
		padding: 15px;
		border-radius: 8px 8px 0px 0px;
		position: relative;
	}

	.t-title {
		font-size: 18px;
		font-weight: bold;
		color: #FFFFFF;
	}

	.dis-b {
		display: flex;
		justify-content: space-between;
	}

	.t-left {}

	.t-zi1 {
		font-size: 20px;
		font-weight: bold;
		color: white;

	}

	.t-zi2 {
		font-size: 14px;
		font-weight: bold;
		color: white;
		margin-bottom: 10px;
		margin-top: 10px;
	}

	.t-biao {
		border-radius: 11px 11px 11px 0px;
		background: linear-gradient(90deg, #EE8342 0%, #EA3942 100%);
		color: white;
		text-align: center;
	}

	.t-right {
		color: white;
		display: flex;
	}

	.t-zi2 {
		font-size: 14px;
		font-weight: bold;
		color: white;
		text-align: center;
	}

	.t-bottom {
		// height: 77px;
		background: #FFFFFF;
		box-shadow: 0px 4px 4px 0px rgba(13, 46, 141, 0.15);
		border-radius: 8px;
		margin-top: 10px;
		box-sizing: border-box;
		padding: 16px;
		display: flex;
		justify-content: space-between;
		z-index: 99;
	}

	.top-box {
		width: 33%;
		height: 100%;
		border-right: 1px solid #EEEEEE;
		text-align: center;

	}

	.t-lan {
		font-size: 28px;
		font-weight: bold;
		color: #0D2E8D;
	}

	.t-hui {
		font-size: 14px;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}

	.t-ybr {
		width: 100%;
		z-index: -99;
		height: 120px;
		box-sizing: border-box;
		padding-top: 90px;
		display: flex;
		justify-content: space-around;

		// background-color: white;
	}

	.anniu {
		width: 95%;
		height: 44%;
		border-radius: 6px;
		background-color: #0D2E8D;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.gang {
		width: 24px;
		height: 4px;
		background: #ffffff;
		border-radius: 4px 4px 4px 4px;
		margin: 2px auto;
	}

	.hui-content {
		width: 100%;
		// height: calc(60vh);
		background-color: #f4f4f4;
		box-sizing: border-box;
		padding: 10px 0px;

	}

	.content-box {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		// height: 222px;
		background: #FFFFFF;

		margin-bottom: 10px;
	}

	.hui-text {
		font-size: 16px;
		font-weight: 400;
		color: #666666;
	}

	.indexhei {
		color: #333333 !important;
		font-weight: bold !important;
	}

	.indexlan {
		background: #0D2E8D !important;
	}

	.mubu {
		width: 100%;
		// height: calc(60vh);
		background-color: #f4f4f4;
	}

	.jsy {
		margin: 10px auto;
	}

	.ja-you {
		width: 100%;
		font-weight: bold;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		margin: 10px auto;

	}

	.xhui {
		font-size: 12px;
		font-weight: 400;
		color: #999999;
	}

	.codePop {
		width: 100%;
		background-color: white;
		box-sizing: border-box;
		height: 300px;
	}

	.popup-title {

		text-align: center;
		font-size: 16px;
		font-weight: bold;
		margin: 0 auto;
	}

	.ribox {
		box-sizing: border-box;
		padding: 5px 10px;
		// background: #0D2E8D;
		border: 1px solid #0D2E8D;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #0D2E8D;
		border-radius: 5px;
		margin-right: 5px;
	}

	.actbox {
		background: #0D2E8D !important;
		color: white;
	}
</style>
