<template>
  <div class="main">
    <title class="title-block" title="首都博物馆东馆" :isBack="false">
    </title>
    <div :style="{ height }" class="box">
      <div class="header">
        <div>门票名称</div>
        <div>剩余数量</div>
      </div>
      <div class="container">

        <div class="item">
          <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
          <div class="detail">
            <div style="width: 140rpx;">首都博物馆门票</div>
            <div>1023/20000</div>
            <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
          </div>
        </div>
        <div class="item">
          <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
          <div class="detail">
            <div style="width: 140rpx;">首都博物馆门票</div>
            <div>1023/20000</div>
            <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
          </div>
        </div>
        <div class="item">
          <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
          <div class="detail">
            <div style="width: 140rpx;">首都博物馆门票</div>
            <div>1023/20000</div>
            <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
          </div>
        </div>
        <div class="item">
          <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
          <div class="detail">
            <div style="width: 140rpx;">首都博物馆门票</div>
            <div>1023/20000</div>
            <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
          </div>
        </div>
        <div class="item">
          <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
          <div class="detail">
            <div style="width: 140rpx;">首都博物馆门票</div>
            <div>1023/20000</div>
            <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
          </div>
        </div>
        <div class="item">
          <image src="@/static/logo.png" mode="scaleToFill" style="width: 174rpx;height: 108rpx;" />
          <div class="detail">
            <div style="width: 140rpx;">首都博物馆门票</div>
            <div>1023/20000</div>
            <tm-button color="#F7963B" :width="108" :height="56">预约</tm-button>
          </div>
        </div>
      </div>
      <div class="attention" v-if="isShow">
        <div>
          注：港澳台游客请至现场办理门票业务！
        </div>
        <tm-icon name="tmicon-times-circle" color="#fff" :fontSize="24" @click="handleTips"></tm-icon>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
let height = ref('')
let isShow = ref(true)
onMounted(() => {
  uni.createSelectorQuery().select('.title-block').boundingClientRect(data => {
    let res = uni.getSystemInfoSync();
    height.value = res.windowHeight - data.bottom + 'px';
  }).exec()
})
const handleTips = () => {
  isShow.value = false
}
</script>
<style scoped lang="scss">
.main {
  height: 100vh;
  width: 100%;
  background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
  background-size: 100%;
  padding: 0 32rpx 38rpx 32rpx;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

  .box {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;

    .header {
      margin-top: 20rpx;
      width: 100%;
      background: #AB2F23;
      height: 70rpx;
      border-radius: 20rpx;
      display: flex;
      justify-content: space-around;
      align-items: center;
      color: #FFFFFF;
      font-size: 28rpx;
    }

    .container {
      overflow-y: auto;
      height: 100%;
      box-sizing: border-box;
      margin-top: 20rpx;
      flex: 1;
      display: flex;
      flex-direction: column;
      padding-bottom: 2rpx;
      margin-bottom: 20rpx;

      .item {
        display: flex;
        align-items: center;
        background: #FFFFFF;
        border-radius: 20rpx;
        margin-bottom: 20rpx;

        .detail {
          flex: 1;
          margin-left: 18rpx;
          display: flex;
          align-items: center;
          justify-content: space-around;
        }
      }
    }

    .attention {
      width: 664rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: fixed;
      background: #761C1F;
      height: 68rpx;
      color: #FFFFFF;
      bottom: 150rpx;
      padding: 16rpx 40rpx;
      box-sizing: border-box;
      border-radius: 24rpx;
      font-size: 28rpx;
    }
  }
}
</style>
