1231 lines
27 KiB
Vue
1231 lines
27 KiB
Vue
<template>
|
||
<!-- 水印 -->
|
||
<view v-if="$isVip()">
|
||
<watermark dark="light" />
|
||
<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark')">
|
||
<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
|
||
</liu-drag-button>
|
||
</view>
|
||
<view class="top-box">
|
||
<NavBar title="订单详情" :bgColor="data.navBar.bgColor" :buttonGroup="buttonGroup"
|
||
@button-click="util.clickTitlePopupButton" tipLayerType="ctrip-train-tickets-tip" isTipLayer
|
||
tipLayerText="修改车票信息">
|
||
<template v-if="$system == 'iOS'" v-slot:statusBar>
|
||
<view class="status-bar">
|
||
<image class="top-logo" style="width: 160rpx"
|
||
src="/static/image/other/train-tickets/ctrip/top-logo.png" mode="widthFix">
|
||
</image>
|
||
</view>
|
||
</template>
|
||
<template v-slot:center>
|
||
<view class="codefun-flex-row">
|
||
<text class="text">订单</text>
|
||
<text class="text_2 ml-15">行程服务</text>
|
||
</view>
|
||
</template>
|
||
<template v-slot:right>
|
||
<view class="codefun-flex-col pos_2">
|
||
<view class="codefun-flex-row">
|
||
<view class="codefun-flex-col codefun-items-center">
|
||
<image class="image_5" src="/static/image/other/train-tickets/ctrip/customer-sevice.png" />
|
||
<text class="font text_3">客服</text>
|
||
</view>
|
||
<view class="codefun-flex-col codefun-items-center"
|
||
style="margin-left: 16rpx;margin-right: 10px;">
|
||
<image class="image_5"
|
||
src="/static/image/other/train-tickets/ctrip/refund-instructions.png" />
|
||
<text class="font text_3">退改说明</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</NavBar>
|
||
<view class="codefun-flex-col section">
|
||
<view class="codefun-flex-col">
|
||
|
||
<view class="codefun-flex-row codefun-justify-between codefun-items-start group_4">
|
||
<view class="codefun-flex-row group_5">
|
||
<image class="image_8" src="/static/image/other/train-tickets/ctrip/success.png" />
|
||
<view class="codefun-flex-col codefun-items-start group_33 codefun-ml-10">
|
||
<text class="text_5">抢票成功</text>
|
||
<text class="font_2 text_6 codefun-mt-8">携程祝您出行愉快</text>
|
||
</view>
|
||
</view>
|
||
<image class="image_7" src="/static/image/other/train-tickets/ctrip/buy-return-trip.png" />
|
||
</view>
|
||
<view class="codefun-flex-row codefun-justify-between codefun-items-center section_2 mt-15">
|
||
<view class="codefun-flex-row codefun-items-center">
|
||
<image class="image_9" src="/static/image/other/train-tickets/ctrip/free-order.png" />
|
||
<text class="font_2 text_7 codefun-ml-4">做任务抽大奖</text>
|
||
</view>
|
||
<image class="image_10" src="/static/image/other/train-tickets/ctrip/right.png" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="main-container">
|
||
<view class="codefun-flex-col codefun-justify-start section_3">
|
||
<view class="codefun-flex-row codefun-justify-between codefun-items-center section_4">
|
||
<text class="text_8">注意确认行程信息</text>
|
||
<view class="codefun-flex-col">
|
||
<view class="codefun-flex-row group_6">
|
||
<view class="item-box codefun-flex-col codefun-items-center">
|
||
<image class="image_6" src="/static/image/other/train-tickets/ctrip/zaixianhuanzuo.png" />
|
||
<text class="font_3 text_9 mt-5">在线换座</text>
|
||
</view>
|
||
<view class="item-box codefun-flex-col codefun-items-center">
|
||
<image class="image_6 ml-11"
|
||
src="/static/image/other/train-tickets/ctrip/dingdantongzhi.png" />
|
||
<text class="font_3 text_10 ml-11 mt-5">订单通知</text>
|
||
</view>
|
||
<view class="item-box codefun-flex-col codefun-items-center">
|
||
<image class="image_6 ml-11"
|
||
src="/static/image/other/train-tickets/ctrip/fenxiangxingcheng.png" />
|
||
<text class="font_3 text_11 ml-11 mt-5">分享行程</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="codefun-flex-col section_5">
|
||
<view class="codefun-flex-col group_8">
|
||
<view class="codefun-flex-row codefun-justify-between" style="width: 100%;">
|
||
<text class="font_6 text_12">取票号：{{ ticketsInfo.orderInfo.orderNo }}</text>
|
||
<text class="font_5 text_13">{{ ticketsInfo.ticketInfo.gate }}</text>
|
||
</view>
|
||
<view class="codefun-flex-row codefun-justify-between codefun-self-stretch group_9">
|
||
<view class="codefun-flex-col">
|
||
<text class="font_1 text_14 w-100">{{ formatDateTime(ticketsInfo.ticketInfo.departureTime,
|
||
ticketsInfo.ticketInfo.date) }}</text>
|
||
</view>
|
||
<text class="font_1 text_15">{{ ticketsInfo.ticketInfo.duration }}</text>
|
||
<text class="font_1 text_16 w-100 text-align-r">{{
|
||
formatDateTime(ticketsInfo.ticketInfo.arrivalTime,
|
||
ticketsInfo.ticketInfo.date) }}</text>
|
||
</view>
|
||
<view
|
||
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group_10">
|
||
<text class="font_7 w-80" @click="goEdit">{{ ticketsInfo.ticketInfo.departureTime.split(' ')[1]
|
||
}}</text>
|
||
<image class="image_11" src="/static//image/other/train-tickets/ctrip/jingtingxinxi.png" />
|
||
<text class="font_7 w-80 text-align-r" @click="goEdit">{{
|
||
ticketsInfo.ticketInfo.arrivalTime.split(' ')[1]
|
||
}}</text>
|
||
</view>
|
||
<view
|
||
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group_11">
|
||
<view class="codefun-flex-row codefun-items-center w-100">
|
||
<text class="font_8 text_18">{{ ticketsInfo.ticketInfo.departureStation }}</text>
|
||
<image class="image_13 codefun-ml-4"
|
||
src="/static//image/other/train-tickets/ctrip/location.png" />
|
||
</view>
|
||
<view class="codefun-flex-row codefun-items-center">
|
||
<text class="font_9 text_19">{{ ticketsInfo.ticketInfo.trainNo }}</text>
|
||
<view v-if="ticketsInfo.ticketInfo.trainName"
|
||
class="codefun-flex-row codefun-items-center train-name">
|
||
<text class="font_6">{{ ticketsInfo.ticketInfo.trainName }}</text>
|
||
<uni-icons type="right" size="10" color="#767676"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-row codefun-justify-end codefun-items-center w-100">
|
||
<image class="image_13" src="/static//image/other/train-tickets/ctrip/location.png" />
|
||
<text class="font_8 text_20 codefun-ml-2">{{ ticketsInfo.ticketInfo.arrivalStation }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-col list">
|
||
<view class="codefun-flex-col codefun-justify-start list-item codefun-mt-8"
|
||
v-for="item in ticketsInfo.passengerList" :key="item.id">
|
||
<view class="codefun-flex-col group_13" @click="goEdit">
|
||
<view
|
||
class="codefun-flex-col codefun-justify-start codefun-items-start codefun-relative group_16">
|
||
|
||
<view class="codefun-flex-col codefun-items-start group_15 pos_4">
|
||
<view class="codefun-flex-col group_12">
|
||
<view class="codefun-flex-row codefun-justify-between codefun-items-center">
|
||
<view class="codefun-flex-row codefun-items-center">
|
||
<text class="font_10 text_21">{{ item.name }}</text>
|
||
<view class="codefun-flex-row codefun-items-center section_1 codefun-ml-4">
|
||
<text class="font_11">{{ item.type }}</text>
|
||
<uni-icons type="right" size="10" color="#767676"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-row codefun-items-center">
|
||
<view
|
||
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
|
||
<text class="font_6 text_22" v-if="computeSeatNo(item.seatNo)">{{
|
||
computeSeatNo(item.seatNo) }}</text>
|
||
</view>
|
||
<text class="font_12">{{ item.carriage }}车厢{{ item.seatNo }}号</text>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-row codefun-justify-between codefun-mt-8">
|
||
<view class="codefun-flex-row codefun-items-center">
|
||
<image class="image_15"
|
||
src="/static/image/other/train-tickets/ctrip/jifen.png" />
|
||
<view class="group_17">
|
||
<text class="font_13">铁路会员积分+{{ item.points }}(价值</text>
|
||
<text class="font_14 text_24">¥{{ (item.points *
|
||
0.01).toFixed(2) }}</text>
|
||
<text class="font_13 text_24 text_25">)</text>
|
||
</view>
|
||
<image class="image_16"
|
||
src="/static/image/other/train-tickets/ctrip/help.png" />
|
||
</view>
|
||
<view class="codefun-flex-row codefun-items-center">
|
||
|
||
<text class="font_15 text_26">{{ item.seatType }}¥{{ item.price }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-row codefun-justify-between codefun-items-center">
|
||
<text class="success-text">购票成功</text>
|
||
<view class="codefun-flex-row codefun-justify-end group_18">
|
||
<view
|
||
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2">
|
||
<text class="font_16 text_28">改签</text>
|
||
</view>
|
||
<view
|
||
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3 ml-7">
|
||
<text class="font_16 text_29">退票</text>
|
||
</view>
|
||
<view v-if="item.isMe"
|
||
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_1 ml-7">
|
||
<text class="font_17 text_30">扫码检票</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
<view class="codefun-flex-row codefun-justify-between group_20">
|
||
<view class="section_6"></view>
|
||
<view class="section_6"></view>
|
||
</view>
|
||
<view class="codefun-flex-col section_7">
|
||
<view class="codefun-flex-row codefun-items-center group_21">
|
||
<view class="codefun-flex-col codefun-flex-1">
|
||
<view class="codefun-flex-row codefun-items-center">
|
||
<view class="codefun-flex-row codefun-items-center group_22">
|
||
<image class="image_17" src="/static/image/other/train-tickets/ctrip/huodong.png" />
|
||
|
||
<view
|
||
class="codefun-flex-row codefun-justify-start codefun-items-center codefun-relative group_23 ml-5">
|
||
<text class="font_18 ml-5">恭喜获得</text>
|
||
<text class="font_9 text_33">¥{{ ticketsInfo.hotelInfo.cashback }}</text>
|
||
<text class="font_18 pos_6">返现机会</text>
|
||
</view>
|
||
</view>
|
||
<image class="image_13 image_18" src="/static/image/other/train-tickets/ctrip/help.png" />
|
||
</view>
|
||
<text class="font_19 text_36 mt-7">本单可返现¥{{ ticketsInfo.hotelInfo.cashback }}，需在{{
|
||
formatMMDD(ticketsInfo.hotelInfo.startDay)
|
||
}}前预订酒店，并在{{
|
||
formatMMDD(ticketsInfo.hotelInfo.endDay) }}前离店</text>
|
||
</view>
|
||
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4 codefun-ml-20">
|
||
<text class="font_5 text_35">去完成</text>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-row codefun-mt-6">
|
||
<view v-for="(item, index) in data.guideList" :key="index"
|
||
class="codefun-flex-col codefun-items-center group_24 group_26">
|
||
<image class="image_19" :src="item.icon" />
|
||
<text class="font_19 mt-7" :class="item.textClass">{{ item.name }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-row codefun-justify-between codefun-items-center section_8 codefun-mt-8">
|
||
<view class="codefun-flex-row codefun-items-baseline">
|
||
<text class="font_20 text_37">支付总额</text>
|
||
<view class="group_25 ml-5">
|
||
<text class="font_20 text_39">¥</text>
|
||
<text class="text_38">{{ ticketsInfo.orderInfo.price }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-row codefun-items-center group_32">
|
||
<text class="font_21 text_40">查看明细</text>
|
||
<uni-icons class="ml-5" type="down" size="12" color="#767676"></uni-icons>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="codefun-flex-col section_9 codefun-mt-8">
|
||
<view class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch">
|
||
<text class="font_20 text_41">常见问题</text>
|
||
<view class="codefun-flex-row codefun-items-center">
|
||
<text class="font_21 text_42">其他问题</text>
|
||
<uni-icons class="ml-5" type="right" size="12" color="#767676"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-row codefun-self-stretch codefun-mt-10">
|
||
<view class="codefun-flex-col codefun-justify-start text-wrapper_5">
|
||
<text class="font_22 text_43">改签如何指定车厢/座席</text>
|
||
</view>
|
||
<view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_6 codefun-ml-8">
|
||
<text class="font_22 text_44">如何退票</text>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-col codefun-justify-start codefun-self-start text-wrapper_7 codefun-mt-10">
|
||
<text class="font_22 text_45">是否可以刷身份证进站乘车，需要取票吗</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import NavBar from '@/components/nav-bar/nav-bar.vue';
|
||
import { reactive, ref, computed, toRefs } from 'vue';
|
||
import { onShow, onPageScroll } from '@dcloudio/uni-app';
|
||
import { util } from '@/utils/common.js';
|
||
|
||
const buttonGroup = [{
|
||
name: "编辑车票信息",
|
||
click: () => {
|
||
goEdit()
|
||
}
|
||
}]
|
||
|
||
function goEdit() {
|
||
util.goPage(`/pages/other/train-tickets/edit/edit?app=ctrip&storageKey=${data.STORAGE_KEY}`)
|
||
}
|
||
|
||
const data = reactive({
|
||
navBar: {
|
||
bgColor: 'transparent'
|
||
},
|
||
guideList: [
|
||
{ name: '游玩指南', icon: '/static/image/other/train-tickets/ctrip/youwanzhinan.png' },
|
||
{ name: '儿童申报', icon: '/static/image/other/train-tickets/ctrip/ertongshenbao.png' },
|
||
{ name: '发票报销', icon: '/static/image/other/train-tickets/ctrip/fapiaobaoxiao.png' },
|
||
{ name: '进站指引', icon: '/static/image/other/train-tickets/ctrip/jinzhanzhiyin.png' },
|
||
{ name: '展开全部', icon: '/static/image/other/train-tickets/ctrip/quanbuzhankai.png' }
|
||
],
|
||
STORAGE_KEY: 'ctripTrainTicketsInfo',
|
||
ticketsInfo: {
|
||
"orderInfo": {
|
||
"orderNo": "EJ66223536",
|
||
"price": "4440"
|
||
},
|
||
"ticketInfo": {
|
||
"departureTime": "01-01 09:19",
|
||
"departureStation": "北京南",
|
||
"arrivalTime": "01-01 14:04",
|
||
"arrivalStation": "上海虹桥",
|
||
"trainNo": "G905",
|
||
"duration": "4时45分",
|
||
"date": "2026.01.01",
|
||
"weekDay": "星期四",
|
||
"gate": "6A、7A进站检票口,6B、7B进站检票",
|
||
"trainName": "复兴号"
|
||
},
|
||
"passengerList": [
|
||
{
|
||
"name": "张元英",
|
||
"type": "成人票",
|
||
"seatType": "商务座",
|
||
"carriage": "01",
|
||
"seatNo": "03C",
|
||
"idType": "外国护照（KR）",
|
||
"price": "2110",
|
||
"status": "已支付",
|
||
"isMe": true,
|
||
"points": 9632
|
||
}
|
||
],
|
||
"hotelInfo": {
|
||
"cashback": "25",
|
||
"startDay": "01-01",
|
||
"endDay": "01-02"
|
||
}
|
||
},
|
||
})
|
||
|
||
let { ticketsInfo } = toRefs(data)
|
||
|
||
onPageScroll((e) => {
|
||
if (e.scrollTop > 40) {
|
||
data.navBar.bgColor = '#BEDDFE'
|
||
} else {
|
||
data.navBar.bgColor = 'transparent'
|
||
}
|
||
})
|
||
|
||
onShow(() => {
|
||
const stored = uni.getStorageSync(data.STORAGE_KEY)
|
||
if (stored) {
|
||
Object.assign(data.ticketsInfo, stored)
|
||
}
|
||
})
|
||
|
||
const computeSeatNo = (seatNo) => {
|
||
if (seatNo.includes('C') || seatNo.includes('F')) {
|
||
return '靠窗';
|
||
} else if (seatNo.includes('A') || seatNo.includes('D')) {
|
||
return '过道';
|
||
}
|
||
return '';
|
||
}
|
||
|
||
const formatDateTime = (timeStr, dateStr) => {
|
||
if (!timeStr) return '';
|
||
const parts = timeStr.split(' ');
|
||
const md = parts[0];
|
||
if (!md) return '';
|
||
const mdParts = md.split('-');
|
||
let year, month, day;
|
||
|
||
if (mdParts.length === 3) {
|
||
year = mdParts[0];
|
||
month = mdParts[1];
|
||
day = mdParts[2];
|
||
} else if (mdParts.length === 2) {
|
||
month = mdParts[0];
|
||
day = mdParts[1];
|
||
year = new Date().getFullYear();
|
||
if (dateStr) {
|
||
year = dateStr.split('.')[0];
|
||
}
|
||
} else {
|
||
return '';
|
||
}
|
||
|
||
const dateObj = new Date(Number(year), Number(month) - 1, Number(day));
|
||
const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
||
const week = isNaN(dateObj.getTime()) ? '' : weekDays[dateObj.getDay()];
|
||
|
||
return `${month}月${day}日 ${week}`;
|
||
}
|
||
|
||
const formatMMDD = (mdStr) => {
|
||
if (!mdStr) return '';
|
||
const [month, day] = mdStr.split('-');
|
||
return month && day ? `${month}月${day}日` : '';
|
||
}
|
||
|
||
</script>
|
||
|
||
<style>
|
||
@import '/common/global.css';
|
||
</style>
|
||
<style lang="less">
|
||
.w-100 {
|
||
width: 100px;
|
||
}
|
||
|
||
.w-80 {
|
||
width: 80px;
|
||
}
|
||
|
||
.text-align-r {
|
||
text-align: right;
|
||
}
|
||
|
||
.ml-15 {
|
||
margin-left: 15px;
|
||
}
|
||
|
||
.mt-3 {
|
||
margin-top: 3px;
|
||
}
|
||
|
||
.mt-15 {
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.mt-5 {
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.ml-7 {
|
||
margin-left: 7px;
|
||
}
|
||
|
||
.ml-5 {
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.ml-11 {
|
||
margin-left: 11px;
|
||
}
|
||
|
||
.ml-65 {
|
||
margin-left: 65px;
|
||
}
|
||
|
||
.ml-67 {
|
||
margin-left: 67px;
|
||
}
|
||
|
||
.ml-7 {
|
||
margin-left: 7px;
|
||
}
|
||
|
||
.train-name {
|
||
margin-left: 4rpx;
|
||
border: 1rpx solid #F5F5F5;
|
||
height: 32rpx;
|
||
border-radius: 8rpx;
|
||
padding-left: 4rpx;
|
||
}
|
||
|
||
.top-box {
|
||
background-image: url('/static/image/other/train-tickets/ctrip/ctrip-train-bg.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
|
||
.status-bar {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding-top: 16rpx;
|
||
padding-bottom: 32rpx;
|
||
}
|
||
|
||
.text {
|
||
color: #0b2c5c;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
line-height: 16.5px;
|
||
}
|
||
|
||
.text_2 {
|
||
color: #0b2c5c;
|
||
font-size: 18px;
|
||
line-height: 16.5px;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.pos_2 {
|
||
position: absolute;
|
||
right: 2.5px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
|
||
.image_5 {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
.font {
|
||
font-size: 11px;
|
||
line-height: 10px;
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
.text_3 {
|
||
font-size: 10px;
|
||
line-height: 9.5px;
|
||
}
|
||
|
||
}
|
||
|
||
.section {
|
||
padding: 8px;
|
||
background-image: url('assets/fff2fdc35a03732c79c39077e0ac181b.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
|
||
.group_2 {
|
||
padding: 0 6.5px;
|
||
|
||
.image {
|
||
width: 80px;
|
||
height: 20px;
|
||
}
|
||
|
||
.pos {
|
||
position: absolute;
|
||
right: 6.5px;
|
||
bottom: 3.552713678800501e-15px;
|
||
|
||
.image_2 {
|
||
width: 17px;
|
||
height: 11px;
|
||
}
|
||
|
||
.image_3 {
|
||
width: 15px;
|
||
height: 11px;
|
||
}
|
||
|
||
.image_4 {
|
||
width: 24px;
|
||
height: 11.5px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.group_3 {
|
||
padding: 10.5px 0 5px;
|
||
|
||
.image_6 {
|
||
width: 22px;
|
||
height: 22px;
|
||
}
|
||
|
||
.pos_3 {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.text {
|
||
color: #0b2c5c;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
line-height: 16.5px;
|
||
}
|
||
|
||
.text_2 {
|
||
color: #0b2c5c;
|
||
font-size: 18px;
|
||
line-height: 16.5px;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.group_4 {
|
||
padding: 0 11px;
|
||
|
||
.group_5 {
|
||
margin-top: 5px;
|
||
|
||
.image_8 {
|
||
margin-bottom: 3px;
|
||
width: 36px;
|
||
height: 36px;
|
||
}
|
||
|
||
.group_33 {
|
||
margin-top: 2px;
|
||
|
||
.text_5 {
|
||
color: #0b2c5c;
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
line-height: 18.5px;
|
||
}
|
||
|
||
.text_6 {
|
||
font-size: 12px;
|
||
line-height: 11px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.image_7 {
|
||
width: 70px;
|
||
height: 29px;
|
||
}
|
||
}
|
||
|
||
.font_2 {
|
||
font-size: 11px;
|
||
line-height: 12px;
|
||
color: #0b2c5c;
|
||
}
|
||
}
|
||
|
||
.section_2 {
|
||
padding: 8px 14px;
|
||
background-color: #B6D3FA;
|
||
// background-color: #006eec;
|
||
border-radius: 10px;
|
||
|
||
.image_9 {
|
||
width: 70px;
|
||
height: 20px;
|
||
}
|
||
|
||
.image_10 {
|
||
margin-right: 4px;
|
||
border-radius: 8px;
|
||
width: 22px;
|
||
height: 22px;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
.main-container {
|
||
padding-bottom: 12px;
|
||
padding-bottom: calc(12px + constant(safe-area-inset-bottom));
|
||
padding-bottom: calc(12px + env(safe-area-inset-bottom));
|
||
|
||
.section_3 {
|
||
padding-bottom: 86px;
|
||
background: linear-gradient(360deg, rgba(203, 228, 255, 0) 0%, #BEDDFE 100%);
|
||
|
||
.section_4 {
|
||
margin: 0 8px;
|
||
padding: 12px 15px 32px 14px;
|
||
background-image: url('/static/image/other/train-tickets/ctrip/card-bg.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
|
||
.text_8 {
|
||
color: #ffffff;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
line-height: 15px;
|
||
}
|
||
|
||
.group_6 {
|
||
padding-left: 12.5px;
|
||
|
||
.image_6 {
|
||
width: 22px;
|
||
height: 22px;
|
||
}
|
||
}
|
||
|
||
.font_3 {
|
||
font-size: 11px;
|
||
line-height: 10px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.section_5 {
|
||
padding: 15px 8px 0;
|
||
background-color: #ffffff;
|
||
border-radius: 10px;
|
||
margin: 0 8px;
|
||
margin-top: -102px;
|
||
position: relative;
|
||
|
||
.group_8 {
|
||
margin: 0 7px;
|
||
padding-top: 1.5px;
|
||
overflow: hidden;
|
||
|
||
.text_12 {
|
||
line-height: 9.5px;
|
||
}
|
||
|
||
.text_13 {
|
||
line-height: 11px;
|
||
}
|
||
|
||
.group_9 {
|
||
margin-top: 17px;
|
||
|
||
.font_1 {
|
||
font-size: 11px;
|
||
line-height: 12px;
|
||
color: #767676;
|
||
}
|
||
|
||
.text_14 {
|
||
line-height: 12px;
|
||
}
|
||
|
||
.text_16 {
|
||
line-height: 12px;
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
.group_10 {
|
||
margin-top: 4.5px;
|
||
padding-left: 2.5px;
|
||
|
||
.font_7 {
|
||
font-size: 24px;
|
||
line-height: 17.5px;
|
||
font-weight: 500;
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
.image_11 {
|
||
width: 117px;
|
||
height: 22px;
|
||
}
|
||
}
|
||
|
||
.group_11 {
|
||
margin-right: 1px;
|
||
margin-top: 4px;
|
||
|
||
.font_8 {
|
||
font-size: 13px;
|
||
line-height: 12px;
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
.image_13 {
|
||
width: 13px;
|
||
height: 13px;
|
||
}
|
||
|
||
.font_9 {
|
||
font-size: 14px;
|
||
line-height: 10px;
|
||
}
|
||
|
||
.text_19 {
|
||
color: #1a1a1a;
|
||
line-height: 10px;
|
||
}
|
||
|
||
.image_12 {
|
||
width: 42px;
|
||
height: 16px;
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.list {
|
||
padding: 13px 0 8px;
|
||
|
||
.list-item {
|
||
padding: 12px 0 10px;
|
||
background-color: #f5f7fb;
|
||
border-radius: 6px;
|
||
|
||
&:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.group_13 {
|
||
margin: 0 10px;
|
||
overflow: hidden;
|
||
height: 78px;
|
||
|
||
.group_16 {
|
||
|
||
.group_17 {
|
||
margin-left: 6rpx;
|
||
margin-right: 4rpx;
|
||
line-height: 12px;
|
||
|
||
.font_13 {
|
||
font-size: 11px;
|
||
line-height: 12px;
|
||
color: #3d3d3d;
|
||
}
|
||
|
||
.font_14 {
|
||
font-size: 11px;
|
||
line-height: 8px;
|
||
color: #3d3d3d;
|
||
}
|
||
|
||
.text_24 {
|
||
word-break: break-all;
|
||
}
|
||
|
||
.text_25 {
|
||
line-height: 11.5px;
|
||
}
|
||
}
|
||
|
||
.group_15 {
|
||
overflow: hidden;
|
||
height: 50px;
|
||
width: 100%;
|
||
|
||
.group_12 {
|
||
width: 100%;
|
||
|
||
.font_10 {
|
||
font-size: 14px;
|
||
line-height: 12px;
|
||
font-weight: 500;
|
||
color: #363636;
|
||
}
|
||
|
||
.text_21 {
|
||
line-height: 13px;
|
||
}
|
||
|
||
.section_1 {
|
||
padding-bottom: 2px;
|
||
border-radius: 2px;
|
||
height: 16px;
|
||
border: solid 0.5px #e6e8ec;
|
||
|
||
.font_11 {
|
||
font-size: 9px;
|
||
line-height: 16px;
|
||
color: #767676;
|
||
}
|
||
|
||
.image_14 {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
}
|
||
|
||
.text-wrapper {
|
||
padding: 3px 0 3px;
|
||
border-radius: 3px;
|
||
width: 28px;
|
||
height: 16px;
|
||
border: solid 0.5px #e5e7eb;
|
||
|
||
}
|
||
|
||
.font_12 {
|
||
font-size: 14px;
|
||
line-height: 13px;
|
||
font-weight: 500;
|
||
margin-left: 8rpx;
|
||
color: #363636;
|
||
}
|
||
|
||
.image_15 {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
|
||
.image_16 {
|
||
width: 11px;
|
||
height: 11px;
|
||
}
|
||
|
||
.font_15 {
|
||
font-size: 11px;
|
||
line-height: 12px;
|
||
color: #363636;
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.success-text {
|
||
font-size: 24rpx;
|
||
color: #00A56D;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.group_18 {
|
||
.text-wrapper_2 {
|
||
background-color: #ffffff;
|
||
border-radius: 6px;
|
||
width: 45px;
|
||
height: 28px;
|
||
border: solid 0.5px #e0e4e3;
|
||
|
||
}
|
||
|
||
.text-wrapper_3 {
|
||
background-color: #ffffff;
|
||
border-radius: 6px;
|
||
width: 45px;
|
||
height: 28px;
|
||
border: solid 0.5px #e0e4e3;
|
||
|
||
}
|
||
|
||
.font_16 {
|
||
font-size: 13px;
|
||
line-height: 28px;
|
||
font-weight: 500;
|
||
color: #363636;
|
||
}
|
||
|
||
.text-wrapper_1 {
|
||
background-color: #ffffff;
|
||
border-radius: 6px;
|
||
width: 70px;
|
||
height: 28px;
|
||
border: solid 0.5px #e0e4e3;
|
||
|
||
.font_17 {
|
||
font-size: 13px;
|
||
line-height: 12px;
|
||
font-weight: 500;
|
||
line-height: 28px;
|
||
color: #0f6de5;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.font_6 {
|
||
font-size: 11px;
|
||
line-height: 10px;
|
||
color: #767676;
|
||
}
|
||
|
||
.font_5 {
|
||
font-size: 11px;
|
||
line-height: 12px;
|
||
font-weight: 500;
|
||
color: #00a56d;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.group_20 {
|
||
padding: 0 58rpx;
|
||
|
||
.section_6 {
|
||
background-color: #ffffff;
|
||
width: 8px;
|
||
height: 12px;
|
||
}
|
||
}
|
||
|
||
.mt-7 {
|
||
margin-top: 7px;
|
||
}
|
||
|
||
.ml-5 {
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.section_7 {
|
||
padding-bottom: 7.5px;
|
||
background-color: #ffffff;
|
||
border-radius: 10px;
|
||
margin: 0 8px;
|
||
|
||
.group_21 {
|
||
padding: 13px 14px 11px;
|
||
border-bottom: solid 0.5px #ececec;
|
||
|
||
.group_22 {
|
||
.image_17 {
|
||
width: 55px;
|
||
height: 18px;
|
||
}
|
||
|
||
.font_18 {
|
||
font-size: 14px;
|
||
line-height: 10px;
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
|
||
|
||
.text_32 {
|
||
margin-bottom: 2.5px;
|
||
}
|
||
|
||
.group_23 {
|
||
padding-top: 1.5px;
|
||
|
||
.font_9 {
|
||
font-size: 14px;
|
||
line-height: 10px;
|
||
}
|
||
|
||
.text_33 {
|
||
color: #f58219;
|
||
}
|
||
}
|
||
}
|
||
|
||
.image_18 {
|
||
margin-left: 12rpx;
|
||
}
|
||
|
||
.image_13 {
|
||
width: 13px;
|
||
height: 13px;
|
||
}
|
||
|
||
|
||
.text_36 {
|
||
font-size: 12px;
|
||
line-height: 16px;
|
||
}
|
||
|
||
.text-wrapper_4 {
|
||
margin-right: 2px;
|
||
padding: 8px 0 7.5px;
|
||
background-image: linear-gradient(112.2deg, #ff8801 -54.9%, #fe6900 129%);
|
||
width: 59px;
|
||
height: 27px;
|
||
|
||
.font_5 {
|
||
font-size: 11px;
|
||
line-height: 12px;
|
||
font-weight: 700;
|
||
color: #00a56d;
|
||
}
|
||
|
||
.text_35 {
|
||
color: #ffffff;
|
||
font-size: 12px;
|
||
line-height: 11px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.group_24 {
|
||
flex: 1 1 72px;
|
||
|
||
.image_19 {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
|
||
.text_49 {
|
||
line-height: 10.5px;
|
||
}
|
||
|
||
.text_1 {
|
||
line-height: 10px;
|
||
}
|
||
|
||
}
|
||
|
||
.group_26 {
|
||
padding: 4px 0 5px;
|
||
}
|
||
|
||
.font_19 {
|
||
font-size: 11px;
|
||
line-height: 10px;
|
||
color: #696969;
|
||
}
|
||
|
||
}
|
||
|
||
.section_8 {
|
||
padding: 13px 11.5px 12.5px;
|
||
background-color: #ffffff;
|
||
border-radius: 10px;
|
||
margin-left: 8px;
|
||
margin-right: 8px;
|
||
|
||
.font_20 {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
.text_37 {
|
||
font-size: 15px;
|
||
line-height: 14px;
|
||
}
|
||
|
||
.group_25 {
|
||
line-height: 13px;
|
||
height: 13px;
|
||
|
||
.text_39 {
|
||
color: #006eec;
|
||
font-size: 15px;
|
||
line-height: 10.5px;
|
||
}
|
||
|
||
.text_38 {
|
||
color: #006eec;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
line-height: 13px;
|
||
}
|
||
}
|
||
|
||
.group_32 {
|
||
margin-right: 1.5px;
|
||
|
||
.font_21 {
|
||
font-size: 11px;
|
||
line-height: 10px;
|
||
color: #4e4e4e;
|
||
}
|
||
|
||
.image_20 {
|
||
width: 10px;
|
||
height: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.section_9 {
|
||
padding: 11.5px 12px 8px;
|
||
background-color: #ffffff;
|
||
border-radius: 10px;
|
||
margin-left: 8px;
|
||
margin-right: 8px;
|
||
margin-bottom: 24rpx;
|
||
|
||
.font_20 {
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
.font_21 {
|
||
font-size: 11px;
|
||
line-height: 10px;
|
||
color: #4e4e4e;
|
||
}
|
||
|
||
.image_20 {
|
||
width: 10px;
|
||
height: 10px;
|
||
}
|
||
|
||
.text-wrapper_5 {
|
||
padding: 9.5px 0 8.5px;
|
||
background-color: #f5f7f9;
|
||
border-radius: 6px;
|
||
height: 28px;
|
||
|
||
.text_43 {
|
||
margin-left: 9.5px;
|
||
margin-right: 11.5px;
|
||
line-height: 10px;
|
||
}
|
||
}
|
||
|
||
.text-wrapper_6 {
|
||
padding: 9.5px 0 8.5px;
|
||
background-color: #f5f7f9;
|
||
border-radius: 6px;
|
||
width: 66px;
|
||
height: 28px;
|
||
|
||
}
|
||
|
||
.font_22 {
|
||
font-size: 11px;
|
||
line-height: 10px;
|
||
color: #3d3d3d;
|
||
}
|
||
|
||
.text-wrapper_7 {
|
||
padding: 9.5px 0 8px;
|
||
background-color: #f5f7f9;
|
||
border-radius: 6px;
|
||
|
||
.text_45 {
|
||
margin-left: 9.5px;
|
||
margin-right: 9.5px;
|
||
line-height: 10.5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|