submit
This commit is contained in:
parent
af55a106e3
commit
db9bfe5fd4
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="content2">
|
||||
<div class="content2" :style="styleColor">
|
||||
<div class="wrap1" v-for="item in result">
|
||||
<div class="wrap1_1">
|
||||
<slot :name="Object.keys(item).find(x=>x.includes('l'))"></slot>
|
||||
@ -11,8 +11,16 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup >
|
||||
import {useSlots,ref} from 'vue'
|
||||
import {useSlots,ref,defineProps} from 'vue'
|
||||
const slots = useSlots();
|
||||
const prop=defineProps({
|
||||
styleColor:{
|
||||
type:Object,
|
||||
default:()=>{
|
||||
return {backgroundColor:'#fff'}
|
||||
}
|
||||
}
|
||||
})
|
||||
const groupObjectsByNumberKeys=(obj)=> {
|
||||
const grouped = {};
|
||||
for (const key in obj) {
|
||||
@ -28,7 +36,7 @@ const result = ref(groupObjectsByNumberKeys(slots))
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.content2{
|
||||
background-color: #fff;
|
||||
|
||||
border-radius: 20rpx;
|
||||
padding-left: 18rpx;
|
||||
padding-right: 32rpx;
|
||||
@ -38,7 +46,11 @@ const result = ref(groupObjectsByNumberKeys(slots))
|
||||
padding-bottom: 22rpx;
|
||||
border-bottom: 1rpx solid #E4EAF1;;
|
||||
display: flex;
|
||||
&:last-child{
|
||||
border-bottom: none;
|
||||
}
|
||||
.wrap1_2{
|
||||
flex-grow: 1;
|
||||
padding-left: 36rpx;
|
||||
font-size: 24rpx;
|
||||
color: #939393;
|
||||
|
||||
@ -17,6 +17,20 @@ export const ticketlist = (data) => {
|
||||
data
|
||||
})
|
||||
}
|
||||
export const unusedTickets = (data) => {
|
||||
return uniReq.post({
|
||||
url: '/api/smart/appointment/get/all/unused/tickets',
|
||||
isLoading:false,
|
||||
data
|
||||
})
|
||||
}
|
||||
export const historicalTickets = (data) => {
|
||||
return uniReq.post({
|
||||
url: '/api/smart/appointment/get/all/historical/tickets',
|
||||
isLoading:false,
|
||||
data
|
||||
})
|
||||
}
|
||||
export const upload = (data) => {
|
||||
return uniReq.upload({
|
||||
name: data.name,
|
||||
|
||||
@ -25,8 +25,6 @@ const uniReq=uniRequest.created({
|
||||
duration: 50000
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
return response.data
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,6 +23,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
|
||||
import {ref} from 'vue'
|
||||
const imgList=ref([{url:'https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/8395f322-b677-4f24-a13d-b79474c09d35.png'},{url:'https://cdns.fontree.cn/fonchain-main/prod/image/1833/avatar/8395f322-b677-4f24-a13d-b79474c09d35.png'}])
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
|
||||
<div class="main">
|
||||
<div class="content3">
|
||||
<div class="wrap1">
|
||||
@ -16,12 +15,12 @@
|
||||
</div>
|
||||
<div class="content2">
|
||||
<div class="wrap1" v-for="(item,index) in [...tableData,...tableData]" :key="item.id">
|
||||
<div class="wrap1_1">
|
||||
<image :src="'../../static/112121@3x.png'"></image>
|
||||
<div @click="viewImg(item)" class="wrap1_1">
|
||||
<image :src="item.ticketImage"></image>
|
||||
</div>
|
||||
<div class="wrap1_2">首都博物馆门票</div>
|
||||
<div class="wrap1_3" :class="item.remainingQuantity===0?['sold_out']:[]">{{item.remainingQuantity===-1?'不限':item.remainingQuantity}}/{{item.issueQuantity===-1?'不限':item.issueQuantity}}</div>
|
||||
<div class="wrap1_4" :class="item.remainingQuantity===0?['sold_out']:[]">{{item.remainingQuantity===0?'无票':'预约'}}</div>
|
||||
<div class="wrap1_4" @click="goBooking(item)" :class="item.remainingQuantity===0?['sold_out']:[]">{{item.remainingQuantity===0?'无票':'预约'}}</div>
|
||||
</div>
|
||||
<div class="wrap2">
|
||||
<image src="../../static/zu758@3x.png"></image>
|
||||
@ -47,6 +46,12 @@ let isShow = ref(true)
|
||||
const tableData=ref([])
|
||||
const page=ref(1)
|
||||
const pageSize=ref(9999)
|
||||
const viewImg=(item)=>{
|
||||
uni.previewImage({
|
||||
urls:[item.ticketImage],
|
||||
indicator:'none'
|
||||
})
|
||||
}
|
||||
const getData=async ()=>{
|
||||
const data={
|
||||
"keyword": "",
|
||||
@ -59,9 +64,25 @@ const getData=async ()=>{
|
||||
tableData.value=res.data.data
|
||||
}
|
||||
}
|
||||
const goBooking=(item)=>{
|
||||
if (item.remainingQuantity!==0){
|
||||
uni.navigateTo({
|
||||
url: '/pages/ticket/index'
|
||||
})
|
||||
}else {
|
||||
uni.showToast({
|
||||
title: '该门票已售罄',
|
||||
icon: 'none',
|
||||
duration: 1000
|
||||
})
|
||||
}
|
||||
uni.setStorageSync('currentBooking',item)
|
||||
store.currentBooking=item
|
||||
}
|
||||
const viewBlindBoxDetail=()=>{
|
||||
uni.navigateTo({
|
||||
url: '/pages/blind-box/index'
|
||||
|
||||
})
|
||||
}
|
||||
getData()
|
||||
|
||||
@ -73,6 +73,7 @@
|
||||
<script setup>
|
||||
import {ref} from 'vue'
|
||||
import {onShow} from "@dcloudio/uni-app";
|
||||
import {historicalTickets, unusedTickets} from "@/http/apis";
|
||||
const modeClass = ref('')
|
||||
const currentTab = ref(0)
|
||||
const show = ref(true)
|
||||
@ -80,9 +81,18 @@ const userInfo = ref(uni.getStorageSync('userInfo') ?? {})
|
||||
onShow(() => {
|
||||
show.value = true
|
||||
})
|
||||
const switchOptions=(num)=>{
|
||||
const switchOptions=async (num)=>{
|
||||
let res
|
||||
if (num===0){
|
||||
res=await unusedTickets()
|
||||
}else if (num===1){
|
||||
res=await historicalTickets()
|
||||
}
|
||||
console.log(res,'res')
|
||||
|
||||
currentTab.value=num
|
||||
}
|
||||
|
||||
const goViewVenues = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/view-venues/index'
|
||||
|
||||
@ -1,173 +1,671 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<custom-title class="title-block" :title="info.ticketName">
|
||||
</custom-title>
|
||||
<div class="main">
|
||||
<title class="title-block" title="门票系统的某个场馆">
|
||||
</title>
|
||||
<div :style="height + 'px'" class="container">
|
||||
<div class="title">
|
||||
<tm-icon name="tmicon-position" color="#fff" :fontSize="40"></tm-icon>
|
||||
<div style="margin-left: 10rpx;">门票系统的某个场馆</div>
|
||||
</div>
|
||||
<div>
|
||||
<image src="../../static/logo.png" mode="scaleToFill"
|
||||
style="width: 664rpx;height:354rpx;margin-top: 20rpx;display: ;" />
|
||||
</div>
|
||||
<div class="title-detail">
|
||||
<div class="item">
|
||||
<div class="name">门票名称</div>
|
||||
<div style="margin-left: 20rpx;">首都博物馆门票</div>
|
||||
</div>
|
||||
<tm-divider realColor></tm-divider>
|
||||
<div class="item">
|
||||
<div class="name">剩余数量</div>
|
||||
<div style="margin-left: 20rpx;">1023/20000</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="title-detail" style="background: #fff;">
|
||||
<div class="item">
|
||||
<div class="name" style="color: #000000;border-right:1rpx solid #BBC5E0;">预留手机号
|
||||
<span style="font-size: 20rpx;"> (+86)</span>
|
||||
</div>
|
||||
<div style="margin-left: 20rpx; color: #000000;">
|
||||
<input type="text" v-model="formData.phone" @input="changePhone" />
|
||||
</div>
|
||||
</div>
|
||||
<tm-divider realColor></tm-divider>
|
||||
<div class="item">
|
||||
<div class="name" style="color: #000000;border-right:1rpx solid #BBC5E0;">验证码</div>
|
||||
<div class="code">
|
||||
<input type="text" v-model="formData.code" @input="changePhone" class="inputCode" />
|
||||
<div style="color:#B1292E" @click="sendCode" v-if="isCode">{{ code }}</div>
|
||||
<div v-else style="color:#B1292E">{{ formattedTime() }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title-detail" style="background: #fff; color: #000000">
|
||||
<div class="item">
|
||||
<div class="name" style="color: #000000;border-right:1rpx solid #BBC5E0;">选择时间</div>
|
||||
<div class="time">
|
||||
<span style="width: 300rpx;">2023年12月16日</span>
|
||||
<div style="display: flex;align-items: center;" @click="showHandle">
|
||||
<span>选择</span>
|
||||
<tm-icon name="tmicon-angle-right" :font-size="24"></tm-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<tm-divider realColor></tm-divider>
|
||||
<div class="item">
|
||||
<div class="name" style=" color: #000000;border-right:1rpx solid #BBC5E0;">选择人数</div>
|
||||
<div style="margin-left: 20rpx;" class="stepper">
|
||||
<div style="color: #B29E92;font-size: 24rpx">*单次最多可预约10人</div>
|
||||
<div>
|
||||
<tm-stepper v-model="formData.num" color="#ef952e" bgColor="primary" circular :defaultValue="0"
|
||||
:max="10" :height="40" :width="160" @change="changeNum"></tm-stepper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(item, index) in visitorsList" class="card" :key="index">
|
||||
<div class="card-item">
|
||||
<div class="name">姓名</div>
|
||||
<div style="margin-left: 20rpx; color: #000000;">
|
||||
<input type="text" v-model="item.name" />
|
||||
</div>
|
||||
</div>
|
||||
<tm-divider realColor></tm-divider>
|
||||
<div class="card-item">
|
||||
<div class="name">身份证号</div>
|
||||
<div style="margin-left: 20rpx; color: #000000;">
|
||||
<input type="idcard" v-model="item.idCard" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<tm-button @click="reservation" color="#000000" :width="436" :height="60" :round="25"
|
||||
style="margin-top: 20rpx !important;">预约</tm-button>
|
||||
<select-day v-model:show="show"></select-day>
|
||||
<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 { onMounted, ref, reactive, watch } from "vue";
|
||||
import { useTimer } from '@/tmui/tool/useFun/useTimer'
|
||||
import selectDay from './select-day/index'
|
||||
const { start, stop, formattedTime, status, restart, timeObj, times, change } = useTimer({
|
||||
totalTime: 10, unit: 'ss', format: 'ss秒'
|
||||
});
|
||||
let height = ref(0)
|
||||
let code = ref('获取验证码')
|
||||
let isCode = ref(true)
|
||||
let show = ref(false)
|
||||
const formData = reactive({
|
||||
phone: '',
|
||||
code: '',
|
||||
num: 0
|
||||
})
|
||||
let visitorsList = ref([])
|
||||
const msg = ref(null)
|
||||
|
||||
onMounted(() => {
|
||||
uni.createSelectorQuery().select('.title-block').boundingClientRect(data => {
|
||||
let res = uni.getSystemInfoSync();
|
||||
height = res.windowHeight - data.bottom;
|
||||
}).exec()
|
||||
})
|
||||
const sendCode = () => {
|
||||
restart()
|
||||
isCode.value = false;
|
||||
if (status.value == -1 || status.value == 0) {
|
||||
start();
|
||||
}
|
||||
}
|
||||
watch(times, (newValue) => {
|
||||
if (newValue === 0) {
|
||||
code.value = '重新获取';
|
||||
isCode.value = true;
|
||||
stop()
|
||||
}
|
||||
})
|
||||
const changeNum = (value) => {
|
||||
formData.num = value
|
||||
}
|
||||
watch(() => formData.num, (newValue, oldValue) => {
|
||||
console.log(newValue, oldValue)
|
||||
if (newValue > oldValue) {
|
||||
for (let i = 0; i < newValue - oldValue; i++) {
|
||||
visitorsList.value.push({
|
||||
name: '',
|
||||
idCard: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
if (newValue < oldValue) {
|
||||
visitorsList.value.splice(-(oldValue - newValue))
|
||||
}
|
||||
})
|
||||
|
||||
const reservation = () => {
|
||||
console.log(visitorsList.value)
|
||||
const result = visitorsList.value.filter((item) => item.name && item.idCard)
|
||||
if (result.map((item) => item.idCard).some((n, index, arr) => arr.indexOf(n) !== index)) {
|
||||
return uni.showToast({
|
||||
title: '身份证不能重复',
|
||||
icon: "error",
|
||||
});
|
||||
}
|
||||
if (Object.values(formData).some((item) => !item)) {
|
||||
return uni.showToast({
|
||||
title: '信息填写完整',
|
||||
icon: "error",
|
||||
});
|
||||
}
|
||||
}
|
||||
const showHandle = () => {
|
||||
show.value = true
|
||||
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 {
|
||||
height: 100vh;
|
||||
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%;
|
||||
@ -288,5 +786,5 @@ const showHandle = () => {
|
||||
width: 130rpx !important;
|
||||
}
|
||||
|
||||
}
|
||||
}*/
|
||||
</style>
|
||||
|
||||
BIN
src/static/Close@3x.png
Normal file
BIN
src/static/Close@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
src/static/lj781@3x.png
Normal file
BIN
src/static/lj781@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 782 B |
BIN
src/static/zu1149@3x.png
Normal file
BIN
src/static/zu1149@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/static/zu1150@3x.png
Normal file
BIN
src/static/zu1150@3x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
@ -4,6 +4,7 @@ import {ref} from 'vue'
|
||||
export const useMainStore = defineStore('main', () => {
|
||||
const titleHeight = ref('')
|
||||
const tabHeight = ref('')
|
||||
const currentBooking = ref(null)
|
||||
const isShow = ref(true)
|
||||
return {titleHeight, tabHeight, isShow}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user