<template>
  <div class="info">
    <div class="info-header">
      <img src="@/assets/images/icon-12.png" alt="" />
      <div class="info-header__content">
        <h2>阔越云栖酒店(奉节高铁站店)</h2>
        <div>
          <img class="info-header__icon" src="@/assets/images/address.png" alt="" />
          <span class="info-header__text">地址：奉节奉节夔州街道诗诚西路1992号附6号</span>
        </div>
        <div>
          <img class="info-header__icon" src="@/assets/images/user.png" alt="" />
          <span class="info-header__text">负责人：王民</span>
        </div>
        <div>
          <img class="info-header__icon" src="@/assets/images/phone.png" alt="" />
          <span class="info-header__text">联系电话：+86-23-56636999</span>
        </div>
      </div>
    </div>
    <div class="statistic-box">
      <div class="statistic-item">
        <div class="statistic-item__label">
          <img src="@/assets/images/dot-primary.svg" alt="" />
          <span>房间数</span>
        </div>
        <div class="statistic-item__value">
          <countup :end-val="200" />
          <span>间</span>
        </div>
      </div>
      <div class="statistic-item">
        <div class="statistic-item__label">
          <img src="@/assets/images/dot-primary.svg" alt="" />
          <span>床位数</span>
        </div>
        <div class="statistic-item__value">
          <countup :end-val="640" />
          <span>床</span>
        </div>
      </div>
      <div class="statistic-item">
        <div class="statistic-item__label">
          <img src="@/assets/images/dot-primary.svg" alt="" />
          <span>车位数</span>
        </div>
        <div class="statistic-item__value">
          <countup :end-val="1000" />
          <span>位</span>
        </div>
      </div>
      <div class="statistic-item">
        <div class="statistic-item__label">
          <img src="@/assets/images/dot-primary.svg" alt="" />
          <span>空余房间数</span>
        </div>
        <div class="statistic-item__value">
          <countup :end-val="10" />
          <span>间</span>
        </div>
      </div>
      <div class="statistic-item">
        <div class="statistic-item__label">
          <img src="@/assets/images/dot-primary.svg" alt="" />
          <span>空余床位</span>
        </div>
        <div class="statistic-item__value">
          <countup :end-val="15" />
          <span>床</span>
        </div>
      </div>
    </div>
    <div class="desc-box">
      <title2 title="酒店简介" />
      <div class="desc-container">
        <p class="desc-content">
          酒店位于奉节县西部新区夔州街道诗诚西路1992号，一家拥有独立茶室、餐厅、健身房、洗衣房、棋牌室，集住宿、餐厅、娱乐为一体的高档酒店。酒店距离奉节高铁站仅10分钟车程，距离人民广场步行街驾车20分钟，距离白帝城瞿塘峡景区、夔州古城、夔州博物馆驾车约30分钟，三峡之巅约1个小时。我们为您提供优质的早餐服务和24小时的管家服务，洗衣服务，拥有亲子房、影院房、浴缸房、套房等多种房型，每个房间内都配有小度智能客控，可以语音控制所有家电（空调、电视、窗帘、灯光等），只为给您带来更舒适的入住体验，是您旅游、商务出行的不二选择。在这里，您可以在茶室择一芳茶席，沏一壶清茶，一起看云卷云舒，静看花开花落，不争不急；也可以在棋牌室里和朋友一起玩转机麻，还可以在健身房里挥洒汗水，塑造自我，挑战自我。我们在这里欢迎您的到来。
        </p>
        <div>
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="item in 4" :key="item">
              <el-image class="cover-item" :src="map"></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import countup from 'vue-countup-v3'
  import map from '@/assets/images/map-img-1.jpg'
</script>

<style scoped lang="scss">
  :deep(.el-carousel__container) {
    margin-top: vh(20);
    height: vh(350) !important;
  }
  .cover-item {
    width: 100%;
    height: vh(350);
  }
  .info {
    margin-top: vh(120);
    width: vw(626);
    height: vh(950);
    background: linear-gradient(321deg, #0b2f64 0%, #062b57 100%);
    &-header {
      padding: vh(12) vw(12);
      height: vh(167);
      box-sizing: border-box;
      display: flex;
      align-items: flex-start;
      background-image: url('@/assets/images/hotel-header-bg.png');
      background-size: 100% 100%;
      > img {
        width: vw(74);
        height: vw(74);
      }
      &__content {
        margin-left: vw(20);
        > h2 {
          font-weight: 800;
          font-size: vw(20);
          color: #ffffff;
          margin-bottom: vh(12);
          margin-top: vh(10);
        }
        > div {
          margin-bottom: vh(12);
          display: flex;
          align-items: center;
        }
      }
      &__icon {
        width: vw(20);
        height: vw(20);
        margin-right: vw(8);
      }
      &__text {
        font-weight: 400;
        font-size: vw(16);
        color: #0096ff;
      }
    }
    .statistic {
      &-box {
        height: vh(114);
        margin: 0 vw(26);
        gap: vw(20);
        display: flex;
        align-items: center;
      }
      &-item {
        flex: 1;
      }
      &-item__label {
        margin-bottom: vh(16);
        display: flex;
        align-items: center;
        > span {
          font-weight: 400;
          font-size: vw(14);
          color: #ffffff;
          margin-left: vw(4);
        }
      }
      &-item__value {
        width: vw(100);
        height: vh(30);
        padding-left: vw(12);
        padding-bottom: vh(12);
        display: flex;
        align-items: flex-end;
        background-image: url('@/assets/images/mask-primary.png');
        background-size: 100% 100%;
        .countup-wrap {
          font-weight: bold;
          font-size: vw(28);
          color: #02f9fa;
        }
        > span {
          font-size: vw(12);
          color: #02f9fa;
          margin-left: vw(4);
        }
      }
    }
    .desc {
      &-box {
        margin: 0 vw(20);
        background-image: url('@/assets/images/bg-3.png');
        background-size: 100% 100%;
      }
      &-container {
        padding: vh(20) vw(20) 0 vw(20);
      }
      &-content {
        overflow-y: auto;
        height: vh(200);
        font-weight: 400;
        font-size: vw(16);
        color: #ffffff;
        line-height: vw(26);
        text-align: justify;
        /* 滚动条整体样式 */
        &::-webkit-scrollbar {
          width: vw(4); /* 滚动条的宽度 */
        }
        /* 滚动条轨道 */
        &::-webkit-scrollbar-track {
          background: 'transparent'; /* 轨道的背景色 */
        }
        /* 滚动条滑块 */
        &::-webkit-scrollbar-thumb {
          background: rgba(0, 150, 255, 0.63); /* 滑块的背景色 */
          border-radius: 5px; /* 滑块的圆角 */
        }
      }
    }
  }
</style>
