xingyy/uni-ticket-system
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

submit

Browse Source
This commit is contained in:
xingyy 2023-12-07 13:43:24 +08:00
parent 92bfb5d999
commit 99c9716c76
3 changed files with 150 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/dashed-line/index.vue Normal file
View File

@ -0,0 +1,19 @@
<template>
<div class="content3">
</div>
</template>
<script setup>
</script>
<style scoped>
.content3{
height: 1rpx;
width: 100%;
background-image: url("../../static/zx303@3x (1).png");
background-size: 100%;
}
</style>

1
src/components/display-box/index.vue
View File

@ -31,7 +31,6 @@ const result = ref(groupObjectsByNumberKeys(slots))
<style scoped lang="scss"> <style scoped lang="scss">
.content2{ .content2{
margin-top: 38rpx;
background-color: #fff; background-color: #fff;
border-radius: 20rpx; border-radius: 20rpx;
padding-left: 18rpx; padding-left: 18rpx;

154
src/pages/ticket-details/index.vue
View File

@ -10,33 +10,110 @@
<image <image
src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/2ec9fcae-55af-4ccd-8e92-6848282101bb.png"></image> src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/2ec9fcae-55af-4ccd-8e92-6848282101bb.png"></image>
</div> </div>
<display-box> <div class="content3">
<template #l1> <display-box>
<div class="box-left"> <template #l1>
门票名称 <div class="box-left">
</div> 门票名称
</template> </div>
<template #r1> </template>
<div class="box-right"> <template #r1>
首都博物馆门票 <div class="box-right">
</div> 首都博物馆门票
</template> </div>
<template #l2> </template>
<div class="box-left"> <template #l2>
预留手机号(+86) <div class="box-left">
</div> 预留手机号 <span style="font-size: 18rpx">(+86)</span>
</template> </div>
<template #r2> </template>
<div class="box-right"> <template #r2>
192119280121 <div class="box-right">
</div> 192119280121
</template> </div>
</display-box> </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">
<dashed-line></dashed-line>
</div>
<div class="content5">*参观人的身份证信息</div>
<div class="content6">
<display-box>
<template #l1>
<div class="box-left">
姓名
</div>
</template>
<template #r1>
<div class="box-right">
陈x
</div>
</template>
<template #l2>
<div class="box-left">
身份证号
</div>
</template>
<template #r2>
<div class="box-right">
192119280121
</div>
</template>
</display-box>
</div>
<div class="content7">
<display-box>
<template #l1>
<div class="box-left">
姓名
</div>
</template>
<template #r1>
<div class="box-right">
陈x
</div>
</template>
<template #l2>
<div class="box-left">
身份证号
</div>
</template>
<template #r2>
<div class="box-right">
192119280121
</div>
</template>
</display-box>
</div>
<div class="content8">
退票
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import displayBox from '../../components/display-box/index.vue' import displayBox from '../../components/display-box/index.vue'
const list = [{}] import dashedLine from '../../components/dashed-line/index.vue'
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.box-left{ .box-left{
@ -52,7 +129,38 @@ const list = [{}]
background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png'); background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
background-size: 100%; background-size: 100%;
padding: 32rpx 42rpx 0 42rpx; padding: 32rpx 42rpx 0 42rpx;
.content8{
margin: 0 auto;
border-radius: 30rpx;
font-size: 28rpx;
color: #fff;
width: 436rpx;
height: 60rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #FF5C62;
}
.content7{
margin-bottom: 72rpx;
}
.content6{
margin-bottom: 20rpx;
}
.content5{
margin-bottom: 20rpx;
font-size: 24rpx;
color: #F7963B;
text-align: left;
}
.content3{
margin-top: 42rpx;
margin-bottom: 42rpx;
}
.content4{
margin-bottom: 24rpx;
}
.content2 { .content2 {
margin-top: 12rpx; margin-top: 12rpx;
width: 100%; width: 100%;