xuchao/hhrs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 含hhrs_back返回图标的页面统一改为顶部导航条(返回+页面名称)

Browse Source 
门店详情(标题=门店名)、手机号登录、权益资格认证三页移除底部悬浮返回图标，
改为标准顶部导航；门店详情页面容器改 min-height 避免加高后底部裁切。

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
jacobxu666
2026-08-28 22:13:05 +08:00
co-authored by Claude Fable 5
parent bc2fb1715b
commit 8a24dd033c
3 changed files with 96 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/index/login.vue
+32 -20
View File
@@ -1,5 +1,12 @@
<template>
<view class="page">
<!-- xuchao: 顶部导航（返回+页面名称） -->
<view class="nav-bar">
<view class="nav-back" @click="goBack">
<u-icon name="arrow-left" color="#1a1818" size="40"></u-icon>
</view>
<text class="nav-title">手机号登录</text>
</view>
<!-- 标题区 -->
<view class="title-area">
<text class="title">手机号登录</text>
@@ -32,12 +39,6 @@
<text class="agreement-text" @click="agreed = !agreed">和</text>
<text class="agreement-link" @click.stop="goAgreement('privacy')">《隐私协议》</text>
</view>
<!-- 返回按钮 -->
<view class="back-btn" @click="goBack">
<image class="back-icon" src="https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/hhrs/hhrs_back.png" mode="aspectFit"></image>
<text class="back-text">返回上一页</text>
</view>
</view>
</template>
@@ -264,24 +265,35 @@ export default {
color: #0088FF;
}
/* 返回按钮 */
.back-btn {
position: fixed;
left: 24px;
bottom: 50px;
/* xuchao: 顶部返回导航条（负外边距抵消页面左右 padding，通栏展示） */
.nav-bar {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.back-icon {
width: 44px;
height: 44px;
background-color: #ffffff;
border-bottom: 1px solid #f0f0f0;
position: relative;
margin: 0 -40rpx;
}
.back-text {
font-size: 12px;
color: #666666;
.nav-back {
position: absolute;
left: 12px;
top: 0;
bottom: 0;
display: flex;
align-items: center;
}
.nav-title {
flex: 1;
text-align: center;
font-size: 17px;
font-weight: 500;
color: #1a1818;
padding: 0 56px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
pages/rights/rights.vue
+31 -20
View File
@@ -1,15 +1,17 @@
<template>
<view class="page" :class="{ 'page-auth': status === 'auth' }">
<!-- xuchao: 顶部导航（返回+页面名称，认证状态使用） -->
<view class="nav-bar" v-if="status === 'auth'">
<view class="nav-back" @click="goBack">
<u-icon name="arrow-left" color="#1a1818" size="40"></u-icon>
</view>
<text class="nav-title">权益资格认证</text>
</view>
<!-- 返回按钮（顶部，非auth状态） -->
<view class="back-btn" :class="{ 'back-btn--black': status === 'noWin' }" @click="goBack" v-if="status !== 'auth'">
<u-icon name="arrow-left" :color="status === 'noWin' ? '#000000' : '#ffffff'" size="40"></u-icon>
<text class="back-text">返回</text>
</view>
<!-- 返回按钮（底部，auth状态） -->
<view class="back-btn-bottom" @click="goBack" v-if="status === 'auth'">
<image class="back-icon" src="https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/hhrs/hhrs_back.png" mode="aspectFit"></image>
<text class="back-text-bottom">返回上一页</text>
</view>
<!-- 状态1: 权益资格认证 -->
<view v-if="status === 'auth'" class="auth-container">
<view class="section-title">
@@ -962,25 +964,34 @@
color: #000000;
}
/* 底部返回按钮 */
.back-btn-bottom {
position: fixed;
left: 24px;
bottom: 50px;
/* xuchao: 顶部返回导航条（auth状态） */
.nav-bar {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
z-index: 10;
}
.back-icon {
width: 44px;
height: 44px;
background-color: #ffffff;
border-bottom: 1px solid #f0f0f0;
position: relative;
}
.back-text-bottom {
font-size: 12px;
color: #666666;
.nav-back {
position: absolute;
left: 12px;
top: 0;
bottom: 0;
display: flex;
align-items: center;
}
.nav-title {
flex: 1;
text-align: center;
font-size: 17px;
font-weight: 500;
color: #1a1818;
padding: 0 56px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
pages/venue/detail.vue
+33 -22
View File
@@ -1,5 +1,12 @@
<template>
<view class="page" v-if="store">
<!-- xuchao: 顶部导航（返回+页面名称） -->
<view class="nav-bar">
<view class="nav-back" @click="goBack">
<u-icon name="arrow-left" color="#1a1818" size="40"></u-icon>
</view>
<text class="nav-title">{{ store.name }}</text>
</view>
<!-- 门店信息卡片（信息+地址合并容器） -->
<view class="store-card">
<view class="store-main">
@@ -55,12 +62,6 @@
<text class="discount-item" v-for="(item, index) in discountList" :key="index">{{ item }}</text>
</view>
</view>
<!-- 返回按钮 -->
<view class="back-btn" @click="goBack">
<image class="back-icon" src="https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/hhrs/hhrs_back.png" mode="aspectFit"></image>
<text class="back-text">返回上一页</text>
</view>
</view>
</template>
@@ -139,9 +140,9 @@ export default {
<style>
.page {
height: 100vh;
/* xuchao: 顶部导航条占用 44px，改为 min-height 让长内容正常滚动，避免底部被裁切 */
min-height: 100vh;
background-color: #f2f2f7;
overflow: hidden;
}
/* 门店卡片（信息+地址合并容器） */
@@ -269,24 +270,34 @@ export default {
color: #0088ff;
}
/* 返回按钮 */
.back-btn {
position: fixed;
left: 24px;
bottom: 50px;
/* xuchao: 顶部返回导航条 */
.nav-bar {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.back-icon {
width: 44px;
height: 44px;
background-color: #ffffff;
border-bottom: 1px solid #f0f0f0;
position: relative;
}
.back-text {
font-size: 12px;
color: #666666;
.nav-back {
position: absolute;
left: 12px;
top: 0;
bottom: 0;
display: flex;
align-items: center;
}
.nav-title {
flex: 1;
text-align: center;
font-size: 17px;
font-weight: 500;
color: #1a1818;
padding: 0 56px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>