791 lines
20 KiB
Vue
791 lines
20 KiB
Vue
<template>
|
||
<div class="container">
|
||
<custom-title class="title-block" :title="info.ticketName">
|
||
</custom-title>
|
||
<div class="main">
|
||
<div class="content1">
|
||
<div class="wrap1">
|
||
<image src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/47742fc2-6608-48da-b2f8-b47b36eaffbb.png"></image>
|
||
</div>
|
||
<div class="wrap2">
|
||
{{info.ticketName}}
|
||
</div>
|
||
</div>
|
||
<div class="content2">
|
||
<image :src="info.ticketImage"></image>
|
||
</div>
|
||
<div class="content3" >
|
||
<display-box :styleColor="{backgroundColor: '#B1292E'}">
|
||
<template #l1 >
|
||
<div class="box-left">
|
||
门票名称
|
||
</div>
|
||
</template>
|
||
<template #r1 >
|
||
<div class="box-right">
|
||
门票名称
|
||
</div>
|
||
</template>
|
||
<template #l2 >
|
||
<div class="box-left">
|
||
剩余数量
|
||
</div>
|
||
</template>
|
||
<template #r2 >
|
||
<div class="box-right">
|
||
1023/20000
|
||
</div>
|
||
</template>
|
||
</display-box>
|
||
</div>
|
||
<div class="content4"></div>
|
||
<div class="content5">
|
||
<display-box>
|
||
<template #l1 >
|
||
<div class="box-left">
|
||
预留手机号 <span style="font-size: 18rpx">(+86)</span>
|
||
</div>
|
||
</template>
|
||
<template #r1 >
|
||
<div>
|
||
<input type="text" placeholder="填写手机号" placeholder-style="color:#DBDBDB;fontSize:24rpx"/>
|
||
</div>
|
||
</template>
|
||
<template #l2 >
|
||
<div class="box-left">
|
||
验证码
|
||
</div>
|
||
</template>
|
||
<template #r2 >
|
||
<div style="position: relative;width: 100%">
|
||
<div >
|
||
<input type="text" placeholder="填写验证码" placeholder-style="color:#DBDBDB;fontSize:24rpx"/>
|
||
</div>
|
||
|
||
<div style="position: absolute;top: 50%;transform: translateY(-50%);right: 12rpx;color: #B1292E;font-size: 24rpx">获取验证码</div>
|
||
</div>
|
||
</template>
|
||
</display-box>
|
||
</div>
|
||
<div class="content6">
|
||
<display-box>
|
||
<template #l1>
|
||
<div class="box-left">
|
||
选择时间
|
||
</div>
|
||
</template>
|
||
<template #r1 >
|
||
<div class="r1">
|
||
<div class="r1_1">2023年12月16日</div>
|
||
<div class="r1_2" @click="showWin=true">
|
||
<image src="https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/2c4872f9-aee5-4b04-9494-94b08c282ed9.png"></image>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template #l2 >
|
||
<div class="box-left">
|
||
选择人数
|
||
</div>
|
||
</template>
|
||
<template #r2 >
|
||
<div class="r2">
|
||
<div class="r2_1" >
|
||
*单次最多可预约10人
|
||
</div>
|
||
<div class="r2_2">
|
||
<div class="r2_2_1">
|
||
<image src="../../static/zu1149@3x.png"></image>
|
||
</div>
|
||
<div class="r2_2_2">
|
||
<input type="text">
|
||
</div>
|
||
<div class="r2_2_3">
|
||
<image src="../../static/zu1150@3x.png"></image>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</display-box>
|
||
</div>
|
||
<div class="content7">
|
||
*请填写所有参观人的身份证信息
|
||
</div>
|
||
<div class="content8">
|
||
<div class="wrap1"> <display-box>
|
||
<template #l1>
|
||
<div class="box-left">
|
||
真实姓名
|
||
</div>
|
||
</template>
|
||
<template #r1>
|
||
<div class="box-right">
|
||
<input type="text" placeholder="请填写您的真实姓名" placeholder-style="color:#DBDBDB;font-size:24rpx"/>
|
||
</div>
|
||
</template>
|
||
<template #l2>
|
||
<div class="box-left">
|
||
身份证号码
|
||
</div>
|
||
</template>
|
||
<template #r2>
|
||
<div class="box-right">
|
||
<input type="text" placeholder="填写您的身份证号码" placeholder-style="color:#DBDBDB;font-size:24rpx"/>
|
||
</div>
|
||
</template>
|
||
</display-box></div>
|
||
</div>
|
||
<div class="content9">
|
||
<div class="wrap1">*预约后信息不可更改，请仔细核对预约信息</div>
|
||
<div class="wrap2">预约</div>
|
||
</div>
|
||
<tm-drawer :height="1054" :round="8" hideHeader inContent ref="calendarView" :placement="'bottom'" v-model:show="showWin">
|
||
<div class="content10" >
|
||
<div class="wrap1">
|
||
<image src="../../static/Close@3x.png"></image>
|
||
</div>
|
||
<div class="wrap2">
|
||
请选择参观日期
|
||
</div>
|
||
<div class="wrap3"></div>
|
||
<div class="wrap4">
|
||
当前年月：2023年12月
|
||
</div>
|
||
<div class="wrap3"></div>
|
||
<div class="wrap5">
|
||
<div class="wrap5_1">
|
||
<div class="wrap5_1_1">
|
||
12月02日·周六
|
||
</div>
|
||
<div class="wrap5_1_2">
|
||
*不可预约
|
||
</div>
|
||
</div>
|
||
<div class="wrap5_2">
|
||
<div class="wrap5_2_1">
|
||
12月03日·周日
|
||
</div>
|
||
<div class="wrap5_2_2">
|
||
*可预约
|
||
</div>
|
||
<div class="wrap5_2_3">
|
||
今日
|
||
</div>
|
||
</div>
|
||
<div class="wrap5_3">
|
||
<div class="wrap5_3_1">
|
||
12月04日·周一
|
||
</div>
|
||
<div class="wrap5_3_2">
|
||
*可预约
|
||
</div>
|
||
<div class="wrap5_3_3">
|
||
明日
|
||
</div>
|
||
</div>
|
||
<div class="wrap5_4">
|
||
<div class="wrap5_4_1">更多</div>
|
||
<div class="wrap5_4_2">
|
||
<image src="../../static/lj781@3x.png"></image>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wrap3"></div>
|
||
<div class="wrap6">
|
||
请选择参观时间
|
||
</div>
|
||
<div class="wrap7">
|
||
<div class="wrap7_1">
|
||
<div class="wrap7_1_1">08:00入场</div>
|
||
<div class="wrap7_1_2">*不可选</div>
|
||
</div>
|
||
<div class="wrap7_2">
|
||
<div class="wrap7_2_1">10:00入场</div>
|
||
<div class="wrap7_2_2">*可选</div>
|
||
</div>
|
||
<div class="wrap7_3">
|
||
<div class="wrap7_3_1">12:00入场</div>
|
||
<div class="wrap7_3_2">*可选</div>
|
||
</div>
|
||
<div class="wrap7_2">
|
||
<div class="wrap7_2_1">10:00入场</div>
|
||
<div class="wrap7_2_2">*可选</div>
|
||
</div>
|
||
</div>
|
||
<div class="wrap3"></div>
|
||
<div class="wrap8">
|
||
*参观当日需要携带游客本人身份证件<br/>
|
||
*入馆时间：<br/>
|
||
工作日08:30-18:00、节假日/双休09:00-20:00（具体时间以景区为准）<br/>
|
||
</div>
|
||
<div class="wrap3" style="margin-bottom: 30rpx"></div>
|
||
<div class="wrap9">确定</div>
|
||
</div>
|
||
</tm-drawer>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import displayBox from '@/components/display-box/index.vue'
|
||
import {useMainStore} from "@/store"
|
||
import {ref} from 'vue'
|
||
const showWin=ref(true)
|
||
const store=useMainStore()
|
||
const info=ref(uni.getStorageSync('currentBooking'))
|
||
const rpxToPx=(rpx)=>{
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
const screenWidth = systemInfo.windowWidth;
|
||
return rpx * screenWidth / 750;
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content10{
|
||
position: relative;
|
||
padding: 64rpx 24rpx 108rpx 24rpx;
|
||
.wrap9{
|
||
margin: 0 auto;
|
||
|
||
width: 436rpx;
|
||
height: 60rpx;
|
||
background-color: #000;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
border-radius: 30rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.wrap8{
|
||
margin-bottom: 24rpx;
|
||
margin-top: 18rpx;
|
||
font-size: 20rpx;
|
||
color:#B29E92 ;
|
||
}
|
||
.wrap7{
|
||
margin-bottom: 70rpx;
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.wrap7_3{
|
||
box-sizing: border-box;
|
||
border-radius: 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 152rpx;
|
||
height: 98rpx;
|
||
background-color: #F7963B;
|
||
.wrap7_3_2{
|
||
font-size: 16rpx;
|
||
color: #fff;
|
||
}
|
||
.wrap7_3_1{
|
||
margin-bottom: 2rpx;
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
.wrap7_2{
|
||
border: 2rpx solid #F7963B;
|
||
box-sizing: border-box;
|
||
border-radius: 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 152rpx;
|
||
height: 98rpx;
|
||
background-color: #fff;
|
||
.wrap7_2_2{
|
||
font-size: 16rpx;
|
||
color: #B29E92;
|
||
}
|
||
.wrap7_2_1{
|
||
margin-bottom: 2rpx;
|
||
color: #000;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
.wrap7_1{
|
||
border-radius: 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 152rpx;
|
||
height: 98rpx;
|
||
background-color: #D8D8D8;
|
||
.wrap7_1_2{
|
||
font-size: 16rpx;
|
||
color: #868686;
|
||
}
|
||
.wrap7_1_1{
|
||
margin-bottom: 2rpx;
|
||
color: #000;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
.wrap6{
|
||
margin-top: 38rpx;
|
||
font-size: 32rpx;
|
||
color: #000;
|
||
|
||
}
|
||
.wrap5{
|
||
margin-bottom: 72rpx;
|
||
margin-top: 54rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.wrap5_4{
|
||
width: 60rpx;
|
||
height: 98rpx;
|
||
border-radius: 30rpx;
|
||
background-color: #F7963B;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.wrap5_4_1{
|
||
margin-right: 8rpx;
|
||
font-size: 20rpx;
|
||
color: #fff;
|
||
|
||
writing-mode: vertical-rl;
|
||
}
|
||
.wrap5_4_2{
|
||
|
||
image{
|
||
width: 11.77rpx;
|
||
height: 25.53rpx;
|
||
|
||
}
|
||
}
|
||
}
|
||
.wrap5_3{
|
||
position: relative;
|
||
width: 196rpx;
|
||
height: 98rpx;
|
||
background-color: #F7963B;
|
||
border-radius: 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.wrap5_3_3{
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
position: absolute;
|
||
bottom: -40rpx;
|
||
font-size: 24rpx;
|
||
color: #F7963B;
|
||
}
|
||
.wrap5_3_2{
|
||
color: #fff;
|
||
font-size: 16rpx;
|
||
}
|
||
.wrap5_3_1{
|
||
margin-bottom: 10rpx;
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
.wrap5_2{
|
||
border: 2rpx solid #F7963B;
|
||
box-sizing: border-box;
|
||
width: 196rpx;
|
||
height: 98rpx;
|
||
background-color: #fff;
|
||
border-radius: 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
.wrap5_2_3{
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
position: absolute;
|
||
bottom: -40rpx;
|
||
font-size: 24rpx;
|
||
color: #F7963B;
|
||
}
|
||
.wrap5_2_2{
|
||
color: #B29E92;
|
||
font-size: 16rpx;
|
||
}
|
||
.wrap5_2_1{
|
||
margin-bottom: 10rpx;
|
||
color: #000;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
.wrap5_1{
|
||
width: 196rpx;
|
||
height: 98rpx;
|
||
background-color: #D8D8D8;
|
||
border-radius: 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.wrap5_1_2{
|
||
color: #868686;
|
||
font-size: 16rpx;
|
||
}
|
||
.wrap5_1_1{
|
||
margin-bottom: 10rpx;
|
||
color: #000;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
.wrap4{
|
||
margin-bottom: 24rpx;
|
||
margin-top: 16rpx;
|
||
font-size: 24rpx;
|
||
color:#F7963B;
|
||
}
|
||
.wrap3{
|
||
background-color: #868686;
|
||
height: 1rpx;
|
||
|
||
width: 100%;
|
||
}
|
||
.wrap2{
|
||
margin-bottom: 44rpx;
|
||
font-weight: bold;
|
||
color: #000;
|
||
font-size: 32rpx;
|
||
}
|
||
.wrap1{
|
||
top: 52rpx;
|
||
right: 46rpx;
|
||
position: absolute;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
image{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.container{
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
.main{
|
||
overflow-y: auto;
|
||
box-sizing: border-box;
|
||
padding: 32rpx 42rpx 0 42rpx;
|
||
width: 100vw;
|
||
flex: 1;
|
||
background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
|
||
background-size: 100%;
|
||
|
||
.content9{
|
||
margin-bottom: 78rpx;
|
||
margin-top: 80rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.wrap2{
|
||
margin-top: 14rpx;
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #000;
|
||
border-radius: 30rpx;
|
||
width: 436rpx;
|
||
height: 60rpx;
|
||
}
|
||
.wrap1{
|
||
color: #B1292E;
|
||
font-size: 16rpx;
|
||
}
|
||
}
|
||
.content8{
|
||
margin-top: 12rpx;
|
||
.wrap1{
|
||
.box-left{
|
||
color: #000;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
.content7{
|
||
color: #F7963B;
|
||
margin-top: 20rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
.content6{
|
||
margin-top:24rpx;
|
||
.r2{
|
||
position: relative;
|
||
.r2_2{
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-45%);
|
||
right: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
.r2_2_3{
|
||
width: 31rpx;
|
||
height: 31rpx;
|
||
image{
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
}
|
||
.r2_2_1{
|
||
width: 31rpx;
|
||
height: 31rpx;
|
||
margin-right: 10rpx;
|
||
image{
|
||
height: 100%;
|
||
width: 100%;
|
||
}
|
||
}
|
||
.r2_2_2{
|
||
margin-right: 10rpx;
|
||
input{
|
||
text-align: center;
|
||
color: #000;
|
||
font-size: 24rpx;
|
||
width: 114rpx;
|
||
height: 54rpx;
|
||
background-color: #EFEFEF;
|
||
}
|
||
|
||
}
|
||
}
|
||
.r2_1{
|
||
color: #B29E92;
|
||
font-size: 16rpx;
|
||
}
|
||
}
|
||
.r1{
|
||
position: relative;
|
||
.r1_2{
|
||
top: 50%;
|
||
position: absolute;
|
||
transform: translateY(-50%);
|
||
right: 12rpx;
|
||
image{
|
||
width: 64rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
.box-left{
|
||
display: flex;
|
||
align-items: center;
|
||
color: #000;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
.content5{
|
||
margin-top:40rpx ;
|
||
.r2{
|
||
position: relative;
|
||
|
||
.r2_2{
|
||
right: 42rpx;
|
||
top: 50%;
|
||
transform: translateY(-10%);
|
||
position: absolute;
|
||
color:#B1292E ;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
}
|
||
.box-left{
|
||
color: #000;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
.content4 {
|
||
margin-top: 30rpx;
|
||
height: 1rpx;
|
||
width: 100%;
|
||
background-image: url("../../static/zx303@3x.png");
|
||
background-size: 100%;
|
||
}
|
||
.content3{
|
||
margin-top: 20rpx;
|
||
.box-right{
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
}
|
||
.box-left{
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
.content2{
|
||
margin-top: 12rpx;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
|
||
image{
|
||
width: 664rpx;
|
||
height: 354rpx;
|
||
}
|
||
}
|
||
.content1{
|
||
box-sizing: border-box;
|
||
background-image: url("https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/20a57e10-8b08-4694-b083-d09e345a58a4.png");
|
||
width: 100%;
|
||
height: 60rpx;
|
||
background-size: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 20rpx;
|
||
.wrap2{
|
||
font-size: 32rpx;
|
||
color: #fff;
|
||
}
|
||
.wrap1{
|
||
margin-right: 10rpx;
|
||
image{
|
||
width: 21.18rpx;
|
||
height: 29rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
/*.top{
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.main {
|
||
overflow-y: auto;
|
||
flex-grow: 1;
|
||
width: 100%;
|
||
background-image: url('https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/16968647-fc99-46fe-b95c-620c55b7646f.png');
|
||
background-size: 100%;
|
||
padding: 0 32rpx 38rpx 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
|
||
.container {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-top: 32rpx;
|
||
box-sizing: border-box;
|
||
overflow-y: auto;
|
||
|
||
.title {
|
||
width: 100%;
|
||
background: url("https://cdns.fontree.cn/fonchain-main/prod/image/default/artwork/f4eff459-319c-4588-8efe-8638b5c66a4f.png") no-repeat;
|
||
background-size: cover;
|
||
height: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 10rpx 20rpx;
|
||
box-sizing: border-box;
|
||
color: #fff;
|
||
}
|
||
|
||
.card {
|
||
margin-top: 20rpx;
|
||
width: 100%;
|
||
height: 190rpx;
|
||
background-color: #fff;
|
||
border-radius: 24rpx;
|
||
padding: 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
color: black;
|
||
|
||
.card-item {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.name {
|
||
width: 200rpx;
|
||
border-right: 1rpx solid #BBC5E0;
|
||
}
|
||
|
||
}
|
||
|
||
.title-detail {
|
||
margin-top: 20rpx;
|
||
width: 100%;
|
||
height: 190rpx;
|
||
background-color: #B1292E;
|
||
border-radius: 24rpx;
|
||
padding: 32rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-sizing: border-box;
|
||
|
||
.item {
|
||
display: flex;
|
||
color: #fff;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
|
||
.name {
|
||
width: 200rpx;
|
||
border-right: 1rpx solid #fff;
|
||
}
|
||
|
||
.code {
|
||
flex: 1;
|
||
margin-left: 20rpx;
|
||
color: #000000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.inputCode {
|
||
width: 250rpx;
|
||
}
|
||
}
|
||
|
||
.stepper {
|
||
flex: 1;
|
||
margin-left: 20rpx;
|
||
color: #000000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.time {
|
||
flex: 1;
|
||
width: 100%;
|
||
display: flex;
|
||
margin-left: 20rpx;
|
||
color: #000000;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
}
|
||
|
||
.line {
|
||
margin: 30rpx 0;
|
||
width: 100%;
|
||
border-bottom: 1rpx #BBC5E0 dashed;
|
||
}
|
||
}
|
||
|
||
:deep(.stepper--flex) {
|
||
width: 130rpx !important;
|
||
}
|
||
|
||
}*/
|
||
</style>
|