airz-uniapp/pages/home/home.uvue

<template>
	<view class="page" :style="pageStyle()">
		<view class="home-header">
			<view class="safe" :style="statusStyle(0)"></view>
			<view class="home-bar" :style="navigationStyle()">
				<view class="home-brand" :style="navigationBrandStyle(104)"><BrandLogo /></view>
				<view class="header-actions" :style="navigationActionStyle(104, 2)">
					<view class="round-action search-action" @click="go('/packages/content/search/search')">
						<view class="action-surface"><image class="header-icon" src="/static/icons/search.svg" mode="aspectFit" /></view>
					</view>
					<view class="round-action notify action-following" @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>
					</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('/packages/finance/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/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/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('/packages/content/classroom/classroom')"><view class="shortcut-icon"><AppIcon name="file-text" :size="60" /></view><text class="shortcut-label">融资课堂</text></view>
					<view class="shortcut" @click="go('/packages/finance/assistant/assistant')"><view class="shortcut-icon"><AppIcon name="sparkles" :size="60" /></view><text class="shortcut-label">AI融资助手</text></view>
					<view class="shortcut" @click="go('/packages/finance/entry/entry?type=personal')"><view class="shortcut-icon"><AppIcon name="calculator" :size="60" /></view><text class="shortcut-label">融资测算</text></view>
					<view class="shortcut" @click="go('/packages/account/points/points')"><view class="shortcut-icon"><AppIcon name="gift" :size="60" /></view><text class="shortcut-label">邀请有礼</text></view>
				</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="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>
		</scroll-view>
		<BottomNav active="home" />
	</view>
</template>

<script setup lang="uts">
	import { getUserStorage } from '@/services/storage.uts'

	import { usePageLayout } from '@/services/layout.uts'
	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'
	import { consumeInitialLaunch } from '@/services/launch.uts'
	onLoad(() => {
		if (consumeInitialLaunch()) uni.reLaunch({ url: '/packages/account/index/index' })
	})
	const hasUnread = ref(true)
	onShow(() => { hasUnread.value = getUserStorage('finance.notice.read.assessment-guide') != true })
	const go = (url: string) => { uni.navigateTo({ url: url }) }
	const openEntry = (type: string) => { go('/packages/finance/entry/entry?type=' + type) }
</script>

<style>
	.home-header { background-color: #ffffff; }
	.safe {  }
	.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: 140rpx; height: 62rpx; margin-left: 16rpx; flex-shrink: 0; flex-direction: row; }
	.round-action { flex: 1; height: 100%; position: relative; }
	.action-following { margin-left: 16rpx; }
	.action-surface { width: 100%; height: 100%; align-items: center; justify-content: center; }
	.header-icon { width: 36rpx; height: 36rpx; flex-shrink: 0; }
	/* 红点独立定位，不影响图标居中及点击区域。 */
	.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; }
	.home-scroll {  }
	.home-content { padding: 18rpx 28rpx 180rpx; }
	.ai-banner { height: 246rpx; border-radius: 20rpx; padding: 30rpx; overflow: hidden; flex-direction: row; align-items: center; position: relative; background: linear-gradient(125deg, #1263f0 0%, #0788ff 100%); }
	.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: 0; width: 240rpx; height: 220rpx; }
	.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: #126df1; }
	.enterprise { background-color: #ff821c; }
	.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: #ffffff; }
	.enterprise .entry-title { color: #ffffff; }
	.entry-subtitle { margin-top: 10rpx; color: #ffffff; 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; }
	.shortcut-label { font-size: 23rpx; color: #34445c; text-align: center; }
	.archive-entry { margin-top: 20rpx; padding: 20rpx 24rpx; flex-direction: row; align-items: center; background-color: #ffffff; border: 1rpx solid #e6edf7; border-radius: 16rpx; }
	.archive-label { flex: 1; margin-left: 16rpx; font-size: 27rpx; font-weight: 600; color: #243650; }
	.archive-action { color: #0868f7; font-size: 23rpx; margin-right: 8rpx; }
	.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; }
	.more-link { flex-direction: row; align-items: center; }
	.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; }
	.score-label { color: #718198; font-size: 21rpx; }
	.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>