657 lines
13 KiB
Vue
657 lines
13 KiB
Vue
<template>
|
|
<view class="codefun-flex-col section">
|
|
|
|
<view class="codefun-flex-col">
|
|
<NavBar :bgColor="data.navBar.bgColor">
|
|
<template v-slot:right>
|
|
<view class="codefun-flex-col group_2">
|
|
<view class="codefun-flex-row group_3">
|
|
<image class="image_4"
|
|
src="https://ide.code.fun/api/image?token=69a8ecc59a40b800116f659f&name=44fab7ee90c95b87261af4a7daf16baa.png" />
|
|
<image class="image_4 ml-25"
|
|
src="https://ide.code.fun/api/image?token=69a8ecc59a40b800116f659f&name=65cb30e87fa83964e97ff8fca353aae5.png" />
|
|
</view>
|
|
<view class="codefun-flex-row codefun-mt-4">
|
|
<text class="font text">退改说明</text>
|
|
<text class="font text_2 ml-11">客服</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</NavBar>
|
|
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_4 codefun-mt-10">
|
|
<view class="codefun-flex-row codefun-items-center">
|
|
<image class="codefun-shrink-0 image_5"
|
|
src="https://ide.code.fun/api/image?token=69a8ecc59a40b800116f659f&name=9eb41daef3c005e12021a9e662213233.png" />
|
|
<text class="text_5 ml-7">出票完成</text>
|
|
<view
|
|
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper ml-7 codefun-justify-center">
|
|
<text class="font_5 text_6">订返程</text>
|
|
</view>
|
|
</view>
|
|
<view class="codefun-flex-col section_2">
|
|
<view class="codefun-self-start group_5">
|
|
<text class="font_2 text_3">¥</text>
|
|
<text class="font_2 text_4">411.3</text>
|
|
</view>
|
|
<image class="codefun-shrink-0 codefun-self-end image_7 image_8"
|
|
src="https://ide.code.fun/api/image?token=69a8ecc59a40b800116f659f&name=57cd551df6c3f5bf9e1926e61e44b652.png" />
|
|
<text class="codefun-self-start text_7">支付明细</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
<view class="main-box">
|
|
<view class="codefun-flex-col section_3">
|
|
<view class="codefun-flex-col view">
|
|
<view class="codefun-flex-row codefun-items-baseline codefun-self-stretch codefun-justify-between">
|
|
<text class="font_5 text_8">取票号:E452364128</text>
|
|
<view class="group_9 ml-25">
|
|
<text class="font_6">6A、7A进站检票口,6B、7B进站检票 6A、7A进站检票口,6B、7B进站检票</text>
|
|
</view>
|
|
</view>
|
|
<view class="codefun-flex-row equal-division codefun-justify-between">
|
|
<view class="codefun-flex-col group_10 group_28">
|
|
<text class="codefun-self-stretch font_3 text_16">10月07日 周二</text>
|
|
<text class="codefun-self-start font_8 mt-7">12:06</text>
|
|
</view>
|
|
<view class="codefun-flex-col codefun-items-center group_10 group_29">
|
|
<text class="font_5 text_17">3小时2分</text>
|
|
<image class="image_9 mt-11"
|
|
src="https://ide.code.fun/api/image?token=69a8ecc59a40b800116f659f&name=04cc1a57adb212e81d9636e2ccf62d52.png" />
|
|
</view>
|
|
<view class="codefun-flex-col group_10 group_26">
|
|
<text class="codefun-self-start font_3 text_18">10月07日 周二</text>
|
|
<text class="codefun-self-end font_8 mt-7">12:06</text>
|
|
</view>
|
|
</view>
|
|
<view class="codefun-flex-row codefun-justify-center codefun-self-stretch codefun-relative group_11">
|
|
<view class="codefun-flex-row codefun-items-center pos">
|
|
<text class="font_9 text_19">长沙南</text>
|
|
<image class="codefun-shrink-0 image_4 ml-3"
|
|
src="https://ide.code.fun/api/image?token=69a8ecc59a40b800116f659f&name=d359b87761ae865350a6df0242beabf4.png" />
|
|
</view>
|
|
<view class="codefun-flex-row codefun-items-center">
|
|
<text class="font_19 text_21">G5267</text>
|
|
<image class="codefun-shrink-0 image_10 codefun-ml-2"
|
|
src="https://ide.code.fun/api/image?token=69a8ecc59a40b800116f659f&name=81fda3cc1109a351855d1057b2ba5637.png" />
|
|
</view>
|
|
<view class="codefun-flex-row codefun-items-center pos_2">
|
|
<image class="codefun-shrink-0 image_4"
|
|
src="https://ide.code.fun/api/image?token=69a8ecc59a40b800116f659f&name=d359b87761ae865350a6df0242beabf4.png" />
|
|
<text class="font_9 text_20 codefun-ml-4">虎门</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="codefun-flex-col group_12">
|
|
<view class="codefun-flex-col section_1">
|
|
<view class="codefun-flex-col">
|
|
<view class="codefun-flex-row codefun-justify-between codefun-items-center">
|
|
<view class="codefun-flex-row codefun-items-baseline">
|
|
<text class="font_10">汪鱼</text>
|
|
<text class="font_11 text_22 codefun-ml-10">成人票</text>
|
|
</view>
|
|
<view class="codefun-flex-row">
|
|
<view
|
|
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_8">
|
|
<text class="font_4 text_23">靠窗</text>
|
|
</view>
|
|
<text class="font_12 text_51 codefun-ml-6">14车11F号</text>
|
|
</view>
|
|
</view>
|
|
<view class="codefun-flex-row codefun-justify-between codefun-mt-8">
|
|
<text class="codefun-self-start font_13">5102**********553</text>
|
|
<text class="codefun-self-center font_14 text_25">二等座</text>
|
|
</view>
|
|
</view>
|
|
<view class="codefun-flex-row codefun-justify-between codefun-items-center group_27 mt-19">
|
|
<text class="font_15 text_50">出票成功</text>
|
|
<view class="codefun-flex-row">
|
|
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3">
|
|
<text class="font_16 text_27">分享</text>
|
|
</view>
|
|
<view
|
|
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_1 codefun-ml-6">
|
|
<text class="font_16 text_28">改签</text>
|
|
</view>
|
|
<view
|
|
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5 codefun-ml-6">
|
|
<text class="font_16 text_29">退票</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import NavBar from '@/components/nav-bar/nav-bar.vue';
|
|
|
|
import { reactive } from 'vue'
|
|
|
|
const data = reactive({
|
|
navBar: {
|
|
bgColor: 'transparent'
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
@import '/common/global.css';
|
|
|
|
page {
|
|
background-color: #F2F5F9;
|
|
}
|
|
</style>
|
|
<style lang="less" scoped>
|
|
.ml-5 {
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.ml-11 {
|
|
margin-left: 22rpx;
|
|
}
|
|
|
|
.ml-7 {
|
|
margin-left: 14rpx;
|
|
}
|
|
|
|
.ml-25 {
|
|
margin-left: 50rpx;
|
|
}
|
|
|
|
.mt-7 {
|
|
margin-top: 14rpx;
|
|
}
|
|
|
|
.mt-11 {
|
|
margin-top: 22rpx;
|
|
}
|
|
|
|
.ml-3 {
|
|
margin-left: 6rpx;
|
|
}
|
|
|
|
.mt-19 {
|
|
margin-top: 38rpx;
|
|
}
|
|
|
|
.section {
|
|
background: linear-gradient(180deg, #CDF2F6 0%, #F2F5F9 100%);
|
|
|
|
.group {
|
|
padding: 0 29.34rpx;
|
|
|
|
.image {
|
|
width: 34rpx;
|
|
height: 22rpx;
|
|
}
|
|
|
|
.image_2 {
|
|
width: 30rpx;
|
|
height: 22rpx;
|
|
}
|
|
|
|
.image_3 {
|
|
width: 48rpx;
|
|
height: 22.66rpx;
|
|
}
|
|
}
|
|
|
|
.image_5 {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
|
|
.image_6 {
|
|
margin: 4rpx 0 3.92rpx;
|
|
}
|
|
|
|
.group_2 {
|
|
.group_3 {
|
|
padding-left: 23.26rpx;
|
|
padding-right: 4.64rpx;
|
|
|
|
.image_4 {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
}
|
|
|
|
.font {
|
|
font-size: 18rpx;
|
|
line-height: 16.88rpx;
|
|
color: #363636;
|
|
}
|
|
|
|
.text {
|
|
line-height: 16.68rpx;
|
|
}
|
|
|
|
.text_2 {
|
|
line-height: 16.74rpx;
|
|
}
|
|
}
|
|
|
|
.group_4 {
|
|
padding-left: 20rpx;
|
|
padding-bottom: 30rpx;
|
|
|
|
.text_5 {
|
|
color: #363636;
|
|
font-size: 44rpx;
|
|
font-weight: 800;
|
|
line-height: 41.18rpx;
|
|
}
|
|
|
|
.text-wrapper {
|
|
border-radius: 25rpx;
|
|
width: 106rpx;
|
|
height: 50rpx;
|
|
border: solid 1rpx #28c2dd;
|
|
|
|
.font_5 {
|
|
font-size: 26rpx;
|
|
line-height: 21.14rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.text_6 {
|
|
color: #28c2dd;
|
|
font-size: 24rpx;
|
|
line-height: 21.7rpx;
|
|
}
|
|
}
|
|
|
|
.section_2 {
|
|
padding: 19.76rpx 16.2rpx 13.54rpx;
|
|
background-image: linear-gradient(270deg, #ffffff00 -64.3%, #ffffff 91.7%);
|
|
border-radius: 16rpx 0rpx 0rpx 16rpx;
|
|
width: 160rpx;
|
|
height: 94rpx;
|
|
|
|
.group_5 {
|
|
line-height: 20.46rpx;
|
|
|
|
.font_2 {
|
|
font-size: 26rpx;
|
|
line-height: 21.14rpx;
|
|
color: #fb8517;
|
|
}
|
|
|
|
.text_3 {
|
|
font-size: 28rpx;
|
|
line-height: 19.9rpx;
|
|
}
|
|
|
|
.text_4 {
|
|
font-size: 28rpx;
|
|
line-height: 20.46rpx;
|
|
}
|
|
}
|
|
|
|
.image_7 {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
}
|
|
|
|
.image_8 {
|
|
margin-right: 11.8rpx;
|
|
}
|
|
|
|
.text_7 {
|
|
margin-left: 2.52rpx;
|
|
margin-top: 3.84rpx;
|
|
color: #363636;
|
|
font-size: 20rpx;
|
|
line-height: 18.62rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.main-box {
|
|
padding: 10rpx 16rpx;
|
|
|
|
.ml-25 {
|
|
margin-left: 50rpx;
|
|
}
|
|
|
|
.section_3 {
|
|
padding: 20rpx 18rpx 0;
|
|
background-color: #ffffff;
|
|
border-radius: 20rpx;
|
|
|
|
.view {
|
|
margin: 0 14rpx;
|
|
padding-top: 2.96rpx;
|
|
|
|
.font_5 {
|
|
font-size: 26rpx;
|
|
line-height: 21.14rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.text_8 {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.group_9 {
|
|
line-height: 21.76rpx;
|
|
height: 21.76rpx;
|
|
overflow: hidden;
|
|
overflow-x: auto;
|
|
flex: 1;
|
|
|
|
/* 隐藏横向滚动条，但保留滑动效果 */
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.font_6 {
|
|
white-space: nowrap;
|
|
font-size: 22rpx;
|
|
line-height: 24rpx;
|
|
font-weight: 500;
|
|
color: #4FB26E;
|
|
}
|
|
}
|
|
|
|
.equal-division {
|
|
align-self: flex-start;
|
|
margin-top: 21rpx;
|
|
width: 100%;
|
|
|
|
.group_10 {
|
|
flex-shrink: 0;
|
|
|
|
.font_3 {
|
|
font-size: 26rpx;
|
|
line-height: 25.92rpx;
|
|
color: #363636;
|
|
}
|
|
|
|
.text_16 {
|
|
font-size: 28rpx;
|
|
line-height: 24rpx;
|
|
}
|
|
|
|
.font_8 {
|
|
font-size: 52rpx;
|
|
color: #363636;
|
|
}
|
|
|
|
.text_17 {
|
|
font-size: 24rpx;
|
|
line-height: 22.04rpx;
|
|
}
|
|
|
|
.image_9 {
|
|
width: 234rpx;
|
|
height: 44rpx;
|
|
}
|
|
|
|
.text_18 {
|
|
font-size: 28rpx;
|
|
line-height: 24rpx;
|
|
text-align: right;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.group_28 {
|
|
padding: 16rpx 0;
|
|
width: 200rpx;
|
|
}
|
|
|
|
.group_29 {
|
|
padding: 18.84rpx 0 3.54rpx;
|
|
}
|
|
|
|
.group_26 {
|
|
padding: 16rpx 0;
|
|
width: 200rpx;
|
|
}
|
|
}
|
|
|
|
.group_11 {
|
|
|
|
.pos {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
|
|
.text_19 {
|
|
font-size: 28rpx;
|
|
line-height: 25.96rpx;
|
|
}
|
|
}
|
|
|
|
.font_19 {
|
|
font-size: 26rpx;
|
|
line-height: 28rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.text_21 {
|
|
font-size: 24rpx;
|
|
line-height: 17.54rpx;
|
|
}
|
|
|
|
.image_10 {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
|
|
.pos_2 {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
|
|
.text_20 {
|
|
font-size: 28rpx;
|
|
line-height: 25.82rpx;
|
|
}
|
|
}
|
|
|
|
.image_4 {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
|
|
.font_9 {
|
|
font-size: 26rpx;
|
|
line-height: 25.92rpx;
|
|
font-weight: 800;
|
|
color: #363636;
|
|
}
|
|
}
|
|
}
|
|
|
|
.group_12 {
|
|
padding: 38rpx 0 24rpx;
|
|
|
|
.section_1 {
|
|
padding: 28rpx 10.58rpx 22rpx 19.1rpx;
|
|
background-color: #f9fbfc;
|
|
border-radius: 16rpx;
|
|
|
|
.text_22 {
|
|
font-size: 24rpx;
|
|
line-height: 22.22rpx;
|
|
}
|
|
|
|
.text-wrapper_8 {
|
|
background-color: #9db2bd;
|
|
border-radius: 8rpx;
|
|
width: 56rpx;
|
|
height: 32rpx;
|
|
|
|
.text_23 {
|
|
line-height: 32rpx;
|
|
}
|
|
}
|
|
|
|
.text_51 {
|
|
margin-top: 2.92rpx;
|
|
}
|
|
|
|
.text_25 {
|
|
margin-right: 4.38rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.group_27 {
|
|
padding: 0 8.98rpx;
|
|
|
|
.text_50 {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.section_4 {
|
|
padding: 28rpx 12.64rpx 22rpx 19.1rpx;
|
|
background-color: #f9fbfc;
|
|
border-radius: 16rpx;
|
|
|
|
.text_52 {
|
|
font-size: 24rpx;
|
|
line-height: 22.22rpx;
|
|
}
|
|
|
|
.text-wrapper_2 {
|
|
padding: 7.84rpx 0 5.92rpx;
|
|
background-color: #9db2bd;
|
|
border-radius: 8rpx;
|
|
width: 56rpx;
|
|
height: 32rpx;
|
|
|
|
.text_30 {
|
|
line-height: 18.24rpx;
|
|
}
|
|
}
|
|
|
|
.text_1 {
|
|
margin-top: 2.92rpx;
|
|
}
|
|
|
|
.text_49 {
|
|
margin-right: 2.32rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.group_1 {
|
|
padding-left: 8.98rpx;
|
|
padding-right: 7.36rpx;
|
|
|
|
.text_26 {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.font_10 {
|
|
font-size: 26rpx;
|
|
line-height: 23.74rpx;
|
|
font-weight: 700;
|
|
color: #363636;
|
|
}
|
|
|
|
.font_11 {
|
|
font-size: 26rpx;
|
|
line-height: 21.14rpx;
|
|
font-weight: 700;
|
|
color: #999999;
|
|
}
|
|
|
|
.font_4 {
|
|
font-size: 20rpx;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.font_12 {
|
|
font-size: 32rpx;
|
|
line-height: 29.6rpx;
|
|
color: #363636;
|
|
}
|
|
|
|
.font_13 {
|
|
font-size: 26rpx;
|
|
line-height: 19rpx;
|
|
font-weight: 700;
|
|
color: #999999;
|
|
}
|
|
|
|
.font_14 {
|
|
font-size: 26rpx;
|
|
line-height: 25.92rpx;
|
|
color: #545356;
|
|
}
|
|
|
|
.font_15 {
|
|
font-size: 26rpx;
|
|
line-height: 25.92rpx;
|
|
font-weight: 800;
|
|
color: #f5882c;
|
|
}
|
|
|
|
.text-wrapper_3 {
|
|
padding: 18.14rpx 0 17.54rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 30rpx;
|
|
width: 104rpx;
|
|
height: 60rpx;
|
|
border: solid 1rpx #e0e4e3;
|
|
|
|
.text_27 {
|
|
font-size: 24rpx;
|
|
line-height: 22.32rpx;
|
|
}
|
|
}
|
|
|
|
.font_16 {
|
|
font-size: 26rpx;
|
|
line-height: 21.14rpx;
|
|
font-weight: 700;
|
|
color: #363636;
|
|
}
|
|
|
|
.text-wrapper_1 {
|
|
padding: 18.18rpx 0 17.52rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 30rpx;
|
|
width: 104rpx;
|
|
height: 60rpx;
|
|
border: solid 1rpx #e0e4e3;
|
|
|
|
.text_28 {
|
|
font-size: 24rpx;
|
|
line-height: 22.3rpx;
|
|
}
|
|
}
|
|
|
|
.text-wrapper_5 {
|
|
padding: 19.26rpx 0 17.6rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 30rpx;
|
|
width: 104rpx;
|
|
height: 60rpx;
|
|
border: solid 1rpx #e0e4e3;
|
|
|
|
.text_29 {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |