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/index/authorization.vue
+110 -69
View File
@@ -1,27 +1,38 @@
<template>
<view class="auth_rq">
<image class="auth_rq_image" src="https://aliyunoss.hn12301.net/sd/ali_logo.png"></image>
<view class="auth_rq_view">质惠游</view>
<view class="page mm-page">
<gmy-back-touch></gmy-back-touch>
<!-- xuchao: 品牌区 —— Logo + 渐变标题 -->
<view class="brand mm-fade-up">
<image class="brand__logo" src="https://aliyunoss.hn12301.net/sd/ali_logo.png"></image>
<view class="brand__name mm-display mm-grad-text">质惠游</view>
</view>
<!-- xuchao: 开发模式提示（正式环境不显示） -->
<view class="auth_rq_tips" v-if="devMode">开发模式：输入测试手机号直接登录</view>
<view class="tips mm-fade-up" v-if="devMode">开发模式：输入测试手机号直接登录</view>
<view class="auth_rq_input" :style="{marginTop: devMode ? '40rpx' : '146rpx'}">
<u-input v-model="value" type="number" :border="false" :custom-style='customStyle' placeholder='请输入手机号' />
</view>
<!-- xuchao: 开发模式免验证码 -->
<view class="auth_rq_input" v-if="!devMode" style="margin-top: 50rpx;">
<u-input v-model="value1" type="number" :border="false" :custom-style='customStyle' placeholder='请输入验证码' />
<text style="margin-left: 30rpx;" :style="{color:isFlag?'#488CFE':'#666'}" @tap="getCode">{{tips}}</text>
</view>
<!-- xuchao: 登录表单 -->
<view class="form mm-fade-up" :style="{marginTop: devMode ? '40rpx' : '96rpx'}">
<view class="field">
<u-input v-model="value" type="number" :border="false" :custom-style='customStyle'
placeholder='请输入手机号' placeholder-class="mm-ph" />
</view>
<!-- xuchao: 开发模式免验证码 -->
<view class="field field--code" v-if="!devMode">
<view class="field__input">
<u-input v-model="value1" type="number" :border="false" :custom-style='customStyle'
placeholder='请输入验证码' placeholder-class="mm-ph" />
</view>
<text :class="['field__code', isFlag ? '' : 'field__code--off']" @tap="getCode">{{tips}}</text>
</view>
<button class="auth_rq_button1" :style="{marginTop: devMode ? '80rpx' : '80rpx'}" @click="doLogin">立即登录</button>
<view class="mm-btn login__btn" @click="doLogin">立即登录</view>
<view style="margin-top: 32rpx;margin-left: 70rpx;">
<u-checkbox-group>
<u-checkbox v-model="checked" shape="circle" style="color: #929292;">我已阅读并同意<text
style="color: #488CFE;" @click="readXy()">用户服务协议</text></u-checkbox>
</u-checkbox-group>
<view class="agree">
<u-checkbox-group>
<u-checkbox v-model="checked" shape="circle" active-color="#0052FF">我已阅读并同意<text
class="agree__link" @click="readXy()">用户服务协议</text></u-checkbox>
</u-checkbox-group>
</view>
</view>
<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"
@@ -35,8 +46,12 @@
// 正式流程：微信网页授权（code 换用户信息）+ 短信验证码绑定手机号
import config from '@/common/config.js'
import auth from '@/common/auth.js'
import gmyBackTouch from "@/components/gmy-back-touch/gmy-back-touch.vue"
export default {
components: {
'gmy-back-touch': gmyBackTouch
},
data() {
return {
devMode: config.devMode,
@@ -47,8 +62,9 @@
value: '',
value1: '',
isFlag: true,
// xuchao: 输入框背景由外层 .field 提供，组件内部保持透明
customStyle: {
background: '#f8f8f8',
background: 'transparent',
}
}
},
@@ -158,60 +174,85 @@
}
}
</script>
<style>
page {
background: #ffffff;
}
</style>
<style lang="less" scoped>
.auth_rq {
.auth_rq_input {
display: flex;
width: 610rpx;
height: 98rpx;
align-items: center;
padding-left: 40rpx;
margin-left: 70rpx;
background-color: #F8F8F8;
border-radius: 8px;
padding-right: 40rpx;
}
.page {
padding: 0 70rpx;
}
.auth_rq_image {
width: 164rpx;
height: 140rpx;
margin-top: 182rpx;
margin-left: 294rpx;
}
/* ---------- 品牌区 ---------- */
.brand {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 140rpx;
}
.auth_rq_view {
width: 750rpx;
text-align: center;
color: #0DD381;
font-size: 36rpx;
margin-top: 18rpx;
}
.brand__logo {
width: 164rpx;
height: 140rpx;
}
// xuchao: 开发模式提示条
.auth_rq_tips {
width: 610rpx;
margin: 40rpx 0 0 70rpx;
padding: 16rpx 24rpx;
box-sizing: border-box;
background-color: #FDF6EC;
color: #E6A23C;
font-size: 24rpx;
border-radius: 8px;
}
.brand__name {
margin-top: 20rpx;
font-size: 52rpx;
letter-spacing: 0.12em;
}
.auth_rq_button1 {
width: 610rpx;
margin-left: 70rpx;
margin-top: 80rpx;
height: 98rpx;
border-radius: 49rpx;
background-color: #488CFE;
color: #fff;
}
/* ---------- 开发模式提示条 ---------- */
.tips {
margin-top: 48rpx;
padding: 16rpx 24rpx;
background: rgba(0, 82, 255, 0.05);
border: 2rpx solid rgba(0, 82, 255, 0.15);
color: var(--mm-accent);
font-size: 24rpx;
border-radius: 16rpx;
text-align: center;
}
/* ---------- 表单 ---------- */
.field {
display: flex;
align-items: center;
height: 96rpx;
background: var(--mm-muted);
border-radius: 20rpx;
padding: 0 40rpx;
transition: box-shadow 0.2s ease;
}
.field--code {
margin-top: 32rpx;
}
.field__input {
flex: 1;
min-width: 0;
}
.field__code {
flex: none;
margin-left: 30rpx;
font-size: 26rpx;
color: var(--mm-accent);
}
.field__code--off {
color: var(--mm-muted-fg);
}
.login__btn {
margin-top: 80rpx;
}
.agree {
margin-top: 32rpx;
color: var(--mm-muted-fg);
font-size: 24rpx;
}
.agree__link {
color: var(--mm-accent);
}
</style>