airz-uniapp/packages/finance/report/report.uvue

<template>
	<view class="page" :style="pageStyle()">
		<AppHeader title="融资需求报告" />
		<scroll-view scroll-y class="report-scroll" :style="contentStyle(96, false)">
			<view class="report-content">
				<view class="score-panel"><text class="score-label">综合评分</text><view class="score-row"><text class="big-score">85</text><text class="score-unit">分</text><text class="score-badge">良好</text></view><text class="score-caption">从五个维度了解融资资质</text></view>
				<view class="radar-panel"><image class="radar-image" src="/packages/finance/static/finance-radar.png" mode="aspectFit"></image><text class="radar-label top">还款能力</text><text class="radar-label left">收入稳定</text><text class="radar-label right">信用状况</text><text class="radar-label bottom-left">资产条件</text><text class="radar-label bottom-right">负债情况</text></view>
				<view class="conclusion"><text class="section-title">评估结论</text><text class="conclusion-text">可进一步比较信用融资产品的额度、期限与还款安排，结合自身需求选择合适方案。</text><view class="suggest-row"><text class="suggest-label">建议期限</text><text class="suggest-value">6–36个月</text></view><text class="report-note">报告内容仅供参考，实际融资结果以授权资料和机构审核为准。</text></view>
				<button class="primary-button" @click="viewMatches">查看匹配方案</button>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="uts">
	import { usePageLayout } from '@/services/layout.uts'
	const { contentStyle, pageStyle } = usePageLayout()
	import AppHeader from '@/components/AppHeader.uvue'
	const viewMatches = () => { uni.navigateTo({ url: '/packages/finance/matches/matches' }) }
</script>

<style>
	.report-scroll {  }
	.report-content { padding: 28rpx 30rpx 80rpx; }
	.score-panel { background-color: #fff; border-radius: 18rpx; padding: 30rpx; border: 1rpx solid #e7edf6; }
	.score-label { font-size: 24rpx; color: #6f7d91; }
	.score-row { flex-direction: row; align-items: flex-end; margin-top: 8rpx; }
	.big-score { color: #102557; font-size: 82rpx; line-height: 90rpx; font-weight: 900; }
	.score-unit { font-size: 28rpx; margin: 0 16rpx 14rpx 5rpx; }
	.score-badge { padding: 8rpx 17rpx; border-radius: 10rpx; background-color: #e5f8ee; color: #0ba868; font-size: 22rpx; margin-bottom: 15rpx; }
	.score-caption { color: #8793a6; font-size: 22rpx; margin-top: 6rpx; }
	.radar-panel { height: 370rpx; margin-top: 20rpx; border-radius: 18rpx; background-color: #fff; border: 1rpx solid #e7edf6; align-items: center; justify-content: center; position: relative; overflow: hidden; }
	.radar-image { width: 340rpx; height: 310rpx; }
	.radar-core { position: absolute; width: 92rpx; height: 92rpx; left: 50%; top: 50%; margin-left: -46rpx; margin-top: -46rpx; border-radius: 50%; background-color: #0868f7; align-items: center; justify-content: center; color: white; font-size: 34rpx; font-weight: 800; box-shadow: 0 0 32rpx rgba(8,104,247,.28); }
	.radar-label { position: absolute; color: #58667b; font-size: 21rpx; }
	.top { top: 28rpx; }
	.left { left: 27rpx; top: 162rpx; }
	.right { right: 27rpx; top: 162rpx; }
	.bottom-left { left: 95rpx; bottom: 32rpx; }
	.bottom-right { right: 86rpx; bottom: 32rpx; }
	.conclusion { margin: 24rpx 0 32rpx; background-color: #fff; border-radius: 18rpx; padding: 28rpx; border: 1rpx solid #e7edf6; }
	.conclusion-text { margin-top: 18rpx; font-size: 24rpx; color: #59677b; line-height: 42rpx; }
	.suggest-row { margin-top: 24rpx; padding-top: 22rpx; border-top: 1rpx solid #edf1f6; flex-direction: row; justify-content: space-between; font-size: 25rpx; }
	.suggest-value { color: #0868f7; font-size: 27rpx; font-weight: 700; }
	.suggest-label { color: #53667f; font-size: 25rpx; }
	.report-note { font-size: 21rpx; line-height: 34rpx; color: #78889e; margin-top: 20rpx; }
</style>