<template>
  <div class="hotel-detail">
    <div class="banner">
    </div>
    <div class="title-area">
      <div class="title-bar">
        <div class="left">
          <h2>芜湖金鹰尚美酒店</h2>
          <div class="star">5星级</div>
        </div>
        <div class="right">
          427余套客房· 684张床位
        </div>
      </div>
      <div class="address-bar">
        <div class="left-wrap">
          <img class="icon" src="@/assets/img/service/address-gray.png" alt="" draggable="false">
          <div class="info">
            <div class="address">芜湖市镜湖区中山北路77号</div>
            <div class="distance">距您2.8km</div>
          </div>
        </div>
        <button>
          <img class="icon" src="@/assets/img/service/navigation.png" alt="" draggable="false">
          <span>开启导航</span>
        </button>
      </div>
      <div class="phone-bar">
        <div class="left-wrap">
          <img class="icon" src="@/assets/img/service/phone-gray.png" alt="" draggable="false">
          <div class="info">
            <div class="title">
              咨询电话
            </div>
            <div class="phone">
              0533-3888999
            </div>
          </div>
        </div>
        <button>
          <img class="icon" src="@/assets/img/service/phone-blue.png" alt="" draggable="false">
          <span>快速拨通</span>
        </button>
      </div>
    </div>
    <div class="splitter">
    </div>
    <div
      class="desc"
    >
      <h2>酒店概况</h2>
      <div
        class="content"
        :class="{
          expand: isExpanded
        }"
      >
        酒店位于芜湖市中心位置—中山北路，毗邻八佰伴、凤凰美食街、华强吾悦广场、苏宁广场，以及一步之遥的中山路步行街。酒店“闹中取静”，背靠繁华交通主干道，拥有独立的地下及地面停车场。<br>
        酒店有三百余间客房，客房位于酒店21F以上，透过房间落地窗，可以饱览赭山或长江美景。房内提供无线宽带、频道选择、私人保险箱、咖啡和茶、配有浴缸和独立淋浴间的宽敞浴室。同时，酒店还为儿童们准备了独具特色的儿童主题房，希望能成为您和家人心中“行业的佼佼者”。
        <button
          class="expand-content"
          v-show="!isExpanded"
          @click="isExpanded = true"
        >
          收起
        </button>
      </div>
    </div>
    <div class="splitter" />
    <div class="food">
      <h2>周边美食</h2>
      <button class="more">
        更多
        <img class="" src="@/assets/img/service/arrow-gray-blunt.png" alt="" draggable="false">
      </button>
      <div class="food-photo-wrap"
        v-for="n in 2"
        :key="n"
      >
        <img class="food-photo" src="@/assets/img/service/arrow-gray-blunt.png" alt="" draggable="false">
        <div class="food-name">无为板鸭</div>
      </div>
    </div>
    <div class="attractions">
      <h2>周边景点</h2>
      <button class="more">
        更多
        <img class="" src="@/assets/img/service/arrow-gray-blunt.png" alt="" draggable="false">
      </button>
      <div class="attraction-photo-wrap"
        v-for="n in 2"
        :key="n"
      >
        <img class="attraction-photo" src="@/assets/img/service/arrow-gray-blunt.png" alt="" draggable="false">
        <div class="attraction-name">鸠兹古镇</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false,
    }
  },
}
</script>

<style lang="less" scoped>
.hotel-detail {
  background-color: #fff;
  height: calc(100% - 80px);
  overflow: auto;
  .banner {
    height: 62.9vw;
    background-image: url(~@/assets/img/service/hotel-detail-banner.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
  }
  .title-area {
    padding: 4vw;
    .title-bar {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 3.9vw;
      .left {
        display: flex;
        align-items: flex-end;
        > h2 {
          font-size: 4.8vw;
          font-weight: bold;
          color: #515151;
          white-space: nowrap;
        }
        .star {
          white-space: nowrap;
          padding: 1.1vw 1.9vw;
          font-size: 2.7vw;
          font-weight: 500;
          color: #f5c706;
          background: rgba(217, 28, 28, 1);
          border-radius: 2.3vw;
        }
      }
      .right {
        font-size: 2.9vw;
        color: #B2B2B2;
      }
    }
    .address-bar {
      height: 13.3vw;
      background: #F8F8F8;
      border-radius: 1.3vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2.7vw;
      padding-left: 3vw;
      padding-right: 3vw;
      > .left-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .icon {
          margin-right: 2.5vw;
          width: 4.7vw;
          height: 6.4vw;
        }
        .info {
          .address {
            font-size: 3.7vw;
            font-weight: 500;
            color: #656565;
          }
          .distance {
            font-size: 3.2vw;
            color: #777777;
          }
        }
      }
      > button {
        display: flex;
        align-items: center;
        .icon {
          width: 4.8vw;
          height: 4.8vw;
          margin-right: 1.5vw;
        }
        > span {
          font-size: 4.0vw;
          font-weight: 500;
          color: #00a2ff;
        }
      }
    }
    .phone-bar {
      height: 13.3vw;
      background: #F8F8F8;
      border-radius: 1.3vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2.7vw;
      padding-left: 3vw;
      padding-right: 3vw;
      .left-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .icon {
          margin-right: 2.5vw;
          width: 4.7vw;
          height: 6.4vw;
        }
        .info {
          > .title {
            font-size: 3.7vw;
            font-weight: 500;
            color: #656565;
          }
          > .phone {
            font-size: 3.2vw;
            color: #777777;
          }
        }
      }
      > button {
        display: flex;
        align-items: center;
        .icon {
          width: 4.8vw;
          height: 4.8vw;
          margin-right: 1.5vw;
        }
        > span {
          font-size: 4.0vw;
          font-weight: 500;
          color: #00a2ff;
        }
      }
    }
  }
  > .desc {
    padding: 4vw 4vw 6vw 4vw;
    > h2 {
      font-size: 4.8vw;
      font-weight: 500;
      color: #7A7A7A;
      position: relative;
      margin-bottom: 3.7vw;
      &::before {
        position: absolute;
        content: '';
        top: 0;
        right: calc(100% + 1.5vw);
        height: 95%;
        width: 0.7vw;
        background: #00A2FF;
      }
    }
    > .content {
      font-size: 4.0vw;
      color: #7A7A7A;
      line-height: 6.9vw;
      max-height: calc(6.9vw * 5);
      overflow: hidden;
      position: relative;
      &.expand {
        max-height: initial;
      }
      > button {
        position: absolute;
        left: 0;
        width: 100%;
        bottom: 0;
        height: 1.5em;
        font-size: 4vw;
        font-weight: 500;
        color: #BBBBBB;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%);
        text-align: right;
      }
    }
  }
  > .splitter {
    height: 0.7vw;
    background: #F7F7F7;
  }
  > .food {
    padding: 4vw 0 6vw 4vw;
    position: relative;
    > h2 {
      font-size: 4.8vw;
      font-weight: 500;
      color: #7A7A7A;
      position: relative;
      margin-bottom: 3.7vw;
      &::before {
        position: absolute;
        content: '';
        top: 0;
        right: calc(100% + 1.5vw);
        height: 95%;
        width: 0.7vw;
        background: #00A2FF;
      }
    }
    > button.more {
      position: absolute;
      right: 4vw;
      top: 4vw;
      font-size: 4vw;
      color: #CECECE;
      height: 6vw;
      display: flex;
      align-items: center;
      > img {
        width: 1.9vw;
        height: 3.6vw;
        margin-left: 1.3vw;
      }
    }
    > .food-photo-wrap {
      margin-right: 4vw;
      margin-bottom: 4vw;
      display: inline-block;
      > img.food-photo {
        width: 44vw;
        height: 44vw;
        border-radius: 1.5vw;
        margin-bottom: 1.6vw;
      }
      > .food-name {
        font-size: 3.7vw;
        font-weight: 500;
        color: #9C9C9C;
        width: 44vw;
        text-align: center;
      }
    }
  }
  > .attractions {
    padding: 4vw 0 6vw 4vw;
    position: relative;
    > h2 {
      font-size: 4.8vw;
      font-weight: 500;
      color: #7A7A7A;
      position: relative;
      margin-bottom: 3.7vw;
      &::before {
        position: absolute;
        content: '';
        top: 0;
        right: calc(100% + 1.5vw);
        height: 95%;
        width: 0.7vw;
        background: #00A2FF;
      }
    }
    > button.more {
      position: absolute;
      right: 4vw;
      top: 4vw;
      font-size: 4vw;
      color: #CECECE;
      height: 6vw;
      display: flex;
      align-items: center;
      > img {
        width: 1.9vw;
        height: 3.6vw;
        margin-left: 1.3vw;
      }
    }
    > .attraction-photo-wrap {
      margin-right: 4vw;
      margin-bottom: 4vw;
      display: inline-block;
      > img.attraction-photo {
        width: 44vw;
        height: 44vw;
        border-radius: 1.5vw;
        margin-bottom: 1.6vw;
      }
      > .attraction-name {
        font-size: 3.7vw;
        font-weight: 500;
        color: #9C9C9C;
        width: 44vw;
        text-align: center;
      }
    }
  }
}
</style>