volunteer-4/src/pages-evaluation-sub/evaluate/academicReport/InterestReport.vue

124 lines
3.2 KiB
Vue

<route lang="json5" type="page">
{
style: {
navigationStyle: 'custom',
},
}
</route>
<template>
<scroll-view :scroll-y="true" class="flex flex-col h-screen relative custom-bg">
<Navbar
safeAreaInsetTop
:bordered="false"
leftArrow
@clickLeft="handleBack"
bg-color="transparent"
>
<template #title>
<text class="text-[#1F2329] text-[36rpx] font-medium text-[#fff]">兴趣测评报告</text>
</template>
</Navbar>
<view class="flex-1 overflow-auto pb-[30rpx] relative">
<!-- 顶部卡片 -->
<view class="flex flex-col pt-[32rpx] px-[84rpx] h-[244rpx] mb-[-148rpx]">
<image src="https://api.static.ycymedu.com/src/images/evaluate/bg.png" class="header-bg" />
<text class="text-[#333] text-[28rpx] mb-[14rpx] z-2">您的兴趣类型为</text>
<text class="text-[#117CFC] text-[36rpx] z-2">{{ studyRecord.title }}</text>
</view>
<!-- 雷达图占位 -->
<InterestRadar :picData="studyRecord.picCharts" />
<!-- 类型说明 -->
<TypeDetail :reportItems="studyRecord.reportItems" />
<!-- 适合职业 -->
<IntroMajor :tag="studyRecord.hTag" />
<!-- 兴趣分析与代表人物 -->
<InterestingThings :tag="studyRecord.hTag" :description="studyRecord.description" />
<!-- 底部AI智能顾问 -->
<!-- <view class="ai-assistant mt-[20rpx] mb-[10rpx] flex items-center justify-center">
<image src="" class="w-[32rpx] h-[32rpx] mr-[10rpx]"></image>
<text class="text-[#117CFC] text-[26rpx]">智能AI顾问</text>
</view> -->
</view>
</scroll-view>
</template>
<script setup lang="ts">
import Navbar from '@/pages-evaluation-sub/components/navbar/Navbar.vue'
import TypeDetail from '../components/TypeDetail.vue'
import InterestRadar from '../components/interestChart/InterestRadar.vue'
import IntroMajor from '../components/IntroMajor.vue'
import { getHollandDimensionInfo } from '@/service/index/api'
import InterestingThings from '../components/InterestingThings.vue'
const pageType = ref(0)
const pageId = ref(0)
const handleBack = () => {
uni.navigateBack()
}
const studyRecord = ref({ description: '', title: '', picCharts: {}, reportItems: [], hTag: '' })
onLoad((options) => {
pageType.value = +options.type
pageId.value = options.id
getHollandDimensionInfo({ ScaleId: pageId.value.toString() }).then((resp) => {
if (resp.code === 200) {
studyRecord.value = resp.result as {
description: string
title: string
picCharts: any
reportItems: any[]
hTag: string
}
}
})
})
</script>
<style scoped lang="scss">
.custom-bg {
background: linear-gradient(184deg, #0d79fc 0%, #2186fc 100%);
}
:deep(.icon-class) {
color: #fff !important;
}
.header-bg {
width: calc(100% - 80rpx);
height: 244rpx;
position: absolute;
top: 0;
left: 40rpx;
z-index: 1;
}
.type-tag {
font-size: 24rpx;
min-width: 40rpx;
text-align: center;
}
.position-tag {
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
font-size: 26rpx;
text-align: center;
}
.table-row {
align-items: center;
font-size: 26rpx;
color: #333;
}
.avatar-item image {
border: 4rpx solid #fff;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
}
</style>