1507 lines
36 KiB
Vue
1507 lines
36 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="codefun-flex-col page" :style="{ '--font-weight-bold': $system == 'iOS' ? 500 : 700 }">
|
||
|
||
<view class="codefun-flex-col group">
|
||
|
||
<view class="codefun-flex-col codefun-justify-start codefun-relative group_1">
|
||
<view class="codefun-flex-col codefun-relative section">
|
||
<NavBar title="订单详情" textColor="#fff" :bgColor="data.navBar.bgColor" :buttonGroup="buttonGroup"
|
||
@button-click="util.clickTitlePopupButton" tipLayerType="ctrip-air-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/air-tickets/ctrip-air/top-logo.png" mode="widthFix">
|
||
</image>
|
||
</view>
|
||
</template>
|
||
<template v-slot:center>
|
||
<view class="title-box">
|
||
<view class="text">订单详情</view>
|
||
<view class="level">
|
||
<image style="width: 100%"
|
||
:src="`/static/image/other/air-tickets/ctrip-air/level-${airTicketsInfo.ctripOrderInfo.level}.png`"
|
||
mode="widthFix">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-slot:right>
|
||
<view class="right-box">
|
||
<view class="item">
|
||
<image class="icon" src="/static/image/other/air-tickets/ctrip-air/rili.png"
|
||
mode="widthFix">
|
||
</image>
|
||
<text>日历</text>
|
||
</view>
|
||
<view class="item">
|
||
<image class="icon" src="/static/image/other/air-tickets/ctrip-air/kefu.png"
|
||
mode="widthFix">
|
||
</image>
|
||
<text>客服</text>
|
||
</view>
|
||
<view class="item" style="margin-right: 16rpx;">
|
||
<image class="icon" src="/static/image/other/air-tickets/ctrip-air/fenxiang.png"
|
||
mode="widthFix">
|
||
</image>
|
||
<text>分享</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</NavBar>
|
||
<image class="bg-image" src="/static/image/other/air-tickets/ctrip-air/bg-image.png"
|
||
mode="widthFix"></image>
|
||
<view class="codefun-flex-col codefun-self-stretch group_2">
|
||
|
||
<view class="codefun-flex-row codefun-items-center group_4 codefun-mt-20">
|
||
<text class="text_5">已出票</text>
|
||
<uni-icons type="forward" size="18" color="#fff"></uni-icons>
|
||
</view>
|
||
<view class="codefun-flex-row codefun-justify-center codefun-relative group_30 codefun-mt-20">
|
||
<text class="font_3 text_6 text_7 pos_12">查看票号/航司预订号</text>
|
||
<text class="font_3 text_6 text_8">获取行程确认单</text>
|
||
</view>
|
||
<view class="codefun-flex-col group_5 codefun-mt-20">
|
||
<view class="codefun-flex-col section_3">
|
||
<view
|
||
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch">
|
||
<view class="group_6">
|
||
<text class="font_4 text_10">您有一份</text>
|
||
<text class="font text_9" style="margin: 0 4rpx;">机票免单</text>
|
||
<text class="font_4 text_10">待抽取</text>
|
||
</view>
|
||
<view
|
||
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
|
||
<text class="font_3 text_11">试试手气</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-col section_4 codefun-mt-8">
|
||
<view class="codefun-flex-row codefun-items-center codefun-self-stretch">
|
||
<text class="font_4 text_12">出行前必读</text>
|
||
<view
|
||
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2 codefun-ml-4">
|
||
<text class="text_13">{{ airTicketsInfo.ctripOrderInfo.tips.length }}条通知</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="display: flex;justify-content: space-between;">
|
||
<view
|
||
class="codefun-flex-row codefun-justify-center equal-division group_7 codefun-flex-1">
|
||
<view class="codefun-flex-row codefun-items-center mb-6"
|
||
:class="index == airTicketsInfo.ctripOrderInfo.tips.length - 1 ? '' : 'mr-14'"
|
||
v-for="(item, index) in airTicketsInfo.ctripOrderInfo.tips" :key="item.id">
|
||
<view class="codefun-shrink-0 section_5"
|
||
style="flex-shrink: 0;width: 8rpx;height: 8rpx;">
|
||
</view>
|
||
<text class="font_5 text_17 codefun-ml-4">{{ item.content }}</text>
|
||
</view>
|
||
</view>
|
||
<uni-icons class="codefun-shrink-0 ml-9" type="forward" size="18"
|
||
color="#1A1A1A"></uni-icons>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-col section_7">
|
||
<view class="codefun-flex-col group_8">
|
||
<view class="codefun-flex-row codefun-justify-between codefun-items-center">
|
||
<view class="codefun-flex-row codefun-items-center">
|
||
<text class="font_6 text_56">总计</text>
|
||
<text class="font_7 text_21 codefun-ml-8" @click="goEdit">¥{{ airTicketsInfo.orderInfo.price
|
||
}}</text>
|
||
<uni-icons class="codefun-shrink-0 codefun-ml-4" type="help" size="18"
|
||
color="#006FEF"></uni-icons>
|
||
</view>
|
||
<view class="codefun-flex-row codefun-items-center group_31">
|
||
<text class="font_8 text_22">行李额和禁带物品</text>
|
||
<uni-icons class="codefun-ml-4" type="forward" size="14"
|
||
color="rgb(0, 111, 239)"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-row codefun-items-center mt-11">
|
||
<view class="codefun-flex-row codefun-items-center codefun-self-stretch">
|
||
<text class="codefun-shrink-0 text_23">完成订单预计得</text>
|
||
<text class="codefun-shrink-0 text_23">{{ airTicketsInfo.ctripOrderInfo.points }}</text>
|
||
<text class="text_23">积分</text>
|
||
</view>
|
||
<uni-icons class="codefun-ml-4" type="help" size="14" color="#1A1A1A"></uni-icons>
|
||
</view>
|
||
<view class="codefun-flex-row codefun-items-center mt-11">
|
||
<text class="font_8 text_25">订单号：{{ airTicketsInfo.orderInfo.orderNo }}</text>
|
||
<image class="image_11 image_23" src="/static/image/other/air-tickets/ctrip-air/copy.png" />
|
||
<text class="font_8 text_26">复制</text>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-col group_9">
|
||
<view class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch">
|
||
<view class="codefun-flex-row" @click="goEdit">
|
||
<image class="codefun-shrink-0 image_13"
|
||
src="/static/image/other/air-tickets/ctrip-air/airplant.png" />
|
||
<text class="codefun-self-center font_6 text_64 codefun-ml-6">{{
|
||
airTicketsInfo.flightInfo.startCity
|
||
}}</text>
|
||
<image class="codefun-shrink-0 codefun-self-center image_14 codefun-ml-6"
|
||
src="/static/image/other/air-tickets/ctrip-air/right.png" />
|
||
<text class="codefun-self-center font_6 text_28 codefun-ml-6">{{
|
||
airTicketsInfo.flightInfo.endCity
|
||
}}</text>
|
||
</view>
|
||
<view class="codefun-flex-row codefun-items-center">
|
||
<text class="font_5 text_29">收起</text>
|
||
<image class="codefun-shrink-0 image_11 codefun-ml-4"
|
||
src="/static/image/other/air-tickets/ctrip-air/arrow-up.png" />
|
||
</view>
|
||
</view>
|
||
<text class="codefun-self-start font_8 text_30">{{ flightInfo.year }} 年 {{ flightInfo.date }} {{
|
||
flightInfo.week
|
||
}}</text>
|
||
<view class="codefun-flex-row codefun-items-center codefun-self-stretch group_10" @click="goEdit">
|
||
<image class="codefun-shrink-0 image_15"
|
||
src="/static/image/other/air-tickets/ctrip-air/image1.png" />
|
||
<view class="codefun-flex-col codefun-flex-1 codefun-ml-12">
|
||
<view class="codefun-flex-row codefun-items-center codefun-self-stretch">
|
||
<text class="codefun-shrink-0 font_7 text_31">{{ airTicketsInfo.flightInfo.startTime
|
||
}}</text>
|
||
<view class="codefun-flex-row codefun-items-center codefun-shrink-0 group_11 ml-20">
|
||
<text class="font_10">{{ airTicketsInfo.flightInfo.startAirport }}</text>
|
||
<uni-icons class="codefun-shrink-0 codefun-ml-4" type="right" size="16"
|
||
color="#1A1A1A"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch codefun-mt-14">
|
||
<text class="font_11">{{ airTicketsInfo.flightInfo.duration }}</text>
|
||
<view class="codefun-flex-row codefun-items-center codefun-justify-between ml-20"
|
||
style="flex: 1;">
|
||
<view class="codefun-flex-col codefun-flex-1">
|
||
<view class="codefun-flex-row codefun-items-center group_29"
|
||
style="flex-wrap: wrap; flex: 1; width: 100%;">
|
||
<image class="codefun-shrink-0 image_8"
|
||
:src="`/static/image/other/air-tickets/air-line/${airlineInfo.icon}.png`" />
|
||
<view class="font_11 codefun-flex-row codefun-items-center">{{
|
||
airlineInfo.name }}
|
||
{{ airTicketsInfo.flightInfo.flightNumber }}
|
||
<view class="codefun-shrink-0 section_8"></view>
|
||
</view>
|
||
<view class="font_11 codefun-flex-row codefun-items-center">{{
|
||
airTicketsInfo.flightInfo.seatCategory }}<view
|
||
class="codefun-shrink-0 section_8">
|
||
</view>
|
||
</view>
|
||
<view class="font_11 codefun-flex-row codefun-items-center">{{
|
||
airTicketsInfo.flightInfo.aircraftType }}<view
|
||
class="codefun-shrink-0 section_8">
|
||
</view>
|
||
</view>
|
||
<view class="font_11 codefun-flex-row codefun-items-center"
|
||
style="color: #EC6103;">{{
|
||
airTicketsInfo.flightInfo.meal
|
||
}}<view class="codefun-shrink-0 section_8"></view>
|
||
</view>
|
||
<view class="font_11 codefun-flex-row codefun-items-center"
|
||
style="color: #EC6103;">{{
|
||
airTicketsInfo.flightInfo.luggageCheckInQuota
|
||
}}</view>
|
||
</view>
|
||
</view>
|
||
<uni-icons class="codefun-shrink-0 codefun-ml-12" type="right" size="12"
|
||
color="#1A1A1A"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-row codefun-items-center codefun-self-start codefun-mt-14">
|
||
<text class="codefun-shrink-0 font_7 text_38">{{ airTicketsInfo.flightInfo.endTime
|
||
}}</text>
|
||
<text class="font_10 text_39 ml-20">{{ airTicketsInfo.flightInfo.endAirport }}</text>
|
||
<uni-icons class="codefun-shrink-0 codefun-ml-4" type="right" size="16"
|
||
color="#1A1A1A"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-stretch text-wrapper_3">
|
||
<text class="font_14 text_40">退改签和产品说明</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-col section_9">
|
||
<text class="codefun-self-start font_6 text_41">已购 / 赠送服务</text>
|
||
<view class="codefun-self-stretch grid mt-13">
|
||
<view class="codefun-flex-row codefun-justify-between codefun-items-center grid-item_1">
|
||
<view style="flex: 1;" class="codefun-flex-row codefun-items-center">
|
||
<text class="font_8 text_42">优惠券</text>
|
||
<image class="codefun-shrink-0 image_18 codefun-ml-2"
|
||
src="/static/image/other/air-tickets/ctrip-air/give.png" />
|
||
</view>
|
||
<uni-icons class="codefun-shrink-0 codefun-ml-4" type="right" size="13"
|
||
color="#C7C8CC"></uni-icons>
|
||
</view>
|
||
<view class="codefun-flex-row codefun-justify-between codefun-items-center grid-item_2">
|
||
<text style="flex: 1;" class="font_8 text_43">旅游专享券</text>
|
||
<uni-icons class="codefun-shrink-0 codefun-ml-4" type="right" size="13"
|
||
color="#C7C8CC"></uni-icons>
|
||
</view>
|
||
<view class="codefun-flex-row codefun-justify-between codefun-items-center grid-item">
|
||
<view style="flex: 1;" class="codefun-flex-row codefun-items-center">
|
||
<text class="font_8">机场美食券</text>
|
||
<image class="codefun-shrink-0 image_18 codefun-ml-2"
|
||
src="/static/image/other/air-tickets/ctrip-air/give.png" />
|
||
</view>
|
||
<uni-icons class="codefun-shrink-0 codefun-ml-4" type="right" size="13"
|
||
color="#C7C8CC"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-col codefun-justify-start codefun-relative group_14">
|
||
<view class="codefun-flex-col section_10">
|
||
<text class="codefun-self-start font_6 text_46">出行信息</text>
|
||
<view class="codefun-flex-col codefun-self-stretch group_15 codefun-mt-26">
|
||
<view class="codefun-flex-row codefun-self-stretch group_17">
|
||
<text class="codefun-shrink-0 codefun-self-start font_13 text_47">出行人</text>
|
||
<view class="codefun-flex-col codefun-flex-1 codefun-relative group_16 ml-41">
|
||
<text class="codefun-self-start text_23" @click="goEdit"><text
|
||
style="margin-right: 6px;" v-for="value in airTicketsInfo.passengersInfo">{{
|
||
value.name }}</text></text>
|
||
<view class="codefun-flex-row codefun-items-center codefun-self-stretch codefun-mt-8">
|
||
<text class="font_14 text_49">查看证件、航司预订号、修改姓名/证件</text>
|
||
<uni-icons class="codefun-shrink-0 codefun-ml-4" type="down" size="12"
|
||
color="#006EC4"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="codefun-self-stretch divider view_5"></view>
|
||
<view
|
||
class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-start group_18">
|
||
<text class="font_13 text_50">联系手机</text>
|
||
<text class="text_23" @click="goEdit">+86 {{
|
||
airTicketsInfo.ticketNumber.replace(/(\d{3})\d{4}(\d{4})/,
|
||
'$1****$2')
|
||
}}</text>
|
||
</view>
|
||
<view class="codefun-self-stretch divider"></view>
|
||
<view class="codefun-flex-row codefun-justify-between equal-division_2 group_19">
|
||
<view class="codefun-flex-row codefun-items-center group_20 equal-division-item">
|
||
<image class="codefun-shrink-0 image_20"
|
||
src="/static/image/other/air-tickets/ctrip-air/xinfeng.png" />
|
||
<text class="font_14 text_51 codefun-ml-6">获取行程确认单</text>
|
||
</view>
|
||
<view class="group_20 section_11"></view>
|
||
<view class="codefun-flex-row codefun-items-center group_20 equal-division-item">
|
||
<image class="codefun-shrink-0 image_20"
|
||
src="/static/image/other/air-tickets/ctrip-air/share.png" />
|
||
<text class="font_14 text_60 codefun-ml-4">分享</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<image class="image_19 pos_14" src="/static/image/other/air-tickets/ctrip-air/connect-icon.png" />
|
||
<image class="image_19 pos_15" src="/static/image/other/air-tickets/ctrip-air/connect-icon.png" />
|
||
</view>
|
||
</view>
|
||
<view class="codefun-flex-col codefun-mt-8">
|
||
<view class="codefun-flex-col section_12">
|
||
<text class="codefun-self-start font_6 text_52">出行服务</text>
|
||
<view class="codefun-self-stretch grid_2 mt-19">
|
||
<view class="codefun-flex-col codefun-items-center grid-item_4">
|
||
<image class="image_21" src="/static/image/other/air-tickets/ctrip-air/hangbanzhushou.png" />
|
||
<text class="font_8 text_63 codefun-mt-8">航班助手</text>
|
||
</view>
|
||
<view class="codefun-flex-col codefun-items-center grid-item_5">
|
||
<image class="image_21" src="/static/image/other/air-tickets/ctrip-air/feixingzuji.png" />
|
||
<text class="font_8 text_61 codefun-mt-8">飞行足迹</text>
|
||
</view>
|
||
<view class="codefun-flex-col codefun-items-center grid-item_6">
|
||
<image class="image_21" src="/static/image/other/air-tickets/ctrip-air/xingchengguihua.png" />
|
||
<text class="font_8 text_62 codefun-mt-8">行程规划服务</text>
|
||
</view>
|
||
<view class="codefun-flex-col codefun-items-center grid-item_7">
|
||
<image class="image_21" src="/static/image/other/air-tickets/ctrip-air/fuli.png" />
|
||
<text class="font_8 text_1 codefun-mt-8">企业认证福利</text>
|
||
</view>
|
||
<view class="codefun-flex-col codefun-items-center codefun-relative grid-item_8">
|
||
<image class="image_21" src="/static/image/other/air-tickets/ctrip-air/family.png" />
|
||
<text class="font_8 text_53 codefun-mt-8">我的家庭</text>
|
||
</view>
|
||
<view class="codefun-flex-col codefun-items-center codefun-relative grid-item_9">
|
||
<image class="image_21" src="/static/image/other/air-tickets/ctrip-air/gongzhonghao.png" />
|
||
<text class="font_8 text_59 codefun-mt-8">关注公众号</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottom-banner">
|
||
<view class="codefun-flex-row codefun-justify-center section_13">
|
||
<text class="font_8 text_54">更多服务</text>
|
||
<image class="image_11 codefun-ml-6" src="/static/image/other/air-tickets/ctrip-air/more.png" />
|
||
</view>
|
||
<view class="codefun-flex-col codefun-justify-start section_14">
|
||
<view class="codefun-flex-row equal-division_3">
|
||
<view
|
||
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5 text-wrapper_1">
|
||
<text class="font text_55">我要退订</text>
|
||
</view>
|
||
<view
|
||
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5 text-wrapper_6 codefun-ml-8">
|
||
<text class="font text_57">我要改签</text>
|
||
</view>
|
||
<view
|
||
class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5 text-wrapper_7 codefun-ml-8">
|
||
<text class="font text_58">发票/行程单</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</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';
|
||
import defualtData from '@/pages/other/air-tickets/commom/defualt.json';
|
||
import airlineJson from '@/static/json/air-line.json';
|
||
|
||
const buttonGroup = [{
|
||
name: "编辑机票信息",
|
||
click: () => {
|
||
goEdit()
|
||
}
|
||
}]
|
||
|
||
function goEdit() {
|
||
util.goPage(`/pages/other/air-tickets/edit/edit?ticketsApp=ctrip&storageKey=${data.STORAGE_KEY}`)
|
||
}
|
||
|
||
const data = reactive({
|
||
navBar: {
|
||
bgColor: 'transparent'
|
||
},
|
||
STORAGE_KEY: 'ctripAirTicketsInfo',
|
||
airTicketsInfo: JSON.parse(JSON.stringify(defualtData)),
|
||
})
|
||
let { airTicketsInfo } = toRefs(data)
|
||
|
||
//航空公司信息
|
||
const airlineInfo = computed(() => {
|
||
const airline = airlineJson.airLine.find(item => item.code === airTicketsInfo.value.flightInfo.airlineCode);
|
||
console.log('airline', airline);
|
||
return airline || {};
|
||
});
|
||
|
||
/**
|
||
* 飞机日期信息
|
||
*/
|
||
const flightInfo = computed(() => {
|
||
const dateStr = airTicketsInfo.value.flightInfo.date;
|
||
if (!dateStr) return { date: '', week: '' };
|
||
|
||
// 兼容 iOS：将 YYYY-MM-DD 转换为 YYYY/MM/DD
|
||
const date = new Date(dateStr.replace(/-/g, '/'));
|
||
const month = date.getMonth() + 1;
|
||
const day = date.getDate();
|
||
const weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
|
||
const week = weeks[date.getDay()];
|
||
|
||
return {
|
||
year: date.getFullYear(),
|
||
date: `${month}月${day}日`,
|
||
week
|
||
}
|
||
});
|
||
|
||
onShow(() => {
|
||
const stored = uni.getStorageSync(data.STORAGE_KEY) || "";
|
||
if (stored) {
|
||
Object.assign(data.airTicketsInfo, stored);
|
||
}
|
||
// #ifdef APP-PLUS
|
||
util.setAndroidSystemBarColor('#ffffff')
|
||
setTimeout(() => {
|
||
plus.navigator.setStatusBarStyle("light");
|
||
}, 500)
|
||
// #endif
|
||
})
|
||
|
||
onPageScroll((e) => {
|
||
console.log(e.scrollTop);
|
||
if (e.scrollTop > 40) {
|
||
data.navBar.bgColor = '#0470f7'
|
||
} else {
|
||
data.navBar.bgColor = 'transparent'
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style>
|
||
@import '/common/global.css';
|
||
</style>
|
||
|
||
<style lang="less" scoped>
|
||
.mr-14 {
|
||
margin-right: 28rpx;
|
||
}
|
||
|
||
.ml-20 {
|
||
margin-left: 40rpx;
|
||
}
|
||
|
||
.mb-6 {
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.ml-3 {
|
||
margin-left: 6rpx;
|
||
}
|
||
|
||
.mt-3 {
|
||
margin-top: 6rpx;
|
||
}
|
||
|
||
.mt-11 {
|
||
margin-top: 22rpx;
|
||
}
|
||
|
||
.ml-23 {
|
||
margin-left: 46rpx;
|
||
}
|
||
|
||
.ml-9 {
|
||
margin-left: 18rpx;
|
||
}
|
||
|
||
.mt-7 {
|
||
margin-top: 14rpx;
|
||
}
|
||
|
||
.mt-13 {
|
||
margin-top: 26rpx;
|
||
}
|
||
|
||
.ml-1 {
|
||
margin-left: 2rpx;
|
||
}
|
||
|
||
.ml-41 {
|
||
margin-left: 82rpx;
|
||
}
|
||
|
||
.mt-19 {
|
||
margin-top: 38rpx;
|
||
}
|
||
|
||
.page {
|
||
background-color: #f1f2f6;
|
||
width: 100%;
|
||
overflow-x: hidden;
|
||
min-height: 100vh;
|
||
|
||
.group {
|
||
.group_1 {
|
||
padding-bottom: 2rpx;
|
||
|
||
.section {
|
||
position: relative;
|
||
padding: 16rpx 16rpx 48rpx;
|
||
background-image: linear-gradient(140.9deg, #0081f7 7.3%, #0273fa 101.8%);
|
||
|
||
.status-bar {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding-top: 16rpx;
|
||
padding-bottom: 32rpx;
|
||
}
|
||
|
||
::v-deep .uni-navbar__header-btns-right {
|
||
overflow: visible !important;
|
||
// width: auto !important;
|
||
padding-right: 0 !important;
|
||
}
|
||
|
||
::v-deep .uni-navbar__header-btns {
|
||
overflow: visible !important;
|
||
}
|
||
|
||
.title-box {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.level {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 80rpx;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
|
||
.right-box {
|
||
display: flex;
|
||
align-items: center;
|
||
overflow: visible;
|
||
|
||
.item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: visible;
|
||
margin-left: 28rpx;
|
||
|
||
.icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
text {
|
||
color: #fff;
|
||
font-size: 20rpx;
|
||
white-space: nowrap; // 防止换行
|
||
}
|
||
}
|
||
}
|
||
|
||
.bg-image {
|
||
top: 0;
|
||
right: 0;
|
||
position: absolute;
|
||
width: 300rpx;
|
||
}
|
||
|
||
.image {
|
||
width: 160rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.group_2 {
|
||
|
||
.group_28 {
|
||
padding: 2rpx 0 6rpx;
|
||
|
||
.image_6 {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
}
|
||
|
||
.pos_8 {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.group_3 {
|
||
padding: 2rpx 0;
|
||
overflow: hidden;
|
||
width: 206rpx;
|
||
|
||
.text {
|
||
font-size: 30rpx;
|
||
line-height: 27.66rpx;
|
||
}
|
||
|
||
.image_7 {
|
||
width: 80rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.group_4 {
|
||
padding: 0 10.1rpx;
|
||
margin-top: 8rpx;
|
||
|
||
.text_5 {
|
||
color: #ffffff;
|
||
font-size: 44rpx;
|
||
font-weight: var(--font-weight-bold);
|
||
line-height: 40.48rpx;
|
||
letter-spacing: 2.2rpx;
|
||
}
|
||
}
|
||
|
||
.group_30 {
|
||
padding: 0 8.86rpx;
|
||
|
||
.text_6 {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.text_7 {
|
||
line-height: 22.52rpx;
|
||
}
|
||
|
||
.pos_12 {
|
||
position: absolute;
|
||
left: 8.86rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.text_8 {
|
||
line-height: 22.22rpx;
|
||
}
|
||
}
|
||
|
||
.group_5 {
|
||
padding: 0 8rpx;
|
||
|
||
.section_3 {
|
||
padding: 20rpx 24rpx 20rpx 29.36rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
|
||
.group_6 {
|
||
line-height: 26.06rpx;
|
||
height: 26.06rpx;
|
||
|
||
.text_9 {
|
||
color: #ec6103;
|
||
font-weight: 800;
|
||
line-height: 25.7rpx;
|
||
}
|
||
|
||
.text_10 {
|
||
line-height: 26.06rpx;
|
||
}
|
||
}
|
||
|
||
.text-wrapper {
|
||
padding: 18.3rpx 0 15.5rpx;
|
||
border-radius: 8rpx;
|
||
width: 124rpx;
|
||
height: 60rpx;
|
||
border: solid 2rpx #1c84d2;
|
||
|
||
.text_11 {
|
||
color: #006ae0;
|
||
line-height: 22.2rpx;
|
||
}
|
||
}
|
||
|
||
.image_9 {
|
||
width: 36rpx;
|
||
height: 8rpx;
|
||
}
|
||
}
|
||
|
||
.section_4 {
|
||
padding: 22rpx 24rpx 12rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx;
|
||
|
||
.text_12 {
|
||
line-height: 26.04rpx;
|
||
}
|
||
|
||
.text-wrapper_2 {
|
||
padding: 7.88rpx 0 7.74rpx;
|
||
border-radius: 4rpx;
|
||
width: 96rpx;
|
||
height: 36rpx;
|
||
border: solid 1rpx #dac7ae;
|
||
|
||
.text_13 {
|
||
color: #f2740d;
|
||
font-size: 20rpx;
|
||
font-weight: var(--font-weight-bold);
|
||
line-height: 18.38rpx;
|
||
}
|
||
}
|
||
|
||
.group_27 {
|
||
margin-top: 4rpx;
|
||
|
||
.text_14 {
|
||
margin-left: 6.74rpx;
|
||
font-size: 22rpx;
|
||
line-height: 20.46rpx;
|
||
}
|
||
|
||
.view {
|
||
margin-left: 27.26rpx;
|
||
}
|
||
|
||
.text_15 {
|
||
margin-left: 7.26rpx;
|
||
font-size: 22rpx;
|
||
line-height: 20.44rpx;
|
||
}
|
||
|
||
.view_2 {
|
||
margin-left: 28.74rpx;
|
||
}
|
||
|
||
.text_16 {
|
||
margin-left: 7.8rpx;
|
||
font-size: 22rpx;
|
||
line-height: 20.38rpx;
|
||
}
|
||
|
||
.image_1 {
|
||
margin-bottom: 2.74rpx;
|
||
}
|
||
}
|
||
|
||
.equal-division {
|
||
align-self: flex-start;
|
||
margin-top: 15.46rpx;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
|
||
.text_17 {
|
||
font-size: 22rpx;
|
||
line-height: 20.54rpx;
|
||
}
|
||
|
||
.text_18 {
|
||
font-size: 22rpx;
|
||
line-height: 20.64rpx;
|
||
}
|
||
|
||
.text_19 {
|
||
font-size: 22rpx;
|
||
line-height: 20.44rpx;
|
||
}
|
||
}
|
||
|
||
|
||
.section_5 {
|
||
background-color: #ff5c03;
|
||
border-radius: 50%;
|
||
width: 8rpx;
|
||
height: 8rpx;
|
||
}
|
||
}
|
||
|
||
.font_4 {
|
||
font-size: 28rpx;
|
||
line-height: 24.72rpx;
|
||
font-weight: var(--font-weight-bold);
|
||
color: #1a1a1a;
|
||
}
|
||
}
|
||
|
||
.font_3 {
|
||
font-size: 24rpx;
|
||
line-height: 22.24rpx;
|
||
font-weight: var(--font-weight-bold);
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.section_2 {
|
||
padding: 34.66rpx 29.34rpx 293.62rpx;
|
||
background-image: url('https://ide.code.fun/api/image?token=698b15494683ce0011da8453&name=0a4f2a62b9f170fe44e91248eec86371.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
width: 304rpx;
|
||
height: 458rpx;
|
||
|
||
.image_2 {
|
||
width: 34rpx;
|
||
height: 22rpx;
|
||
}
|
||
|
||
.pos_2 {
|
||
position: absolute;
|
||
right: 128rpx;
|
||
top: 35.34rpx;
|
||
}
|
||
|
||
.image_3 {
|
||
width: 30rpx;
|
||
height: 22rpx;
|
||
}
|
||
|
||
.pos_3 {
|
||
position: absolute;
|
||
right: 88rpx;
|
||
top: 34.66rpx;
|
||
}
|
||
|
||
.image_4 {
|
||
width: 48rpx;
|
||
height: 22.66rpx;
|
||
}
|
||
|
||
.pos_4 {
|
||
position: absolute;
|
||
right: 29.34rpx;
|
||
top: 34.66rpx;
|
||
}
|
||
|
||
.image_5 {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.pos_5 {
|
||
position: absolute;
|
||
left: 96rpx;
|
||
top: 102rpx;
|
||
}
|
||
|
||
.pos_6 {
|
||
position: absolute;
|
||
right: 100rpx;
|
||
top: 102rpx;
|
||
}
|
||
|
||
.pos_7 {
|
||
position: absolute;
|
||
right: 32rpx;
|
||
top: 102rpx;
|
||
}
|
||
|
||
.font_2 {
|
||
font-size: 20rpx;
|
||
line-height: 18.6rpx;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.text_2 {
|
||
line-height: 17.36rpx;
|
||
}
|
||
|
||
.pos_9 {
|
||
position: absolute;
|
||
left: 97.52rpx;
|
||
top: 146.9rpx;
|
||
}
|
||
|
||
.pos_10 {
|
||
position: absolute;
|
||
right: 99.3rpx;
|
||
top: 145.74rpx;
|
||
}
|
||
|
||
.pos_11 {
|
||
position: absolute;
|
||
right: 33.12rpx;
|
||
top: 145.78rpx;
|
||
}
|
||
}
|
||
|
||
.pos {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
}
|
||
}
|
||
|
||
.section_6 {
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx 16rpx 0rpx 0rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
.pos_13 {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 636rpx;
|
||
}
|
||
}
|
||
|
||
.section_7 {
|
||
position: relative;
|
||
background-color: #ffffff;
|
||
border-radius: 16rpx 16rpx 0 0;
|
||
margin-top: -16rpx;
|
||
|
||
.group_8 {
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
padding: 40rpx 21.06rpx 30rpx;
|
||
border-bottom: solid 1rpx #f5f5f5;
|
||
|
||
.text_56 {
|
||
line-height: 33.08rpx;
|
||
}
|
||
|
||
.text_21 {
|
||
color: #006fef;
|
||
line-height: 26.3rpx;
|
||
}
|
||
|
||
.group_31 {
|
||
margin-right: 2.94rpx;
|
||
|
||
.text_22 {
|
||
color: #0177d4;
|
||
line-height: 22.2rpx;
|
||
}
|
||
}
|
||
|
||
.text_25 {
|
||
font-size: 22rpx;
|
||
line-height: 20.12rpx;
|
||
}
|
||
|
||
.image_23 {
|
||
margin-left: 18.9rpx;
|
||
}
|
||
|
||
.text_26 {
|
||
margin-left: 2.72rpx;
|
||
color: #888888;
|
||
font-size: 22rpx;
|
||
line-height: 20.24rpx;
|
||
}
|
||
}
|
||
|
||
.group_9 {
|
||
padding: 33rpx 24rpx 32rpx;
|
||
|
||
.image_13 {
|
||
width: 36rpx;
|
||
height: 38rpx;
|
||
}
|
||
|
||
.text_64 {
|
||
line-height: 33.38rpx;
|
||
}
|
||
|
||
.image_14 {
|
||
width: 28rpx;
|
||
height: 12rpx;
|
||
}
|
||
|
||
.text_28 {
|
||
line-height: 33.16rpx;
|
||
}
|
||
|
||
.text_29 {
|
||
line-height: 22.28rpx;
|
||
}
|
||
|
||
.text_30 {
|
||
margin-left: 47rpx;
|
||
margin-top: 20rpx;
|
||
line-height: 36rpx;
|
||
}
|
||
|
||
.group_10 {
|
||
margin-top: 30.62rpx;
|
||
padding-left: 8rpx;
|
||
white-space: nowrap;
|
||
|
||
.image_15 {
|
||
width: 16rpx;
|
||
height: 178rpx;
|
||
}
|
||
|
||
.text_31 {
|
||
line-height: 26.3rpx;
|
||
}
|
||
|
||
.group_11 {
|
||
margin-right: 116rpx;
|
||
width: 397rpx;
|
||
}
|
||
|
||
.font_11 {
|
||
font-size: 24rpx;
|
||
line-height: 36rpx;
|
||
color: #636363;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.group_29 {
|
||
padding-left: 2.18rpx;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.text_35 {
|
||
width: 138rpx;
|
||
}
|
||
|
||
.section_8 {
|
||
background-color: #c7c5c6;
|
||
width: 2rpx;
|
||
height: 20rpx;
|
||
margin: 0 12rpx;
|
||
}
|
||
|
||
.view_1 {
|
||
margin-left: 16.18rpx;
|
||
}
|
||
|
||
.font_12 {
|
||
font-size: 24rpx;
|
||
line-height: 22.24rpx;
|
||
color: #ec6103;
|
||
}
|
||
|
||
.text_36 {
|
||
margin-left: 10.94rpx;
|
||
}
|
||
|
||
.view_4 {
|
||
margin-left: 21.06rpx;
|
||
}
|
||
|
||
.group_12 {
|
||
margin-left: 9.58rpx;
|
||
|
||
.group_13 {
|
||
padding: 0 20rpx;
|
||
|
||
.text_33 {
|
||
line-height: 22.36rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.image_16 {
|
||
margin-left: 25.06rpx;
|
||
}
|
||
|
||
.text_38 {
|
||
line-height: 26.06rpx;
|
||
}
|
||
|
||
.font_10 {
|
||
font-size: 32rpx;
|
||
line-height: 36rpx;
|
||
font-weight: var(--font-weight-bold);
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
.text_39 {
|
||
margin-left: 40rpx;
|
||
}
|
||
|
||
.image_17 {
|
||
margin-left: 33.24rpx;
|
||
}
|
||
}
|
||
|
||
.text-wrapper_3 {
|
||
margin-top: 34.92rpx;
|
||
padding: 24.18rpx 0 17.46rpx;
|
||
border-radius: 8rpx;
|
||
border: solid 2rpx #0177d4;
|
||
|
||
.text_40 {
|
||
font-weight: var(--font-weight-bold);
|
||
line-height: 22.36rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.font_7 {
|
||
font-size: 36rpx;
|
||
line-height: 24.72rpx;
|
||
font-weight: var(--font-weight-bold);
|
||
color: #1a1a1a;
|
||
}
|
||
}
|
||
|
||
.image_8 {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
|
||
.font_5 {
|
||
font-size: 24rpx;
|
||
line-height: 22.24rpx;
|
||
color: #636363;
|
||
}
|
||
|
||
.section_9 {
|
||
margin-top: 16rpx;
|
||
padding: 31.88rpx 26rpx 28rpx 28rpx;
|
||
background-color: #ffffff;
|
||
|
||
.text_41 {
|
||
margin-left: 3rpx;
|
||
line-height: 37rpx;
|
||
}
|
||
|
||
.grid {
|
||
height: 152rpx;
|
||
display: grid;
|
||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
row-gap: 18rpx;
|
||
column-gap: 18rpx;
|
||
|
||
.grid-item_1 {
|
||
padding: 20rpx 18.88rpx 18rpx;
|
||
background-color: #f9fafe;
|
||
border-radius: 4rpx;
|
||
|
||
.text_42 {
|
||
line-height: 22.16rpx;
|
||
}
|
||
|
||
.image_18 {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
}
|
||
|
||
.image_18 {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.grid-item_2 {
|
||
padding: 24rpx 18.72rpx 21.2rpx;
|
||
background-color: #f9fafe;
|
||
border-radius: 4rpx;
|
||
|
||
.text_43 {
|
||
line-height: 22.3rpx;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.grid-item {
|
||
padding: 20rpx 18.68rpx 18rpx;
|
||
background-color: #f9fafe;
|
||
border-radius: 4rpx;
|
||
|
||
.text-wrapper_4 {
|
||
padding: 2.04rpx 0 5.8rpx;
|
||
border-radius: 4rpx;
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
border: solid 1rpx #5bcfb0;
|
||
|
||
.text_45 {
|
||
color: #00ba83;
|
||
font-size: 22rpx;
|
||
line-height: 20.16rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.image_10 {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
}
|
||
|
||
.group_14 {
|
||
margin-top: -14rpx;
|
||
padding-top: 30rpx;
|
||
|
||
.section_10 {
|
||
padding: 37.64rpx 24rpx 26rpx;
|
||
background-color: #ffffff;
|
||
|
||
.text_46 {
|
||
margin-left: 7.74rpx;
|
||
line-height: 33.58rpx;
|
||
}
|
||
|
||
.group_15 {
|
||
padding: 9.88rpx 0 8rpx;
|
||
|
||
.group_17 {
|
||
padding: 0 6.92rpx 18.14rpx 6.92rpx;
|
||
|
||
.text_47 {
|
||
margin-top: -8.06rpx;
|
||
line-height: 25.88rpx;
|
||
}
|
||
|
||
.group_16 {
|
||
margin-top: -9.88rpx;
|
||
|
||
.text_49 {
|
||
line-height: 25rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.divider {
|
||
background-color: #f5f5f5;
|
||
height: 1rpx;
|
||
}
|
||
|
||
.view_5 {
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.group_18 {
|
||
margin-left: 5.06rpx;
|
||
padding: 26.1rpx 0 22.74rpx;
|
||
width: 349.86rpx;
|
||
|
||
.text_50 {
|
||
line-height: 25.98rpx;
|
||
}
|
||
}
|
||
|
||
.font_13 {
|
||
font-size: 28rpx;
|
||
line-height: 24.72rpx;
|
||
color: #767676;
|
||
}
|
||
|
||
.equal-division_2 {
|
||
align-self: center;
|
||
margin-top: 8rpx;
|
||
|
||
.group_20 {
|
||
margin-bottom: -8rpx;
|
||
|
||
.image_20 {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
|
||
.text_51 {
|
||
line-height: 22.22rpx;
|
||
}
|
||
|
||
.text_60 {
|
||
line-height: 22.32rpx;
|
||
}
|
||
}
|
||
|
||
.equal-division-item {
|
||
padding: 16rpx 0;
|
||
}
|
||
|
||
.section_11 {
|
||
background-color: #c2c2c2;
|
||
width: 1rpx;
|
||
height: 64rpx;
|
||
}
|
||
}
|
||
|
||
.group_19 {
|
||
padding-top: 19rpx;
|
||
width: 483.06rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.image_19 {
|
||
width: 12rpx;
|
||
height: 46rpx;
|
||
}
|
||
|
||
.pos_14 {
|
||
position: absolute;
|
||
left: 30rpx;
|
||
top: 0;
|
||
}
|
||
|
||
.pos_15 {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 0;
|
||
}
|
||
}
|
||
|
||
.text_23 {
|
||
font-size: 24rpx;
|
||
line-height: 24.72rpx;
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
.font_14 {
|
||
font-size: 24rpx;
|
||
line-height: 22.24rpx;
|
||
color: #006ec4;
|
||
}
|
||
}
|
||
|
||
.section_12 {
|
||
padding-top: 35.16rpx;
|
||
background-color: #ffffff;
|
||
margin-bottom: 180rpx;
|
||
margin-bottom: calc(180rpx + constant(safe-area-inset-bottom));
|
||
margin-bottom: calc(180rpx + env(safe-area-inset-bottom));
|
||
|
||
.text_52 {
|
||
margin-left: 31.74rpx;
|
||
}
|
||
|
||
.grid_2 {
|
||
height: 272.62rpx;
|
||
display: grid;
|
||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
row-gap: 0;
|
||
column-gap: 0;
|
||
|
||
.grid-item_4 {
|
||
padding: 24.62rpx 0 26.54rpx;
|
||
|
||
.text_63 {
|
||
font-size: 22rpx;
|
||
line-height: 20.64rpx;
|
||
}
|
||
}
|
||
|
||
.grid-item_5 {
|
||
padding: 24.62rpx 0 26.62rpx;
|
||
|
||
.text_61 {
|
||
font-size: 22rpx;
|
||
line-height: 20.4rpx;
|
||
}
|
||
}
|
||
|
||
.image_21 {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.grid-item_6 {
|
||
padding: 24.62rpx 0 26.62rpx;
|
||
|
||
.text_62 {
|
||
font-size: 22rpx;
|
||
line-height: 20.32rpx;
|
||
}
|
||
}
|
||
|
||
.grid-item_7 {
|
||
padding: 24.62rpx 0 26.68rpx;
|
||
width: 187.5rpx;
|
||
|
||
.text_1 {
|
||
font-size: 22rpx;
|
||
line-height: 20.46rpx;
|
||
}
|
||
}
|
||
|
||
.grid-item_8 {
|
||
padding: 24.62rpx 0 26.62rpx;
|
||
|
||
.text_53 {
|
||
font-size: 22rpx;
|
||
line-height: 20.5rpx;
|
||
}
|
||
}
|
||
|
||
.grid-item_9 {
|
||
padding: 24.62rpx 0 26.68rpx;
|
||
|
||
.text_59 {
|
||
font-size: 22rpx;
|
||
line-height: 20.38rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.font_6 {
|
||
font-size: 36rpx;
|
||
line-height: 33.26rpx;
|
||
font-weight: var(--font-weight-bold);
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
.font_8 {
|
||
font-size: 24rpx;
|
||
line-height: 22.24rpx;
|
||
color: #1a1a1a;
|
||
}
|
||
|
||
.bottom-banner {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 9;
|
||
|
||
}
|
||
|
||
.section_13 {
|
||
margin-top: 16rpx;
|
||
padding: 18rpx 0;
|
||
background-image: url('/static/image/other/air-tickets/ctrip-air/bottom-banner.png');
|
||
background-size: 100% 100%;
|
||
background-repeat: no-repeat;
|
||
margin-bottom: -1px;
|
||
|
||
|
||
.text_54 {
|
||
line-height: 22.18rpx;
|
||
}
|
||
}
|
||
|
||
.image_11 {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
.section_14 {
|
||
padding: 18rpx 0;
|
||
background-color: #ffffff;
|
||
padding-bottom: calc(18rpx + constant(safe-area-inset-bottom));
|
||
padding-bottom: calc(18rpx + env(safe-area-inset-bottom));
|
||
|
||
.equal-division_3 {
|
||
margin-left: 30rpx;
|
||
margin-right: 28rpx;
|
||
|
||
.text-wrapper_5 {
|
||
flex: 1 1 220rpx;
|
||
|
||
.text_55 {
|
||
line-height: 25.62rpx;
|
||
}
|
||
|
||
.text_57 {
|
||
line-height: 26.02rpx;
|
||
}
|
||
|
||
.text_58 {
|
||
line-height: 25.96rpx;
|
||
}
|
||
}
|
||
|
||
.text-wrapper_1 {
|
||
padding: 23.34rpx 0 21.04rpx;
|
||
background-image: linear-gradient(270deg, #0470f7 -107.1%, #0086f5 207.1%);
|
||
border-radius: 6rpx;
|
||
height: 70rpx;
|
||
}
|
||
|
||
.text-wrapper_6 {
|
||
padding: 22.96rpx 0 21.02rpx;
|
||
background-image: linear-gradient(270deg, #0470f7 -107.1%, #0086f5 207.1%);
|
||
border-radius: 6rpx;
|
||
height: 70rpx;
|
||
}
|
||
|
||
.text-wrapper_7 {
|
||
padding: 23rpx 0 21.04rpx;
|
||
background-image: linear-gradient(270deg, #0470f7 -107.1%, #0086f5 207.1%);
|
||
border-radius: 6rpx;
|
||
height: 70rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.font {
|
||
font-size: 28rpx;
|
||
line-height: 24.72rpx;
|
||
font-weight: var(--font-weight-bold);
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
</style>
|