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

门店详情(标题=门店名)、手机号登录、权益资格认证三页移除底部悬浮返回图标,
改为标准顶部导航;门店详情页面容器改 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
+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>