root/airz-uniapp
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: 重构移动端页面布局与资源路径，优化打包配置

Browse Source 
1. 新增layout.uts统一管理页面尺寸与安全区计算
2. 修正图片资源路径到static/mobile目录
3. 调整App.vue与AppIcon组件样式适配多端
4. 为微信小程序配置打包忽略规则减少包体积
5. 修复API请求错误抛出类型，完善类型定义
6. 补充README文档说明项目运行与维护规范
7. 优化多个页面的样式与生命周期逻辑
This commit is contained in:
hujun
2026-09-15 16:16:55 +08:00
parent 626cef9d38
commit b0ee4f9d7e
67 changed files with 80727 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/product/product.uvue
+33 -9
View File
@@ -1,20 +1,22 @@
<template>
<view class="page">
<view class="page" :style="pageStyle()">
<AppHeader title="产品详情"><text class="share">分享</text></AppHeader>
<scroll-view scroll-y class="product-scroll">
<scroll-view scroll-y class="product-scroll" :style="contentStyle(220, false)">
<view class="product-content">
<view class="bank-head"><view class="bank-mark"><AppIcon name="building" :size="42" /></view><view><text class="product-name">招商银行·闪电贷</text><text class="product-tags">个人信用贷　线上申请　快速放款</text></view></view>
<view class="product-metrics"><view><text class="metric-label">最高额度</text><text class="amount">50万</text></view><view><text class="metric-label">年利率</text><text class="rate">3.85%</text></view><view><text class="metric-label">贷款期限</text><text class="term">12-36期</text></view></view>
<view class="product-metrics"><view class="product-metrics-view"><text class="metric-label">最高额度</text><text class="amount">50万</text></view><view class="product-metrics-view"><text class="metric-label">年利率</text><text class="rate">3.85%</text></view><view class="product-metrics-view product-metrics-view-last-child"><text class="metric-label">贷款期限</text><text class="term">12-36期</text></view></view>
<view class="detail-section"><text class="section-title">产品优势</text><view class="advantage-grid"><view class="advantage" v-for="item in advantages" :key="item"><AppIcon name="check-circle" :size="30" /><text>{{ item }}</text></view></view></view>
<view class="detail-section"><text class="section-title">申请条件</text><view class="condition"><text>年龄要求</text><text>22-55周岁</text></view><view class="condition"><text>工作要求</text><text>现单位满6个月</text></view><view class="condition"><text>信用要求</text><text>近两年无严重逾期</text></view></view>
<view class="detail-section"><text class="section-title">申请条件</text><view class="condition"><text>年龄要求</text><text class="condition-text-last-child">22-55周岁</text></view><view class="condition"><text>工作要求</text><text class="condition-text-last-child">现单位满6个月</text></view><view class="condition"><text>信用要求</text><text class="condition-text-last-child">近两年无严重逾期</text></view></view>
<view class="detail-section"><text class="section-title">所需材料</text><text class="material">身份证 · 银行卡 · 收入证明</text></view>
</view>
</scroll-view>
<view class="apply-bar"><button class="primary-button apply-button" @click="apply">立即申请</button></view>
<view class="apply-bar" :style="bottomStyle(18)"><button class="primary-button apply-button" @click="apply">立即申请</button></view>
</view>
</template>
<script setup lang="uts">
import { usePageLayout } from '@/services/layout.uts'
const { bottomStyle, contentStyle, pageStyle } = usePageLayout()
import AppHeader from '@/components/AppHeader.uvue'
import AppIcon from '@/components/AppIcon.uvue'
const advantages = ['线上申请', '额度高', '审批快速', '利率低', '无抵押', '无担保']
@@ -22,8 +24,30 @@
</script>
<style>
.share { color: #0868f7; font-size: 23rpx; }.product-scroll { height: calc(100vh - var(--status-bar-height) - 220rpx); }.product-content { padding: 26rpx 28rpx 130rpx; }.bank-head { min-height: 150rpx; padding: 26rpx; border-radius: 18rpx; background-color: #fff; border: 1rpx solid #e6edf6; flex-direction: row; align-items: center; }.bank-mark { width: 84rpx; height: 84rpx; border-radius: 50%; background-color: #e8192c; align-items: center; justify-content: center; margin-right: 22rpx; }.bank-mark .app-icon { filter: brightness(0) invert(1); }.product-name { font-size: 30rpx; font-weight: 800; }.product-tags { color: #8794a8; font-size: 20rpx; margin-top: 11rpx; }
.product-metrics { min-height: 180rpx; margin-top: 20rpx; padding: 34rpx 15rpx; border-radius: 18rpx; background-color: #fff; border: 1rpx solid #e6edf6; flex-direction: row; }.product-metrics view { flex: 1; align-items: center; border-right: 1rpx solid #edf1f6; }.product-metrics view:last-child { border-right: 0; }.metric-label { color: #8491a5; font-size: 21rpx; }.amount, .rate, .term { margin-top: 16rpx; font-size: 34rpx; font-weight: 800; }.rate { color: #0868f7; }
.detail-section { margin-top: 22rpx; padding: 28rpx; background-color: #fff; border-radius: 18rpx; border: 1rpx solid #e6edf6; }.advantage-grid { margin-top: 25rpx; flex-direction: row; flex-wrap: wrap; }.advantage { width: 50%; flex-direction: row; align-items: center; margin-bottom: 22rpx; font-size: 24rpx; color: #435168; }.advantage .app-icon { margin-right: 12rpx; }.condition { height: 80rpx; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1rpx solid #edf1f6; color: #667489; font-size: 24rpx; }.condition text:last-child { color: #1e2c43; font-weight: 600; }.material { margin-top: 22rpx; font-size: 24rpx; color: #657389; }
.apply-bar { position: fixed; left: 0; right: 0; bottom: 0; padding: 18rpx 28rpx calc(18rpx + env(safe-area-inset-bottom)); background-color: #fff; border-top: 1rpx solid #e7edf6; }.apply-button { margin: 0; }
.share { color: #0868f7; font-size: 23rpx; }
.product-scroll { }
.product-content { padding: 26rpx 28rpx 130rpx; }
.bank-head { min-height: 150rpx; padding: 26rpx; border-radius: 18rpx; background-color: #fff; border: 1rpx solid #e6edf6; flex-direction: row; align-items: center; }
.bank-mark { width: 84rpx; height: 84rpx; border-radius: 50%; background-color: #e8192c; align-items: center; justify-content: center; margin-right: 22rpx; }
/* #ifndef APP */
.bank-mark .app-icon { filter: brightness(0) invert(1); }
/* #endif */
.product-name { font-size: 30rpx; font-weight: 800; }
.product-tags { color: #8794a8; font-size: 20rpx; margin-top: 11rpx; }
.product-metrics { min-height: 180rpx; margin-top: 20rpx; padding: 34rpx 15rpx; border-radius: 18rpx; background-color: #fff; border: 1rpx solid #e6edf6; flex-direction: row; }
.product-metrics-view { flex: 1; align-items: center; border-right: 1rpx solid #edf1f6; }
.product-metrics-view-last-child { border-right: 0; }
.metric-label { color: #8491a5; font-size: 21rpx; }
.amount, .rate, .term { margin-top: 16rpx; font-size: 34rpx; font-weight: 800; }
.rate { color: #0868f7; }
.detail-section { margin-top: 22rpx; padding: 28rpx; background-color: #fff; border-radius: 18rpx; border: 1rpx solid #e6edf6; }
.advantage-grid { margin-top: 25rpx; flex-direction: row; flex-wrap: wrap; }
.advantage { width: 50%; flex-direction: row; align-items: center; margin-bottom: 22rpx; font-size: 24rpx; color: #435168; }
.advantage .app-icon { margin-right: 12rpx; }
.condition { height: 80rpx; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1rpx solid #edf1f6; color: #667489; font-size: 24rpx; }
.condition-text-last-child { color: #1e2c43; font-weight: 600; }
.material { margin-top: 22rpx; font-size: 24rpx; color: #657389; }
.apply-bar { position: fixed; left: 0; right: 0; bottom: 0; padding: 18rpx 28rpx; background-color: #fff; border-top: 1rpx solid #e7edf6; }
.apply-button { margin: 0; }
</style>