uni-ticket-system/src/pages/ticket-details/index.vue

<template>
  <custom-title   class="title-block" title="门票详情">
  </custom-title>
  <div class="large-container">
    <div class="content1">
      <div class="wrap1">
        <image src="../../static/zu1053@3x.png"></image>
      </div>
      <div class="wrap2">门票系统的某个场馆</div>
    </div>
    <div class="content2">
      <image
          src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/2ec9fcae-55af-4ccd-8e92-6848282101bb.png"></image>
    </div>
    <div class="content3">
      <display-box>
        <template #l1>
          <div class="box-left">
            门票名称
          </div>
        </template>
        <template #r1>
          <div class="box-right">
            首都博物馆门票
          </div>
        </template>
        <template #l2>
          <div class="box-left">
            预留手机号(+86)
          </div>
        </template>
        <template #r2>
          <div class="box-right">
            192119280121
          </div>
        </template>
        <template #l3>
          <div class="box-left">
            预约时间
          </div>
        </template>
        <template #r3>
          <div class="box-right">
            2023年12月16日
          </div>
        </template>
        <template #l4>
          <div class="box-left">
            预约人数
          </div>
        </template>
        <template #r4>
          <div class="box-right">
            2
          </div>
        </template>
      </display-box>
    </div>
    <div class="content4">
    </div>
    <div class="content5">
      *参观人的身份证信息
    </div>
    <div class="content6">
      <display-box>
        <template #l1>
          <div class="box-left">
            姓名
          </div>
        </template>
        <template #r1>
          <div class="box-right" style="display: flex;align-items: center">
            <div style="margin-right: 32rpx">陈X</div>
            <div style="width: 112rpx;height: 40rpx;background-color: #000;color: #fff;font-size: 20rpx;border-radius: 22rpx;display: flex;justify-content: center;align-items: center">已过期</div>
          </div>
        </template>
        <template #l2>
          <div class="box-left">
            预留手机号(+86)
          </div>
        </template>
        <template #r2>
          <div class="box-right">
            192119280121
          </div>
        </template>
        <template #l3>
          <div class="box-left">
            预约时间
          </div>
        </template>
        <template #r3>
          <div class="box-right">
            2023年12月16日
          </div>
        </template>
        <template #l4>
          <div class="box-left">
            预约人数
          </div>
        </template>
        <template #r4>
          <div class="box-right">
            2
          </div>
        </template>
      </display-box>
    </div>
  </div>
</template>
<script setup>
import displayBox from '../../components/display-box/index.vue'
const list = [{}]
</script>
<style scoped lang="scss">
.box-left{
  font-size: 24rpx;
  color: #000;
}
.box-right{
  font-size: 24rpx;
  color: #72665F;
}
.large-container {
  flex-grow: 1;
  background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
  background-size: 100%;
  padding: 32rpx 42rpx 0 42rpx;
  .content5{
    margin-top: 24rpx;
    color:#F7963B ;
    font-size: 24rpx;
  }
  .content3{
    margin-bottom: 28rpx;

  }
  .content4 {
    height: 1rpx;
    width: 100%;
    background-image: url("../../static/zx303@3x.png");
    background-size: 100%;
  }
  .content2 {
    margin-top: 12rpx;
    width: 100%;

    image {
      width: 100%;
      height: 354rpx;
    }
  }

  .content1 {
    display: flex;
    align-items: center;
    width: 100%;
    height: 60rpx;
    background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/72db012a-0443-4977-956a-f9b20c6faa29.png");
    background-size: 100%;

    .wrap2 {
      font-size: 32rpx;
      color: #fff;
    }

    .wrap1 {
      margin-right: 10rpx;
      margin-left: 18rpx;

      image {
        width: 21.18rpx;
        height: 29rpx;
      }
    }
  }
}
</style>