<template>
	<scroll-view scroll-y="true" class="jz_LineDetail" @scroll="scroll" v-if="dataList.title">
		<view class="jz_TopImg" >				
				<view class="media" :style="{'opacity':(100-boxOption)+'%'}">
					<u-swiper :list="dataList.tempImgCover" :effect3d="false" :height="535" :interval="5000" :border-radius="0"
					 name="Url"></u-swiper>
					<view class="media-info">
						<view style="display: flex;align-items: center;">
							<view class="mi-left">
								<view v-if="dataList.tempImgCover.length>0" class="type-img-box" @click="openPicture">
									<image :src="dataList.tempImgCover[0].Url" mode="aspectFill"></image>
									<view class="content">
										<!-- <u-icon name="photo" size="26" color="#FFF"></u-icon> -->
										<text>{{dataList.tempImgCover.length}}</text>
									</view>
								</view>
							</view>
							<view class="mi-right">
								<view style="color:#FFF;margin-bottom: 6rpx;font-size: 22rpx;">团队编号：CTU04210603A</view>
								<view style="color:#FFF;font-size: 22rpx;">{{dataList.startCityName}}出发 · 精品线路</view>
							</view>
						</view>
					</view>
				
					<view @click="goback" :style="[titleStyle,{opacity:'100% !important'}]" style="position: fixed;top: 0;left: 0;padding-left: 6rpx;">
						<u-icon name="arrow-left" size="44" color="#FFF" style="margin-top: 22rpx;"></u-icon>
					</view>
				</view>
				<view class="top-title" :style="[titleStyle]">
					<view @click="goback">
						<u-icon name="arrow-left" size="44"></u-icon>
					</view>
					<view style="margin-left: 30rpx; text-align: left;width: 60vw;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{dataList.title}}</view>
				</view>
		</view>
		<view class="jz_TopPrice">
			<view class="jz_LineTitle">
				<text class="jz_renmin">¥</text><text class="jz_B2bPrice">{{$utils.getretailer()==true? dataList.currentPriceInfo.b2BPrice:dataList.currentPriceInfo.b2CPrice}}</text>
				<text style="color:#999999;font-size:24rpx;font-weight: 400;"> /人起</text>
				<text style="color:#999999;font-size:24rpx;font-weight: 400;margin-left: 30rpx;">2728人出游</text>
			</view>
			<view class="jz_MainTitle">
				<text v-if="dataList.title">{{dataList.title}}</text>
			</view>
			<view class="jz_Maidian" v-text="dataList.productRecommend">
	
			</view>
		</view>
		<view class="jz_Service">
			<view class="jz_Serflex">
				<view class="jz_Stitle">保障</view>
				<view style="color:#111111;display:flex;align-items:center">
					<img style="width:16px;height:14px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/zuanshi.png"
					 alt="" />
					<view style="margin-left:5px;">更改则赔付·承诺不加价·取消则赔付</view>
				</view>
			</view>
			<view class="jz_Serflex" style="margin-top:40rpx;">
				<view class="jz_Stitle">服务</view>
				<view style="color:#111111;display:flex;align-items:center">
					<img style="width:15px;height:15px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/dagou.png"
					 alt="" />
					<view style="margin-left:5px;">成团保障</view>
				</view>
			</view>
		</view>
		<view class="jz_TripDays">
			<view style="margin-bottom:40px;">
				<span style="display: inline-block;position: relative;">
					<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">
						<text v-if="dataList.startCityName">{{dataList.startCityName}}</text>出发
					</text>
					<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
				</span>
			</view>
			<view style="display:flex;overflow-x: auto;">
				<template v-for="(item,pindex) in dataList.priceList">
					<view class="jz_StartList" v-if="pindex<3" :class="{'active':delMsg.tcid==item.tcid}" @click="getDayInfo(item)" :key="pindex">
						<view class="jz_StartTop">{{getMonth(item.startDate)}} </view>
						<view class="jz_StartHoubu">
							<text>余</text>
							<text style="font-size: 28rpx;font-weight: 600;">{{item.remainNum}}</text>
						</view>
						<view style="color:#FF3166;font-size:26rpx;">￥{{$utils.getretailer()==true? item.b2BPrice:item.b2CPrice}}</view>
					</view>
				</template>
				<view class="jz_StartList" :class="{'active':delMsg.tcid==customerDate.tcid}" @click="openDate">
					<view class="jz_StartTop" v-if="customerDate.startDate">{{customerDate.startDate?getMonth(customerDate.startDate):""}} </view>
					<view class="jz_StartHoubu" v-if="customerDate.remainNum">
						<text>余</text>
						<text style="font-size: 28rpx;font-weight: 600;">{{customerDate.remainNum}}</text>
					</view>
					<view style="color:#FF3166;font-size:26rpx;" v-if="customerDate.b2BPrice">￥{{customerDate.b2BPrice}}</view>
					<view v-if="!customerDate.startDate" style="height: 100%;width:100%;display: flex;align-items: center;justify-content: center;">
						<view style="font-size: 24rpx;color:#999999;">更多<br>班期</view>
					</view>
				</view>
			</view>
		</view>
		<view class="jz_TripDays">
			<span style="display: inline-block;position: relative;">
				<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">摘要</text>
				<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
			</span>
			<view class="jz_ZhaiTitle">
				<text class="jz_Dian"></text>住宿
			</view>
			<view class="jz_ZhaiInner">
				{{dataList.nightNum}}晚酒店
			</view>
			<template v-if="dataList.feature&&dataList.feature.shopRemarkText!=null&&dataList.feature.shopRemarkText!=''">
				<view class="jz_ZhaiTitle">
					<text class="jz_Dian"></text>购物
				</view>
				<view class="jz_ZhaiInner">
					{{dataList.feature.shopRemarkText}}
				</view>
			</template>
			<template v-else>
				<view class="jz_ZhaiTitle">
					<text class="jz_Dian"></text>购物
				</view>
				<view class="jz_ZhaiInner">
					纯玩儿，无购物
				</view>
			</template>
			<view class="jz_ZhaiTitle">
				<text class="jz_Dian"></text>景点
			</view>
			<view class="jz_ZhaiInner">
				{{scenicNum}}个人气景点
			</view>
			<view class="jz_ZhaiTitle">
				<text class="jz_Dian"></text>餐食
			</view>
			<view class="jz_ZhaiInner">
				含{{breakfastNum}}早餐 <text style="margin:0 20px;">{{lunchNum}}午餐</text> {{dinnerNum}}晚餐
			</view>
			<view class="jz_Zhankai" style="display:none;">展开全部</view>
		</view>
		<view class="jz_TripDays">
			<span style="display: inline-block;position: relative;margin-bottom:40rpx;">
				<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">行程特色</text>
				<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
			</span>
			<view class="jz_TripMain">
				<image v-for="x in dataList.feature.tripImageList" :src="x" mode="widthFix" style="width: 100%;"></image>
			</view>
		</view>
		<view class="jz_TripDays">
			<span style="display: inline-block;position: relative;margin-bottom:40rpx;">
				<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">行程概要</text>
				<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
			</span>
			<view class="jz_TripMain">
				<view class="jz_TripLine"></view>
				<view v-for="(item,index) in dataList.dayList" :key="index">
					<view class="jz_TripTitle">
						<view class="jz_TripLeft">第{{getDays(index+1)}}天</view>
						<view class="jz_TripRight"></view>
					</view>
					<view class="jz_RightInner">
						<view v-for="(subItem,SubIndex) in item.dayArray" v-if="subItem.type==7" :key="SubIndex">
							<view class="jz_Place">
								<view class="jz_ComDian"></view>
								<text>{{subItem.childItem.title}}</text>
							</view>
						</view>
						<template v-for="(subItem,index2) in item.dayArray" v-if="subItem.type==2">
							<view class="jz_ImgDiv" :key="index2">
								<img mode="aspectFill" :src="subItem.childItem.imaArray[0].url" alt="">
							</view>
							<view class="jz_Place" style="align-items: center;">
								<view class="jz_ComDian"></view>
								<text class="jz_Canyin">景点</text>
								<text class="jz_CanInner">
									{{subItem.childItem.couponsName}}
									<text class="jz_Fenzhong">
										<template v-if="subItem.childItem.playTimeHour||subItem.childItem.playTimeMinutes">约</template>
										<template v-if="subItem.childItem.playTimeHour">{{subItem.childItem.playTimeHour}}小时</template>
										<template v-if="subItem.childItem.playTimeMinutes">{{subItem.childItem.playTimeMinutes}}分钟</template>
									</text>
								</text>
							</view>
							<view class="jz_Jinddian">
								{{subItem.childItem.descriptionText}}
							</view>
						</template>
						<view class="jz_Place">温馨提示</view>
						<view class="jz_Rermark">
							<template v-for="(subItem,sIndex) in item.dayArray" v-if="subItem.type==6">
								<text :key="sIndex">{{subItem.childItem.descriptionText}}</text>
							</template>
						</view>
						<view class="jz_Place">
							<view class="jz_ComDian"></view>
							<text class="jz_Canyin">餐饮</text>
							<text class="jz_CanInner">
								<template v-for="(subItem,sIndex2) in item.dayArray" v-if="subItem.type==4">
									<text style="margin-right:20px;" :key="sIndex2" v-if="subItem.childItem.useDinnerType=='1'">{{subItem.childItem.dinnerName}}</text>
									<text style="margin-right:20px;" v-if="subItem.childItem.useDinnerType=='2'">{{subItem.childItem.dinnerName}}</text>
									<text v-if="subItem.childItem.useDinnerType=='3'">{{subItem.childItem.dinnerName}}</text>
								</template>
							</text>
						</view>
						<view class="jz_Place">
							<view class="jz_ComDian"></view>
							<text class="jz_Canyin">酒店</text>
							<text class="jz_CanInner">
								<template v-for="(subItem,sIndex3) in item.dayArray" v-if="subItem.type==3">
									<text :key="sIndex3">{{subItem.childItem.hotelName}}<text v-if="index!=dataList.dayList.length-1" style="margin:0 5px;">/</text></text>
								</template>
								<text v-if="index!=dataList.dayList.length-1">或同级</text>
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="jz_TripDays">
			<span style="display: inline-block;position: relative;margin-bottom:40rpx;">
				<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">费用包含</text>
				<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
			</span>
			<view class="jz_TripMain">
				<rich-text :nodes="dataList.feature.feeInclude"></rich-text>
			</view>
		</view>
		<view class="jz_TripDays">
			<span style="display: inline-block;position: relative;margin-bottom:40rpx;">
				<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">费用不含</text>
				<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
			</span>
			<view class="jz_TripMain">
				<rich-text :nodes="dataList.feature.feeNonInclude"></rich-text>
			</view>
		</view>
		<view class="jz_TripDays">
			<span style="display: inline-block;position: relative;margin-bottom:40rpx;">
				<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">预定须知</text>
				<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
			</span>
			<view class="jz_TripMain">
				<rich-text :nodes="dataList.feature.importantTip"></rich-text>
			</view>
		</view>
		<view class="jz_TripDays">
			<span style="display: inline-block;position: relative;margin-bottom:40rpx;">
				<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">温馨提示</text>
				<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
			</span>
			<view class="jz_TripMain">
				<rich-text :nodes="dataList.feature.importantTip"></rich-text>
			</view>
		</view>
		<view class="jz_TripDays">
			<span style="display: inline-block;position: relative;margin-bottom:40rpx;">
				<text style="position: relative;z-index: 2; color:#1F1F1F;font-size:36rpx;font-weight:bold;">证照说明</text>
				<span style="width:40px;background-color: #DFBE6E;height: 6px;bottom: 2px;left: 0;right: 0;position: absolute;z-index: 1;"></span>
			</span>
			<view class="jz_TripMain">
				<rich-text :nodes="dataList.feature.visaRemark"></rich-text>
			</view>
		</view>
		<view class="jz_orderbox">
			<view class="jz_OrderDiv">
				<view style="color:#FF3166;font-weight:bold;">
					<text style="font-size:22rpx;">¥</text>
					<text style="font-size:40rpx;">{{$utils.getretailer()==true? dataList.currentPriceInfo.b2BPrice:dataList.currentPriceInfo.b2CPrice}}</text>
					<text style="font-size:22rpx;">/起</text>
				</view>
				<view style="display:flex;align-items: center;">
					<button open-type="contact" class="jz_ConButton">
						<img style="width:36rpx;height:38rpx;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/CustomizedCar/kefu.png" alt="" />
						<view style="color:#111111;font-size: 22rpx;">客服</view>
					</button>
					<view class="jz_OrderNow" @click="goReserce()">立即预定</view>
				</view>
			</view>
		</view>
		<u-popup v-model="showDateChosen" mode="bottom" border-radius="20" length="90%" :safe-area-inset-bottom="true">
			<canlendar @finish="chosenDateResult" :priceList="dataList.priceList"></canlendar>
		</u-popup>
	</scroll-view>
</template>
<script>
	import hParse from "@/components/u-parse/parse.vue";
	import canlendar from "./components/sign/index.vue"
	export default {
		components: {
			canlendar
		},
		data() {
			return {
				pageTitle: '线路详情',
				showDateChosen:false,
				msg: {
					pageIndex: 1,
					pageSize: 15
				},
				dataList: {}, //数据
				delMsg: {
					tcid: 0,
					configId: 0
				},
				scenicNum: 0, // 景点数量
				breakfastNum: 0, //早餐数
				lunchNum: 0, //午餐数
				dinnerNum: 0,//晚餐数
				boxOption: 0,
				titleStyle: {},
				mainColor: "",
				detailContent: "",
				customerDate:{}
			};
		},
		created() {

		},
		onLoad(option) {
			if (option.tcid && option.configId) {
				this.delMsg.tcid = option.tcid;
				this.delMsg.configId = option.configId;
				this.getDetails();
			}
			let that = this
			uni.getSystemInfo({
				success(res) {
					that.titleStyle = {
						height: "45px",
						paddingTop: `${res.statusBarHeight}px`,
						opacity: "0%"
					};
				},
			});
			this.mainColor = this.$uiConfig.mainColor;

		},
		methods: {
			chosenDateResult(result){
				this.showDateChosen=false
			},
			openPicture() {
				let imgObj = JSON.stringify(this.dataList.HotelImg);
				uni.navigateTo({
					url: "/pages/hotel/picture?imgObj=" + imgObj
				})
			},
			goback() {
				uni.navigateBack({
					delta: 1,
				});
			},
			scroll(e) {
				this.boxOption = Math.floor((e.detail.scrollTop - 50) / 1.5);
				
				this.titleStyle.opacity = ((e.detail.scrollTop - 100) < 0 ? 0 : Math.floor(e.detail.scrollTop - 100)) + "%"
				this.$forceUpdate()
			},
			//获取详情
			getDetails() {
				this.apipost(
					"b2b_get_GetB2BTravelInfoNoDesV1",
					this.delMsg,
					res => {
						console.log(res, '详情');
						if (res.resultCode == 1) {
							res.data.tempImgCover=JSON.parse(res.data.imgCover)
							this.dataList = res.data;
							this.scenicNum = 0;
							this.dataList.dayList.forEach(x => {
								x.dayArray.forEach(y => {
									if (y.type == 2) {
										this.scenicNum++;
									}
									if (y.type == 4 && y.childItem.useDinnerType == 1) {
										this.breakfastNum++;
									}
									if (y.type == 4 && y.childItem.useDinnerType == 2) {
										this.lunchNum++;
									}
									if (y.type == 4 && y.childItem.useDinnerType == 3) {
										this.dinnerNum++;
									}
								})
							})
						} else {

						}
					},
					null
				);
			},
			//转换图片格式
			getCoverImg(imgCover) {
				if (imgCover) {
					return JSON.parse(imgCover)
				}
			},
			//返回天数
			getDays(day) {
				if (day < 10) {
					return '0' + day
				} else {
					return day
				}
			},
			//返回月 日
			getMonth(day) {
				if (day) {
					let Myday = day.split('-');
					return Myday[1] + '-' + Myday[2]
				}
			},
			//点击切换
			getDayInfo(item){
				this.delMsg.tcid = item.tcid;
				this.delMsg.configId = item.configID;
				this.getDetails();
			},
			openDate(){
				if(this.customerDate.tcid){
					if(this.customerDate.tcid==this.delMsg.tcid){
						this.showDateChosen=true
					}else{
						this.delMsg.tcid = customerDate.tcid;
						this.delMsg.configId = customerDate.configID;
						this.getDetails();
					}
				}else{
					this.showDateChosen=true
				}
			},
			//立即预定
			goReserce(){
				let myCurrentInfo = this.dataList.currentPriceInfo;
				myCurrentInfo.startCityName = this.dataList.startCityName;
				let imgCover = JSON.parse(this.dataList.imgCover);
				if(imgCover.length>0){
					myCurrentInfo.CoverImg = imgCover[0].Url;
				}
				let myCurr = JSON.stringify(myCurrentInfo);
				console.log(myCurrentInfo,'myCurrentInfo');
				uni.navigateTo({
					url: "/pages/jiuzhai/jz_Reserve?currentPriceInfo="+encodeURIComponent(myCurr)
				});
			}
		},
	};
</script>
<style>
	.jz_LineDetail {
		background-color: #ECF1F4;
		padding-bottom:70px;
		height: 100vh;
		box-sizing: border-box;
	}
	

	.jz_TopImg {
		width: 100%;
		height: 535rpx;
	}
	.jz_TopImg .top-title {
		line-height: 45px !important;
		font-size: 16px;
		text-align: center;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		color: #111;
		box-sizing: content-box;
		z-index: 5;
		display: flex;
		align-items: center;
		background-color: #f6f6f6;
		padding-left: 6rpx;
	}
	.jz_TopImg .media {
		height: 535rpx;
		position: relative;
		z-index: 1;
	}
	
	.jz_TopImg .media .play-btn {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -49rpx;
		margin-left: -49rpx;
		width: 98rpx;
		height: 98rpx;
		border-radius: 20rpx;
		background-color: rgba(255, 255, 255, .4);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.jz_TopImg .media .video-box {
		background-color: #111;
		height: 535rpx;
		position: relative;
	}
	
	.jz_TopImg .media .type-box {
		width: 100px;
		height: 50rpx;
		position: absolute;
		background-color: rgba(255, 255, 255, .6);
		border-radius: 50rpx;
		left: 50%;
		bottom: 80px;
		margin-left: -50px;
	}
	
	.jz_TopImg .media .media-info .type-img-box {
		background-color: rgba(255, 255, 255, .5);
		color: #FFF;
		display: flex;
		align-items: center;
		height: 96rpx;
		width: 96rpx;
		padding: 8rpx;
		border-radius: 12rpx;
		position: relative;
	}
	
	.jz_TopImg .media .media-info .type-img-box image {
		height: 80rpx;
		width: 80rpx;
		border-radius: 12rpx;
		opacity: 0.5;
	}
	
	.jz_TopImg .media .media-info .type-img-box .content {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		font-size: 20rpx;
		color: #FFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		justify-items: center;
	}
	
	.jz_TopImg .media .media-info .type-img-box text {
		font-size: 22rpx;
		font-family: pingfang;
		margin-left: 6rpx;
	
	}
	
	.jz_TopImg .media .media-info {
		position: absolute;
		background-color: rgba(0, 0, 0, .35);
		top: 287rpx;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx 50rpx;
	}
	
	.jz_TopImg .media .media-info .mi-left {
		flex: 1;
	}
	.jz_TopPrice {
		width: 100%;
		height: auto;
		background-color: #fff;
		position: relative;
		margin-top: -110rpx;
		border-radius: 60rpx 60rpx 0px 0px;
		padding: 45rpx;
		z-index: 2;
	}

	.jz_LineTitle {
		font-size: 25rpx;
		color: #FF3166;
		margin-bottom: 10px;
	}

	.jz_MainTitle {
		color: #111111;
		font-size: 36rpx;
		font-weight: 600;
	}

	.jz_Maidian {
		color: #999999;
		font-size: 24rpx;
		margin-top: 22rpx;
	}

	.jz_Price {
		font-size: 30rpx;
		color: #FF3166;
	}

	.jz_Price_Title {
		color: #000000;
		margin: 10px 0;
		font-weight: bold;
	}

	.jz_Price_Hui {
		color: #9cf;
		margin-left: 8px;
	}

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

	.jz_TripDays {
		width: 100%;
		height: auto;
		padding: 45rpx;
		margin-top: 15px;
		background-color: #fff;
	}

	.trip_JZtype {
		display: inline-block;
		padding: 3px 5px;
		border: 1px solid #257BF1;
		margin-right: 10px;
		color: #257BF1;
		font-size: 13px;
		border-radius: 3px;
	}

	.jz_StartList {
		height: 150rpx;
		border-radius: 20rpx;
		/* border: 1px solid #E2E2E2; */
		text-align: center;
		display: block;
		width: 70px;
		margin-right: 14px;
		flex-shrink: 0;
		white-space: nowrap;
		overflow: hidden;
		background: #ecf1f463;
	}
	
	.jz_StartList.active{
		border-color: #111;
		background: rgba(0,0,0,.07);
	}
	
	.jz_StartList.active .jz_StartTop{
		background-color: #000;
		color: #FFF;
	}
	
	.jz_renmin {
		font-size: 12px;
		font-weight: bold;
	}

	.jz_B2bPrice {
		font-size: 40rpx;
		font-weight: 800;
	}	
	.jz_Service {
		width: 100%;
		background-color: #fff;
		padding: 30px;
		font-size: 24rpx;
		margin-top: -5px;
	}

	.jz_Serflex {
		display: flex;
	}

	.jz_Stitle {
		color: #999999;
		margin-right: 41rpx;
	}

	.jz_StartTop {
		width: 100%;
		height: 40rpx;
		background-color: #ECF1F4;
		color: #999999;
		text-align: center;
		line-height: 40rpx;
		font-size: 22rpx;
	}

	.jz_Dian {
		display: inline-block;
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background-color: #111111;
		margin-right: 23rpx;
		position: relative;
		top: -2px;
	}

	.jz_ZhaiTitle {
		color: #1F1F1F;
		font-size: 28rpx;
		font-weight: bold;
		margin-top: 40rpx;
	}

	.jz_ZhaiInner {
		color: #6E6E6E;
		font-size: 24rpx;
		margin: 22rpx 0 0 30rpx;
	}

	.jz_Zhankai {
		width: 220rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: #1F1F1F;
		font-size: 24rpx;
		border-radius: 8rpx;
		border: 1px solid #111111;
		margin: 40rpx auto;
	}

	.jz_TripMain {
		position: relative;
		overflow: hidden;
	}

	.jz_TripTitle {
		width: 100%;
		height: 90rpx;
		border-radius: 20rpx;
		background: linear-gradient(90deg, #000000, rgba(255, 255, 255, 0.05));
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28rpx;
	}

	.jz_TripLeft {
		font-size: 32rpx;
	}

	.jz_TripRight {
		color: #111111;
		font-size: 22rpx;
	}

	.jz_TripLine {
		position: absolute;
		width: 4rpx;
		height: 100%;
		background-color: #111111;
		left: 24rpx;
		top: 90rpx;
	}

	.jz_RightInner {
		margin-left: 50rpx;
	}

	.jz_Place {
		position: relative;
		color: #111111;
		font-size: 24rpx;
		margin: 30rpx 0;
		font-weight: bold;
		display: flex;
	}

	.jz_ComDian {
		width: 18rpx;
		height: 18rpx;
		background-color: #DFBE6E;
		border-radius: 50%;
		position: absolute;
		left: -17.6px;
		top: 4px;
	}

	.jz_ImgDiv {
		width: 612rpx;
		height: 376rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.jz_ImgDiv img {
		width: 100%;
		height: 100%;
	}

	.jz_Rermark {
		color: #999999;
		font-size: 23rpx;
		line-height: 20px;
	}

	.jz_Canyin {
		color: #999999;
		font-size: 23rpx;
		margin-right: 44rpx;
		flex-shrink: 0;
	}

	.jz_CanInner {
		color: #111111;
		font-size: 26rpx;
	}

	.jz_ArrowImg {
		width: 25rpx;
		height: 5rpx;
		margin: 0 5px;
		position: relative;
		top: -3px;
	}

	.jz_Fenzhong {
		color: #999999;
		font-size: 22rpx;
		margin-left: 20rpx;
	}

	.jz_Jinddian {
		margin: 23rpx 0 31rpx 0;
		color: #999999;
		font-size: 23rpx;
		line-height: 20px;
	}

	.jz_StartHoubu {
		color: #111;
		font-size: 20rpx;
		font-weight: 500;
		margin: 10rpx 0;
	}
	.jz_orderbox{
		height: 160rpx;
		position: fixed;
		background-color: #fff;
		bottom: 0;
		width: 100vw;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.jz_OrderDiv{
		
		width:90%;
		height:100rpx;
		background-color: #fff;
		margin:auto;
		padding:20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0px 10rpx 30rpx 0px rgba(36, 36, 36, 0.2);
		border-radius: 16px;
		z-index:999;
	}
	.jz_OrderNow{
		width:190rpx;
		height:80rpx;
		background-color: #111111;
		text-align: center;
		line-height: 80rpx;
		color:#fff;
		font-weight: bold;
		font-size:28rpx;
		border-radius: 16rpx;
	}
	.jz_ConButton{
		background-color: #fff;
		height:40px;
		line-height: 18px;
		margin-top:3px;
	}
	.jz_ConButton::after{
		border: none!important;
		height:auto!important;
	}
</style>