refactor: 重构移动端页面布局与资源路径,优化打包配置
1. 新增layout.uts统一管理页面尺寸与安全区计算 2. 修正图片资源路径到static/mobile目录 3. 调整App.vue与AppIcon组件样式适配多端 4. 为微信小程序配置打包忽略规则减少包体积 5. 修复API请求错误抛出类型,完善类型定义 6. 补充README文档说明项目运行与维护规范 7. 优化多个页面的样式与生命周期逻辑
This commit is contained in:
+48
-17
@@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<view class="home-header"><view class="safe"></view><view class="home-bar"><BrandLogo /><view class="header-actions"><view class="round-action" @click="go('/pages/assistant/assistant')"><AppIcon name="sparkles" :size="34" /></view><view class="round-action notify" @click="go('/pages/messages/messages')"><AppIcon name="bell" :size="34" /><view class="red-dot"></view></view></view></view></view>
|
||||
<scroll-view scroll-y class="home-scroll">
|
||||
<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('/pages/assistant/assistant')"><AppIcon name="sparkles" :size="34" /></view><view class="round-action notify" @click="go('/pages/messages/messages')"><AppIcon name="bell" :size="34" /><view class="red-dot"></view></view></view></view></view>
|
||||
<scroll-view scroll-y class="home-scroll" :style="contentStyle(104, false)">
|
||||
<view class="home-content">
|
||||
<view class="ai-banner" @click="go('/pages/assistant/assistant')">
|
||||
<view class="banner-copy"><text class="banner-title">AI智能评估</text><text class="banner-subtitle">精准匹配融资方案</text><text class="banner-desc">让合适的资金主动找上您</text></view>
|
||||
<image class="robot-img" src="/static/images/robot-cutout.png" mode="aspectFit"></image>
|
||||
<image class="robot-img" src="/static/mobile/images/robot-cutout.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="entry-row">
|
||||
<view class="finance-entry personal" @click="openEntry('personal')"><view><text class="entry-title">个人信用融资</text><text class="entry-subtitle">个人/小微商户</text></view><image src="/static/images/personal-building-cutout.png" mode="aspectFit"></image></view>
|
||||
<view class="finance-entry enterprise" @click="openEntry('enterprise')"><view><text class="entry-title">企业信用融资</text><text class="entry-subtitle">企业/个体工商户</text></view><image src="/static/images/enterprise-building-cutout.png" mode="aspectFit"></image></view>
|
||||
<view class="finance-entry personal" @click="openEntry('personal')"><view><text class="entry-title">个人信用融资</text><text class="entry-subtitle">个人/小微商户</text></view><image src="/static/mobile/images/personal-building-cutout.png" mode="aspectFit" class="finance-entry-image"></image></view>
|
||||
<view class="finance-entry enterprise entry-following" @click="openEntry('enterprise')" ><view><text class="entry-title">企业信用融资</text><text class="entry-subtitle">企业/个体工商户</text></view><image src="/static/mobile/images/enterprise-building-cutout.png" mode="aspectFit" class="finance-entry-image"></image></view>
|
||||
</view>
|
||||
<view class="shortcut-row">
|
||||
<view class="shortcut" @click="go('/pages/classroom/classroom')"><view class="shortcut-icon green"><AppIcon name="trend-up" :size="46" /></view><text>融资课堂</text></view>
|
||||
@@ -20,7 +20,7 @@
|
||||
<view class="section-head"><text class="section-title">我的融资方案</text><text class="more" @click="go('/pages/matches/matches')">查看全部 ›</text></view>
|
||||
<view class="plan-card" @click="go('/pages/matches/matches')"><view class="plan-main"><text class="plan-name">信用优享方案</text><text class="plan-meta">3家机构可申请 · 最高50万</text></view><view class="score"><text class="score-number">85</text><text>综合分</text></view></view>
|
||||
<view class="section-head"><text class="section-title">融资课堂</text><text class="more" @click="go('/pages/classroom/classroom')">进入课堂 ›</text></view>
|
||||
<view class="news-preview" @click="go('/pages/classroom/classroom')"><view class="news-copy"><text class="news-title">如何提高个人贷款通过率</text><text class="news-meta">信用管理 · 6分钟阅读</text></view><image class="news-art" src="/static/images/news-calculator.png" mode="aspectFill"></image></view>
|
||||
<view class="news-preview" @click="go('/pages/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>
|
||||
</scroll-view>
|
||||
<BottomNav active="home" />
|
||||
@@ -28,6 +28,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { usePageLayout } from '@/services/layout.uts'
|
||||
const { contentStyle, statusStyle, pageStyle } = usePageLayout()
|
||||
import BrandLogo from '@/components/BrandLogo.uvue'
|
||||
import BottomNav from '@/components/BottomNav.uvue'
|
||||
import AppIcon from '@/components/AppIcon.uvue'
|
||||
@@ -36,18 +38,47 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.home-header { background-color: #ffffff; }.safe { height: var(--status-bar-height); }
|
||||
.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; border-radius: 50%; background-color: #eef5ff; align-items: center; justify-content: center; margin-left: 16rpx; position: relative; }
|
||||
.header-actions { flex-direction: row; }
|
||||
.round-action { width: 62rpx; height: 62rpx; border-radius: 50%; background-color: #eef5ff; align-items: center; justify-content: center; margin-left: 16rpx; position: relative; }
|
||||
.red-dot { position: absolute; width: 13rpx; height: 13rpx; right: 2rpx; top: 0; background-color: #ff4d4f; border-radius: 50%; border: 3rpx solid #fff; }
|
||||
.home-scroll { height: calc(100vh - var(--status-bar-height) - 104rpx); }.home-content { padding: 18rpx 28rpx 180rpx; }
|
||||
.home-scroll { }
|
||||
.home-content { padding: 18rpx 28rpx 180rpx; }
|
||||
.ai-banner { height: 260rpx; border-radius: 20rpx; padding: 32rpx; overflow: hidden; flex-direction: row; align-items: center; background: linear-gradient(125deg, #1263f0 0%, #0788ff 100%); box-shadow: 0 16rpx 36rpx rgba(0, 100, 237, .20); }
|
||||
.banner-copy { z-index: 2; }.banner-title { color: #ffffff; font-size: 39rpx; font-weight: 800; }.banner-subtitle { color: #ffffff; font-size: 30rpx; font-weight: 700; margin-top: 12rpx; }.banner-desc { color: #dceeff; font-size: 22rpx; margin-top: 14rpx; }
|
||||
.banner-copy { z-index: 2; }
|
||||
.banner-title { color: #ffffff; font-size: 39rpx; font-weight: 800; }
|
||||
.banner-subtitle { color: #ffffff; font-size: 30rpx; font-weight: 700; margin-top: 12rpx; }
|
||||
.banner-desc { color: #dceeff; font-size: 22rpx; margin-top: 14rpx; }
|
||||
.robot-img { position: absolute; right: 5rpx; width: 270rpx; height: 235rpx; }
|
||||
.entry-row { flex-direction: row; margin-top: 22rpx; }.finance-entry { flex: 1; height: 180rpx; border-radius: 18rpx; padding: 26rpx 22rpx; flex-direction: row; overflow: hidden; position: relative; }.finance-entry + .finance-entry { margin-left: 18rpx; }.personal { background-color: #eaf3ff; }.enterprise { background-color: #fff1e7; }
|
||||
.finance-entry image { position: absolute; width: 150rpx; height: 135rpx; right: -8rpx; bottom: -8rpx; }.entry-title { font-size: 29rpx; font-weight: 800; }.personal .entry-title { color: #0868f7; }.enterprise .entry-title { color: #ff7115; }.entry-subtitle { margin-top: 10rpx; color: #65738a; font-size: 21rpx; }
|
||||
.shortcut-row { height: 160rpx; margin-top: 24rpx; flex-direction: row; align-items: center; justify-content: space-between; background-color: #fff; border-radius: 18rpx; padding: 0 8rpx; border: 1rpx solid #eaf0f7; }.shortcut { flex: 1; align-items: center; color: #536176; font-size: 18rpx; white-space: nowrap; text-align: center; }.shortcut-icon { width: 76rpx; height: 76rpx; border-radius: 24rpx; align-items: center; justify-content: center; margin-bottom: 10rpx; }.green { background-color: #e7f8f1; }.purple { background-color: #efebff; }.blue { background-color: #e8f2ff; }.orange { background-color: #fff0e8; }
|
||||
.section-head { margin-top: 34rpx; margin-bottom: 18rpx; flex-direction: row; justify-content: space-between; align-items: center; }.more { color: #1673ed; font-size: 22rpx; }
|
||||
.plan-card { height: 150rpx; background-color: #fff; border: 1rpx solid #e6edf7; border-radius: 16rpx; padding: 26rpx; flex-direction: row; align-items: center; justify-content: space-between; }.plan-name { font-size: 29rpx; font-weight: 700; }.plan-meta { margin-top: 12rpx; color: #8290a5; font-size: 22rpx; }.score { align-items: center; color: #18aa78; font-size: 19rpx; }.score-number { font-size: 48rpx; line-height: 52rpx; color: #0868f7; font-weight: 800; }
|
||||
.news-preview { min-height: 130rpx; background-color: #fff; border-radius: 16rpx; padding: 24rpx; flex-direction: row; justify-content: space-between; align-items: center; border: 1rpx solid #e6edf7; }.news-copy { flex: 1; padding-right: 16rpx; }.news-title { font-size: 27rpx; font-weight: 700; }.news-meta { margin-top: 14rpx; font-size: 21rpx; color: #94a0b1; }.news-art { width: 118rpx; height: 82rpx; border-radius: 10rpx; flex-shrink: 0; }
|
||||
.entry-row { flex-direction: row; margin-top: 22rpx; }
|
||||
.finance-entry { flex: 1; height: 180rpx; border-radius: 18rpx; padding: 26rpx 22rpx; flex-direction: row; overflow: hidden; position: relative; }
|
||||
.entry-following { margin-left: 18rpx; }
|
||||
.personal { background-color: #eaf3ff; }
|
||||
.enterprise { background-color: #fff1e7; }
|
||||
.finance-entry-image { position: absolute; width: 150rpx; height: 135rpx; right: -8rpx; bottom: -8rpx; }
|
||||
.entry-title { font-size: 29rpx; font-weight: 800; }
|
||||
.personal .entry-title { color: #0868f7; }
|
||||
.enterprise .entry-title { color: #ff7115; }
|
||||
.entry-subtitle { margin-top: 10rpx; color: #65738a; font-size: 21rpx; }
|
||||
.shortcut-row { height: 160rpx; margin-top: 24rpx; flex-direction: row; align-items: center; justify-content: space-between; background-color: #fff; border-radius: 18rpx; padding: 0 8rpx; border: 1rpx solid #eaf0f7; }
|
||||
.shortcut { flex: 1; align-items: center; color: #536176; font-size: 18rpx; white-space: nowrap; text-align: center; }
|
||||
.shortcut-icon { width: 76rpx; height: 76rpx; border-radius: 24rpx; align-items: center; justify-content: center; margin-bottom: 10rpx; }
|
||||
.green { background-color: #e7f8f1; }
|
||||
.purple { background-color: #efebff; }
|
||||
.blue { background-color: #e8f2ff; }
|
||||
.orange { background-color: #fff0e8; }
|
||||
.section-head { margin-top: 34rpx; margin-bottom: 18rpx; flex-direction: row; justify-content: space-between; align-items: center; }
|
||||
.more { color: #1673ed; font-size: 22rpx; }
|
||||
.plan-card { height: 150rpx; background-color: #fff; border: 1rpx solid #e6edf7; border-radius: 16rpx; padding: 26rpx; flex-direction: row; align-items: center; justify-content: space-between; }
|
||||
.plan-name { font-size: 29rpx; font-weight: 700; }
|
||||
.plan-meta { margin-top: 12rpx; color: #8290a5; font-size: 22rpx; }
|
||||
.score { align-items: center; color: #18aa78; font-size: 19rpx; }
|
||||
.score-number { font-size: 48rpx; line-height: 52rpx; color: #0868f7; font-weight: 800; }
|
||||
.news-preview { min-height: 130rpx; background-color: #fff; border-radius: 16rpx; padding: 24rpx; flex-direction: row; justify-content: space-between; align-items: center; border: 1rpx solid #e6edf7; }
|
||||
.news-copy { flex: 1; padding-right: 16rpx; }
|
||||
.news-title { font-size: 27rpx; font-weight: 700; }
|
||||
.news-meta { margin-top: 14rpx; font-size: 21rpx; color: #94a0b1; }
|
||||
.news-art { width: 118rpx; height: 82rpx; border-radius: 10rpx; flex-shrink: 0; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user