<template>
  <view>
    <u-dropdown ref="uDropdown" 
          @open="open" @close="close" 
          active-color="#B99846" 
          inactive-color="#080A09"
          title-size="28"
          >
    <u-dropdown-item 
      v-model="parameters.OrderByType" 
      :title="optionsTitle[0]" 
      :options="options1">
        <view
          class="slot-content hotelComprehensiveBox column"
          style="background-color: #FCFCFC"
        >
          <view class="hotelComprehensiv row items-center" 
          v-for="(item,index) in threeLevelList" :key="index"
          :class="[item.isCheck==1?'active':'']"
          @click="changeRoomType(item)">
            <text>{{ item.name }}</text>
            <view v-if="item.isCheck==1">
              <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638760948784111958.png"/>
            </view>
          </view>
        </view>
      </u-dropdown-item>
      <u-dropdown-item 
      v-model="parameters.OrderByType" 
      :title="optionsTitle[1]" 
      :options="options1">
        <view
          class="slot-content hotelComprehensiveBox column"
          style="background-color: #FCFCFC"
        >
          <view class="hotelComprehensiv row items-center" 
          v-for="(item,index) in threeLevelList" :key="index"
          :class="[item.isCheck==1?'active':'']"
          @click="changeRoomType(item)">
            <text>{{ item.name }}</text>
            <view v-if="item.isCheck==1">
              <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638760948784111958.png"/>
            </view>
          </view>
        </view>
      </u-dropdown-item>
      <u-dropdown-item 
      v-model="parameters.OrderByType" 
      :title="optionsTitle[2]" 
      :options="options1">
        <view
          class="slot-content hotelComprehensiveBox column"
          style="background-color: #FCFCFC"
        >
          <view class="hotelComprehensiv row items-center" 
          v-for="(item,index) in threeLevelList" :key="index"
          :class="[item.isCheck==1?'active':'']"
          @click="changeRoomType(item)">
            <text>{{ item.name }}</text>
            <view v-if="item.isCheck==1">
              <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638760948784111958.png"/>
            </view>
          </view>
        </view>
      </u-dropdown-item>
    </u-dropdown>
    <view style="padding: 0 31rpx;">
      <view class="hotelDetailBox activeTag"
      v-for="(item,index) in RoomList" :key="index">
        <view class="hotelDetailTag">
        热门房型
        </view>
        <view class="hotelDetail row">
          <view class="hotelDetailL" @click="openPicture(item.images)">
            <image mode="heightFix" :src="item.Path"/>
            <view class="hotelDetailLImgs" v-if="item.images.length>1">
              {{ item.images.length }}
            </view>
          </view> 
          <view class="hotelDetailR column">
            <view class="hotelDetailRTitle row items-center">
              <view>
                {{ item.roomName }}
              </view>
              <!--
              <img :src="openImg[0]" />-->
            </view>
            <view class="hotelDetailRRoom">
              <!--
              Deluxe Double Room(2 beds)-->
            </view>
            <view class="hotelDetailRCheckin">{{item.maxOccupancy}}人入住 {{item.size}}㎡ {{item.floor}}楼</view>
            <view class="hotelDetailREat">
              不含早餐
              <text>入住当天18：00前可免费取消</text>
            </view>
            <view class="hotelDetailRConfirmTag">
              <text>立即确认</text>
            </view>
            <view class="hotelDetailRPriceBox row">
              <view style="width:1px;flex: 1;">
              </view>
              <view class="row">
                <view class="column">
                  <view class="hotelDetailRPrice">
                    CNY <text>399</text>起/晚
                  </view>
                  <view class="hotelDetailRPriceT">2晚总价 <text>¥1258</text></view>
                </view>  
                <view class="hotelDetailRPriceBook">
                  订
                </view>
              </view>  
            </view>
          </view> 
        </view>
          <view class="hotelDetailMXBox">
            <view class="hotelDetailMXB">
                查看2个价格详细
                <u-icon class="hotelDetailDown" name="arrow-down"></u-icon>
            </view>
            <view class="hotelDetailMinXiBox">
              <view class="hotelDetailMinXi">
                <view class="hotelDetailMinXiTitle">无早餐</view>
                <view class="row">
                  <view class="hotelDetailMinXiL">
                    <view class="hotelDetailMinXiLT">入住当天18：00前可免费取消</view> 
                    <view class="hotelDetailMinXiLC">
                      <text>立即确认</text>
                    </view> 
                  </view>
                  <view class="hotelDetailMinXiR row">
                    <view class="column">
                      <view class="hotelDetailMinXiRF"> </view>
                      <view class="hotelDetailMinXiRP">
                        CNY <text>399</text>
                      </view>
                      <view class="hotelDetailMinXiRT">2晚总价 <text>¥1258</text></view>
                    </view> 
                    <view class="column hotelDetailMinXiRBBox">
                      <text class="hotelDetailMinXiRS">剩2间</text>
                      <view class="hotelDetailMinXiRB">
                        订
                      </view>
                    </view> 
                  </view>  
                </view>
              </view>
            </view>
            
        </view>
      </view>
    </view>
  </view>
</template>
  
  <script>
  export default {
      props: ['dataList','search','rooms'],
      components: {},
      data() {
          return {
            optionsTitle: ["房型", "床型", "餐食"],
            searchObj:{},
            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,
              },
            ],
            isShowAll: false,
            RoomList: [],
            parameters: {},
          };
      },
      watch:{
        rooms: {
          handler (val, oldval) {
                if(val){
                    this.RoomList = val
                    console.log(this.RoomList,'rooms');
                }
            },
            deep: true,
          },
    },
      onLoad(options) {
          
      },
      created() {
          this.searchObj = this.search
      },
      methods: {
        openPicture(item) {
          let imgObj = JSON.stringify(item);
          uni.navigateTo({
            url: "/pages/hotel/picture?imgObj=" + imgObj,
          });
        },
        //点击过滤房间
        changeRoomType(obj) {
          if (obj.isCheck == 0) {
            obj.isCheck = 1;
          } else {
            obj.isCheck = 0;
          }
          this.RoomList = [];
          let num = 0;
          this.threeLevelList.forEach((x) => {
            if (x.isCheck == 1) {
              num++;
              this.dataList.rooms.forEach((y) => {
                if (x.id == 1 && y.BedType == 1) {
                  this.RoomList.push(y);
                }
                if (x.id == 2 && y.BedType == 2) {
                  this.RoomList.push(y);
                }
                if (x.id == 3 && y.BedType == 3) {
                  this.RoomList.push(y);
                }
                if (x.id == 4 && y.BreakfastType != 4) {
                  this.RoomList.push(y);
                }
                if (x.id == 5 && y.IsCancel == 2) {
                  this.RoomList.push(y);
                }
              });
            }
          });
          if (num == this.threeLevelList.length) {
            this.isShowAll = true;
          } else {
            this.isShowAll = false;
          }
          if (num == 0) {
            this.RoomList = this.dataList.rooms;
          }
        },
        open(index) {
          // 展开某个下来菜单时，先关闭原来的其他菜单的高亮
          // 同时内部会自动给当前展开项进行高亮
          this.$refs.uDropdown.highlight();
        },
        close(index) {
          // 关闭的时候，给当前项加上高亮
          // 当然，您也可以通过监听dropdown-item的@change事件进行处理
          this.$refs.uDropdown.highlight(index);
        },
      },
  };
  </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 {
  height: 545rpx;
  position: relative;
  z-index: 1;
}

.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 */
}
.hotel-Sub{
  width: 116rpx;
  height: 41rpx;
  display: inline-block;
  position: relative;
  top:10rpx
}
.hotel-Sub.hotel-Sub3{
  width: 85rpx;
}
.hotel-Sub.hotel-Sub4{
  width: 101rpx;
}
.hotel-Economy{
		font-weight: 500;
		font-size: 30rpx;
		color: #757776;
		margin-right: 10rpx;
	}
  .hotel-brand{
    font-weight: 500;
    font-size: 32rpx;
    color: #080A09;
    padding: 12rpx 0 14rpx 0;
  }
  .hotelDetaMapBox{
    background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638762604596133819.png');
    background-size: 689rpx 148rpx;
  }
  .hotelDetaMap{
    padding: 39rpx 36rpx;
  }
  .hotelDetaMapL view:first-child{
    font-weight: bold;
    font-size: 24rpx;
    color: #080A09;
  }
  .hotelDetaMapL view:last-child{
    font-weight: 500;
    font-size: 24rpx;
    color: #757776;
    margin-top: 15rpx;
  }
  .hotelMapIcon{
		padding: 0 0 0 51rpx;
		font-size: 24rpx;
	}
	.hotelMapIcon text{
		margin-top: 8rpx;
	}
  .hotelTimeBoxL{
    width: 1px;
    flex: 1;
    flex-wrap: nowrap;
    justify-content: space-between;
    border-right: 1rpx solid #E9E9E9;
  }
  .hotelTime text{
    font-weight: 500;
    font-size: 24rpx;
    color: #BCBCBC;
  }
  .hotelTime view{
    white-space: nowrap;
    font-weight: bold;
    font-size: 32rpx;
    color: #080A09;
  }
  .hotelTimeTop{
    position: relative;
    top: -10rpx;
  }
  .hotelTimeEven{
    justify-content: end;
    align-items: end;
    margin-right: 20rpx;
  }
  .hotelTimeEven text{
    display: inline-block;
    white-space: nowrap;
    background: #E2AB4E;
    color: #fff;
    border-radius: 4rpx;
    padding: 0rpx 8rpx 3rpx 8rpx;
    font-size: 20rpx;
  }
  .hotelTimeBoxR{

  }
  .hotelTimeBoxRTitle{
    display: block;
    font-weight: 500;
    font-size: 24rpx;
    color: #BCBCBC;
    text-align: right;
    position: relative;
    top: -10rpx;
  }
  .hotelTimeBoxRText{
    padding-left: 20rpx;
  }
  .hotelTimeBoxRT{
    padding-right: 22rpx;
  }
  .hotelTimeBoxRT:last-child{
    padding-right: 0;
  }
  .hotelTimeBoxRT text{
    display: inline-block;
    white-space: nowrap;
    font-weight: 400;
    font-size: 24rpx;
    color: #757776;
  }
  .hotelTimeBoxRT view{
    font-weight: bold;
    font-size: 32rpx;
    color: #333333;
    margin-left: 13rpx;
  }
  .hotelComprehensiveBox{
        padding: 0 30rpx;
    }
    .hotelComprehensiv{
        height: 78rpx;
        line-height: 70rpx;
        font-size: 28rpx;
		color: #080A09;
        justify-content: space-between;
    }
    .hotelComprehensiv.active{
        color: #B99846;
		font-weight: bold;
    }
    .hotelComprehensiv img{
		width: 28rpx;
		height: 28rpx;
		display: block;
	}
 
  .hotelDetailBox{
    overflow: hidden;
    position: relative;
    border-radius: 15rpx;
    background: #FFFFFF;
    overflow: hidden;
    box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36,36,36,0.2);
    margin-bottom: 31rpx;
  }
  .hotelDetailTag{
    position: absolute;
    left: -4px;
    top: 0px;
    width: 172rpx;
    height: 42rpx;
    background: url(https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/hoteldetailtag.png) no-repeat;
    background-size: 174rpx 42rpx;
    font-weight: 500;
    font-size: 28rpx;
    color: #82610F;
    text-align: center;
    line-height: 42rpx;
  }
  .hotelDetail{
    padding: 39rpx 25rpx 34rpx 25rpx;
  }
  .hotelDetailBox.activeTag .hotelDetail{
    padding: 65rpx 25rpx 33rpx 25rpx;
  }
  .hotelDetailBox.active{
    border: 2px solid #E6D19B;
  }
  .hotelDetailL{
    width: 174rpx;
    height: 257rpx;
    position: relative;
    border-radius: 15rpx;
    overflow: hidden;
    box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(36,36,36,0.2);
  }
  .hotelDetailL image{
    width: 100%;
    height: 100%;
  }
  .hotelDetailLImgs{
    background: rgba(23,23,23,.4);
    border-radius: 20rpx 0rpx 20rpx 0rpx;
    position: absolute;
    right:0;
    bottom: 0;
    font-weight: 500;
    font-size: 24rpx;
    color: #FFFFFF;
    text-align: center;
    padding: 8rpx 14rpx;
    z-index: 2;
  }
  .hotelDetailR{
    width: 1px;
    flex: 1;
    height: 257rpx;
    padding-left: 20rpx;
    position: relative;
    top: -10rpx;
  }
  .hotelDetailRTitle{
    font-weight: bold;
    font-size: 32rpx;
    color: #080A09;
  }
  .hotelDetailRTitle view{
    width: 1px;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }
  .hotelDetailRTitle img{
    width: 32rpx;
    height: 32rpx;
    margin-left: 15rpx;
  }
  .hotelDetailRRoom{
    font-weight: 500;
    font-size: 28rpx;
    color: #333333;
    padding: 8rpx 0 10rpx 0;
  }
  .hotelDetailRCheckin{
    font-weight: 500;
    font-size: 22rpx;
    color: #080A09;
  }
  .hotelDetailREat{
    font-weight: 500;
    font-size: 22rpx;
    color: #080A09;
    padding: 5rpx 0 9rpx 0;
  }
  .hotelDetailREat text{
    font-weight: 500;
    font-size: 22rpx;
    color: #B99846;
    margin-left: 13rpx;
  }
  .hotelDetailRConfirmTag text{
    display: inline-block;
    padding: 0 10rpx;
    background: #F1F4F6;
    border-radius: 4rpx;
    border: 1px solid #BCBCBC;
    font-weight: 500;
    font-size: 20rpx;
    color: #757776;
  }
  .hotelDetailRPriceBox{
    height: 1px;
    flex: 1;
    position: relative;
    top: -15rpx;
  }
  .hotelDetailRPrice{
    font-size: 20rpx;
    color: #FF3166;
  }
  .hotelDetailRPrice text{
    font-size:34rpx;
    font-weight: 800;
    margin-left: 10rpx;
  }
  .hotelDetailRPriceT{
    font-weight: 400;
    font-size: 22rpx;
    color: #666666;
  }
  .hotelDetailRPriceT text{
    margin-left: 10rpx;
  }
  .hotelDetailRPriceBook{
    width: 74rpx;
    height: 81rpx;
    background: #080A09;
    border-radius: 14rpx;
    border: 2px solid #111111;
    position: relative;
    top: -10rpx;
    font-weight: 800;
    font-size: 32rpx;
    color: #E2C27A;
    text-align: center;
    line-height: 81rpx;
    margin-left: 16rpx;
  }
  .hotelDetailMXBox{
    border-top:1rpx solid #F0F0F0;
  }
  .hotelDetailMXB{
    font-weight: 500;
    font-size: 28rpx;
    color: #333333;
    padding: 25rpx 0 26rpx 0;
    text-align: center;
  }
  .hotelDetailDown{
    display: inline-block;
    margin-left: 13rpx;
    position: relative;
    top: 5rpx;
  }
  .hotelDetailMinXiBox{
    background: #FAFAFA ;
    padding: 30rpx 26rpx 45rpx 26rpx;
  }
  .hotelDetailMinXi{
    margin-bottom: 40rpx;
  }
  .hotelDetailMinXi:last-child{
    margin-bottom: 0;
  }
  .hotelDetailMinXiTitle{
    font-weight: bold;
    font-size: 32rpx;
    color: #080A09;
  }
  .hotelDetailMinXiL{
    width: 1px;
    flex: 1;
  }
  .hotelDetailMinXiLT{
    font-weight: 500;
    font-size: 22rpx;
    color: #B99846;
    padding: 17rpx 0 10rpx 0;
  }
  .hotelDetailMinXiLC text{
    display: inline-block;
    padding: 0 10rpx;
    background: #F1F4F6;
    border-radius: 4rpx;
    border: 1px solid #BCBCBC;
    font-weight: 500;
    font-size: 20rpx;
    color: #757776;
  }
  .hotelDetailMinXiR{
    height: 90rpx;
  }
  .hotelDetailMinXiRP{
    
    font-size: 20rpx;
    color: #FF3166;
  }
 .hotelDetailMinXiRP text{
    font-weight: 800;
    font-size: 34rpx;
    margin-left: 10rpx;
  }
  .hotelDetailMinXiRT{
    font-weight: 400;
    font-size: 22rpx;
    color: #666666;
  }
  .hotelDetailMinXiRT text{
    margin-left: 10rpx;
  }
  .hotelDetailMinXiRS{
    display: inline-block;
    text-align: center;
    font-weight: 500;
    font-size: 18rpx;
    color: #111111;
    margin-bottom: 8rpx;
  }
  .hotelDetailMinXiRB{
    width: 74rpx;
    height: 81rpx;
    background: #080A09;
    border-radius: 14rpx;
    border: 2px solid #111111;
    font-weight: 800;
    font-size: 32rpx;
    color: #E2C27A;
    line-height: 81rpx;
    text-align: center;
  }
  .hotelDetailMinXiRBBox{
    margin-left: 16rpx;
    position: relative;
    top: -20rpx;
  }
  .hotelDetailMinXiRF{
    height: 1px;
    flex: 1;
  }
  
  </style>
  