refactor: 优化跨端导航适配与页面文案体验
- 新增微信小程序胶囊区域避让布局逻辑 - 统一首页导航与标题对齐规则 - 更新多处演示提示文案为正式表述 - 调整个人中心账户状态显示 - 优化产品页分享按钮条件渲染
This commit is contained in:
+10
-12
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user