<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>
