280 lines
8.1 KiB
Vue
280 lines
8.1 KiB
Vue
<template>
|
||
<view class="box">
|
||
<view class="codefun-flex-row codefun-justify-between codefun-items-center section_5 codefun-mt-8">
|
||
<view class="codefun-flex-row codefun-items-center">
|
||
<image class="codefun-shrink-0 image_11" src="/static/image/other/train-tickets/qunar/plan.png" />
|
||
<text class="font_3 text_31 codefun-ml-4">抢票方案详情</text>
|
||
</view>
|
||
<image class="image_4 image_12" src="/static/image/other/train-tickets/qunar/right.png" />
|
||
</view>
|
||
<view class="codefun-flex-row codefun-items-center section_6 codefun-mt-8">
|
||
<view class="codefun-flex-row codefun-flex-1">
|
||
<image class="codefun-shrink-0 image_13" src="/static/image/other/train-tickets/qunar/child.png" />
|
||
<view class="codefun-flex-col codefun-items-start codefun-flex-1 group_14 codefun-ml-10">
|
||
<text class="font_9 text_32">免费携带儿童申报</text>
|
||
<text class="font_5 text_34 codefun-mt-8">每名成人可免费携带1名6岁以下儿童</text>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_4 ml-15 codefun-justify-center">
|
||
<text class="font_9 text_33">去申报</text>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-col codefun-justify-start section_7 codefun-mt-8">
|
||
<view class="codefun-flex-col group_15">
|
||
<text class="codefun-self-start text_35">专属服务</text>
|
||
<view
|
||
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group_16">
|
||
<view class="codefun-flex-row codefun-items-baseline">
|
||
<text class="codefun-shrink-0 font_3 text_36">全能抢票套餐</text>
|
||
<text class="font_19 codefun-ml-24">20元接送站代金券 x2份</text>
|
||
</view>
|
||
<image class="image_7" src="/static/image/other/train-tickets/qunar/right.png" />
|
||
</view>
|
||
<view v-for="(item, index) in services" :key="index"
|
||
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-end service-item-right">
|
||
<text class="font_19">{{ item }}</text>
|
||
<image class="image_7" src="/static/image/other/train-tickets/qunar/right.png" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-col section_8 codefun-mt-8">
|
||
<text class="codefun-self-start font_12 text_41">你可能遇到的问题</text>
|
||
<view class="codefun-flex-col codefun-self-stretch mt-25">
|
||
<view v-for="(question, index) in questions" :key="index"
|
||
class="codefun-flex-row codefun-justify-between codefun-items-center faq-item"
|
||
:class="{ 'mt-34': index > 0 }">
|
||
<view class="codefun-flex-row codefun-items-center codefun-flex-1">
|
||
<view class="codefun-flex-col codefun-items-center indicator-wrap">
|
||
<view class="codefun-shrink-0 section_9"></view>
|
||
</view>
|
||
<text class="font_3" style="margin-left: 14rpx;">{{ question.text }}</text>
|
||
</view>
|
||
<image class="image_7 faq-arrow" src="/static/image/other/train-tickets/qunar/right.png" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
|
||
const services = ref([
|
||
'腾讯视频vip月卡 x2份',
|
||
'加速包 x2份',
|
||
'24小时专人抢票 x2份'
|
||
]);
|
||
|
||
const questions = ref([
|
||
{ text: '为什么会退票失败' },
|
||
{ text: '退款什么时候到账' },
|
||
{ text: '已在车站或12306办理退票，退款何时到账' },
|
||
{ text: '如何退票' }
|
||
]);
|
||
</script>
|
||
<style>
|
||
@import '/common/global.css';
|
||
|
||
page {
|
||
background-color: #F2F5F9;
|
||
}
|
||
</style>
|
||
<style lang="less" scoped>
|
||
.mt-25 {
|
||
margin-top: 50rpx;
|
||
}
|
||
|
||
.box {
|
||
// padding: 0 16rpx;
|
||
|
||
.section_5 {
|
||
padding: 24rpx 28rpx 23.5rpx;
|
||
overflow: hidden;
|
||
border-radius: 20rpx;
|
||
background-color: #ffffff;
|
||
|
||
.image_11 {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.font_3 {
|
||
font-size: 26rpx;
|
||
line-height: 25.92rpx;
|
||
color: #363636;
|
||
}
|
||
|
||
.text_31 {
|
||
font-size: 28rpx;
|
||
line-height: 26.04rpx;
|
||
}
|
||
|
||
.image_4 {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
|
||
.image_12 {
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
|
||
.section_6 {
|
||
padding: 24rpx 32rpx;
|
||
background-color: #ffffff;
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
border-radius: 20rpx;
|
||
|
||
.image_13 {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
}
|
||
|
||
.group_14 {
|
||
margin-top: 6.4rpx;
|
||
|
||
.text_32 {
|
||
font-size: 28rpx;
|
||
line-height: 26.12rpx;
|
||
}
|
||
|
||
.font_5 {
|
||
font-size: 26rpx;
|
||
line-height: 21.14rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.text_34 {
|
||
color: #999999;
|
||
font-size: 24rpx;
|
||
line-height: 22.48rpx;
|
||
}
|
||
}
|
||
|
||
.text-wrapper_4 {
|
||
background-image: linear-gradient(106.4deg, #ff912b -19.9%, #fc6a11 100.3%);
|
||
border-radius: 32rpx;
|
||
width: 140rpx;
|
||
height: 64rpx;
|
||
|
||
.text_33 {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.font_9 {
|
||
font-size: 26rpx;
|
||
line-height: 25.92rpx;
|
||
font-weight: 700;
|
||
color: #363636;
|
||
}
|
||
}
|
||
|
||
.section_7 {
|
||
padding: 46rpx 0 48rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 20rpx;
|
||
|
||
.group_15 {
|
||
margin-left: 30rpx;
|
||
margin-right: 36rpx;
|
||
overflow: hidden;
|
||
|
||
.text_35 {
|
||
color: #363636;
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
line-height: 27.7rpx;
|
||
}
|
||
|
||
.group_16 {
|
||
margin-top: 34.76rpx;
|
||
|
||
.font_3 {
|
||
font-size: 26rpx;
|
||
line-height: 25.92rpx;
|
||
color: #363636;
|
||
}
|
||
|
||
.text_36 {
|
||
line-height: 24.24rpx;
|
||
}
|
||
}
|
||
|
||
.font_19 {
|
||
font-size: 26rpx;
|
||
line-height: 28rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.image_7 {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
}
|
||
|
||
.service-item-right {
|
||
margin-top: 24rpx;
|
||
width: 450rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.section_8 {
|
||
padding: 36.12rpx 20.54rpx 46.56rpx 28.54rpx;
|
||
background-image: linear-gradient(180deg, #f1fbfb -21.5%, #ffffff 67.4%);
|
||
border-radius: 20rpx;
|
||
border: solid 4rpx #ffffff;
|
||
|
||
.font_12 {
|
||
font-size: 32rpx;
|
||
line-height: 29.6rpx;
|
||
color: #363636;
|
||
}
|
||
|
||
.text_41 {
|
||
font-size: 34rpx;
|
||
font-weight: 700;
|
||
line-height: 31.44rpx;
|
||
}
|
||
|
||
.section_9 {
|
||
background-color: #02c8e7;
|
||
border-radius: 50%;
|
||
width: 8rpx;
|
||
height: 8rpx;
|
||
}
|
||
|
||
.indicator-wrap {
|
||
width: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.font_3 {
|
||
font-size: 26rpx;
|
||
line-height: 25.92rpx;
|
||
color: #363636;
|
||
}
|
||
|
||
.image_7 {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
}
|
||
|
||
.faq-arrow {
|
||
margin-right: 15rpx;
|
||
}
|
||
|
||
.mt-34 {
|
||
margin-top: 34rpx;
|
||
}
|
||
|
||
.group_21 {
|
||
line-height: 24.62rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|