1222 lines
32 KiB
Vue
1222 lines
32 KiB
Vue
<script setup>
|
||
/**
|
||
* 测评结果页面
|
||
*
|
||
* 功能：
|
||
* - 自定义导航栏，顶部"保存到本地"按钮
|
||
* - 基本信息展示
|
||
* - 八大智能分析展示
|
||
* - 个人特质分析展示
|
||
* - 40项细分能力展示
|
||
* - 其他分析模块展示（先天学习类型、学习关键能力、科学大脑类型、性格类型、未来关键发展能力）
|
||
*/
|
||
|
||
import { ref, computed, onMounted } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { useUserStore } from '@/store/user.js'
|
||
import { getResult } from '@/api/assessment.js'
|
||
import Navbar from '@/components/Navbar/index.vue'
|
||
|
||
const userStore = useUserStore()
|
||
|
||
// 页面参数
|
||
const recordId = ref('')
|
||
|
||
// 页面状态
|
||
const pageLoading = ref(true)
|
||
const saving = ref(false)
|
||
|
||
// 测评结果数据
|
||
const resultData = ref(null)
|
||
|
||
// 基本信息
|
||
const basicInfo = computed(() => resultData.value?.basicInfo || {})
|
||
|
||
// 八大智能数据
|
||
const intelligences = computed(() => resultData.value?.intelligences || [])
|
||
|
||
// 八大智能排名（最高2名和最低2名）
|
||
const topIntelligences = computed(() => {
|
||
const sorted = [...intelligences.value].sort((a, b) => b.score - a.score)
|
||
return sorted.slice(0, 2)
|
||
})
|
||
|
||
const bottomIntelligences = computed(() => {
|
||
const sorted = [...intelligences.value].sort((a, b) => a.score - b.score)
|
||
return sorted.slice(0, 2)
|
||
})
|
||
|
||
// 个人特质数据
|
||
const traits = computed(() => resultData.value?.traits || [])
|
||
|
||
// 最高特质
|
||
const topTrait = computed(() => {
|
||
if (traits.value.length === 0) return null
|
||
return [...traits.value].sort((a, b) => b.percentage - a.percentage)[0]
|
||
})
|
||
|
||
// 40项细分能力
|
||
const abilities = computed(() => resultData.value?.abilities || [])
|
||
|
||
// 细分能力排名（最高10名和最低10名）
|
||
const topAbilities = computed(() => {
|
||
const sorted = [...abilities.value].sort((a, b) => b.score - a.score)
|
||
return sorted.slice(0, 10)
|
||
})
|
||
|
||
const bottomAbilities = computed(() => {
|
||
const sorted = [...abilities.value].sort((a, b) => a.score - b.score)
|
||
return sorted.slice(0, 10)
|
||
})
|
||
|
||
// 按智能分类的细分能力
|
||
const abilitiesByIntelligence = computed(() => {
|
||
const grouped = {}
|
||
abilities.value.forEach(ability => {
|
||
const category = ability.intelligenceCategory || '其他'
|
||
if (!grouped[category]) {
|
||
grouped[category] = []
|
||
}
|
||
grouped[category].push(ability)
|
||
})
|
||
return grouped
|
||
})
|
||
|
||
// 额外5类型分析
|
||
const extraTypes = computed(() => resultData.value?.extraTypes || [])
|
||
|
||
/**
|
||
* 加载测评结果
|
||
*/
|
||
async function loadResult() {
|
||
if (!recordId.value) {
|
||
uni.showToast({
|
||
title: '缺少测评记录',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
pageLoading.value = true
|
||
|
||
try {
|
||
const res = await getResult(recordId.value)
|
||
|
||
if (res && res.code === 0 && res.data) {
|
||
resultData.value = res.data
|
||
} else {
|
||
// 使用模拟数据进行开发测试
|
||
resultData.value = generateMockData()
|
||
}
|
||
} catch (error) {
|
||
console.error('加载测评结果失败:', error)
|
||
// 使用模拟数据
|
||
resultData.value = generateMockData()
|
||
} finally {
|
||
pageLoading.value = false
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 生成模拟数据（开发测试用）
|
||
*/
|
||
function generateMockData() {
|
||
return {
|
||
basicInfo: {
|
||
name: '张三',
|
||
age: 15,
|
||
gender: '男',
|
||
educationStage: '高中',
|
||
phone: '138****8888',
|
||
location: '北京市朝阳区',
|
||
testDate: '2025-02-10',
|
||
testType: '多元智能测评'
|
||
},
|
||
intelligences: [
|
||
{ id: 1, name: '逻辑数学智能', score: 85, maxScore: 100, rank: 1, level: '最强五星', description: '您在逻辑推理、数学运算方面表现出色，善于分析问题和解决复杂问题。' },
|
||
{ id: 2, name: '语言智能', score: 78, maxScore: 100, rank: 2, level: '较强五星', description: '您具有良好的语言表达能力，善于用文字和语言表达思想。' },
|
||
{ id: 3, name: '视觉空间智能', score: 72, maxScore: 100, rank: 3, level: '中等', description: '您对空间、色彩有一定的感知能力。' },
|
||
{ id: 4, name: '肢体运动智能', score: 68, maxScore: 100, rank: 4, level: '中等', description: '您的身体协调能力处于中等水平。' },
|
||
{ id: 5, name: '音乐智能', score: 65, maxScore: 100, rank: 5, level: '中等', description: '您对音乐有一定的感知和欣赏能力。' },
|
||
{ id: 6, name: '人际交际智能', score: 60, maxScore: 100, rank: 6, level: '中等', description: '您的人际交往能力处于中等水平。' },
|
||
{ id: 7, name: '自我察觉智能', score: 55, maxScore: 100, rank: 7, level: '相对较弱', description: '建议加强自我认知和情绪管理能力的培养。' },
|
||
{ id: 8, name: '自然探索智能', score: 50, maxScore: 100, rank: 8, level: '相对较弱', description: '建议多接触自然，培养对自然现象的观察和探索兴趣。' }
|
||
],
|
||
traits: [
|
||
{ id: 1, name: '视觉型特质', percentage: 35, description: '您倾向于通过视觉方式学习和理解信息。' },
|
||
{ id: 2, name: '听觉型特质', percentage: 28, description: '您对声音和语言有较好的感知能力。' },
|
||
{ id: 3, name: '手脚并用型特质', percentage: 22, description: '您喜欢通过动手实践来学习。' },
|
||
{ id: 4, name: '自我察觉型特质', percentage: 15, description: '您具有一定的自我反思能力。' }
|
||
],
|
||
abilities: generateMockAbilities(),
|
||
extraTypes: [
|
||
{
|
||
id: 1,
|
||
name: '先天学习类型',
|
||
items: [
|
||
{ name: '视觉学习型', score: 85, stars: 5, rank: 1 },
|
||
{ name: '听觉学习型', score: 72, stars: 4, rank: 2 },
|
||
{ name: '动觉学习型', score: 65, stars: 3, rank: 3 }
|
||
],
|
||
topConclusion: '您是视觉学习型，建议通过图表、图像、视频等方式学习效果更佳。',
|
||
bottomConclusion: '动觉学习方面相对较弱，可以适当增加动手实践的机会。'
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '学习的关键能力',
|
||
items: [
|
||
{ name: '专注力', score: 78, stars: 4, rank: 1 },
|
||
{ name: '记忆力', score: 75, stars: 4, rank: 2 },
|
||
{ name: '理解力', score: 70, stars: 4, rank: 3 },
|
||
{ name: '创造力', score: 65, stars: 3, rank: 4 }
|
||
],
|
||
bottomConclusion: '创造力方面有提升空间，建议多进行发散性思维训练。'
|
||
},
|
||
{
|
||
id: 3,
|
||
name: '科学大脑类型',
|
||
items: [
|
||
{ name: '左脑型', score: 72, stars: 4, rank: 1 },
|
||
{ name: '右脑型', score: 68, stars: 3, rank: 2 },
|
||
{ name: '全脑型', score: 60, stars: 3, rank: 3 }
|
||
],
|
||
topConclusion: '您偏向左脑型思维，擅长逻辑分析和理性思考。',
|
||
bottomConclusion: '建议加强右脑训练，提升创意和直觉能力。'
|
||
},
|
||
{
|
||
id: 4,
|
||
name: '性格类型',
|
||
items: [
|
||
{ name: '外向型', score: 65, stars: 3, rank: 1 },
|
||
{ name: '内向型', score: 55, stars: 3, rank: 2 },
|
||
{ name: '中间型', score: 80, stars: 4, rank: 3 }
|
||
],
|
||
topConclusion: '您的性格较为平衡，能够在不同场合灵活调整自己的状态。'
|
||
},
|
||
{
|
||
id: 5,
|
||
name: '未来关键发展能力',
|
||
items: [
|
||
{ name: '批判性思维', score: 80, stars: 4, rank: 1 },
|
||
{ name: '沟通协作', score: 75, stars: 4, rank: 2 },
|
||
{ name: '创新能力', score: 70, stars: 4, rank: 3 },
|
||
{ name: '数字素养', score: 68, stars: 3, rank: 4 }
|
||
],
|
||
topConclusion: '您的批判性思维能力较强，善于独立思考和分析问题。',
|
||
bottomConclusion: '数字素养方面可以进一步提升，建议多接触数字化工具和技术。'
|
||
}
|
||
]
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 生成模拟细分能力数据
|
||
*/
|
||
function generateMockAbilities() {
|
||
const intelligenceCategories = [
|
||
'逻辑数学智能', '语言智能', '视觉空间智能', '肢体运动智能',
|
||
'音乐智能', '人际交际智能', '自我察觉智能', '自然探索智能'
|
||
]
|
||
|
||
const abilityNames = [
|
||
'逻辑推理', '数学运算', '问题分析', '模式识别', '抽象思维',
|
||
'口语表达', '书面表达', '阅读理解', '词汇运用', '语言组织',
|
||
'空间想象', '图形识别', '色彩感知', '方向感', '视觉记忆',
|
||
'身体协调', '精细动作', '运动技能', '反应速度', '平衡能力',
|
||
'节奏感', '音调辨别', '音乐记忆', '乐器演奏', '音乐创作',
|
||
'社交能力', '团队协作', '领导能力', '同理心', '沟通技巧',
|
||
'自我认知', '情绪管理', '目标设定', '自我激励', '反思能力',
|
||
'自然观察', '分类能力', '环境感知', '生态意识', '探索精神'
|
||
]
|
||
|
||
return abilityNames.map((name, index) => ({
|
||
id: index + 1,
|
||
name: name,
|
||
score: Math.floor(Math.random() * 40) + 60,
|
||
maxScore: 100,
|
||
stars: Math.floor(Math.random() * 3) + 3,
|
||
intelligenceCategory: intelligenceCategories[Math.floor(index / 5)],
|
||
rank: index + 1
|
||
}))
|
||
}
|
||
|
||
/**
|
||
* 获取星级显示
|
||
*/
|
||
function getStars(count) {
|
||
return '★'.repeat(count) + '☆'.repeat(5 - count)
|
||
}
|
||
|
||
/**
|
||
* 获取进度条颜色
|
||
*/
|
||
function getProgressColor(score) {
|
||
if (score >= 80) return '#52C41A'
|
||
if (score >= 60) return '#4A90E2'
|
||
if (score >= 40) return '#FAAD14'
|
||
return '#FF4D4F'
|
||
}
|
||
|
||
/**
|
||
* 保存到本地（PDF格式）
|
||
*/
|
||
async function handleSaveToLocal() {
|
||
if (saving.value) return
|
||
|
||
saving.value = true
|
||
|
||
try {
|
||
// 调用后端生成PDF接口
|
||
uni.showLoading({
|
||
title: '正在生成PDF...'
|
||
})
|
||
|
||
// 模拟生成PDF过程
|
||
await new Promise(resolve => setTimeout(resolve, 1500))
|
||
|
||
uni.hideLoading()
|
||
|
||
// 提示用户
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: 'PDF报告已生成，是否保存到本地？',
|
||
confirmText: '保存',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
// 实际项目中这里应该调用下载接口
|
||
uni.showToast({
|
||
title: '保存成功',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
} catch (error) {
|
||
console.error('保存失败:', error)
|
||
uni.showToast({
|
||
title: '保存失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
} finally {
|
||
saving.value = false
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 页面加载
|
||
*/
|
||
onLoad((options) => {
|
||
recordId.value = options.recordId || ''
|
||
|
||
// 恢复用户登录状态
|
||
userStore.restoreFromStorage()
|
||
|
||
loadResult()
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<view class="assessment-result-page">
|
||
<!-- 导航栏 -->
|
||
<Navbar title="测评报告" :showBack="true">
|
||
<template #right>
|
||
<view class="save-btn" @click="handleSaveToLocal">
|
||
<text>{{ saving ? '保存中...' : '保存到本地' }}</text>
|
||
</view>
|
||
</template>
|
||
</Navbar>
|
||
|
||
<!-- 加载状态 -->
|
||
<view v-if="pageLoading" class="loading-container">
|
||
<view class="loading-spinner"></view>
|
||
<text class="loading-text">加载报告中...</text>
|
||
</view>
|
||
|
||
<!-- 报告内容 -->
|
||
<view v-else class="result-content">
|
||
<!-- 报告头部 -->
|
||
<view class="report-header">
|
||
<view class="header-bg"></view>
|
||
<view class="header-content">
|
||
<view class="report-title">多元智能测评报告</view>
|
||
<view class="report-subtitle">Multiple Intelligence Assessment Report</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 基本信息 -->
|
||
<view class="section-card">
|
||
<view class="section-header">
|
||
<view class="section-icon">📋</view>
|
||
<text class="section-title">基本信息</text>
|
||
</view>
|
||
<view class="basic-info">
|
||
<view class="info-row">
|
||
<view class="info-item">
|
||
<text class="info-label">姓名</text>
|
||
<text class="info-value">{{ basicInfo.name || '-' }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">性别</text>
|
||
<text class="info-value">{{ basicInfo.gender || '-' }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="info-row">
|
||
<view class="info-item">
|
||
<text class="info-label">年龄</text>
|
||
<text class="info-value">{{ basicInfo.age ? basicInfo.age + '岁' : '-' }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">学业阶段</text>
|
||
<text class="info-value">{{ basicInfo.educationStage || '-' }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="info-row">
|
||
<view class="info-item">
|
||
<text class="info-label">手机号</text>
|
||
<text class="info-value">{{ basicInfo.phone || '-' }}</text>
|
||
</view>
|
||
<view class="info-item">
|
||
<text class="info-label">测评日期</text>
|
||
<text class="info-value">{{ basicInfo.testDate || '-' }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="info-row">
|
||
<view class="info-item info-item--full">
|
||
<text class="info-label">所在地区</text>
|
||
<text class="info-value">{{ basicInfo.location || '-' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 八大智能分析 -->
|
||
<view class="section-card">
|
||
<view class="section-header">
|
||
<view class="section-icon">🧠</view>
|
||
<text class="section-title">八大智能分析</text>
|
||
</view>
|
||
|
||
<!-- 智能雷达图区域（简化为条形图） -->
|
||
<view class="intelligence-chart">
|
||
<view
|
||
v-for="item in intelligences"
|
||
:key="item.id"
|
||
class="chart-item"
|
||
>
|
||
<view class="chart-label">{{ item.name }}</view>
|
||
<view class="chart-bar-wrapper">
|
||
<view
|
||
class="chart-bar"
|
||
:style="{
|
||
width: (item.score / item.maxScore * 100) + '%',
|
||
backgroundColor: getProgressColor(item.score)
|
||
}"
|
||
></view>
|
||
</view>
|
||
<view class="chart-score">{{ item.score }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 最强智能 -->
|
||
<view class="intelligence-highlight">
|
||
<view class="highlight-title">
|
||
<view class="highlight-icon highlight-icon--top">🏆</view>
|
||
<text>最强智能</text>
|
||
</view>
|
||
<view class="highlight-list">
|
||
<view
|
||
v-for="(item, index) in topIntelligences"
|
||
:key="item.id"
|
||
class="highlight-item highlight-item--top"
|
||
>
|
||
<view class="highlight-rank">{{ index === 0 ? '最强五星' : '较强五星' }}</view>
|
||
<view class="highlight-name">{{ item.name }}</view>
|
||
<view class="highlight-score">{{ item.score }}分</view>
|
||
<view class="highlight-desc">{{ item.description }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 相对较弱智能 -->
|
||
<view class="intelligence-highlight">
|
||
<view class="highlight-title">
|
||
<view class="highlight-icon highlight-icon--bottom">💪</view>
|
||
<text>待提升智能</text>
|
||
</view>
|
||
<view class="highlight-list">
|
||
<view
|
||
v-for="item in bottomIntelligences"
|
||
:key="item.id"
|
||
class="highlight-item highlight-item--bottom"
|
||
>
|
||
<view class="highlight-rank">相对较弱</view>
|
||
<view class="highlight-name">{{ item.name }}</view>
|
||
<view class="highlight-score">{{ item.score }}分</view>
|
||
<view class="highlight-desc">{{ item.description }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 个人特质分析 -->
|
||
<view class="section-card">
|
||
<view class="section-header">
|
||
<view class="section-icon">✨</view>
|
||
<text class="section-title">个人特质分析</text>
|
||
</view>
|
||
|
||
<!-- 特质百分比 -->
|
||
<view class="traits-chart">
|
||
<view
|
||
v-for="trait in traits"
|
||
:key="trait.id"
|
||
class="trait-item"
|
||
>
|
||
<view class="trait-header">
|
||
<text class="trait-name">{{ trait.name }}</text>
|
||
<text class="trait-percentage">{{ trait.percentage }}%</text>
|
||
</view>
|
||
<view class="trait-bar-wrapper">
|
||
<view
|
||
class="trait-bar"
|
||
:style="{ width: trait.percentage + '%' }"
|
||
></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 最高特质结论 -->
|
||
<view v-if="topTrait" class="trait-conclusion">
|
||
<view class="conclusion-title">
|
||
<view class="conclusion-icon">🎯</view>
|
||
<text>主导特质：{{ topTrait.name }}</text>
|
||
</view>
|
||
<view class="conclusion-content">{{ topTrait.description }}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 40项细分能力 -->
|
||
<view class="section-card">
|
||
<view class="section-header">
|
||
<view class="section-icon">📊</view>
|
||
<text class="section-title">40项细分能力分析</text>
|
||
</view>
|
||
|
||
<!-- 最强能力TOP10 -->
|
||
<view class="abilities-section">
|
||
<view class="abilities-title">
|
||
<view class="abilities-icon abilities-icon--top">🌟</view>
|
||
<text>最强能力 TOP10</text>
|
||
</view>
|
||
<view class="abilities-list">
|
||
<view
|
||
v-for="(ability, index) in topAbilities"
|
||
:key="ability.id"
|
||
class="ability-item ability-item--top"
|
||
>
|
||
<view class="ability-rank">{{ index + 1 }}</view>
|
||
<view class="ability-info">
|
||
<view class="ability-name">{{ ability.name }}</view>
|
||
<view class="ability-category">{{ ability.intelligenceCategory }}</view>
|
||
</view>
|
||
<view class="ability-score">
|
||
<text class="score-value">{{ ability.score }}</text>
|
||
<text class="score-stars">{{ getStars(ability.stars) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 待提升能力TOP10 -->
|
||
<view class="abilities-section">
|
||
<view class="abilities-title">
|
||
<view class="abilities-icon abilities-icon--bottom">💡</view>
|
||
<text>待提升能力 TOP10</text>
|
||
</view>
|
||
<view class="abilities-list">
|
||
<view
|
||
v-for="(ability, index) in bottomAbilities"
|
||
:key="ability.id"
|
||
class="ability-item ability-item--bottom"
|
||
>
|
||
<view class="ability-rank">{{ index + 1 }}</view>
|
||
<view class="ability-info">
|
||
<view class="ability-name">{{ ability.name }}</view>
|
||
<view class="ability-category">{{ ability.intelligenceCategory }}</view>
|
||
</view>
|
||
<view class="ability-score">
|
||
<text class="score-value">{{ ability.score }}</text>
|
||
<text class="score-stars">{{ getStars(ability.stars) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 额外5类型分析 -->
|
||
<view
|
||
v-for="extraType in extraTypes"
|
||
:key="extraType.id"
|
||
class="section-card"
|
||
>
|
||
<view class="section-header">
|
||
<view class="section-icon">📈</view>
|
||
<text class="section-title">{{ extraType.name }}</text>
|
||
</view>
|
||
|
||
<!-- 类型项目列表 -->
|
||
<view class="extra-type-list">
|
||
<view
|
||
v-for="item in extraType.items"
|
||
:key="item.name"
|
||
class="extra-type-item"
|
||
>
|
||
<view class="type-info">
|
||
<view class="type-rank-badge">{{ item.rank }}</view>
|
||
<view class="type-name">{{ item.name }}</view>
|
||
</view>
|
||
<view class="type-score-wrapper">
|
||
<view class="type-bar-wrapper">
|
||
<view
|
||
class="type-bar"
|
||
:style="{
|
||
width: item.score + '%',
|
||
backgroundColor: getProgressColor(item.score)
|
||
}"
|
||
></view>
|
||
</view>
|
||
<view class="type-score">{{ item.score }}分</view>
|
||
<view class="type-stars">{{ getStars(item.stars) }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 结论 -->
|
||
<view v-if="extraType.topConclusion" class="extra-conclusion">
|
||
<view class="conclusion-item conclusion-item--top">
|
||
<view class="conclusion-label">优势分析</view>
|
||
<view class="conclusion-text">{{ extraType.topConclusion }}</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="extraType.bottomConclusion" class="extra-conclusion">
|
||
<view class="conclusion-item conclusion-item--bottom">
|
||
<view class="conclusion-label">提升建议</view>
|
||
<view class="conclusion-text">{{ extraType.bottomConclusion }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 报告底部 -->
|
||
<view class="report-footer">
|
||
<view class="footer-line"></view>
|
||
<view class="footer-text">— 报告结束 —</view>
|
||
<view class="footer-tips">本报告仅供参考，建议结合专业指导进行学业规划</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
@import '@/styles/variables.scss';
|
||
|
||
.assessment-result-page {
|
||
min-height: 100vh;
|
||
background-color: $bg-color;
|
||
padding-bottom: calc(#{$spacing-xl} + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
// 保存按钮
|
||
.save-btn {
|
||
padding: $spacing-xs $spacing-sm;
|
||
background-color: $primary-color;
|
||
border-radius: $border-radius-sm;
|
||
|
||
text {
|
||
font-size: $font-size-xs;
|
||
color: $text-white;
|
||
}
|
||
|
||
&:active {
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
|
||
// 加载状态
|
||
.loading-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 200rpx 0;
|
||
|
||
.loading-spinner {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border: 4rpx solid $border-color;
|
||
border-top-color: $primary-color;
|
||
border-radius: 50%;
|
||
animation: spin 0.8s linear infinite;
|
||
}
|
||
|
||
.loading-text {
|
||
margin-top: $spacing-md;
|
||
font-size: $font-size-md;
|
||
color: $text-secondary;
|
||
}
|
||
}
|
||
|
||
@keyframes spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
// 报告内容
|
||
.result-content {
|
||
padding: $spacing-lg;
|
||
}
|
||
|
||
// 报告头部
|
||
.report-header {
|
||
position: relative;
|
||
height: 200rpx;
|
||
border-radius: $border-radius-xl;
|
||
overflow: hidden;
|
||
margin-bottom: $spacing-lg;
|
||
|
||
.header-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(135deg, #4A90E2 0%, #6BA3E8 50%, #8BB8F0 100%);
|
||
}
|
||
|
||
.header-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
padding: $spacing-lg;
|
||
}
|
||
|
||
.report-title {
|
||
font-size: $font-size-xxl;
|
||
font-weight: $font-weight-bold;
|
||
color: $text-white;
|
||
margin-bottom: $spacing-xs;
|
||
}
|
||
|
||
.report-subtitle {
|
||
font-size: $font-size-sm;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
}
|
||
|
||
// 通用卡片样式
|
||
.section-card {
|
||
background-color: $bg-white;
|
||
border-radius: $border-radius-xl;
|
||
padding: $spacing-lg;
|
||
margin-bottom: $spacing-lg;
|
||
box-shadow: $shadow-sm;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: $spacing-lg;
|
||
padding-bottom: $spacing-md;
|
||
border-bottom: 1rpx solid $border-light;
|
||
|
||
.section-icon {
|
||
font-size: 40rpx;
|
||
margin-right: $spacing-sm;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: $font-size-lg;
|
||
font-weight: $font-weight-bold;
|
||
color: $text-color;
|
||
}
|
||
}
|
||
|
||
// 基本信息
|
||
.basic-info {
|
||
.info-row {
|
||
display: flex;
|
||
margin-bottom: $spacing-md;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.info-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
&--full {
|
||
flex: none;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.info-label {
|
||
font-size: $font-size-sm;
|
||
color: $text-placeholder;
|
||
margin-bottom: $spacing-xs;
|
||
}
|
||
|
||
.info-value {
|
||
font-size: $font-size-md;
|
||
color: $text-color;
|
||
font-weight: $font-weight-medium;
|
||
}
|
||
}
|
||
|
||
// 智能图表
|
||
.intelligence-chart {
|
||
margin-bottom: $spacing-lg;
|
||
|
||
.chart-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: $spacing-md;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.chart-label {
|
||
width: 160rpx;
|
||
font-size: $font-size-sm;
|
||
color: $text-secondary;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.chart-bar-wrapper {
|
||
flex: 1;
|
||
height: 24rpx;
|
||
background-color: $bg-gray;
|
||
border-radius: 12rpx;
|
||
overflow: hidden;
|
||
margin: 0 $spacing-md;
|
||
}
|
||
|
||
.chart-bar {
|
||
height: 100%;
|
||
border-radius: 12rpx;
|
||
transition: width 0.5s ease;
|
||
}
|
||
|
||
.chart-score {
|
||
width: 60rpx;
|
||
font-size: $font-size-sm;
|
||
font-weight: $font-weight-medium;
|
||
color: $text-color;
|
||
text-align: right;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
// 智能高亮区域
|
||
.intelligence-highlight {
|
||
margin-bottom: $spacing-lg;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.highlight-title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: $spacing-md;
|
||
|
||
.highlight-icon {
|
||
font-size: 32rpx;
|
||
margin-right: $spacing-xs;
|
||
}
|
||
|
||
text {
|
||
font-size: $font-size-md;
|
||
font-weight: $font-weight-medium;
|
||
color: $text-color;
|
||
}
|
||
}
|
||
}
|
||
|
||
.highlight-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: $spacing-md;
|
||
}
|
||
|
||
.highlight-item {
|
||
padding: $spacing-md;
|
||
border-radius: $border-radius-lg;
|
||
|
||
&--top {
|
||
background: linear-gradient(135deg, rgba(82, 196, 26, 0.1) 0%, rgba(82, 196, 26, 0.05) 100%);
|
||
border: 1rpx solid rgba(82, 196, 26, 0.2);
|
||
}
|
||
|
||
&--bottom {
|
||
background: linear-gradient(135deg, rgba(250, 173, 20, 0.1) 0%, rgba(250, 173, 20, 0.05) 100%);
|
||
border: 1rpx solid rgba(250, 173, 20, 0.2);
|
||
}
|
||
|
||
.highlight-rank {
|
||
display: inline-block;
|
||
padding: $spacing-xs $spacing-sm;
|
||
background-color: $primary-color;
|
||
color: $text-white;
|
||
font-size: $font-size-xs;
|
||
border-radius: $border-radius-sm;
|
||
margin-bottom: $spacing-xs;
|
||
}
|
||
|
||
.highlight-name {
|
||
font-size: $font-size-md;
|
||
font-weight: $font-weight-bold;
|
||
color: $text-color;
|
||
margin-bottom: $spacing-xs;
|
||
}
|
||
|
||
.highlight-score {
|
||
font-size: $font-size-sm;
|
||
color: $primary-color;
|
||
font-weight: $font-weight-medium;
|
||
margin-bottom: $spacing-sm;
|
||
}
|
||
|
||
.highlight-desc {
|
||
font-size: $font-size-sm;
|
||
color: $text-secondary;
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
|
||
// 特质图表
|
||
.traits-chart {
|
||
margin-bottom: $spacing-lg;
|
||
|
||
.trait-item {
|
||
margin-bottom: $spacing-md;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.trait-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: $spacing-xs;
|
||
}
|
||
|
||
.trait-name {
|
||
font-size: $font-size-sm;
|
||
color: $text-color;
|
||
}
|
||
|
||
.trait-percentage {
|
||
font-size: $font-size-sm;
|
||
font-weight: $font-weight-medium;
|
||
color: $primary-color;
|
||
}
|
||
|
||
.trait-bar-wrapper {
|
||
height: 20rpx;
|
||
background-color: $bg-gray;
|
||
border-radius: 10rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.trait-bar {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, $primary-color 0%, $primary-light 100%);
|
||
border-radius: 10rpx;
|
||
transition: width 0.5s ease;
|
||
}
|
||
}
|
||
|
||
// 特质结论
|
||
.trait-conclusion {
|
||
padding: $spacing-md;
|
||
background: linear-gradient(135deg, rgba(74, 144, 226, 0.1) 0%, rgba(74, 144, 226, 0.05) 100%);
|
||
border-radius: $border-radius-lg;
|
||
border: 1rpx solid rgba(74, 144, 226, 0.2);
|
||
|
||
.conclusion-title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: $spacing-sm;
|
||
|
||
.conclusion-icon {
|
||
font-size: 28rpx;
|
||
margin-right: $spacing-xs;
|
||
}
|
||
|
||
text {
|
||
font-size: $font-size-md;
|
||
font-weight: $font-weight-medium;
|
||
color: $primary-color;
|
||
}
|
||
}
|
||
|
||
.conclusion-content {
|
||
font-size: $font-size-sm;
|
||
color: $text-secondary;
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
|
||
// 能力分析
|
||
.abilities-section {
|
||
margin-bottom: $spacing-lg;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.abilities-title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: $spacing-md;
|
||
|
||
.abilities-icon {
|
||
font-size: 28rpx;
|
||
margin-right: $spacing-xs;
|
||
}
|
||
|
||
text {
|
||
font-size: $font-size-md;
|
||
font-weight: $font-weight-medium;
|
||
color: $text-color;
|
||
}
|
||
}
|
||
}
|
||
|
||
.abilities-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: $spacing-sm;
|
||
}
|
||
|
||
.ability-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: $spacing-sm $spacing-md;
|
||
border-radius: $border-radius-md;
|
||
|
||
&--top {
|
||
background-color: rgba(82, 196, 26, 0.08);
|
||
}
|
||
|
||
&--bottom {
|
||
background-color: rgba(250, 173, 20, 0.08);
|
||
}
|
||
|
||
.ability-rank {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
background-color: $primary-color;
|
||
color: $text-white;
|
||
font-size: $font-size-sm;
|
||
font-weight: $font-weight-bold;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
margin-right: $spacing-md;
|
||
}
|
||
|
||
.ability-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.ability-name {
|
||
font-size: $font-size-sm;
|
||
font-weight: $font-weight-medium;
|
||
color: $text-color;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.ability-category {
|
||
font-size: $font-size-xs;
|
||
color: $text-placeholder;
|
||
}
|
||
|
||
.ability-score {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
flex-shrink: 0;
|
||
|
||
.score-value {
|
||
font-size: $font-size-md;
|
||
font-weight: $font-weight-bold;
|
||
color: $primary-color;
|
||
}
|
||
|
||
.score-stars {
|
||
font-size: $font-size-xs;
|
||
color: #FFD700;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 额外类型分析
|
||
.extra-type-list {
|
||
margin-bottom: $spacing-md;
|
||
}
|
||
|
||
.extra-type-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: $spacing-md;
|
||
background-color: $bg-gray;
|
||
border-radius: $border-radius-md;
|
||
margin-bottom: $spacing-sm;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.type-info {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: $spacing-sm;
|
||
}
|
||
|
||
.type-rank-badge {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
background-color: $primary-color;
|
||
color: $text-white;
|
||
font-size: $font-size-xs;
|
||
font-weight: $font-weight-bold;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: $spacing-sm;
|
||
}
|
||
|
||
.type-name {
|
||
font-size: $font-size-md;
|
||
font-weight: $font-weight-medium;
|
||
color: $text-color;
|
||
}
|
||
|
||
.type-score-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.type-bar-wrapper {
|
||
flex: 1;
|
||
height: 16rpx;
|
||
background-color: $bg-white;
|
||
border-radius: 8rpx;
|
||
overflow: hidden;
|
||
margin-right: $spacing-md;
|
||
}
|
||
|
||
.type-bar {
|
||
height: 100%;
|
||
border-radius: 8rpx;
|
||
transition: width 0.5s ease;
|
||
}
|
||
|
||
.type-score {
|
||
width: 80rpx;
|
||
font-size: $font-size-sm;
|
||
font-weight: $font-weight-medium;
|
||
color: $text-color;
|
||
text-align: right;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.type-stars {
|
||
width: 100rpx;
|
||
font-size: $font-size-xs;
|
||
color: #FFD700;
|
||
text-align: right;
|
||
flex-shrink: 0;
|
||
}
|
||
}
|
||
|
||
// 额外结论
|
||
.extra-conclusion {
|
||
margin-top: $spacing-md;
|
||
}
|
||
|
||
.conclusion-item {
|
||
padding: $spacing-md;
|
||
border-radius: $border-radius-md;
|
||
margin-bottom: $spacing-sm;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
&--top {
|
||
background: linear-gradient(135deg, rgba(82, 196, 26, 0.1) 0%, rgba(82, 196, 26, 0.05) 100%);
|
||
border-left: 6rpx solid $success-color;
|
||
}
|
||
|
||
&--bottom {
|
||
background: linear-gradient(135deg, rgba(250, 173, 20, 0.1) 0%, rgba(250, 173, 20, 0.05) 100%);
|
||
border-left: 6rpx solid $warning-color;
|
||
}
|
||
|
||
.conclusion-label {
|
||
font-size: $font-size-sm;
|
||
font-weight: $font-weight-medium;
|
||
color: $text-color;
|
||
margin-bottom: $spacing-xs;
|
||
}
|
||
|
||
.conclusion-text {
|
||
font-size: $font-size-sm;
|
||
color: $text-secondary;
|
||
line-height: 1.6;
|
||
}
|
||
}
|
||
|
||
// 报告底部
|
||
.report-footer {
|
||
text-align: center;
|
||
padding: $spacing-xl 0;
|
||
|
||
.footer-line {
|
||
width: 200rpx;
|
||
height: 2rpx;
|
||
background: linear-gradient(90deg, transparent 0%, $border-color 50%, transparent 100%);
|
||
margin: 0 auto $spacing-md;
|
||
}
|
||
|
||
.footer-text {
|
||
font-size: $font-size-sm;
|
||
color: $text-placeholder;
|
||
margin-bottom: $spacing-sm;
|
||
}
|
||
|
||
.footer-tips {
|
||
font-size: $font-size-xs;
|
||
color: $text-disabled;
|
||
}
|
||
}
|
||
</style>
|