<template>
  <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>
    <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>
    </display-box>
  </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;

  .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>
