<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"
            :effect3d="false"
            :height="545"
            :interval="5000"
            :border-radius="0"
            name="Path"
          ></u-swiper>
          <!--
          <view class="video-box" v-if="active == 0">
            <video
              id="myVideo"
              :src="detailData.VideoUrl"
              style="width: 100%; height: 100%"
              :controls="controls"
              :show-center-play-btn="false"
              :show-fullscreen-btn="false"
              @fullscreenchange="videoControl"
              object-fit="fill"
            ></video>
            <view @click="enlarge" class="play-btn">
              播放按钮
              <image
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png"
                style="width: 37rpx; height: 44rpx"
                mode=""
              ></image>
            </view>
          </view>-->
          <!-- #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.location.address }},
                  {{ HotelInfo.location.destination.name }},
                  {{ HotelInfo.location.country.name }}
                </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">有窗</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-sb-n">
                <view class="ResInforL">面积</view>
                <view class="ResInforR">32㎡</view>
            </view>
            <view class="ResInforText row-sb-n">
                <view class="ResInforL">网络</view>
                <view class="ResInforR">WIFI</view>
            </view>
            <view class="ResInforText row-sb-n">
                <view class="ResInforL">楼层数</view>
                <view class="ResInforR">1-20</view>
            </view>
            <view class="ResInforText row-sb-n">
                <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',
        ],
        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))
         console.log(JSON.parse(decodeURIComponent(options.msg)))
      }
      if(options.HotelInfo){
        this.HotelInfo = JSON.parse(options.HotelInfo)
        console.log(this.HotelInfo,'酒店详情')
      }
      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];
            console.log(this.HotelInfo.HotelName,'酒店详情')
						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) {
              // console.log(err.errMsg);
            },
          },
        });
      },
      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 */
  }
  
    .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>
  