xjs
/
volunteer-secondary
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 修改页面参数

master
xjs 2026-07-07 11:00:38 +08:00
parent 6a4b71482f
commit e4494cc179
6 changed files with 164 additions and 457 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
src/chart-sub/evaluate/sixReport/components/EnvironmentCardSection.vue Normal file
View File

@ -0,0 +1,142 @@
<script lang="ts" setup>
interface EnvironmentCard {
title?: string
description?: string
}
interface ReportView {
environmentTitle?: string
environmentCards?: EnvironmentCard[]
}
interface ReportDetail {
reportView?: ReportView
environmentCards?: EnvironmentCard[]
}
const props = defineProps<{
detailData?: ReportDetail
}>()
const environmentCardStyles = [
'bg-gradient-to-t from-[#E3F7FE] to-[#D6F2FF] outer-dot-1',
'bg-gradient-to-t from-[#F6F3FE] to-[#F2EAFF] outer-dot-2',
'bg-gradient-to-t from-[#E5FFF9] to-[#D2FEF7] outer-dot-3',
'bg-gradient-to-t from-[#E7F9FF] to-[#D3F3FF] outer-dot-4',
]
const environmentTitle = computed(() => props.detailData?.reportView?.environmentTitle ?? '')
const environmentCards = computed(() => {
const cards = props.detailData?.reportView?.environmentCards ?? props.detailData?.environmentCards
return Array.isArray(cards) ? cards : []
})
function getEnvironmentCardClass(index: number) {
return environmentCardStyles[index % environmentCardStyles.length]
}
</script>
<template>
<view class="mx-[30rpx] mt-[20rpx] rounded-[24rpx] bg-white p-[30rpx]">
<view class="text-[36rpx] font-600">
{{ environmentTitle }}
</view>
<view class="grid grid-cols-2 mt-[20rpx] gap-[6rpx]">
<view
v-for="(item, index) in environmentCards"
:key="`${item.title}-${index}`"
class="box-border h-[176rpx] px-[24rpx] py-[30rpx]"
:class="getEnvironmentCardClass(index)"
>
<view class="text-[32rpx] font-600">
{{ item.title }}
</view>
<view class="text-[24rpx] text-[#3D3D3D]">
{{ item.description }}
</view>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.outer-dot-1,
.outer-dot-2,
.outer-dot-3,
.outer-dot-4 {
position: relative;
border-radius: 20rpx;
}
.outer-dot-1::before,
.outer-dot-2::before,
.outer-dot-3::before,
.outer-dot-4::before {
content: '';
position: absolute;
width: 24rpx;
height: 24rpx;
border-radius: 50%;
}
.outer-dot-1::after,
.outer-dot-2::after,
.outer-dot-3::after,
.outer-dot-4::after {
content: '';
position: absolute;
width: 24rpx;
height: 24rpx;
border-radius: 50%;
background-color: #fff;
}
.outer-dot-1::before {
bottom: -12rpx;
left: 24rpx;
background-color: #E2F7FE;
z-index: 4;
}
.outer-dot-1::after {
right: -12rpx;
top: 24rpx;
}
.outer-dot-2::before {
top: 24rpx;
left: -12rpx;
background-color: #f2ebff;
}
.outer-dot-2::after {
bottom: -12rpx;
right: 24rpx;
z-index: 1;
}
.outer-dot-3::before {
right: -12rpx;
bottom: 24rpx;
background-color: #e1fff9;
z-index: 3;
}
.outer-dot-3::after {
top: -12rpx;
left: 24rpx;
}
.outer-dot-4::before {
top: -12rpx;
right: 24rpx;
background-color: #d3f3ff;
z-index: 2;
}
.outer-dot-4::after {
left: -12rpx;
bottom: 24rpx;
}
</style>

114
src/chart-sub/evaluate/sixReport/explorePotential.vue
View File

@ -2,6 +2,7 @@
import Navbar from '@/chart-sub/components/navbar/Navbar.vue' import Navbar from '@/chart-sub/components/navbar/Navbar.vue'
import RadarChart from '@/chart-sub/evaluate/components/RadarChart.vue' import RadarChart from '@/chart-sub/evaluate/components/RadarChart.vue'
import { getCustomScaleExplains } from '@/service' import { getCustomScaleExplains } from '@/service'
import EnvironmentCardSection from './components/EnvironmentCardSection.vue'
definePage({ definePage({
style: { style: {
@ -45,22 +46,6 @@ const sharePath = computed(() => {
: '/chart-sub/evaluate/sixReport/explorePotential' : '/chart-sub/evaluate/sixReport/explorePotential'
}) })
const environmentCardStyles = [
'bg-gradient-to-t from-[#E3F7FE] to-[#D6F2FF] outer-dot-1',
'bg-gradient-to-t from-[#F6F3FE] to-[#F2EAFF] outer-dot-2',
'bg-gradient-to-t from-[#E5FFF9] to-[#D2FEF7] outer-dot-3',
'bg-gradient-to-t from-[#E7F9FF] to-[#D3F3FF] outer-dot-4',
]
const environmentCards = computed(() => {
const cards = detailData.value?.reportView?.environmentCards ?? detailData.value?.environmentCards
return Array.isArray(cards) ? cards : []
})
function getEnvironmentCardClass(index: number) {
return environmentCardStyles[index % environmentCardStyles.length]
}
const redirectToTest = () => { const redirectToTest = () => {
uni.navigateTo({ uni.navigateTo({
url: `/chart-sub/evaluate/doPage/assessmentPage?id=${detailData.value.scaleId}&name=${detailData.value.title}`, url: `/chart-sub/evaluate/doPage/assessmentPage?id=${detailData.value.scaleId}&name=${detailData.value.title}`,
@ -120,7 +105,7 @@ onShareAppMessage(() => {
<view class="font-700 text-[72rpx] font-[DinBold]">{{ detailData.reportView.score }}</view> <view class="font-700 text-[72rpx] font-[DinBold]">{{ detailData.reportView.score }}</view>
<view class="text-[28rpx] font-700">分</view> <view class="text-[28rpx] font-700">分</view>
</view> </view>
<view class="text-[#333] text-[24rpx] font-500">组织管理能力</view> <view class="text-[#333] text-[24rpx] font-500">{{ detailData.reportView.scoreDimension }}</view>
<view class="w-[132rpx] h-[40rpx] mt-[10rpx]"> <view class="w-[132rpx] h-[40rpx] mt-[10rpx]">
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_youshi.png" <image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_youshi.png"
mode="scaleToFill" class="w-[132rpx] h-[40rpx]" /> mode="scaleToFill" class="w-[132rpx] h-[40rpx]" />
@ -141,16 +126,7 @@ onShareAppMessage(() => {
</view> </view>
</view> </view>
<view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]"> <EnvironmentCardSection :detail-data="detailData" />
<view class="text-[36rpx] font-600">{{ detailData.reportView.environmentTitle }}</view>
<view class="grid grid-cols-2 gap-[6rpx] mt-[20rpx]">
<view v-for="(item, index) in environmentCards" :key="`${item.title}-${index}`"
class="h-[176rpx] px-[24rpx] py-[30rpx] box-border" :class="getEnvironmentCardClass(index)">
<view class="font-600 text-[32rpx]">{{ item.title }}</view>
<view class="text-[24rpx] text-[#3D3D3D]">{{ item.description }}</view>
</view>
</view>
</view>
</view> </view>
@ -213,90 +189,6 @@ onShareAppMessage(() => {
} }
.outer-dot-1,
.outer-dot-2,
.outer-dot-3,
.outer-dot-4 {
position: relative;
border-radius: 20rpx;
}
.outer-dot-1::before,
.outer-dot-2::before,
.outer-dot-3::before,
.outer-dot-4::before {
content: "";
position: absolute;
width: 24rpx;
height: 24rpx;
border-radius: 50%;
}
.outer-dot-1::after,
.outer-dot-2::after,
.outer-dot-3::after,
.outer-dot-4::after {
content: "";
position: absolute;
width: 24rpx;
height: 24rpx;
border-radius: 50%;
background-color: #fff;
}
.outer-dot-1::before {
bottom: -12rpx;
left: 24rpx;
background-color: #D2F3FF;
z-index: 4;
}
.outer-dot-1::after {
right: -12rpx;
top: 24rpx;
}
.outer-dot-2::before {
top: 24rpx;
left: -12rpx;
background-color: #F2EBFF;
}
.outer-dot-2::after {
bottom: -12rpx;
right: 24rpx;
z-index: 1;
}
.outer-dot-3::before {
right: -12rpx;
bottom: 24rpx;
background-color: #E1FFF9 ;
z-index: 3;
}
.outer-dot-3::after {
top: -12rpx;
left: 24rpx;
}
.outer-dot-4::before {
top: -12rpx;
right: 24rpx;
background-color: #D3F3FF;
z-index: 2;
}
.outer-dot-4::after {
left: -12rpx;
bottom: 24rpx;
}
button::after { button::after {
border: none; border: none;
} }

122
src/chart-sub/evaluate/sixReport/futureDirection.vue
View File

@ -2,6 +2,7 @@
import Navbar from '@/chart-sub/components/navbar/Navbar.vue' import Navbar from '@/chart-sub/components/navbar/Navbar.vue'
import RadarChart from '@/chart-sub/evaluate/components/RadarChart.vue' import RadarChart from '@/chart-sub/evaluate/components/RadarChart.vue'
import { getCustomScaleExplains } from '@/service' import { getCustomScaleExplains } from '@/service'
import EnvironmentCardSection from './components/EnvironmentCardSection.vue'
definePage({ definePage({
style: { style: {
@ -45,22 +46,6 @@ const sharePath = computed(() => {
: '/chart-sub/evaluate/sixReport/explorePotential' : '/chart-sub/evaluate/sixReport/explorePotential'
}) })
const environmentCardStyles = [
'bg-gradient-to-t from-[#E3F7FE] to-[#D6F2FF] outer-dot-1',
'bg-gradient-to-t from-[#F6F3FE] to-[#F2EAFF] outer-dot-2',
'bg-gradient-to-t from-[#E5FFF9] to-[#D2FEF7] outer-dot-3',
'bg-gradient-to-t from-[#E7F9FF] to-[#D3F3FF] outer-dot-4',
]
const environmentCards = computed(() => {
const cards = detailData.value?.reportView?.environmentCards ?? detailData.value?.environmentCards
return Array.isArray(cards) ? cards : []
})
function getEnvironmentCardClass(index: number) {
return environmentCardStyles[index % environmentCardStyles.length]
}
const redirectToTest = () => { const redirectToTest = () => {
uni.navigateTo({ uni.navigateTo({
url: `/chart-sub/evaluate/doPage/assessmentPage?id=${detailData.value.scaleId}&name=${detailData.value.title}`, url: `/chart-sub/evaluate/doPage/assessmentPage?id=${detailData.value.scaleId}&name=${detailData.value.title}`,
@ -107,13 +92,13 @@ onShareAppMessage(() => {
class="w-[40rpx] h-[48rpx]" /> class="w-[40rpx] h-[48rpx]" />
<view class="relative m-[4rpx]"> <view class="relative m-[4rpx]">
<view class="relative z-2 text-[32rpx] text-[#000]"> <view class="relative z-2 text-[32rpx] text-[#000]">
你的天赋类型为 {{ detailData.reportView.headerTitle }}
</view> </view>
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_xiantiao.png" mode="scaleToFill" <image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_xiantiao.png" mode="scaleToFill"
class="absolute top-[22rpx] left-[66rpx] w-[124rpx] h-[28rpx]" /> class="absolute top-[22rpx] left-[66rpx] w-[124rpx] h-[28rpx]" />
</view> </view>
</view> </view>
<view class="text-[92rpx] font-[700] font-[AlimamaShuHeiTi] text-center my-[24rpx]">{{ detailData.reportView.scoreDimension }}</view> <view class="text-[92rpx] font-[700] font-[AlimamaShuHeiTi] text-center my-[24rpx]">{{ detailData.reportView.mainTitle }}</view>
<view <view
class="select-box bg-[#E7F2FF] border-[2rpx] border-[#1580FF] border-solid text-[26rpx] font-500 text-center py-[20rpx]">{{ detailData.reportView.keywords.join(' · ') }}</view> class="select-box bg-[#E7F2FF] border-[2rpx] border-[#1580FF] border-solid text-[26rpx] font-500 text-center py-[20rpx]">{{ detailData.reportView.keywords.join(' · ') }}</view>
@ -124,7 +109,7 @@ onShareAppMessage(() => {
<view class="font-700 text-[72rpx] font-[DinBold]">{{ detailData.reportView.score }}</view> <view class="font-700 text-[72rpx] font-[DinBold]">{{ detailData.reportView.score }}</view>
<view class="text-[28rpx] font-700">分</view> <view class="text-[28rpx] font-700">分</view>
</view> </view>
<view class="text-[#333] text-[24rpx] font-500">组织管理能力</view> <view class="text-[#333] text-[24rpx] font-500">{{ detailData.reportView.scoreDimension }}</view>
<view class="w-[132rpx] h-[40rpx] mt-[10rpx]"> <view class="w-[132rpx] h-[40rpx] mt-[10rpx]">
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_youshi.png" mode="scaleToFill" <image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_youshi.png" mode="scaleToFill"
class="w-[132rpx] h-[40rpx]" /> class="w-[132rpx] h-[40rpx]" />
@ -144,20 +129,7 @@ onShareAppMessage(() => {
</view> </view>
</view> </view>
<view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]"> <EnvironmentCardSection :detail-data="detailData" />
<view class="text-[36rpx] font-600">{{ detailData.reportView.environmentTitle }}</view>
<view class="grid grid-cols-2 gap-[6rpx] mt-[20rpx]">
<view
v-for="(item, index) in environmentCards"
:key="`${item.title}-${index}`"
class="h-[176rpx] px-[24rpx] py-[30rpx] box-border"
:class="getEnvironmentCardClass(index)"
>
<view class="font-600 text-[32rpx]">{{ item.title }}</view>
<view class="text-[24rpx] text-[#3D3D3D]">{{ item.description }}</view>
</view>
</view>
</view>
</view> </view>
@ -221,90 +193,6 @@ onShareAppMessage(() => {
} }
.outer-dot-1,
.outer-dot-2,
.outer-dot-3,
.outer-dot-4 {
position: relative;
border-radius: 20rpx;
}
.outer-dot-1::before,
.outer-dot-2::before,
.outer-dot-3::before,
.outer-dot-4::before {
content: "";
position: absolute;
width: 24rpx;
height: 24rpx;
border-radius: 50%;
}
.outer-dot-1::after,
.outer-dot-2::after,
.outer-dot-3::after,
.outer-dot-4::after {
content: "";
position: absolute;
width: 24rpx;
height: 24rpx;
border-radius: 50%;
background-color: #fff;
}
.outer-dot-1::before {
bottom: -12rpx;
left: 24rpx;
background-color: #D2F3FF;
z-index: 4;
}
.outer-dot-1::after {
right: -12rpx;
top: 24rpx;
}
.outer-dot-2::before {
top: 24rpx;
left: -12rpx;
background-color: #F2EBFF;
}
.outer-dot-2::after {
bottom: -12rpx;
right: 24rpx;
z-index: 1;
}
.outer-dot-3::before {
right: -12rpx;
bottom: 24rpx;
background-color: #E1FFF9 ;
z-index: 3;
}
.outer-dot-3::after {
top: -12rpx;
left: 24rpx;
}
.outer-dot-4::before {
top: -12rpx;
right: 24rpx;
background-color: #D3F3FF;
z-index: 2;
}
.outer-dot-4::after {
left: -12rpx;
bottom: 24rpx;
}
button::after { button::after {
border: none; border: none;
} }

114
src/chart-sub/evaluate/sixReport/growthPlanning.vue
View File

@ -1,6 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import Navbar from '@/chart-sub/components/navbar/Navbar.vue' import Navbar from '@/chart-sub/components/navbar/Navbar.vue'
import { getCustomScaleExplains } from '@/service' import { getCustomScaleExplains } from '@/service'
import EnvironmentCardSection from './components/EnvironmentCardSection.vue'
definePage({ definePage({
style: { style: {
@ -19,22 +20,6 @@ const handleBack = () => {
const detailData = ref<any>({}); const detailData = ref<any>({});
const environmentCardStyles = [
'bg-gradient-to-t from-[#E3F7FE] to-[#D6F2FF] outer-dot-1',
'bg-gradient-to-t from-[#F6F3FE] to-[#F2EAFF] outer-dot-2',
'bg-gradient-to-t from-[#E5FFF9] to-[#D2FEF7] outer-dot-3',
'bg-gradient-to-t from-[#E7F9FF] to-[#D3F3FF] outer-dot-4',
]
const environmentCards = computed(() => {
const cards = detailData.value?.reportView?.environmentCards ?? detailData.value?.environmentCards
return Array.isArray(cards) ? cards : []
})
function getEnvironmentCardClass(index: number) {
return environmentCardStyles[index % environmentCardStyles.length]
}
const redirectToTest = () => { const redirectToTest = () => {
uni.navigateTo({ uni.navigateTo({
url: `/chart-sub/evaluate/doPage/assessmentPage?id=${detailData.value.scaleId}&name=${detailData.value.title}`, url: `/chart-sub/evaluate/doPage/assessmentPage?id=${detailData.value.scaleId}&name=${detailData.value.title}`,
@ -74,7 +59,7 @@ onLoad((options:any) => {
class="w-[40rpx] h-[48rpx]" /> class="w-[40rpx] h-[48rpx]" />
<view class="relative m-[4rpx]"> <view class="relative m-[4rpx]">
<view class="relative z-2 text-[32rpx] text-[#000]"> <view class="relative z-2 text-[32rpx] text-[#000]">
你的天赋类型为 {{ detailData.reportView.headerTitle }}
</view> </view>
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_xiantiao.png" mode="scaleToFill" <image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_xiantiao.png" mode="scaleToFill"
class="absolute top-[22rpx] left-[66rpx] w-[124rpx] h-[28rpx]" /> class="absolute top-[22rpx] left-[66rpx] w-[124rpx] h-[28rpx]" />
@ -85,16 +70,7 @@ onLoad((options:any) => {
<view class="text-[28rpx] text-[#333] mt-[20rpx] mx-[30rpx]" v-html="detailData.reportView.portrait"> <view class="text-[28rpx] text-[#333] mt-[20rpx] mx-[30rpx]" v-html="detailData.reportView.portrait">
</view> </view>
</view> </view>
<view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]"> <EnvironmentCardSection :detail-data="detailData" />
<view class="text-[36rpx] font-600">{{ detailData.reportView.environmentTitle }}</view>
<view class="grid grid-cols-2 gap-[6rpx] mt-[20rpx]">
<view v-for="(item, index) in environmentCards" :key="`${item.title}-${index}`"
class="h-[176rpx] px-[24rpx] py-[30rpx] box-border" :class="getEnvironmentCardClass(index)">
<view class="font-600 text-[32rpx]">{{ item.title }}</view>
<view class="text-[24rpx] text-[#3D3D3D]">{{ item.description }}</view>
</view>
</view>
</view>
</view> </view>
@ -158,90 +134,6 @@ onLoad((options:any) => {
} }
.outer-dot-1,
.outer-dot-2,
.outer-dot-3,
.outer-dot-4 {
position: relative;
border-radius: 20rpx;
}
.outer-dot-1::before,
.outer-dot-2::before,
.outer-dot-3::before,
.outer-dot-4::before {
content: "";
position: absolute;
width: 24rpx;
height: 24rpx;
border-radius: 50%;
}
.outer-dot-1::after,
.outer-dot-2::after,
.outer-dot-3::after,
.outer-dot-4::after {
content: "";
position: absolute;
width: 24rpx;
height: 24rpx;
border-radius: 50%;
background-color: #fff;
}
.outer-dot-1::before {
bottom: -12rpx;
left: 24rpx;
background-color: #D2F3FF;
z-index: 4;
}
.outer-dot-1::after {
right: -12rpx;
top: 24rpx;
}
.outer-dot-2::before {
top: 24rpx;
left: -12rpx;
background-color: #F2EBFF;
}
.outer-dot-2::after {
bottom: -12rpx;
right: 24rpx;
z-index: 1;
}
.outer-dot-3::before {
right: -12rpx;
bottom: 24rpx;
background-color: #E1FFF9 ;
z-index: 3;
}
.outer-dot-3::after {
top: -12rpx;
left: 24rpx;
}
.outer-dot-4::before {
top: -12rpx;
right: 24rpx;
background-color: #D3F3FF;
z-index: 2;
}
.outer-dot-4::after {
left: -12rpx;
bottom: 24rpx;
}
button::after { button::after {
border: none; border: none;
} }

120
src/chart-sub/evaluate/sixReport/learningAbility.vue
View File

@ -2,6 +2,7 @@
import Navbar from '@/chart-sub/components/navbar/Navbar.vue' import Navbar from '@/chart-sub/components/navbar/Navbar.vue'
import RadarChart from '@/chart-sub/evaluate/components/RadarChart.vue' import RadarChart from '@/chart-sub/evaluate/components/RadarChart.vue'
import { getCustomScaleExplains } from '@/service' import { getCustomScaleExplains } from '@/service'
import EnvironmentCardSection from './components/EnvironmentCardSection.vue'
definePage({ definePage({
style: { style: {
@ -45,22 +46,6 @@ const sharePath = computed(() => {
: '/chart-sub/evaluate/sixReport/explorePotential' : '/chart-sub/evaluate/sixReport/explorePotential'
}) })
const environmentCardStyles = [
'bg-gradient-to-t from-[#E3F7FE] to-[#D6F2FF] outer-dot-1',
'bg-gradient-to-t from-[#F6F3FE] to-[#F2EAFF] outer-dot-2',
'bg-gradient-to-t from-[#E5FFF9] to-[#D2FEF7] outer-dot-3',
'bg-gradient-to-t from-[#E7F9FF] to-[#D3F3FF] outer-dot-4',
]
const environmentCards = computed(() => {
const cards = detailData.value?.reportView?.environmentCards ?? detailData.value?.environmentCards
return Array.isArray(cards) ? cards : []
})
function getEnvironmentCardClass(index: number) {
return environmentCardStyles[index % environmentCardStyles.length]
}
const redirectToTest = () => { const redirectToTest = () => {
uni.navigateTo({ uni.navigateTo({
url: `/chart-sub/evaluate/doPage/assessmentPage?id=${detailData.value.scaleId}&name=${detailData.value.title}`, url: `/chart-sub/evaluate/doPage/assessmentPage?id=${detailData.value.scaleId}&name=${detailData.value.title}`,
@ -101,14 +86,14 @@ onShareAppMessage(() => {
class="w-[40rpx] h-[48rpx]" /> class="w-[40rpx] h-[48rpx]" />
<view class="relative m-[4rpx]"> <view class="relative m-[4rpx]">
<view class="relative z-2 text-[32rpx] text-[#000]"> <view class="relative z-2 text-[32rpx] text-[#000]">
你的天赋类型为 {{ detailData.reportView.headerTitle }}
</view> </view>
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_xiantiao.png" <image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_xiantiao.png"
mode="scaleToFill" class="absolute top-[22rpx] left-[66rpx] w-[124rpx] h-[28rpx]" /> mode="scaleToFill" class="absolute top-[22rpx] left-[66rpx] w-[124rpx] h-[28rpx]" />
</view> </view>
</view> </view>
<view class="mx-[30rpx] text-[92rpx] font-[700] font-[AlimamaShuHeiTi] text-center my-[24rpx]">{{ <view class="mx-[30rpx] text-[92rpx] font-[700] font-[AlimamaShuHeiTi] text-center my-[24rpx]">{{
detailData.reportView.scoreDimension }}</view> detailData.reportView.mainTitle }}</view>
<view <view
class="mx-[18rpx] select-box bg-[#E7F2FF] border-[2rpx] border-[#1580FF] border-solid text-[26rpx] font-500 py-[20rpx] text-center"> class="mx-[18rpx] select-box bg-[#E7F2FF] border-[2rpx] border-[#1580FF] border-solid text-[26rpx] font-500 py-[20rpx] text-center">
{{ detailData.reportView.keywords.join(' · ') }}</view> {{ detailData.reportView.keywords.join(' · ') }}</view>
@ -120,7 +105,7 @@ onShareAppMessage(() => {
<view class="font-700 text-[72rpx] font-[DinBold]">{{ detailData.reportView.score }}</view> <view class="font-700 text-[72rpx] font-[DinBold]">{{ detailData.reportView.score }}</view>
<view class="text-[28rpx] font-700">分</view> <view class="text-[28rpx] font-700">分</view>
</view> </view>
<view class="text-[#333] text-[24rpx] font-500">组织管理能力</view> <view class="text-[#333] text-[24rpx] font-500">{{ detailData.reportView.scoreDimension }}</view>
<view class="w-[132rpx] h-[40rpx] mt-[10rpx]"> <view class="w-[132rpx] h-[40rpx] mt-[10rpx]">
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_youshi.png" <image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_youshi.png"
mode="scaleToFill" class="w-[132rpx] h-[40rpx]" /> mode="scaleToFill" class="w-[132rpx] h-[40rpx]" />
@ -129,7 +114,7 @@ onShareAppMessage(() => {
<RadarChart class="flex-1" :data="detailData.picCharts" /> <RadarChart class="flex-1" :data="detailData.picCharts" />
</view> </view>
<view class="text-[24rpx] text-[#333] flex items-center justify-center mt-[10rpx]">已超过济南 <view <view class="text-[24rpx] text-[#333] flex items-center justify-center mt-[10rpx]">已超过济南<view
class="font-[DinBold] text-[32rpx] font-700 text-[#F5663E]">{{ detailData.reportView.beatPercent class="font-[DinBold] text-[32rpx] font-700 text-[#F5663E]">{{ detailData.reportView.beatPercent
}}%</view> 的同龄学生</view> }}%</view> 的同龄学生</view>
</view> </view>
@ -141,16 +126,7 @@ onShareAppMessage(() => {
</view> </view>
</view> </view>
<view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]"> <EnvironmentCardSection :detail-data="detailData" />
<view class="text-[36rpx] font-600">{{ detailData.reportView.environmentTitle }}</view>
<view class="grid grid-cols-2 gap-[6rpx] mt-[20rpx]">
<view v-for="(item, index) in environmentCards" :key="`${item.title}-${index}`"
class="h-[176rpx] px-[24rpx] py-[30rpx] box-border" :class="getEnvironmentCardClass(index)">
<view class="font-600 text-[32rpx]">{{ item.title }}</view>
<view class="text-[24rpx] text-[#3D3D3D]">{{ item.description }}</view>
</view>
</view>
</view>
</view> </view>
@ -213,90 +189,6 @@ onShareAppMessage(() => {
} }
.outer-dot-1,
.outer-dot-2,
.outer-dot-3,
.outer-dot-4 {
position: relative;
border-radius: 20rpx;
}
.outer-dot-1::before,
.outer-dot-2::before,
.outer-dot-3::before,
.outer-dot-4::before {
content: "";
position: absolute;
width: 24rpx;
height: 24rpx;
border-radius: 50%;
}
.outer-dot-1::after,
.outer-dot-2::after,
.outer-dot-3::after,
.outer-dot-4::after {
content: "";
position: absolute;
width: 24rpx;
height: 24rpx;
border-radius: 50%;
background-color: #fff;
}
.outer-dot-1::before {
bottom: -12rpx;
left: 24rpx;
background-color: #D2F3FF;
z-index: 4;
}
.outer-dot-1::after {
right: -12rpx;
top: 24rpx;
}
.outer-dot-2::before {
top: 24rpx;
left: -12rpx;
background-color: #F2EBFF;
}
.outer-dot-2::after {
bottom: -12rpx;
right: 24rpx;
z-index: 1;
}
.outer-dot-3::before {
right: -12rpx;
bottom: 24rpx;
background-color: #E1FFF9;
z-index: 3;
}
.outer-dot-3::after {
top: -12rpx;
left: 24rpx;
}
.outer-dot-4::before {
top: -12rpx;
right: 24rpx;
background-color: #D3F3FF;
z-index: 2;
}
.outer-dot-4::after {
left: -12rpx;
bottom: 24rpx;
}
button::after { button::after {
border: none; border: none;
} }

9
src/pages/evaluation/index.vue
View File

@ -13,8 +13,8 @@
<image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/ceping_touxiang.png" mode="scaleToFill" <image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/ceping_touxiang.png" mode="scaleToFill"
class="w-[74rpx] h-[28rpx]" /> class="w-[74rpx] h-[28rpx]" />
<view>已帮助</view> <view>已帮助</view>
<view class="text-[#F5663E] font-[DinBold] font-700 text-[26rpx] leading-[1]">22632</view> <view class="text-[#F5663E] font-[DinBold] font-700 text-[26rpx] leading-[1]">{{ count }}</view>
<view>济南家庭</view> <view>{{ city }}家庭</view>
</view> </view>
</view> </view>
@ -132,7 +132,7 @@ const navigateToServer = () => {
} }
const count = ref(0) const count = ref(0)
const city = ref('')
onShow(() => { onShow(() => {
getEvaluationList({ query: { menuid: '339907260608593' } }).then(resp => { getEvaluationList({ query: { menuid: '339907260608593' } }).then(resp => {
if (resp.code === 200) { if (resp.code === 200) {
@ -141,7 +141,8 @@ onShow(() => {
}) })
getHelpedFamilyCount().then(resp => { getHelpedFamilyCount().then(resp => {
if (resp.code === 200) { if (resp.code === 200) {
count.value = resp.result count.value = resp.result.count
city.value = resp.result.city
} }
}) })
}) })