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
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
dd25c0ae63
commit
77e5cb9510
@@ -37,7 +37,362 @@
|
||||
@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;
|
||||
@@ -60,8 +415,9 @@
|
||||
// xuchao: 宽屏（>768px，框架此时把 rpx 基准锁在 375）下，把页面列居中、两侧露出底色
|
||||
@media screen and (min-width: 769px) {
|
||||
body {
|
||||
// xuchao: 页面级 page 背景会染到 body，需 !important 才能露出两侧底色
|
||||
background: #dfe4ea !important;
|
||||
// xuchao: 页面级 page 背景会染到 body，需 !important 才能露出两侧底色；
|
||||
// 底色取设计系统描边色，与 #FAFAFA 页面形成柔和层次
|
||||
background: #E2E8F0 !important;
|
||||
}
|
||||
|
||||
uni-page-body {
|
||||
@@ -74,7 +430,7 @@
|
||||
margin: 0 auto !important;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
box-shadow: 0 0 24px rgba(31, 45, 61, 0.14);
|
||||
box-shadow: 0 0 24px rgba(15, 23, 42, 0.14);
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
Reference in New Issue
Block a user