From e4494cc1798f82feacfd6291c1e6955c1a904f0b Mon Sep 17 00:00:00 2001
From: xjs <xjs@ycymedu.com>
Date: Tue, 7 Jul 2026 11:00:38 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=8F=82=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/EnvironmentCardSection.vue     | 142 ++++++++++++++++++
 .../evaluate/sixReport/explorePotential.vue   | 114 +-------------
 .../evaluate/sixReport/futureDirection.vue    | 122 +--------------
 .../evaluate/sixReport/growthPlanning.vue     | 114 +-------------
 .../evaluate/sixReport/learningAbility.vue    | 120 +--------------
 src/pages/evaluation/index.vue                |   9 +-
 6 files changed, 164 insertions(+), 457 deletions(-)
 create mode 100644 src/chart-sub/evaluate/sixReport/components/EnvironmentCardSection.vue

diff --git a/src/chart-sub/evaluate/sixReport/components/EnvironmentCardSection.vue b/src/chart-sub/evaluate/sixReport/components/EnvironmentCardSection.vue
new file mode 100644
index 0000000..7a07a8f
--- /dev/null
+++ b/src/chart-sub/evaluate/sixReport/components/EnvironmentCardSection.vue
@@ -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>
diff --git a/src/chart-sub/evaluate/sixReport/explorePotential.vue b/src/chart-sub/evaluate/sixReport/explorePotential.vue
index 23b6aeb..c6415c1 100644
--- a/src/chart-sub/evaluate/sixReport/explorePotential.vue
+++ b/src/chart-sub/evaluate/sixReport/explorePotential.vue
@@ -2,6 +2,7 @@
 import Navbar from '@/chart-sub/components/navbar/Navbar.vue'
 import RadarChart from '@/chart-sub/evaluate/components/RadarChart.vue'
 import { getCustomScaleExplains } from '@/service'
+import EnvironmentCardSection from './components/EnvironmentCardSection.vue'
 
 definePage({
     style: {
@@ -45,22 +46,6 @@ const sharePath = computed(() => {
         : '/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 = () => {
     uni.navigateTo({
         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="text-[28rpx] font-700">分</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]">
                             <image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_youshi.png"
                                 mode="scaleToFill" class="w-[132rpx] h-[40rpx]" />
@@ -141,16 +126,7 @@ onShareAppMessage(() => {
                 </view>
             </view>
 
-            <view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]">
-                <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>
+            <EnvironmentCardSection :detail-data="detailData" />
         </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 {
     border: none;
 }
diff --git a/src/chart-sub/evaluate/sixReport/futureDirection.vue b/src/chart-sub/evaluate/sixReport/futureDirection.vue
index 48cdede..704278e 100644
--- a/src/chart-sub/evaluate/sixReport/futureDirection.vue
+++ b/src/chart-sub/evaluate/sixReport/futureDirection.vue
@@ -2,6 +2,7 @@
 import Navbar from '@/chart-sub/components/navbar/Navbar.vue'
 import RadarChart from '@/chart-sub/evaluate/components/RadarChart.vue'
 import { getCustomScaleExplains } from '@/service'
+import EnvironmentCardSection from './components/EnvironmentCardSection.vue'
 
 definePage({
     style: {
@@ -45,22 +46,6 @@ const sharePath = computed(() => {
         : '/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 = () => {
     uni.navigateTo({
       url: `/chart-sub/evaluate/doPage/assessmentPage?id=${detailData.value.scaleId}&name=${detailData.value.title}`,
@@ -107,13 +92,13 @@ onShareAppMessage(() => {
                         class="w-[40rpx] h-[48rpx]" />
                     <view class="relative m-[4rpx]">
                         <view class="relative z-2 text-[32rpx] text-[#000]">
-                            你的天赋类型为
+                            {{ detailData.reportView.headerTitle }} 
                         </view>
                         <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]" />
                     </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
                     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="text-[28rpx] font-700">分</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]">
                             <image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_youshi.png" mode="scaleToFill"
                                 class="w-[132rpx] h-[40rpx]" />
@@ -144,20 +129,7 @@ onShareAppMessage(() => {
                 </view>
             </view>
     
-            <view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]">
-                <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>
+            <EnvironmentCardSection :detail-data="detailData" />
         </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 {
     border: none;
 }
diff --git a/src/chart-sub/evaluate/sixReport/growthPlanning.vue b/src/chart-sub/evaluate/sixReport/growthPlanning.vue
index d862c97..25d46be 100644
--- a/src/chart-sub/evaluate/sixReport/growthPlanning.vue
+++ b/src/chart-sub/evaluate/sixReport/growthPlanning.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import Navbar from '@/chart-sub/components/navbar/Navbar.vue'
 import { getCustomScaleExplains } from '@/service'
+import EnvironmentCardSection from './components/EnvironmentCardSection.vue'
 
 definePage({
     style: {
@@ -19,22 +20,6 @@ const handleBack = () => {
 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 = () => {
     uni.navigateTo({
       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]" />
                     <view class="relative m-[4rpx]">
                         <view class="relative z-2 text-[32rpx] text-[#000]">
-                            你的天赋类型为
+                            {{ detailData.reportView.headerTitle }} 
                         </view>
                         <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]" />
@@ -85,16 +70,7 @@ onLoad((options:any) => {
                 <view class="text-[28rpx] text-[#333] mt-[20rpx] mx-[30rpx]" v-html="detailData.reportView.portrait">
                 </view>
             </view>
-            <view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]">
-                <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>
+            <EnvironmentCardSection :detail-data="detailData" />
         </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 {
     border: none;
 }
diff --git a/src/chart-sub/evaluate/sixReport/learningAbility.vue b/src/chart-sub/evaluate/sixReport/learningAbility.vue
index bb716c9..07ba0a8 100644
--- a/src/chart-sub/evaluate/sixReport/learningAbility.vue
+++ b/src/chart-sub/evaluate/sixReport/learningAbility.vue
@@ -2,6 +2,7 @@
 import Navbar from '@/chart-sub/components/navbar/Navbar.vue'
 import RadarChart from '@/chart-sub/evaluate/components/RadarChart.vue'
 import { getCustomScaleExplains } from '@/service'
+import EnvironmentCardSection from './components/EnvironmentCardSection.vue'
 
 definePage({
     style: {
@@ -45,22 +46,6 @@ const sharePath = computed(() => {
         : '/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 = () => {
     uni.navigateTo({
         url: `/chart-sub/evaluate/doPage/assessmentPage?id=${detailData.value.scaleId}&name=${detailData.value.title}`,
@@ -101,14 +86,14 @@ onShareAppMessage(() => {
                         class="w-[40rpx] h-[48rpx]" />
                     <view class="relative m-[4rpx]">
                         <view class="relative z-2 text-[32rpx] text-[#000]">
-                            你的天赋类型为
+                            {{ detailData.reportView.headerTitle }} 
                         </view>
                         <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]" />
                     </view>
                 </view>
                 <view class="mx-[30rpx] text-[92rpx] font-[700] font-[AlimamaShuHeiTi] text-center my-[24rpx]">{{
-                    detailData.reportView.scoreDimension }}</view>
+                    detailData.reportView.mainTitle }}</view>
                 <view
                     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>
@@ -120,7 +105,7 @@ onShareAppMessage(() => {
                             <view class="font-700 text-[72rpx] font-[DinBold]">{{ detailData.reportView.score }}</view>
                             <view class="text-[28rpx] font-700">分</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]">
                             <image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_youshi.png"
                                 mode="scaleToFill" class="w-[132rpx] h-[40rpx]" />
@@ -129,7 +114,7 @@ onShareAppMessage(() => {
                     <RadarChart class="flex-1" :data="detailData.picCharts" />
                 </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
                         }}%</view> 的同龄学生</view>
             </view>
@@ -141,16 +126,7 @@ onShareAppMessage(() => {
                 </view>
             </view>
 
-            <view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]">
-                <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>
+            <EnvironmentCardSection :detail-data="detailData" />
         </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 {
     border: none;
 }
diff --git a/src/pages/evaluation/index.vue b/src/pages/evaluation/index.vue
index d78fcee..445cc2d 100644
--- a/src/pages/evaluation/index.vue
+++ b/src/pages/evaluation/index.vue
@@ -13,8 +13,8 @@
         <image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/ceping_touxiang.png" mode="scaleToFill"
           class="w-[74rpx] h-[28rpx]" />
         <view>已帮助</view>
-        <view class="text-[#F5663E] font-[DinBold] font-700 text-[26rpx] leading-[1]">22632</view>
-        <view>济南家庭</view>
+        <view class="text-[#F5663E] font-[DinBold] font-700 text-[26rpx] leading-[1]">{{ count }}</view>
+        <view>{{ city }}家庭</view>
       </view>
     </view>
 
@@ -132,7 +132,7 @@ const navigateToServer = () => {
 }
 
 const count = ref(0)
-
+const city = ref('')
 onShow(() => {
   getEvaluationList({ query: { menuid: '339907260608593' } }).then(resp => {
     if (resp.code === 200) {
@@ -141,7 +141,8 @@ onShow(() => {
   })
   getHelpedFamilyCount().then(resp => {
     if (resp.code === 200) {
-     count.value = resp.result 
+     count.value = resp.result.count
+     city.value = resp.result.city
     }
   })
 })