refactor: 优化跨端导航适配与页面文案体验

- 新增微信小程序胶囊区域避让布局逻辑
- 统一首页导航与标题对齐规则
- 更新多处演示提示文案为正式表述
- 调整个人中心账户状态显示
- 优化产品页分享按钮条件渲染
This commit is contained in:
hujun
2026-09-20 14:18:55 +08:00
parent 69130d11e7
commit 046a03e5e9
12 changed files with 110 additions and 43 deletions
+5 -4
View File
@@ -3,7 +3,7 @@
<view class="status-bar" :style="statusStyle(0)"></view>
<view class="app-header">
<view class="header-side" @click="handleBack"><AppIcon v-if="back" name="chevron-right" :size="48" class="back-icon" /></view>
<text class="header-title">{{ title }}</text>
<view class="header-title-area" :style="navigationTitleStyle()"><text class="header-title">{{ title }}</text></view>
<view class="header-side header-right"><slot></slot></view>
</view>
</view>
@@ -11,7 +11,7 @@
<script setup lang="uts">
import { usePageLayout } from '@/services/layout.uts'
const { statusStyle } = usePageLayout()
const { statusStyle, navigationTitleStyle } = usePageLayout()
import AppIcon from '@/components/AppIcon.uvue'
const props = defineProps({ title: { type: String, default: '' }, back: { type: Boolean, default: true }, customBack: { type: Boolean, default: false } })
const emit = defineEmits(['back'])
@@ -27,9 +27,10 @@
<style>
.header-wrap { background-color: #ffffff; }
.status-bar { }
.app-header { height: 96rpx; padding: 0 24rpx; flex-direction: row; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #edf1f7; }
.app-header { height: 96rpx; padding: 0 24rpx; flex-direction: row; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #edf1f7; position: relative; }
.header-side { width: 88rpx; height: 96rpx; align-items: flex-start; justify-content: center; flex-shrink: 0; }
.header-right { align-items: flex-end; }
.back-icon { transform: rotate(180deg); margin-top: 0; }
.header-title { font-size: 34rpx; font-weight: 700; color: #111d35; }
.header-title-area { position: absolute; left: 112rpx; right: 112rpx; top: 0; bottom: 0; align-items: center; justify-content: center; }
.header-title { text-align: center; font-size: 34rpx; font-weight: 700; color: #111d35; }
</style>