feat(user/introduction): 优化土壤pH统计页面布局与展示

1.  将南雄土壤统计改为韶关土壤统计
2.  调整地图和统计面板的位置与尺寸
3.  移动综合评估评论到独立面板
4.  添加pH区间注释与统计注释
5.  修正部分样式细节

src/views/User/introduction/TotalIntroduction.vue

@@ -1,4 +1,7 @@
 <script setup>
+// 安全区间 (0.0-0.2 mg/kg)
+// 预警区间 (0.2-0.3 mg/kg)
+// 超标区间 (≥0.3 mg/kg)
    import { ref, watch, onMounted, onBeforeUnmount, onUnmounted ,computed,nextTick} from 'vue'
    import L from 'leaflet'
    import 'leaflet/dist/leaflet.css'
@@ -11,6 +14,7 @@
    let geoJsonLayer = null
 
 
+  //  统计信息
    const statistics = ref({
      totalBlocks: 0,
      avgPH: 0,
@@ -28,7 +32,7 @@
      normalPercent: 0
    })
 
-  //  
+  //  pH 分布个数计算
    const phDistribution = ref({
      range1: 0,
      range2: 0,
@@ -37,9 +41,11 @@
 
    const selectedPoint = ref(null)
 
+  //  地图配置
    const CONFIG = {
     center:[25.202903, 113.25383],
     zoom:11,
+    //  获取所有点的 API 地址
     getPoint:'/api/vector/export/all?table_name=le_data_block_map&format=geojson',
     geoserver:{
       url:'/geoserver',
@@ -485,7 +491,7 @@ onUnmounted(()=>{
      </div>
     <!-- pH 统计 -->
     <div class="statistics-panel">
-      <h4>📊 南雄土壤 pH 统计</h4>
+      <h4>📊 韶关土壤 pH 统计</h4>
       
       <div class="stat-row">
         <span class="stat-label">地块总数:</span>
@@ -545,13 +551,6 @@ onUnmounted(()=>{
         <span class="stat-label">最低 pH:</span>
         <span class="stat-value danger">{{ statistics.minPH || '-' }}</span>
       </div>
-      
-      <div class="stat-comment" v-if="statistics.avgPH > 0">
-        <div class="comment-title">📝 综合评估:</div>
-        <div class="comment-text" :class="getPHLevelClass(statistics.avgPH)">
-          {{ getPHComment(statistics.avgPH) }}
-        </div>
-      </div>
     </div>
 
     <!-- ph分布 -->
@@ -581,6 +580,13 @@ onUnmounted(()=>{
         </div>
       </div>
     </div>
+
+    <div class="stat-comment" v-if="statistics.avgPH > 0">
+        <div class="comment-title">📝 综合评估:</div>
+        <div class="comment-text" :class="getPHLevelClass(statistics.avgPH)">
+          {{ getPHComment(statistics.avgPH) }}
+        </div>
+      </div>
     
     <!-- 图例 -->
     <div class="legend">
@@ -645,8 +651,7 @@ onUnmounted(()=>{
 }
 
 .ph-map{
-  width: 65%;
-  height: 95%;
+  width: 600px;
   min-height: 500px;
   border-radius: 16px; /* 圆角大小，可根据需要调整，比如 10px、20px */
   border: 3px solid #1092d8; /* 蓝色边框，宽度和颜色可自定义 */
@@ -656,14 +661,15 @@ onUnmounted(()=>{
 /* ✅ 统计面板样式 */
 .statistics-panel {
   position: absolute;
-  top: 100px;
-  right: 10px;
+  top: 0px;
+  left: 650px;
   background: rgba(255, 255, 255, 0.95);
   padding: 20px;
   border-radius: 12px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
   z-index: 1000;
   min-width: 350px;
+  height: 450px;
   backdrop-filter: blur(10px);
   border: 2px solid rgba(16, 146, 216, 0.2);
 }
@@ -766,15 +772,21 @@ onUnmounted(()=>{
 
 /* 综合评语 */
 .stat-comment {
-  margin-top: 15px;
-  padding: 12px;
-  background: rgba(243, 244, 246, 0.8);
-  border-radius: 8px;
+  position: absolute;
+  top: 300px;  /* 放在 pH 分布统计下面 */
+  right: 10px;
+  padding: 15px;
+  width: 350px;  /* 和 pH 分布统计差不多的宽度 */
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  z-index: 1000;
+  backdrop-filter: blur(10px);
   border-left: 4px solid #1092d8;
 }
 
 .comment-title {
-  font-size: 12px;
+  font-size: 15px;
   color: #666;
   margin-bottom: 6px;
   font-weight: bold;
@@ -800,7 +812,7 @@ onUnmounted(()=>{
 
 .distribution-chart {
   position: absolute;
-  top:700px;
+  top:100px;
   right: 10px;
   background: rgba(255, 255, 255, 0.95);
   padding: 15px;