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

- 设计令牌层: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
+19 -23
View File
@@ -1,21 +1,17 @@
<template name="gmy-float-touch">
<!-- xuchao: 门票订单悬浮按钮 —— 固定距屏幕底部 50px、左侧 12px,单击直达订单列表 -->
<view class="box" @click="onTap">
<image class="box__img" :src="mainImg" mode="aspectFill"></image>
<!-- xuchao: 门票订单悬浮按钮 —— 渐变圆钮固定于左下,单击直达订单列表 -->
<view class="gft-box" @click="onTap">
<view class="gft-btn mm-grad">
<u-icon name="order" color="#ffffff" size="44"></u-icon>
</view>
</view>
</template>
<script>
export default {
name: "gmy-float-touch",
props: {
mainImg: {
type: String,
default: "../../static/main.png"
}
},
methods: {
// xuchao: 单击直接派发订单事件
// xuchao: 单击直接派发订单事件(保留原契约:menuClick 回调参数 4)
onTap: function() {
this.$emit("menuClick", 4)
}
@@ -24,27 +20,27 @@
</script>
<style lang="scss">
.box {
/* xuchao: 类名加 gft- 前缀,组件样式全局生效,避免裸 .box 撞名 */
.gft-box {
position: fixed;
left: 12px;
bottom: 50px;
width: 100upx;
height: 100upx;
left: 24rpx;
bottom: 100rpx;
z-index: 999;
}
.gft-btn {
width: 104rpx;
height: 104rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.box__img {
width: 100upx;
height: 100upx;
/* xuchao: 蓝色投影呼应签名渐变,强化"悬浮"层次 */
box-shadow: 0 12rpx 28rpx rgba(0, 82, 255, 0.35);
transition: transform 0.12s ease;
// xuchao: 轻微投影 + 按下回弹,让悬浮钮有"浮起/可点"的反馈
filter: drop-shadow(0 6rpx 12rpx rgba(0, 0, 0, 0.18));
}
.box:active .box__img {
.gft-box:active .gft-btn {
transform: scale(0.9);
}
</style>