91 lines
1.9 KiB
Vue
91 lines
1.9 KiB
Vue
|
<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>
|