YFYC-H5/yfyc/src/components/BookingSuccess.vue

<template>
  <div class="booking-success" @click.self="$emit('close')">
    <article>
      <h1>老芜湖海关</h1>
      <div class="tip-1">预约成功</div>
      <div class="time-summary">
        <span class="key">预约时间：</span>
        <span class="value">{{bookingInfo.createTime}}</span>
      </div>
      <div class="line">
        <img class="icon" src="@/assets/img/service/date.png" alt="" draggable="false">
        <div class="text">
          <span class="key">预约日期：</span>
          <span class="value">{{`${bookingInfo.day} ${weekDay}`}}</span>
          </div>
      </div>
      <div class="line">
        <img class="icon" src="@/assets/img/service/time.png" alt="" draggable="false">
        <div class="text">
          <span class="key">预约时段：</span>
          <span class="value">{{bookingInfo.timeStr === 'AM' ? '8:30-12:00' : `12:00-18:30`}}</span>
        </div>
      </div>
      <div class="line">
        <img class="icon" src="@/assets/img/service/people.png" alt="" draggable="false">
        <div class="text">
          <span class="key">参观人数：</span>
          <span class="value">{{bookingInfo.num}}人</span>
        </div>
      </div>
      <div class="tip-2">
        请您在规定日期时间段内进行参观
      </div>
    </article>
  </div>
</template>

<script>
export default {
  props: [
    // 'year', 'month', 'day', 'weekDay', 'time', 'number',
    'bookingInfo',
  ],
  computed: {
    weekDay() {
      return globalUtils.dateToWeekday(this.bookingInfo.day)
    }
  }
}
</script>

<style lang="less" scoped>
.booking-success {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  .line {
    display: flex;
    align-items: flex-end;
    margin-bottom: 6vw;
    .icon {
      width: 4.3vw;
      height: 4.3vw;
      margin-right: 2.4vw;
    }
    .key {
      font-size: 3.2vw;
      font-weight: bold;
      color: #222222;
    }
    .value {
      font-size: 3.2vw;
      color: #222222;
    }
  }
  > article {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 81.9vw;
    height: 125.4vw;
    background-image: url(~@/assets/img/service/booking-result-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding-left: 5vw;
    padding-right: 5vw;
    > h1 {
      font-size: 8vw;
      font-weight: bold;
      color: #FFFFFF;
      margin-top: 15vw;
      text-align: center;
    }
    > .tip-1 {
      margin-top: 20vw;
      font-size: 6.4vw;
      font-weight: bold;
      color: #733634;
    }
    > .time-summary {
      margin-top: 3.3vw;
      height: 12vw;
      font-size: 3.2vw;
    }
    > .tip-2 {
      position: absolute;
      bottom: 12vw;
      left: 50%;
      transform: translateX(-50%);
      white-space: pre;
      font-size: 3.2vw;
      color: #222222;
    }
  }
}
</style>