xuchao/h5-meike
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 全站 UI 按 Minimalist Modern 重设计，新增返回悬浮钮

Browse Source 
- 设计令牌层：mm-* CSS 变量与工具类、uView 换肤、优设标题黑字体
- 九个页面全部重写为新风格（列表/详情/下单/出行人/订单/支付成功/登录）
- 补齐 H5 运行时缺失的基础样式（uni-view/scroll-view/toast/swiper 等，App.vue 全局）
- 修复：详情头图轮播、预订须知弹层滚动、出行人数量按购买数限制、订单详情去箭头
- 新增 gmy-back-touch 返回悬浮钮，除首页外全页接入，点击返回上一页

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
jacobxu666
2026-08-05 12:48:45 +08:00
co-authored by Claude Opus 4.8
parent dd25c0ae63
commit 77e5cb9510
19 changed files with 2690 additions and 1335 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/ticket/orderdetail.vue
+429 -258
View File
@@ -1,192 +1,150 @@
<template>
<view v-if="obj">
<view class="detail_h">
<view style="width: 654rpx;display: flex;justify-content: space-between;">
<text style="font-size: 48rpx;font-weight: bold;"
:style="{color:obj.order.orderStatus=='WAITPAY'?'#FF0000':'#000'}">{{orderStatus}}</text>
<view>
<text style="color: #000000;font-size: 20rpx;">￥</text>
<text
style="color: #000000;font-size: 48rpx;font-weight: bold;margin-right: 12rpx;">{{(obj.order.orderAmount/100).toFixed(2)}}</text>
<u-icon name="arrow-right" color="#808080" size="28"></u-icon>
<view v-if="obj" class="page mm-page">
<gmy-back-touch></gmy-back-touch>
<!-- xuchao: 状态英雄卡 —— 待支付用主题蓝强调 -->
<view class="hero mm-card mm-fade-up">
<view class="hero__row">
<text :class="['hero__status mm-display', isWaitPay ? 'hero__status--accent' : '']">{{orderStatus}}</text>
<view class="hero__price">
<text class="hero__cur">¥</text>
<text class="hero__num mm-display">{{(obj.order.orderAmount/100).toFixed(2)}}</text>
</view>
</view>
<text style="color:#808080;margin-top: 24rpx;display: block;">{{orderTitle}}</text>
<view class="hero__tip">{{orderTitle}}</view>
</view>
<view class="detail_rq">
<text style="color: #000;line-height: 88rpx;font-size: 36rpx;font-weight: bold;">商品信息</text>
<view style="width: 702rpx;display: flex;justify-content: space-between;">
<text style="color: #000;font-weight: bold;">{{ticketName}}</text>
<u-icon name="arrow-right" color="#808080" size="24"></u-icon>
<!-- xuchao: 商品信息卡 -->
<view class="sec mm-card mm-fade-up">
<view class="mm-sec-title">商品信息</view>
<view class="goods">
<text class="goods__name">{{ticketName}}</text>
</view>
<view style="display: flex;margin-top: 24rpx;">
<view style="width: 120rpx;color: #808080;">票型类型</view>
<view style="width: 566rpx;margin-left: 16rpx;color: #000;">
【{{getSkuType(obj.sku.typeId)}}】&nbsp;{{obj.sku.skuName}}</view>
<view class="kv">
<view class="kv__label">票型类型</view>
<view class="kv__val">【{{getSkuType(obj.sku.typeId)}}】 {{obj.sku.skuName}}</view>
</view>
<view style="display: flex;margin-top: 24rpx;">
<view style="width: 120rpx;color: #808080;">使用日期</view>
<view style="width: 566rpx;margin-left: 16rpx;color: #FF0000;">{{obj.orderGoods.bookDate}} <text
<view class="kv">
<view class="kv__label">使用日期</view>
<view class="kv__val kv__val--accent">{{obj.orderGoods.bookDate}} <text
v-if="obj.orderGoods.timeSlot">({{obj.orderGoods.timeSlot}})</text></view>
</view>
<view style="display: flex;margin-top: 24rpx;">
<view style="width: 120rpx;color: #808080;">生效时间</view>
<view style="width: 566rpx;margin-left: 16rpx;color: #000;">出票后立即生效</view>
<view class="kv">
<view class="kv__label">生效时间</view>
<view class="kv__val">出票后立即生效</view>
</view>
<view class="rypz" v-if="obj.touristList.length!=0">
<view style="width: 654rpx;text-align: center;display: flex;flex-direction: column;">
<text style="color: #000000;font-size: 32rpx;font-weight: bold;">入园凭证</text>
<scroll-view scroll-x="true" class="xsms-scroll">
<view style="width: 404rpx;display: inline-block;"
:style="{marginRight:index==obj.touristList.length-1?'0rpx':'24rpx'}"
v-for="(item,index) in obj.touristList" :key="index">
<view class="rq_item">凭证码</view>
<view
style="width: 404rpx;background: #F8F9FC;display: flex;flex-direction: column;align-items: center;padding-bottom: 24rpx0;border-radius: 0rpx 0rpx 24rpx 24rpx;">
<view class="rq_num">{{item.qrCode}}</view>
<view class="rq_btn" @tap='coyp(item.qrCode)'>复制</view>
<image style="width: 240rpx;height: 240rpx;margin-top: 24rpx;" :src="item.qrCodeBase64">
</image>
<!-- xuchao: 入园凭证（横向滑动，每位游客一张凭证卡） -->
<view class="vch" v-if="obj.touristList.length!=0">
<view class="vch__title">入园凭证</view>
<scroll-view scroll-x="true" class="vch__scroll">
<view class="vch__item" :style="{marginRight:index==obj.touristList.length-1?'0rpx':'24rpx'}"
v-for="(item,index) in obj.touristList" :key="index">
<view class="vch__tag">凭证码</view>
<view class="vch__body">
<view class="vch__num">{{item.qrCode}}</view>
<view class="vch__copy" @tap="coyp(item.qrCode)">复制</view>
<view class="vch__qr">
<image :src="item.qrCodeBase64"></image>
</view>
</view>
</scroll-view>
</view>
</view>
<view style="display: flex;margin-top: 24rpx;">
<view style="width: 120rpx;color: #808080;">入园方式</view>
<view style="width: 566rpx;margin-left: 16rpx;color: #000;">
{{obj.sku.enterChangeFlag?'凭('+getTyepStr(obj.sku.enterType)+')换票入园':'无需换票'}}
</view>
</view>
<view style="display: flex;margin-top: 24rpx;" v-if="obj.sku.enterChangeFlag">
<view style="width: 120rpx;color: #808080;">换票时间</view>
<view style="width: 566rpx;margin-left: 16rpx;color: #000;">
{{obj.sku.changeStart}}~{{obj.sku.changeEnd}}
</view>
</view>
<view style="display: flex;margin-top: 24rpx;" v-if="obj.sku.enterChangeFlag">
<view style="width: 120rpx;color: #808080;">换票地点</view>
<view style="width: 566rpx;margin-left: 16rpx;color: #000;">{{obj.sku.changePostion}}</view>
</view>
<view style="display: flex;margin-top: 24rpx;">
<view style="width: 120rpx;color: #808080;">入园时间</view>
<view style="width: 566rpx;margin-left: 16rpx;color: #000;">{{obj.sku.enterStart}}~{{obj.sku.enterEnd}}
</view>
</view>
<view style="display: flex;margin-top: 24rpx;">
<view style="width: 120rpx;color: #808080;">入园地点</view>
<view style="width: 566rpx;margin-left: 16rpx;color: #000;">{{obj.sku.enterPostion}}</view>
</view>
<view style="display: flex;margin-top: 24rpx;border-bottom: 2rpx #E1E1E1 dashed;padding-bottom: 24rpx;">
<view style="width: 120rpx;color: #808080;">门票</view>
<view style="width: 566rpx;margin-left: 16rpx;color: #000;">
￥{{(obj.orderGoods.skuPrice/100).toFixed(2)}} x {{obj.order.buyNum}}</view>
</view>
<view style="position: relative;height: 96rpx;display: flex;align-items: center;" @click="show1=true">
<text style="color: black;font-weight: bold;display: block;width: 120rpx;">取消政策</text>
<image src="https://aliyunoss.hn12301.net/sd/ticket_dg.png"
style="width: 40rpx;height: 40rpx;margin-left: 12rpx;margin-right: 12rpx;"></image>
<text
style="color: rgba(0, 0, 0, 0.8);">{{obj.sku.refundType==1?'随时退':obj.sku.refundType==2?'有条件退':obj.sku.refundType==3?'不可退款':''}}</text>
<u-icon name="arrow-right" color="#808080" size="24" style="position: absolute;right: 0rpx;"></u-icon>
</view>
</view>
<view class="detail_rq" style="border-top: none;padding-bottom: 24rpx;">
<text style="color: #000;line-height: 88rpx;font-size: 36rpx;font-weight: bold;">订单信息</text>
<view v-if="obj.sku.enterDemand=='2'">
<view style="display: flex;margin-top: 24rpx;" v-for="(item,index) in obj.touristList">
<view style="width: 120rpx;color: #808080;">出行人</view>
<view style="width: 566rpx;margin-left: 16rpx;color: #000;line-height: 48rpx;">{{item.name}} <br />
{{item.phone}}
<br />{{item.identityNo}}
</view>
</view>
</view>
<view v-if="obj.sku.enterDemand=='1'"
style="display: flex;margin-top: 24rpx;border-bottom: 2rpx #E1E1E1 dashed;padding-bottom: 24rpx;">
<view style="width: 120rpx;color: #808080;">联系人</view>
<view style="width: 566rpx;margin-left: 16rpx;color: #000;">{{obj.order.orderContactName}}</view>
</view>
<view style="display: flex;margin-top: 24rpx;border-bottom: 2rpx #E1E1E1 dashed;padding-bottom: 24rpx;">
<view style="width: 120rpx;color: #808080;">手机号</view>
<view style="width: 566rpx;margin-left: 16rpx;color: #000;">{{obj.order.orderContactMobile}}</view>
</view>
<view style="display: flex;margin-top: 24rpx;position: relative;">
<view style="width: 120rpx;color: #808080;">订单编号</view>
<view style="width: 566rpx;margin-left: 16rpx;color: #000;">{{obj.order.id}}</view>
<text style="position: absolute;right: 0rpx;color: #808080;" @tap='coyp(obj.order.id)'>复制</text>
</scroll-view>
</view>
<view style="display: flex;margin-top: 24rpx;position: relative;" v-if="obj.order.orderStatus!='WAITPAY'">
<view style="width: 120rpx;color: #808080;">支付时间</view>
<view style="width: 566rpx;margin-left: 16rpx;color: #000;" v-if="obj.payment">
{{obj.payment.createdTime||''}}
</view>
<view class="kv">
<view class="kv__label">入园方式</view>
<view class="kv__val">{{obj.sku.enterChangeFlag?'凭('+getTyepStr(obj.sku.enterType)+')换票入园':'无需换票'}}</view>
</view>
<view class="kv" v-if="obj.sku.enterChangeFlag">
<view class="kv__label">换票时间</view>
<view class="kv__val">{{obj.sku.changeStart}}~{{obj.sku.changeEnd}}</view>
</view>
<view class="kv" v-if="obj.sku.enterChangeFlag">
<view class="kv__label">换票地点</view>
<view class="kv__val">{{obj.sku.changePostion}}</view>
</view>
<view class="kv">
<view class="kv__label">入园时间</view>
<view class="kv__val">{{obj.sku.enterStart}}~{{obj.sku.enterEnd}}</view>
</view>
<view class="kv">
<view class="kv__label">入园地点</view>
<view class="kv__val">{{obj.sku.enterPostion}}</view>
</view>
<view class="kv kv--dash">
<view class="kv__label">门票</view>
<view class="kv__val">¥{{(obj.orderGoods.skuPrice/100).toFixed(2)}} x {{obj.order.buyNum}}</view>
</view>
<!-- xuchao: 取消政策 —— 点击弹层查看条款 -->
<view class="policy" @click="show1=true">
<text class="policy__label">取消政策</text>
<u-icon name="question-circle" color="#0052FF" size="28"></u-icon>
<text
class="policy__val">{{obj.sku.refundType==1?'随时退':obj.sku.refundType==2?'有条件退':obj.sku.refundType==3?'不可退款':''}}</text>
<u-icon name="arrow-right" color="#CBD5E1" size="24" class="policy__arrow"></u-icon>
</view>
</view>
<view style="width: 750rpx;height: 120rpx;"></view>
<view class="detail_btn">
<!-- <view class="tozf">再次购买</view> -->
<view class="tozf" v-if="obj.order.orderStatus=='WAITPAY'" @tap='toPay()'>去支付</view>
<view class="toqx" v-if="obj.order.orderStatus=='WAITPAY'" @tap='cancel()'>取消订单</view>
<view class="toqx" @tap='aginPlay()'
v-if="obj.order.orderStatus=='HAVESEND'||obj.order.orderStatus=='COMPLETED'||obj.order.orderStatus=='BACKPAYED'">
重新购买</view>
<view class="toqx" v-if="obj.order.orderStatus=='HAVESEND'" @tap='refund()'>申请退款</view>
<!-- xuchao: 订单信息卡 -->
<view class="sec mm-card mm-fade-up">
<view class="mm-sec-title">订单信息</view>
<template v-if="obj.sku.enterDemand=='2'">
<view class="kv" v-for="(item,index) in obj.touristList" :key="index">
<view class="kv__label">出行人</view>
<view class="kv__val">{{item.name}} {{item.phone}} {{item.identityNo}}</view>
</view>
</template>
<view class="kv kv--dash" v-if="obj.sku.enterDemand=='1'">
<view class="kv__label">联系人</view>
<view class="kv__val">{{obj.order.orderContactName}}</view>
</view>
<view class="kv kv--dash">
<view class="kv__label">手机号</view>
<view class="kv__val">{{obj.order.orderContactMobile}}</view>
</view>
<view class="kv">
<view class="kv__label">订单编号</view>
<view class="kv__val">{{obj.order.id}}</view>
<text class="kv__copy" @tap="coyp(obj.order.id)">复制</text>
</view>
<view class="kv" v-if="obj.order.orderStatus!='WAITPAY'">
<view class="kv__label">支付时间</view>
<view class="kv__val" v-if="obj.payment">{{obj.payment.createdTime||''}}</view>
</view>
</view>
<u-popup v-model="show1" border-radius='20' mode='bottom'>
<view style="padding:48rpx;display: flex;flex-direction: column;">
<text style="color: #000;font-size: 36rpx;font-weight: bold;">取消政策</text>
<!-- xuchao: 底部按钮区预留（有操作按钮时才占位） -->
<view class="safe" v-if="hasActs"></view>
<!-- xuchao: 底部操作栏 -->
<view class="bar" v-if="hasActs">
<view class="bar__ghost" v-if="obj.order.orderStatus=='HAVESEND'" @tap="refund()">申请退款</view>
<view class="bar__ghost" @tap="aginPlay()"
v-if="obj.order.orderStatus=='HAVESEND'||obj.order.orderStatus=='COMPLETED'||obj.order.orderStatus=='BACKPAYED'">重新购买</view>
<view class="bar__ghost" v-if="obj.order.orderStatus=='WAITPAY'" @tap="cancel()">取消订单</view>
<view class="bar__main mm-grad" v-if="obj.order.orderStatus=='WAITPAY'" @tap="toPay()">去支付</view>
</view>
<!-- <view
style="height: 88rpx;display: flex;align-items: center;position: relative;border-top: 1px dashed #E1E1E1;margin-top: 24rpx;">
<image src="https://aliyunoss.hn12301.net/sd/ticket_dg.png"
style="width: 40rpx;height: 40rpx;margin-right: 12rpx;"></image>
<text style="color: rgba(0, 0, 0, 0.8);">随时退</text>
</view>
<view style="position: relative;color: rgba(0, 0, 0, 0.5);">
该商品支持随时退，经核实未使用后，可免费取消。
</view> -->
<u-parse style="margin-top: 24rpx;" :html="obj.sku.refundPolicy"></u-parse>
<view style="width: 654rpx;height: 120rpx;"></view>
<view
style="width: 654rpx;position: fixed;height: 88rpx;line-height: 88rpx;background: #fff;bottom: 0rpx;left: 0rpx;right: 0rpx;margin: 0 auto;border-bottom: constant(safe-area-inset-bottom) solid #fff;border-bottom: env(safe-area-inset-bottom) solid #fff;">
<u-button shape="circle" size="default"
style="background: linear-gradient(180deg, #FF9E49 0%, #ED3B1A 100%);color: #fff;"
@click="show1=false">确定</u-button>
</view>
<!-- xuchao: 取消政策弹层 -->
<u-popup v-model="show1" border-radius="20" mode="bottom">
<view class="pp mm-safe-bottom">
<view class="mm-sec-title">取消政策</view>
<u-parse class="pp__parse" :html="obj.sku.refundPolicy"></u-parse>
<view class="mm-btn pp__btn" @click="show1=false">确定</view>
</view>
</u-popup>
<u-popup v-model="show" mode='bottom' border-radius='20'>
<view style="padding: 48rpx;">
<view style="width: 654rpx;text-align: center;font-size: 30rpx;font-weight: bold;">请选择游客</view>
<u-checkbox-group :wrap='true'>
<u-checkbox v-model="item.checked" v-for="(item, index) in list" :key="index"
:name="item.name">{{item.name}}</u-checkbox>
<!-- xuchao: 申请退款 —— 选择游客弹层 -->
<u-popup v-model="show" mode="bottom" border-radius="20">
<view class="pp mm-safe-bottom">
<view class="pp__center-title">请选择游客</view>
<u-checkbox-group :wrap="true">
<u-checkbox v-model="item.checked" v-for="(item, index) in list" :key="index" :name="item.name"
active-color="#0052FF">{{item.name}}</u-checkbox>
</u-checkbox-group>
<u-button shape="circle" size="default"
style="background: linear-gradient(180deg, #FF9E49 0%, #ED3B1A 100%);color: #fff;margin-top: 24rpx;"
@click="sure()">确定</u-button>
<view class="mm-btn pp__btn" @click="sure()">确定</view>
</view>
</u-popup>
</view>
@@ -200,7 +158,11 @@
import {
getSkuType
} from '../../unit/utils.js'
import gmyBackTouch from "@/components/gmy-back-touch/gmy-back-touch.vue"
export default {
components: {
'gmy-back-touch': gmyBackTouch
},
data() {
return {
enterTypeList: [{
@@ -228,7 +190,7 @@
label: '6'
},
{
value: "台湾居民来往大陆通行证",
value: "台湾居民来往内地通行证",
label: '7'
}
],
@@ -294,6 +256,16 @@
}
return str
},
// xuchao: 待支付状态用主题蓝强调
isWaitPay() {
return this.obj && this.obj.order.orderStatus == 'WAITPAY'
},
// xuchao: 是否存在底部操作按钮（决定操作栏与占位是否渲染）
hasActs() {
if (!this.obj) return false
const s = this.obj.order.orderStatus
return s == 'WAITPAY' || s == 'HAVESEND' || s == 'COMPLETED' || s == 'BACKPAYED'
}
},
onLoad(e) {
@@ -341,7 +313,7 @@
},
refund() {
//
//
this.show = true
},
sure() {
@@ -410,114 +382,313 @@
}
}
</script>
<style>
page {
background: #F8F9FC;
}
</style>
<style scoped lang="less">
.xsms-scroll {
.page {
padding: 32rpx 32rpx 40rpx;
}
/* ---------- 状态英雄卡 ---------- */
.hero {
padding: 32rpx;
}
.hero__row {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.hero__status {
font-size: 44rpx;
line-height: 1.1;
color: var(--mm-fg);
}
.hero__status--accent {
color: var(--mm-accent);
}
.hero__price {
display: flex;
align-items: baseline;
}
.hero__cur {
font-size: 24rpx;
color: var(--mm-fg);
margin-right: 2rpx;
}
.hero__num {
font-size: 48rpx;
line-height: 1;
color: var(--mm-fg);
}
.hero__tip {
margin-top: 16rpx;
font-size: 24rpx;
line-height: 1.6;
color: var(--mm-muted-fg);
}
/* ---------- 内容卡片 ---------- */
.sec {
margin-top: 24rpx;
padding: 32rpx 24rpx;
}
.goods {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20rpx;
}
.goods__name {
flex: 1;
min-width: 0;
font-size: 30rpx;
font-weight: 600;
color: var(--mm-fg);
}
/* xuchao: 键值行 —— 标签 + 取值，kv--dash 带虚线分隔 */
.kv {
display: flex;
margin-top: 24rpx;
}
.kv--dash {
border-bottom: 2rpx dashed var(--mm-border);
padding-bottom: 24rpx;
}
.kv__label {
flex: none;
width: 120rpx;
font-size: 26rpx;
color: var(--mm-muted-fg);
}
.kv__val {
flex: 1;
min-width: 0;
margin-left: 16rpx;
font-size: 26rpx;
line-height: 1.6;
color: var(--mm-fg);
}
.kv__val--accent {
color: var(--mm-accent);
font-weight: 500;
}
.kv__copy {
flex: none;
margin-left: 16rpx;
font-size: 24rpx;
color: var(--mm-accent);
}
/* ---------- 入园凭证 ---------- */
.vch {
margin-top: 28rpx;
border: 2rpx dashed var(--mm-border);
border-radius: 20rpx;
padding: 24rpx;
}
.vch__title {
text-align: center;
font-size: 32rpx;
font-weight: 600;
color: var(--mm-fg);
}
.vch__scroll {
overflow: hidden;
white-space: nowrap;
margin-top: 24rpx;
width: 654rpx;
width: 100%;
}
.rypz {
width: 702rpx;
border: 1px dashed #E1E1E1;
.vch__item {
width: 404rpx;
display: inline-block;
}
.vch__tag {
height: 64rpx;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 82, 255, 0.08);
color: var(--mm-accent);
font-size: 26rpx;
font-weight: 600;
letter-spacing: 0.1em;
border-radius: 20rpx 20rpx 0 0;
}
.vch__body {
display: flex;
flex-direction: column;
align-items: center;
background: var(--mm-muted);
border-radius: 0 0 20rpx 20rpx;
padding-bottom: 32rpx;
}
.vch__num {
width: 356rpx;
margin-top: 24rpx;
padding: 24rpx;
.rq_item {
width: 404rpx;
height: 64rpx;
border-radius: 20rpx 20rpx 0rpx 0rpx;
background: #EEEFF3;
color: #000;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.rq_num {
width: 356rpx;
margin: 24rpx;
color: #000;
font-weight: bold;
white-space: normal;
overflow-wrap: break-word;
}
.rq_btn {
color: rgba(0, 0, 0, 0.8);
width: 72rpx;
height: 36rpx;
font-size: 20rpx;
border-radius: 36rpx;
border: 1px solid #E1E1E1;
display: flex;
align-items: center;
justify-content: center;
}
font-size: 28rpx;
font-weight: 600;
letter-spacing: 0.04em;
text-align: center;
white-space: normal;
overflow-wrap: break-word;
color: var(--mm-fg);
}
.tozf {
height: 64rpx;
background: linear-gradient(180deg, #FF9E49 0%, #ED3B1A 100%);
border-radius: 64rpx;
color: #fff;
font-weight: bold;
padding: 0rpx 24rpx;
.vch__copy {
margin-top: 16rpx;
width: 88rpx;
height: 44rpx;
display: flex;
align-items: center;
justify-content: center;
border: 2rpx solid rgba(0, 82, 255, 0.4);
border-radius: 999rpx;
font-size: 22rpx;
color: var(--mm-accent);
}
.toqx {
height: 64rpx;
background: rgba(0, 0, 0, 0.1);
border-radius: 64rpx;
color: #000;
font-weight: bold;
padding: 0rpx 24rpx;
display: flex;
align-items: center;
}
.detail_btn {
width: 750rpx;
height: 88rpx;
display: flex;
align-items: center;
background-color: #fff;
position: fixed;
bottom: 0rpx;
// xuchao: 视口水平居中（宽屏下与页面列对齐）+ 全面屏底部安全区
left: 0rpx;
right: 0rpx;
margin-left: auto;
margin-right: auto;
border-bottom: constant(safe-area-inset-bottom) solid #fff;
border-bottom: env(safe-area-inset-bottom) solid #fff;
gap: 20rpx;
padding-right: 24rpx;
justify-content: flex-end;
}
.detail_h {
margin: 48rpx 24rpx 0rpx 24rpx;
.vch__qr {
margin-top: 24rpx;
padding: 12rpx;
background: #fff;
border-radius: 20rpx 20rpx 0rpx 0rpx;
padding: 24rpx;
width: 702rpx;
border-radius: 12rpx;
}
.detail_rq {
border-top: 1px #E1E1E1 solid;
background-color: #fff;
padding: 24rpx 24rpx 0rpx 24rpx;
.vch__qr image {
width: 240rpx;
height: 240rpx;
display: block;
}
</style>
/* ---------- 取消政策入口 ---------- */
.policy {
display: flex;
align-items: center;
height: 96rpx;
position: relative;
}
.policy__label {
font-size: 28rpx;
font-weight: 600;
color: var(--mm-fg);
margin-right: 12rpx;
}
.policy__val {
margin-left: 12rpx;
font-size: 26rpx;
color: var(--mm-muted-fg);
}
.policy__arrow {
position: absolute;
right: 0;
}
/* ---------- 底部操作栏 ---------- */
.safe {
height: 160rpx;
}
.bar {
position: fixed;
left: 0;
right: 0;
margin: 0 auto;
width: 750rpx;
bottom: 0;
z-index: 99;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 20rpx;
background: var(--mm-card);
border-top: 2rpx solid var(--mm-border);
padding: 20rpx 24rpx;
/* xuchao: 全面屏底部安全区 */
padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}
.bar__main {
height: 72rpx;
padding: 0 40rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999rpx;
color: #fff;
font-size: 28rpx;
font-weight: 600;
box-shadow: var(--mm-shadow-accent);
transition: transform 0.15s ease;
}
.bar__main:active {
transform: scale(0.96);
}
.bar__ghost {
height: 72rpx;
padding: 0 32rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 999rpx;
border: 2rpx solid var(--mm-border);
color: var(--mm-fg);
font-size: 28rpx;
transition: background 0.15s ease;
}
.bar__ghost:active {
background: var(--mm-muted);
}
/* ---------- 弹层 ---------- */
.pp {
padding: 48rpx;
display: flex;
flex-direction: column;
}
.pp__parse {
margin-top: 24rpx;
font-size: 26rpx;
line-height: 1.7;
color: var(--mm-fg);
}
.pp__btn {
margin-top: 48rpx;
}
.pp__center-title {
text-align: center;
font-size: 30rpx;
font-weight: 600;
color: var(--mm-fg);
margin-bottom: 24rpx;
}
</style>