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
+10 -12
View File
@@ -2,12 +2,9 @@
<view class="page" :style="pageStyle()">
<view class="home-header">
<view class="safe" :style="statusStyle(0)"></view>
<view class="home-bar">
<BrandLogo />
<view class="header-actions">
<view class="round-action" @click="go('/packages/finance/assistant/assistant')">
<view class="action-surface"><image class="header-icon" src="/static/icons/sparkles.svg" mode="aspectFit" /></view>
</view>
<view class="home-bar" :style="navigationStyle()">
<view class="home-brand" :style="navigationBrandStyle(104)"><BrandLogo /></view>
<view class="header-actions" :style="navigationActionStyle(104)">
<view class="round-action notify" @click="go('/packages/account/messages/messages')">
<view class="action-surface"><image class="header-icon" src="/static/icons/bell.svg" mode="aspectFit" /></view>
<view v-if="hasUnread" class="red-dot"></view>
@@ -33,7 +30,7 @@
</view>
<view class="archive-entry" @click="go('/packages/finance/archive/archive')"><AppIcon name="archive" :size="42" /><text class="archive-label">我的融资档案</text><text class="archive-action">去完善</text><AppIcon name="chevron-right" :size="28" /></view>
<view class="section-head"><text class="section-title">我的融资方案</text><view class="more-link" @click="go('/packages/finance/matches/matches')"><text class="more">查看全部</text><AppIcon name="chevron-right" :size="24" /></view></view>
<view class="plan-card" @click="go('/packages/finance/matches/matches')"><view class="plan-main"><text class="plan-name">信用融资方案</text><text class="plan-meta">了解额度、利率与申请条件</text></view><view class="score"><text class="score-number">3</text><text class="score-label">示例方案</text></view></view>
<view class="plan-card" @click="go('/packages/finance/matches/matches')"><view class="plan-main"><text class="plan-name">信用融资方案</text><text class="plan-meta">了解额度、利率与申请条件</text></view><view class="score"><text class="score-number">3</text><text class="score-label">可查看方案</text></view></view>
<view class="section-head"><text class="section-title">融资课堂</text><view class="more-link" @click="go('/packages/content/classroom/classroom')"><text class="more">进入课堂</text><AppIcon name="chevron-right" :size="24" /></view></view>
<view class="news-preview" @click="go('/packages/content/classroom/classroom')"><view class="news-copy"><text class="news-title">如何提高个人贷款通过率</text><text class="news-meta">信用管理 · 6分钟阅读</text></view><image class="news-art" src="/static/mobile/images/news-calculator.png" mode="aspectFill"></image></view>
</view>
@@ -44,7 +41,7 @@
<script setup lang="uts">
import { usePageLayout } from '@/services/layout.uts'
const { contentStyle, statusStyle, pageStyle } = usePageLayout()
const { contentStyle, statusStyle, pageStyle, navigationStyle, navigationActionStyle, navigationBrandStyle } = usePageLayout()
import BrandLogo from '@/components/BrandLogo.uvue'
import BottomNav from '@/components/BottomNav.uvue'
import AppIcon from '@/components/AppIcon.uvue'
@@ -61,10 +58,11 @@
<style>
.home-header { background-color: #ffffff; }
.safe { }
.home-bar { height: 104rpx; padding: 0 28rpx; flex-direction: row; align-items: center; justify-content: space-between; }
.header-actions { flex-direction: row; }
.round-action { width: 62rpx; height: 62rpx; margin-left: 16rpx; position: relative; flex-shrink: 0; }
.action-surface { width: 62rpx; height: 62rpx; border-radius: 50%; background-color: #eef5ff; align-items: center; justify-content: center; }
.home-bar { height: 104rpx; padding: 0 28rpx; flex-direction: row; align-items: center; justify-content: space-between; position: relative; }
.home-brand { flex-shrink: 0; justify-content: center; }
.header-actions { width: 62rpx; height: 62rpx; margin-left: 16rpx; flex-shrink: 0; }
.round-action { width: 100%; height: 100%; position: relative; flex-shrink: 0; }
.action-surface { width: 100%; height: 100%; border-radius: 50%; background-color: #eef5ff; align-items: center; justify-content: center; }
.header-icon { width: 36rpx; height: 36rpx; flex-shrink: 0; }
/* 红点与圆形背景同级,避免被跨端 view 的圆角裁切。 */
.red-dot { position: absolute; width: 16rpx; height: 16rpx; right: 2rpx; top: 2rpx; z-index: 1; background-color: #ff4d4f; border-radius: 50%; border: 2rpx solid #fff; }