From 99c9716c765b6da65121fbabbcdbb564a31e24af Mon Sep 17 00:00:00 2001 From: xingyy <373639591@qq.com> Date: Thu, 7 Dec 2023 13:43:24 +0800 Subject: [PATCH] submit --- src/components/dashed-line/index.vue | 19 ++++ src/components/display-box/index.vue | 1 - src/pages/ticket-details/index.vue | 154 +++++++++++++++++++++++---- 3 files changed, 150 insertions(+), 24 deletions(-) create mode 100644 src/components/dashed-line/index.vue diff --git a/src/components/dashed-line/index.vue b/src/components/dashed-line/index.vue new file mode 100644 index 00000000..aa78d210 --- /dev/null +++ b/src/components/dashed-line/index.vue @@ -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> diff --git a/src/components/display-box/index.vue b/src/components/display-box/index.vue index d524492c..eb89f660 100644 --- a/src/components/display-box/index.vue +++ b/src/components/display-box/index.vue @@ -31,7 +31,6 @@ const result = ref(groupObjectsByNumberKeys(slots)) <style scoped lang="scss"> .content2{ - margin-top: 38rpx; background-color: #fff; border-radius: 20rpx; padding-left: 18rpx; diff --git a/src/pages/ticket-details/index.vue b/src/pages/ticket-details/index.vue index 3991bc6b..5b5124c5 100644 --- a/src/pages/ticket-details/index.vue +++ b/src/pages/ticket-details/index.vue @@ -10,33 +10,110 @@ <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 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"> + 预留手机号 <span style="font-size: 18rpx">(+86)</span> + </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"> + <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> </template> <script setup> import displayBox from '../../components/display-box/index.vue' -const list = [{}] +import dashedLine from '../../components/dashed-line/index.vue' </script> <style scoped lang="scss"> .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-size: 100%; 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 { margin-top: 12rpx; width: 100%;