refactor: 重构移动端页面布局与资源路径,优化打包配置
1. 新增layout.uts统一管理页面尺寸与安全区计算 2. 修正图片资源路径到static/mobile目录 3. 调整App.vue与AppIcon组件样式适配多端 4. 为微信小程序配置打包忽略规则减少包体积 5. 修复API请求错误抛出类型,完善类型定义 6. 补充README文档说明项目运行与维护规范 7. 优化多个页面的样式与生命周期逻辑
This commit is contained in:
+29
-7
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view :class="type == 'enterprise' ? 'page entry-page enterprise-page' : 'page entry-page'">
|
||||
<view :class="type == 'enterprise' ? 'page entry-page enterprise-page' : 'page entry-page'" :style="pageStyle()">
|
||||
<AppHeader :title="type == 'enterprise' ? '企业信用融资' : '个人信用融资'" />
|
||||
<view class="entry-content">
|
||||
<view class="intro-panel">
|
||||
@@ -8,7 +8,7 @@
|
||||
<text class="intro-sub">{{ type == 'enterprise' ? '适合企业 / 个体工商户' : '适合有稳定收入的个人用户' }}</text>
|
||||
<view class="benefit" v-for="item in benefits" :key="item"><AppIcon name="check-circle" :size="30" /><text>{{ item }}</text></view>
|
||||
</view>
|
||||
<image class="entry-image" :src="type == 'enterprise' ? '/static/images/enterprise-building-cutout.png' : '/static/images/personal-building-cutout.png'" mode="aspectFit"></image>
|
||||
<image class="entry-image" :src="type == 'enterprise' ? '/static/mobile/images/enterprise-building-cutout.png' : '/static/mobile/images/personal-building-cutout.png'" mode="aspectFit"></image>
|
||||
</view>
|
||||
<button :class="type == 'enterprise' ? 'orange-button start-button' : 'primary-button start-button'" @click="start">开始评估</button>
|
||||
<view class="process-block">
|
||||
@@ -25,6 +25,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { usePageLayout } from '@/services/layout.uts'
|
||||
const { pageStyle } = usePageLayout()
|
||||
import AppHeader from '@/components/AppHeader.uvue'
|
||||
import AppIcon from '@/components/AppIcon.uvue'
|
||||
const type = ref('personal')
|
||||
@@ -39,10 +41,30 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.entry-content { padding: 28rpx; }.intro-panel { min-height: 430rpx; background: linear-gradient(145deg, #eef6ff, #ffffff); border-radius: 20rpx; border: 1rpx solid #dce9fb; padding: 38rpx 28rpx; flex-direction: row; position: relative; overflow: hidden; }.enterprise-page .intro-panel { background: linear-gradient(145deg, #fff5ec, #ffffff); border-color: #ffe2cd; }
|
||||
.intro-copy { width: 63%; z-index: 2; }.intro-title { font-size: 42rpx; line-height: 56rpx; font-weight: 900; color: #0868f7; }.enterprise-page .intro-title { color: #f36b12; }.intro-sub { font-size: 23rpx; color: #5f6d82; margin-top: 8rpx; margin-bottom: 30rpx; }
|
||||
.benefit { flex-direction: row; align-items: center; margin-top: 18rpx; color: #23324a; font-size: 25rpx; font-weight: 600; }.benefit .app-icon { margin-right: 12rpx; }.enterprise-page .benefit .app-icon { filter: hue-rotate(330deg) saturate(1.7); }
|
||||
.entry-image { position: absolute; width: 285rpx; height: 300rpx; right: -35rpx; bottom: -22rpx; }.start-button { margin-top: 30rpx; }
|
||||
.process-block { margin-top: 48rpx; }.process-row { flex-direction: row; align-items: center; justify-content: space-between; margin-top: 34rpx; padding: 0 20rpx; }.process-item { align-items: center; color: #455369; font-size: 22rpx; }.process-icon { width: 88rpx; height: 88rpx; border-radius: 26rpx; background-color: #e9f2ff; align-items: center; justify-content: center; margin-bottom: 14rpx; }.enterprise-page .process-icon { background-color: #fff0e5; }.enterprise-page .process-icon .app-icon { filter: hue-rotate(330deg) saturate(1.7); }.arrow { margin-top: -28rpx; }
|
||||
.entry-content { padding: 28rpx; }
|
||||
.intro-panel { min-height: 430rpx; background: linear-gradient(145deg, #eef6ff, #ffffff); border-radius: 20rpx; border: 1rpx solid #dce9fb; padding: 38rpx 28rpx; flex-direction: row; position: relative; overflow: hidden; }
|
||||
.enterprise-page .intro-panel { background: linear-gradient(145deg, #fff5ec, #ffffff); border-color: #ffe2cd; }
|
||||
.intro-copy { width: 63%; z-index: 2; }
|
||||
.intro-title { font-size: 42rpx; line-height: 56rpx; font-weight: 900; color: #0868f7; }
|
||||
.enterprise-page .intro-title { color: #f36b12; }
|
||||
.intro-sub { font-size: 23rpx; color: #5f6d82; margin-top: 8rpx; margin-bottom: 30rpx; }
|
||||
.benefit { flex-direction: row; align-items: center; margin-top: 18rpx; color: #23324a; font-size: 25rpx; font-weight: 600; }
|
||||
.benefit .app-icon { margin-right: 12rpx; }
|
||||
/* #ifndef APP */
|
||||
.enterprise-page .benefit .app-icon { filter: hue-rotate(330deg) saturate(1.7); }
|
||||
/* #endif */
|
||||
|
||||
.entry-image { position: absolute; width: 285rpx; height: 300rpx; right: -35rpx; bottom: -22rpx; }
|
||||
.start-button { margin-top: 30rpx; }
|
||||
.process-block { margin-top: 48rpx; }
|
||||
.process-row { flex-direction: row; align-items: center; justify-content: space-between; margin-top: 34rpx; padding: 0 20rpx; }
|
||||
.process-item { align-items: center; color: #455369; font-size: 22rpx; }
|
||||
.process-icon { width: 88rpx; height: 88rpx; border-radius: 26rpx; background-color: #e9f2ff; align-items: center; justify-content: center; margin-bottom: 14rpx; }
|
||||
.enterprise-page .process-icon { background-color: #fff0e5; }
|
||||
/* #ifndef APP */
|
||||
.enterprise-page .process-icon .app-icon { filter: hue-rotate(330deg) saturate(1.7); }
|
||||
/* #endif */
|
||||
|
||||
.arrow { margin-top: -28rpx; }
|
||||
.privacy-tip { margin-top: 55rpx; align-items: center; color: #97a3b4; font-size: 21rpx; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user