fengjie-datascreen/src/views/hotel/components/info-box.vue

<template>
  <div class="info">
    <div class="info-header">
      <img src="@/assets/images/icon-12.png" alt="" />
      <div class="info-header__content">
        <h2>{{ info?.name }}</h2>
        <div>
          <img class="info-header__icon" src="@/assets/images/address.png" alt="" />
          <span class="info-header__text">地址：{{ info?.address }}</span>
        </div>
        <div>
          <img class="info-header__icon" src="@/assets/images/user.png" alt="" />
          <span class="info-header__text">负责人：{{ info?.principal }}</span>
        </div>
        <div>
          <img class="info-header__icon" src="@/assets/images/phone.png" alt="" />
          <span class="info-header__text">联系电话：{{ info?.phone }}</span>
        </div>
      </div>
    </div>
    <div class="statistic-box" v-if="info?.hotelStadiumType==1">
      <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="info?.roomNum" />
          <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="info?.bedCount" />
          <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="info?.parkingSpace" />
          <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="info?.remainingRooms" />
          <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="info?.remainingBedCount" />
          <span>床</span>
        </div>
      </div>
    </div>
    <div class="desc-box">
      <title2 title="简介" />
      <div class="desc-content" v-html="info?.introduction"></div>
      <div class="desc-container">
        <div v-if="info?.banner.length">
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="item in info?.banner" :key="item">
              <el-image class="cover-item" :src="`http://192.168.77.200/fjtcc-api${item}`" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import countup from 'vue-countup-v3'

  import pubSub from 'pubsub-js'
  import { cloneDeep } from 'lodash'

  let hotelChange = null
  let info = ref(null)

  onMounted(() => {
    hotelChange = pubSub.subscribe('hotelChange', (msg, data) => {
      let newData = cloneDeep(data)
      newData.banner = newData.banner ? newData.banner.split(',') : []
      info.value = newData
    })
  })
  onUnmounted(() => {
    if (hotelChange) pubSub.unsubscribe(hotelChange)
  })
</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(94);
        margin: 0 vw(26);
        gap: vw(20);
        display: flex;
        align-items: center;
		margin-top:vh(10);
      }
      &-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: vh(20) vw(20);
        background-image: url('@/assets/images/bg-3.png');
        background-size: 100% 100%;
      }
	  &-box-2{

	  }
      &-container {
        padding: vh(20) vw(20) 0 vw(20);
      }
      &-content {
        margin: vh(20) 0 0 vw(20);
        padding-right: vw(20);
        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>