jacobxu666andClaude Opus 4.8
77e5cb9510
- 设计令牌层：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>
438 lines
11 KiB
Vue
438 lines
11 KiB
Vue
<script>
|
||
// #ifdef H5
|
||
// xuchao: 宽屏适配 —— 本 HBuilderX 版本自带"宽屏锁定 375 基准"的响应式机制（>768px 生效），
|
||
// 桌面加载时整页已是手机尺寸但默认贴左。这里只补两件事：
|
||
// 1) 宽屏下把页面列居中（见样式）；
|
||
// 2) 跨越 768 阈值缩放窗口时重载一次，让 px 基准与当前视口一致。
|
||
let _wide = null
|
||
function adaptWideScreen() {
|
||
const w = document.documentElement.clientWidth
|
||
const wide = w > 768
|
||
if (_wide !== null && _wide !== wide) {
|
||
location.reload()
|
||
return
|
||
}
|
||
_wide = wide
|
||
}
|
||
// #endif
|
||
|
||
export default {
|
||
onLaunch: function(e) {
|
||
console.log('App Launch')
|
||
// #ifdef H5
|
||
adaptWideScreen()
|
||
window.addEventListener('resize', adaptWideScreen)
|
||
// #endif
|
||
},
|
||
onShow: function() {
|
||
console.log('App Show')
|
||
},
|
||
onHide: function() {
|
||
console.log('App Hide')
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import "uview-ui/index.scss";
|
||
@import "./unit/font/index.css";
|
||
|
||
/* xuchao: Minimalist Modern 设计令牌 —— H5 全局 CSS 变量，页面样式统一用 var(--mm-*) 取值 */
|
||
page {
|
||
--mm-bg: #FAFAFA;
|
||
--mm-fg: #0F172A;
|
||
--mm-muted: #F1F5F9;
|
||
--mm-muted-fg: #64748B;
|
||
--mm-accent: #0052FF;
|
||
--mm-accent-2: #4D7CFF;
|
||
--mm-card: #FFFFFF;
|
||
--mm-border: #E2E8F0;
|
||
--mm-grad: linear-gradient(135deg, #0052FF, #4D7CFF);
|
||
--mm-grad-h: linear-gradient(to right, #0052FF, #4D7CFF);
|
||
--mm-shadow-sm: 0 2rpx 6rpx rgba(15, 23, 42, 0.06);
|
||
--mm-shadow-md: 0 8rpx 16rpx rgba(15, 23, 42, 0.07);
|
||
--mm-shadow-lg: 0 20rpx 30rpx rgba(15, 23, 42, 0.08);
|
||
--mm-shadow-accent: 0 8rpx 28rpx rgba(0, 82, 255, 0.25);
|
||
--mm-radius: 24rpx;
|
||
|
||
background: var(--mm-bg);
|
||
color: var(--mm-fg);
|
||
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC",
|
||
"HarmonyOS Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
|
||
}
|
||
|
||
/* xuchao: 页面根容器 —— 该 H5 运行时 uni-view 默认 inline，根视图必须显式 block，
|
||
否则内边距/最小高度不生效，子级会顶满屏幕 */
|
||
.mm-page {
|
||
display: block;
|
||
min-height: 100vh;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* xuchao: mm- 前缀全局工具类 —— 各页面共用，禁止页面内再写一次性渐变/阴影 */
|
||
/* 签名渐变背景 */
|
||
.mm-grad {
|
||
background: var(--mm-grad);
|
||
}
|
||
|
||
/* 渐变文字（标题关键词、价格数字） */
|
||
.mm-grad-text {
|
||
background: var(--mm-grad-h);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
/* 标准卡片：白底 + 描边 + 圆角 + 柔和投影 */
|
||
.mm-card {
|
||
background: var(--mm-card);
|
||
border: 2rpx solid var(--mm-border);
|
||
border-radius: var(--mm-radius);
|
||
box-shadow: var(--mm-shadow-md);
|
||
}
|
||
|
||
/* 主按钮：渐变底 + 白字 + 蓝色投影，按下有触感反馈 */
|
||
.mm-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 96rpx;
|
||
border-radius: var(--mm-radius);
|
||
background: var(--mm-grad);
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
font-weight: 500;
|
||
letter-spacing: 0.02em;
|
||
box-shadow: var(--mm-shadow-accent);
|
||
transition: all 0.2s ease-out;
|
||
}
|
||
|
||
.mm-btn:active {
|
||
transform: scale(0.98);
|
||
filter: brightness(1.1);
|
||
}
|
||
|
||
/* 次级按钮：描边幽灵态，用于"返回/取消"类操作 */
|
||
.mm-btn-ghost {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 96rpx;
|
||
border-radius: var(--mm-radius);
|
||
border: 2rpx solid var(--mm-border);
|
||
background: transparent;
|
||
color: var(--mm-fg);
|
||
font-size: 30rpx;
|
||
transition: all 0.2s ease-out;
|
||
}
|
||
|
||
.mm-btn-ghost:active {
|
||
background: var(--mm-muted);
|
||
}
|
||
|
||
/* 区块标签徽章：小圆点 + 宽字距文字（设计系统的 section label 形态） */
|
||
.mm-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
border-radius: 999rpx;
|
||
border: 2rpx solid rgba(0, 82, 255, 0.3);
|
||
background: rgba(0, 82, 255, 0.05);
|
||
padding: 10rpx 24rpx;
|
||
}
|
||
|
||
.mm-badge__dot {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-radius: 50%;
|
||
background: var(--mm-accent);
|
||
margin-right: 12rpx;
|
||
animation: mm-pulse 2s ease-in-out infinite;
|
||
}
|
||
|
||
.mm-badge__text {
|
||
font-size: 22rpx;
|
||
letter-spacing: 0.15em;
|
||
color: var(--mm-accent);
|
||
}
|
||
|
||
/* 区块标题：左侧签名渐变竖条 + 标题文字，各页内容分区统一用它 */
|
||
.mm-sec-title {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
letter-spacing: -0.01em;
|
||
color: var(--mm-fg);
|
||
}
|
||
|
||
.mm-sec-title::before {
|
||
content: '';
|
||
width: 8rpx;
|
||
height: 32rpx;
|
||
border-radius: 4rpx;
|
||
background: var(--mm-grad);
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
/* xuchao: 输入占位符浅灰（设计令牌）—— 配合 placeholder-class="mm-ph" 使用 */
|
||
.mm-ph {
|
||
color: #CBD5E1;
|
||
}
|
||
|
||
.mm-ph::placeholder {
|
||
color: #CBD5E1;
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 展示字体（本地 YouShe 优设标题黑），大标题与价格数字用 */
|
||
.mm-display {
|
||
font-family: "YouShe", "PingFang SC", sans-serif;
|
||
font-weight: 400;
|
||
}
|
||
|
||
/* 入场动效：上移渐显；配合 .mm-stagger 给子元素逐个延迟 */
|
||
.mm-fade-up {
|
||
animation: mm-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||
}
|
||
|
||
.mm-stagger>*:nth-child(1) { animation-delay: 0.05s; }
|
||
.mm-stagger>*:nth-child(2) { animation-delay: 0.12s; }
|
||
.mm-stagger>*:nth-child(3) { animation-delay: 0.19s; }
|
||
.mm-stagger>*:nth-child(4) { animation-delay: 0.26s; }
|
||
.mm-stagger>*:nth-child(5) { animation-delay: 0.33s; }
|
||
.mm-stagger>*:nth-child(6) { animation-delay: 0.4s; }
|
||
.mm-stagger>*:nth-child(7) { animation-delay: 0.47s; }
|
||
.mm-stagger>*:nth-child(n+8) { animation-delay: 0.54s; }
|
||
|
||
@keyframes mm-fade-up {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(40rpx);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* 脉动圆点：徽章"进行中"指示 */
|
||
@keyframes mm-pulse {
|
||
|
||
0%,
|
||
100% {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
}
|
||
|
||
50% {
|
||
transform: scale(1.3);
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
|
||
/* 底部安全区（iPhone X 系列全面屏） */
|
||
.mm-safe-bottom {
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
|
||
/* 用户偏好减少动效时，关闭所有装饰性动画 */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
|
||
.mm-fade-up,
|
||
.mm-badge__dot {
|
||
animation: none !important;
|
||
}
|
||
|
||
.mm-btn,
|
||
.mm-btn-ghost {
|
||
transition: none !important;
|
||
}
|
||
}
|
||
|
||
/* #ifdef H5 */
|
||
// xuchao: 该 H5 运行时 uni-view 默认 inline（标准 uni-app 为 block），
|
||
// 无 display 声明的样式容器会退化为行内：内边距/外边距/高/文本对齐全部失效。
|
||
// 全局恢复 block，与标准 uni-app H5 行为一致。
|
||
uni-view,
|
||
uni-scroll-view {
|
||
display: block;
|
||
}
|
||
|
||
// xuchao: 该 H5 运行时还缺 scroll-view 内置滚动样式 —— 内层 .uni-scroll-view 无 overflow
|
||
// 声明且高度被内容撑开，所有 scroll-view 都不能滚（弹窗里滑动会穿透去滚背后页面）。
|
||
// 补齐：外层裁切、内层承担滚动；overscroll-behavior 防止滚到边缘后链式滚动背景页。
|
||
uni-scroll-view {
|
||
overflow: hidden;
|
||
}
|
||
|
||
uni-scroll-view .uni-scroll-view {
|
||
height: 100%;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
overscroll-behavior: contain;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
// xuchao: 横向 scroll-view（带 scroll-x 属性）改为横向滚动、内容不换行
|
||
uni-scroll-view[scroll-x] .uni-scroll-view {
|
||
height: auto;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
// xuchao: 该 H5 运行时缺 uni-swiper 内置样式 —— 宿主元素 inline，组件内联写入的
|
||
// height 不生效，整个轮播塌成 0（详情页头图不显示）。按标准 uni-app H5 补齐：
|
||
// 宿主 block 定高裁切，wrapper 铺满，slides 绝对定位（其 inset:0 为内联样式）。
|
||
uni-swiper {
|
||
display: block;
|
||
position: relative;
|
||
width: 100%;
|
||
height: 150px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
uni-swiper .uni-swiper-wrapper {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
uni-swiper .uni-swiper-slides {
|
||
position: absolute;
|
||
}
|
||
|
||
// xuchao: 该 H5 运行时缺 uni-toast 内置样式 —— 提示以文档流内联渲染（透明底黑字、
|
||
// 掉到页面底部视口外），等同不可见。恢复标准 uni-app H5 形态：全屏 fixed 居中 + 深色胶囊。
|
||
uni-toast {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.uni-sample-toast {
|
||
max-width: 70%;
|
||
padding: 20rpx 36rpx;
|
||
border-radius: 16rpx;
|
||
background: rgba(15, 23, 42, 0.82);
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
line-height: 1.5;
|
||
text-align: center;
|
||
word-break: break-all;
|
||
}
|
||
|
||
// xuchao: 该 H5 运行时缺少 uni-app 内置的 input 基础样式（输入框退化为浏览器默认带框小输入条），
|
||
// 按标准 uni-app H5 补齐：wrapper 撑满、真实 input 绝对定位铺满去边框、占位符绝对定位叠在上方。
|
||
uni-input,
|
||
uni-textarea {
|
||
display: block;
|
||
position: relative;
|
||
}
|
||
|
||
.uni-input-wrapper,
|
||
.uni-textarea-wrapper {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.uni-input-input,
|
||
.uni-textarea-input {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
border: none;
|
||
outline: none;
|
||
background: transparent;
|
||
border-radius: 0;
|
||
font: inherit;
|
||
color: inherit;
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
}
|
||
|
||
.uni-input-placeholder,
|
||
.uni-textarea-placeholder {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
right: 0;
|
||
pointer-events: none;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
/* xuchao: 占位符统一浅灰（设计令牌） */
|
||
color: #CBD5E1;
|
||
}
|
||
|
||
// xuchao: 模板里的原生 input/textarea 同样剥掉浏览器默认边框
|
||
input,
|
||
textarea {
|
||
border: none;
|
||
outline: none;
|
||
background: transparent;
|
||
border-radius: 0;
|
||
font: inherit;
|
||
color: inherit;
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
}
|
||
|
||
// xuchao: 修复 uni-image 内部填充元素宽高为 0 导致图片不显示/溢出
|
||
uni-image {
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
}
|
||
|
||
uni-image > div,
|
||
uni-image > img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
// xuchao: 框架在根节点全局挂载的 uni-actionsheet（供 uni.showActionSheet 用），
|
||
// 在从未调用时仍以普通文档流渲染出"取消"按钮，漏在每页最底部；本项目无该调用，整体隐藏。
|
||
// 注：若日后某页改用 uni.showActionSheet，需另行为其"打开态"写显示规则。
|
||
uni-actionsheet {
|
||
display: none !important;
|
||
}
|
||
|
||
// xuchao: 宽屏（>768px，框架此时把 rpx 基准锁在 375）下，把页面列居中、两侧露出底色
|
||
@media screen and (min-width: 769px) {
|
||
body {
|
||
// xuchao: 页面级 page 背景会染到 body，需 !important 才能露出两侧底色；
|
||
// 底色取设计系统描边色，与 #FAFAFA 页面形成柔和层次
|
||
background: #E2E8F0 !important;
|
||
}
|
||
|
||
uni-page-body {
|
||
// xuchao: 框架默认 uni-page-body 为 display:inline，会使 width/margin 失效，先改 block
|
||
display: block !important;
|
||
// 不能用 rpx —— 750rpx 恒等于"整屏宽"，编译后会变成当前视口宽度而无法居中。
|
||
// 框架在 >768px 时把 rpx 基准锁在 375（rpxCalcBaseDeviceWidth 默认值），
|
||
// 故页面内容宽即 375px，这里用固定 375px 覆盖框架默认 width:100% 实现居中。
|
||
width: 375px !important;
|
||
margin: 0 auto !important;
|
||
min-height: 100vh;
|
||
overflow-x: hidden;
|
||
box-shadow: 0 0 24px rgba(15, 23, 42, 0.14);
|
||
}
|
||
}
|
||
/* #endif */
|
||
</style>
|