25 lines
3.4 KiB
Plaintext
25 lines
3.4 KiB
Plaintext
<template>
|
|
<view class="page">
|
|
<AppHeader title="融资需求报告" />
|
|
<scroll-view scroll-y class="report-scroll">
|
|
<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">您的融资资质超过 82% 的用户</text></view>
|
|
<view class="radar-panel"><image class="radar-image" src="/static/images/finance-radar.png" mode="aspectFit"></image><view class="radar-core"><text>85</text></view><view class="radar-label top"><text>还款能力</text></view><view class="radar-label left"><text>收入稳定</text></view><view class="radar-label right"><text>信用状况</text></view><view class="radar-label bottom-left"><text>资产条件</text></view><view class="radar-label bottom-right"><text>负债情况</text></view></view>
|
|
<view class="conclusion"><text class="section-title">评估结论</text><text class="conclusion-text">您的资质整体良好，符合多家银行产品要求。</text><view class="suggest-row"><text>建议额度</text><text class="suggest-value">6-36个月</text></view></view>
|
|
<button class="primary-button" @click="viewMatches">查看匹配方案</button>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import AppHeader from '@/components/AppHeader.uvue'
|
|
const viewMatches = () => { uni.navigateTo({ url: '/pages/matches/matches' }) }
|
|
</script>
|
|
|
|
<style>
|
|
.report-scroll { height: calc(100vh - var(--status-bar-height) - 96rpx); }.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: 500rpx; margin-top: 24rpx; border-radius: 18rpx; background-color: #fff; border: 1rpx solid #e7edf6; align-items: center; justify-content: center; position: relative; overflow: hidden; }.radar-image { width: 430rpx; height: 430rpx; }.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: 224rpx; }.right { right: 27rpx; top: 224rpx; }.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-weight: 700; }
|
|
</style>
|