<template>
	<view class="hotel-detail" v-if="roomRateDetails.RatePlanList&&roomRateDetails.RatePlanList.length>0">
		<scroll-view ref="scrollView" scroll-y="true" style="width: 100%; height: 100%" @scroll="scroll"
			:scroll-top="scrollTop">
			<view class="media" :style="{ opacity: 100 - boxOption + '%' }" @click="openPicture">
				<u-swiper :list="HotelInfo.images" mode="number" :effect3d="false" :height="545" :interval="5000"
					:border-radius="0" name="Path"></u-swiper>
				<!-- #ifdef MP-WEIXIN  -->
				<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>
				<!-- #endif -->
				<view class="orderIforDiZhi">
					<view class="orderIforDiZhiL">{{ HotelInfo.name }}</view>
					<view class="orderIforDiZhiR row">
						<view class="orderIforDiZhiRImg">
							<img style="width: 23rpx;height:28rpx;"
								src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638766148323678002.png" />
						</view>
						<view class="orderIforDiZhiRText">
							{{ HotelInfo.address }},
							{{ HotelInfo.destination }},
							{{ HotelInfo.country }}
						</view>
					</view>
				</view>
			</view>
			<view class="hotel-title" :style="[titleStyle]">
				<view @click="goback">
					<!-- #ifdef MP-WEIXIN  -->
					<u-icon name="arrow-left" size="44"></u-icon>
					<!-- #endif -->
				</view>
				<view style="flex: 1; margin-left: 30rpx; text-align: left" class="name-ali">
					{{ HotelInfo.name }}
				</view>
			</view>
			<view class="ReservationInforBox">
				<view class="ReservationInforTitle">预定信息</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL">入住时间</view>
					<view class="ResInforR">{{roomMsg.StartDate}}({{getWeek(roomMsg.StartDate)}})</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL">离店日期</view>
					<view class="ResInforR">{{roomMsg.EndDate}}({{getWeek(roomMsg.EndDate)}})</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL">入住时间</view>
					<view class="ResInforR">共 {{day}}晚</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL">房型</view>
					<view class="ResInforR">{{roomRateDetails.RatePlanList[0].RatePlanName}}({{searchObj.rooms}}间)
					</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL">餐型</view>
					<view class="ResInforR"
						v-if="roomRateDetails.RatePlanList && roomRateDetails.RatePlanList.length > 0">
						<template v-for="( itemp, indexp ) in roomRateDetails.RatePlanList[0].PriceList">
							<template v-if="!indexp">
								{{getMealtype(itemp.MealType)}}
								<template v-if="itemp.MealAmount>0">
									×{{itemp.MealAmount}}份
								</template>
							</template>
						</template>
					</view>
				</view>
				<view class="ResInforText row-sb-n">
					<view class="ResInforL">人数</view>
					<view class="ResInforR">最多入住{{ roomRateDetails.RatePlanList[0].MaxOccupancy}}人</view>
				</view>
				<view class="ResInforText row">
					<view class="ResInforL">取消政策</view>
					<view class="ResInforR">
						<text v-if="roomRateDetails&&
                    roomRateDetails.CancellationPolicyList &&
                    roomRateDetails.CancellationPolicyList.length > 0">
							<template v-for="(itemCancella, index1) in roomRateDetails.CancellationPolicyList">
								<template
									v-if="index1==0">{{ getformatDateStr(itemCancella.FromDate) }}之前免费取消</template>
								<template v-if="itemCancella.Amount==roomRateDetails.TotalPrice">
									<template>{{ getformatDateStr(itemCancella.FromDate) }}起不可取消，取消将收取订单全额费用;</template>
								</template>
								<template v-else>
									<template>{{ getformatDateStr(itemCancella.FromDate) }}
										<template v-if="index1!=(roomRateDetails.CancellationPolicyList.length-1)">
											-{{ getformatDateStr(roomRateDetails.CancellationPolicyList[index1+1].FromDate) }}
											之间</template>
										取消，收费 {{DanWei}}{{getPrice(itemCancella.Amount)}};</template>
								</template>
							</template>
						</text>
					</view>
				</view>
			</view>
			<view class="ReservationInforBox">
				<view class="ReservationInforTitle" @click="goback">立即确认</view>
				<view class="ResInforText ResInforTtisp row-sb-n">
					<view class="ResInforTisp">订单支付后，酒店将立即确认您的订单，保障您的住房需求。</view>
				</view>
			</view>
			<view style="height: 36rpx;"></view>
		</scroll-view>
	</view>
</template>

<script>
	import roomGood from "./components/room-good.vue";
	import nearGood from "./components/near-good.vue";
	import recommedHotel from "./components/recommed-hotel.vue";
	import canlendar from "./components/time/index.vue";
	import hotelRoom from "./components/hotelRoom.vue";
	import hotelInfor from "./components/hotelInfor.vue";
	import hotelPolicy from "./components/hotelPolicy.vue";
	import hotelFacilities from "./components/hotelFacilities.vue";
	export default {
		components: {
			roomGood,
			nearGood,
			recommedHotel,
			canlendar,
			hotelInfor,
			hotelPolicy,
			hotelFacilities,
			hotelRoom,
		},
		data() {
			return {
				imgsList: [],
				id: 0,
				typeList: [{
						Id: 0,
						Name: "视频",
					},
					{
						Id: 1,
						Name: "图片",
					},
				],
				boxOption: 0,
				titleStyle: {
					opacity: 0,
				},
				mainColor: "",
				controls: false,
				videoUrl: "https://video.c-ctrip.com/videos/230i1r000001hxb2mEEE4.mp4",
				active: 1,
				islike: false,
				nearbyType: 0,
				roomMsg: {
					HotelId: 0,
					StartDate: "",
					EndDate: "",
				},
				day: 0,
				threeLevelList: [{
						name: "单人床",
						id: 1,
						isCheck: 0,
					},
					{
						name: "大床房",
						id: 2,
						isCheck: 0,
					},
					{
						name: "双床房",
						id: 3,
						isCheck: 0,
					},
					{
						name: "含早餐",
						id: 4,
						isCheck: 0,
					},
					{
						name: "可取消",
						id: 5,
						isCheck: 0,
					},
				],
				RoomList: [], //可过滤房间
				dataList: {}, //数据
				isShowAll: false, //显示全部
				HotelArr: [], //推荐酒店
				searchObj: {},
				dayObj: {},
				hotelData: {}, //传递到房间预订组件
				startDay: "",
				endDay: "",
				Up: 0,
				StarImgs: [
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hotel3stars.png',
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hotel4stars.png',
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hotel5stars.png',
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638809441661552596.png',
				],
				openImg: [
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638762717498946531.png',
					'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638762717498917358.png'
				],
				optionsTitle: ["房型", "床型", "餐食"],
				hotelFacilities: [{
						Name: '酒店信息',
						ID: 1,
						val: 'hotelInfor',
						top: 0,
					},
					{
						Name: '酒店政策',
						ID: 2,
						val: 'hotelPolicy',
						top: 0,
					},
					{
						Name: '设施服务',
						ID: 3,
						val: 'hotelFacilities',
						top: 0,
					},
				],
				current: 1,
				scrollTop: 100,
				old: {
					scrollTop: 0
				},
				HotelInfo: {},
				roomRateDetails: {},
				params: {},
				HotelMealTypes: [],
			};
		},
		created() {
			this.Up = uni.getStorageSync("mall_UserInfo") ?
				uni.getStorageSync("mall_UserInfo").UserPageType :
				0;
		},
		onLoad(options) {
			if (options.msg) {
				this.params = JSON.parse(decodeURIComponent(options.msg))
			}
			if (options.HotelInfo) {
				this.HotelInfo = JSON.parse(options.HotelInfo);
				if (this.HotelInfo && this.HotelInfo.address) {
					this.HotelInfo.address = decodeURIComponent(this.HotelInfo.address);
				}
			}
			this.id = options.id;
			this.roomMsg.HotelId = options.id;
			let that = this;
			uni.getSystemInfo({
				success(res) {
					that.titleStyle = {
						height: "45px",
						paddingTop: `${res.statusBarHeight}px`,
						opacity: "0",
					};
				},
			});
			this.mainColor = this.$uiConfig.mainColor;
			if (options.dayObj) {
				var tempDay = JSON.parse(options.dayObj);
				this.roomMsg.StartDate = tempDay.start;
				this.roomMsg.EndDate = tempDay.end;
				this.startDay = tempDay.startDay;
				this.endDay = tempDay.endDay;
				this.day = tempDay.day;
				this.dayObj = tempDay;
			}
			if (options.searchObj) {
				this.searchObj = JSON.parse(options.searchObj);
			}
			this.getdidaMealType()
			this.initHotel()
		},
		methods: {
			//日期格式化
			getformatDateStr(value) {
				var dt = new Date(value);
				let year = dt.getFullYear();
				let month = (dt.getMonth() + 1).toString().padStart(2, "0");
				let date = (dt.getDate()).toString().padStart(2, "0");
				return year + "-" + month + "-" + date;
			},
			//获取道旅餐食类型
			getdidaMealType() {
				this.apipost('dmc_post_GetDidaMealType', {}, res => {
					if (res.resultCode == 1) {
						this.HotelMealTypes = res.data;
					}
				}, null)
			},
			//获取餐型
			getMealtype(mealtypeId) {
				let mealtypeName = "";
				if (mealtypeId > 0) {
					this.HotelMealTypes.forEach((item) => {
						if (item.ID == mealtypeId) {
							mealtypeName = item.Name_CN;
						}
					});
				}
				return mealtypeName;
			},
			initHotel() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.apipost(
					"dmc_post_GetDiDaPriceConfirm", this.params,
					res => {
						if (res.resultCode == 1) {
							uni.hideLoading();
							this.roomRateDetails = res.data.PriceDetails.HotelList[0];
							this.dataList = res.data.PriceDetails;
						}
					});
			},
			openPicture() {
				let imgObj = JSON.stringify(this.HotelInfo.images);
				uni.navigateTo({
					url: "/pages/hotel/picture?imgObj=" + imgObj,
				});
			},
			getMonth(date) {
				let m = date.getMonth() + 1;
				return m > 9 ? m : "0" + m;
			},
			getDay(date) {
				let d = date.getDate();
				return d > 9 ? d : "0" + d;
			},
			getWeek(date) {
				var weekArray = new Array("日", "一", "二", "三", "四", "五", "六");
				var week = weekArray[new Date(date).getDay()]; //注意此处必须是先new一个Date
				return "周" + week;
			},
			previewImage(i) {
				uni.previewImage({
					urls: this.imgsList,
					current: i,
					longPressActions: {
						itemList: ["发送给朋友", "保存图片", "收藏"],
						success: function(data) {},
						fail: function(err) {

						},
					},
				});
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
				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) / 100 > 1 ?
					1 :
					Math.floor(e.detail.scrollTop - 100) / 100;
				this.$forceUpdate();
			},
			enlarge(file) {
				// 全屏
				this.videoContext = uni.createVideoContext("myVideo");
				this.videoContext.requestFullScreen({
					direction: 0,
				});
			},
			videoControl(e) {
				if (e.detail.fullScreen == false) {
					this.videoContext.stop();
					this.controls = false;
				} else {
					this.videoContext.play();
					this.controls = true;
				}
			},
			goback() {
				uni.navigateBack({
					delta: -1,
				});
			},
			// #ifdef MP-WEIXIN
			//分享朋友圈
			onShareTimeline() {
				let uid = uni.getStorageSync("mall_UserInfo") ?
					uni.getStorageSync("mall_UserInfo").UserId :
					0;
				if (uid == 0) {
					uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
				}
				let SmallShopId = uni.getStorageSync("mall_UserInfo") ?
					uni.getStorageSync("mall_UserInfo").SmallShopId :
					0;
				if (SmallShopId == 0) {
					//如果微店id为0 去找所属微店id
					SmallShopId = uni.getStorageSync("mall_UserInfo") ?
						uni.getStorageSync("mall_UserInfo").UserSmallShopId :
						0;
				}
				let title = this.dataList.HotelName ? this.dataList.HotelName : "帖子";
				let imageUrl =
					this.dataList.HotelImg && this.dataList.HotelImg.length > 0 ?
					this.dataList.HotelImg[0] :
					"";
				let id = this.id;
				return {
					title: title,
					query: "id=" +
						this.id +
						"&user_id=" +
						uid +
						"&SmallShopId=" +
						SmallShopId +
						"&Up=" +
						this.Up +
						"&JumpType=18" +
						"&dayObj=" +
						JSON.stringify(this.dayObj) +
						"&searchObj=" +
						JSON.stringify(this.searchObj),
					imageUrl: imageUrl,
				};
			},

			//分享给朋友
			onShareAppMessage(res) {
				let u = uni.getStorageSync("mall_UserInfo");
				let uid = u.UserId ? u.UserId : 0;
				if (uid == 0) {
					uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
				}
				let SmallShopId = u.SmallShopId ? u.SmallShopId : 0;
				if (SmallShopId == 0) {
					//如果微店id为0 去找所属微店id
					SmallShopId = u.UserSmallShopId ? u.UserSmallShopId : 0;
				}
				return {
					title: this.dataList.HotelName ? this.dataList.HotelName : "帖子",
					path: "/pages/index/index?id=" +
						this.id +
						"&user_id=" +
						uid +
						"&SmallShopId=" +
						SmallShopId +
						"&Up=" +
						this.Up +
						"&JumpType=18" +
						"&dayObj=" +
						JSON.stringify(this.dayObj) +
						"&searchObj=" +
						JSON.stringify(this.searchObj),
					imageUrl: this.dataList.HotelImg && this.dataList.HotelImg.length > 0 ?
						this.dataList.HotelImg[0] : "",
				};
			},
			// #endif
		},
	};
</script>

<style scoped>
	@import url("@/asset/css/flex.css");

	.hotel-detail {
		height: 100vh;
		overflow: hidden;
		width: 100vw;
		font-family: "pingfang";
		background: #F3F3F3;
	}

	.hotel-detail .flex {
		display: flex;
		align-items: center;
	}

	.hotel-detail .f12 {
		font-size: 24rpx !important;
	}

	.hotel-detail .king {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		overflow: hidden;
		background: rgba(255, 255, 255, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.hotel-detail .regular {
		font-weight: 500 !important;
	}

	.hotel-detail .hotel-content {
		position: relative;
		z-index: 2;
		top: -110rpx;
	}

	.hotel-detail .hotel-content .date-box {
		margin: 30rpx 0;
		background: #ecf1f4;
		border-radius: 16rpx;
		padding: 25rpx;
		justify-content: space-between;
	}

	.hotel-detail .hotel-content .date-box .hr-line {
		width: 24rpx;
		height: 4rpx;
		background: #222;
		margin-right: 24rpx;
	}

	.hotel-detail .hotel-content .date-box .ver-line {
		width: 1px;
		height: 49rpx;
		background: #a8a8a8;
		opacity: 0.3;
		margin-right: 24rpx;
	}

	.hotel-detail .hotel-content .date-box .date {
		font-size: 24rpx;
		font-weight: bold;
		color: #111111;
		margin-right: 24rpx;
	}

	.hotel-detail .hotel-content .date-box .date .date-week {
		font-size: 24rpx;
		font-weight: 500;
		color: #6e6e6e;
		margin-left: 18rpx;
	}

	.hotel-detail .hotel-content .hotel-more-info {
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #ffffff;
		border: 1px solid #111111;
		border-radius: 8rpx;
		margin: 0 auto;
		font-size: 24rpx;
		font-weight: 500;
		color: #1f1f1f;
		text-align: center;
	}

	.hotel-detail .empty-block {
		height: 20rpx;
		background-color: #ecf1f4;
	}

	.hotel-detail .hotel-content .detail-box {
		padding: 33rpx 30rpx 0 30rpx;
	}

	.hotel-detail .hotel-content .detail-box .nearby-type {
		padding: 0 16rpx;
		height: 40rpx;
		line-height: 40rpx;
		background: #fff;
		border-radius: 20rpx;
		margin-right: 10rpx;

		font-size: 28rpx;
		font-weight: 500;
		color: #1f1f1f;
	}

	.hotel-detail .hotel-content .detail-box .nearby-type.active {
		color: #dfbe6e;
		background: rgba(223, 190, 110, 0.2);
	}

	.hotel-detail .hotel-content .title-style-one {
		font-weight: 500;
		font-size: 24rpx;
		color: #080A09;
		line-height: 43rpx;
		text-indent: 21rpx;
	}

	.hotel-detail .hotel-content .title-style-one item-title {
		line-height: 36rpx;
	}

	.hotel-detail .hotel-content .title-style-one .item-content {
		color: #B99846;
		margin-left: 5rpx;
		line-height: 36rpx;
	}

	.title-style-one li {
		margin-bottom: 5rpx;
	}

	.hotel-detail .hotel-content .big-title {
		position: relative;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 35rpx;
	}

	.hotel-detail .hotel-content .big-title::before {
		display: block;
		width: 18rpx;
		height: 18rpx;
		background: #E2C27A;
		border-radius: 5rpx;
		content: " ";
		position: absolute;
		left: 0;
		bottom: -4rpx;
		z-index: 1;
	}

	.hotel-detail .hotel-content .big-title text {
		font-size: 34rpx;
		font-weight: bold;
		color: #1f1f1f;
		position: relative;
		z-index: 2;
	}

	.hotel-detail .hotel-content .hotel-base .hotel-room .room-type {
		/* padding:10rpx 30rpx; */
		display: flex;
		align-items: center;
		overflow-x: auto;
		flex-wrap: nowrap;
	}

	.hotel-detail .hotel-content .hotel-base .room-list {
		padding-top: 40rpx;
	}

	.hotel-detail .hotel-content .hotel-base .hotel-room .room-type .item {
		padding: 16rpx 30rpx;
		background: #ecf1f4;
		border-radius: 8rpx;
		margin-right: 26rpx;
		font-size: 22rpx;
		color: #999999;
		font-weight: 400;
		flex-shrink: 0;
	}

	.hotel-detail .hotel-content .hotel-base .hotel-room .room-type .item.active {
		background: #111111;
		color: #ffffff;
	}

	.hotel-detail .hotel-content .hotel-base .hotel-room .room-type .item:last-child {
		margin-right: 0;
	}

	.hotel-detail .hotel-content .hotel-base {
		/* position: relative;
          top: -140rpx; */
		border-top-left-radius: 60rpx;
		border-top-right-radius: 60rpx;
		background: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hoteldetailbj.png) no-repeat #F3F3F3;
		background-size: 100% auto;
		padding: 39rpx 0 44rpx 0;
	}

	.location {
		display: flex;
		align-items: center;
	}

	.location .loc-left {
		width: 1px;
		flex: 1;
	}

	.location .loc-left .loc-name {
		font-size: 28rpx;
		font-weight: 800;
		color: #111111;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.location .loc-left .loc-remark {
		font-size: 22rpx;
		font-weight: 500;
		color: #6e6e6e;
		line-height: 34rpx;
	}

	.location .loc-right {
		font-size: 24rpx;
		font-weight: 500;
		color: #111111;
		display: flex;
		align-items: center;
	}

	.hotel-detail .hotel-content .hotel-base .head {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.hotel-detail .hotel-content .hotel-base .head .hotel-name {
		font-size: 36rpx;
		font-weight: 800;
		color: #111111;
	}

	.hotel-detail .hotel-content .hotel-base .head .hotel-tag {
		font-size: 22rpx;
		font-weight: 500;
		color: #6e6e6e;
	}

	.hotel-Opening {
		font-weight: 500;
		font-size: 24rpx;
		color: #B99846;
		margin-right: 31rpx;
		margin-bottom: 20rpx;
		display: inline-block;
	}

	.hotel-tagText {
		background: #FFFFFF;
		border-radius: 4rpx;
		border: 1rpx solid #B99846;
		color: #B99846;
		text-align: center;
		margin-right: 8rpx;
		margin-bottom: 20rpx;
		height: 34rpx;
		line-height: 26rpx;
		padding: 0 12rpx;
		display: inline-block;
	}

	.hotel-detail .hotel-content .hotel-base .head .op-box image {
		width: 58rpx;
		height: 58rpx;
	}

	.hotel-detail .hotel-content .hotel-base .shebei {
		padding: 34rpx 0;
		margin-bottom: 34rpx;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
	}

	.hotel-detail .hotel-content .hotel-base .shebei .sb-left {
		width: 1px;
		flex: 1;
		/* display: flex; */
		align-items: center;
		display: -webkit-box;
		overflow: auto;
		margin-right: 20rpx;
	}

	.hotel-detail .hotel-content .hotel-base .shebei .sb-left .sb-item {
		padding: 7rpx 13rpx;
		background: #ecf1f4;
		border-radius: 4rpx;
		font-size: 22rpx;
		font-weight: 500;
		color: #111111;
		margin-right: 10rpx;
	}

	.hotel-detail .hotel-content .hotel-base .shebei .sb-right {
		font-size: 24rpx;
		font-weight: 500;
		color: #111111;
		display: flex;
		align-items: center;
	}

	.hotel-detail .hotel-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;
	}

	.hotel-detail .media {
		position: relative;
		z-index: 1;
		background: #fff;
		box-shadow: 0rpx 14rpx 40rpx 0rpx rgba(76, 76, 76, 0.06);
		border-radius: 0rpx 0rpx 40rpx 40rpx;
		overflow: hidden;
	}

	.hotel-detail .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, 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hotel-detail .media .video-box {
		background-color: #111;
		height: 545rpx;
		position: relative;
	}

	.hotel-detail .media .type-box {
		width: 100px;
		height: 50rpx;
		position: absolute;
		background-color: rgba(255, 255, 255, 0.6);
		border-radius: 50rpx;
		left: 50%;
		bottom: 80px;
		margin-left: -50px;
	}

	.hotel-detail .media .media-info .type-img-box {
		background-color: rgba(255, 255, 255, 0.5);
		color: #fff;
		display: flex;
		align-items: center;
		height: 96rpx;
		width: 96rpx;
		padding: 8rpx;
		border-radius: 12rpx;
		position: relative;
	}

	.hotel-detail .media .media-info .type-img-box image {
		height: 80rpx;
		width: 80rpx;
		border-radius: 12rpx;
		opacity: 0.5;
	}

	.hotel-detail .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;
	}

	.hotel-detail .media .media-info .type-img-box text {
		font-size: 22rpx;
		font-family: pingfang;
		margin-left: 6rpx;
	}

	.hotel-detail .media .media-info {
		position: absolute;
		background-color: rgba(0, 0, 0, 0.35);
		top: 287rpx;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx 50rpx;
	}

	.hotel-detail .media .media-info .mi-left {
		flex: 1;
	}

	.detail_ShareBtn {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
	}

	.name-ali {
		/* #ifdef MP-ALIPAY */
		box-sizing: border-box;
		padding-left: 30rpx;
		/* #endif */
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.orderIforDiZhi {
		padding: 27rpx 32rpx 41rpx 32rpx;
	}

	.orderIforDiZhiL {
		font-weight: 800;
		font-size: 32rpx;
		color: #080A09;
		padding-bottom: 18rpx;
	}

	.orderIforDiZhiRImg {
		width: 23rpx;
		margin-right: 13rpx;
	}

	.orderIforDiZhiRText {
		width: 1px;
		flex: 1;
		font-weight: 500;
		font-size: 28rpx;
		color: #1D1D20;
		line-height: 38rpx;
	}

	.ReservationInforBox {
		border-radius: 18rpx;
		background: #fff;
		margin: 28rpx 31rpx 28rpx 31rpx;
		padding: 37rpx 18rpx 49rpx 18rpx;
	}

	.ReservationInforTitle {
		font-weight: 800;
		font-size: 32rpx;
		color: #080A09;
		padding-bottom: 24rpx;
	}

	.ResInforText {
		padding: 21rpx 19rpx;
	}

	.ResInforL {
		width: 120rpx;
		text-align: right;
		margin-right: 57rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #303133;
	}

	.ResInforR {
		width: 1px;
		flex: 1;
		font-weight: bold;
		font-size: 28rpx;
		color: #080A09;
	}

	.ResInforR.active {
		color: #B99846;
	}

	.ResInforTisp {
		font-weight: 500;
		font-size: 24rpx;
		color: #1D1D20;
		line-height: 42rpx;
	}

	.ResInforText.ResInforTtisp {
		padding: 14rpx 19rpx 21rpx 19rpx;
	}
</style>