diff --git a/src/views/privateOrder/ecosphere/components/componentmapbox.vue b/src/views/privateOrder/ecosphere/components/componentmapbox.vue
index 7fa1494..442cce0 100644
--- a/src/views/privateOrder/ecosphere/components/componentmapbox.vue
+++ b/src/views/privateOrder/ecosphere/components/componentmapbox.vue
@@ -1,325 +1,676 @@
 <template>
   <div class="map-container">
     <div id="container"></div>
-    <el-dialog
-      v-if="isShowDialog"
-      title=""
-      class="screen-dialog"
-      :visible.sync="isShowDialog"
-      width="650px"
-      :modal-append-to-body="false"
-      center
-      :modal="false"
-    >
-      <div class="top_title">网络举报事件</div>
-      <div class="dialog_ctn">
-        <el-row>
-          <el-col :span="24">
-            <div class="col_title">被举报对象</div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <div class="col_ctn">{{ currentMsg.jbdx }}</div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="8">
-            <div class="col_title">苏州编号</div>
-          </el-col>
-          <el-col :span="8">
-            <div class="col_title">举报时间</div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="8">
-            <div class="col_ctn_little">{{ currentMsg.szbh }}</div>
-          </el-col>
-          <el-col :span="8">
-            <div class="col_ctn_little">{{ currentMsg.jbsj }}</div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <div class="col_title">地址</div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <div class="col_ctn_little">
-              {{ currentMsg.dz }}
+    <!-- 信息弹窗 -->
+    <div class="map-overlay" v-if="showOverlay">
+      <div class="overlay-content">
+        <div class="overlay-header">
+          <div class="overlay-title">{{ currentDistrict.name }}</div>
+          <div class="overlay-close" @click="showOverlay = false">×</div>
+        </div>
+        <div class="overlay-body">
+          <div class="data-stats">
+            <div class="stat-item">
+              <div class="stat-value">{{ currentDistrict.issues || 0 }}</div>
+              <div class="stat-label">问题数量</div>
             </div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <div class="col_title">举报内容</div>
-          </el-col>
-        </el-row>
-        <el-row>
-          <el-col :span="24">
-            <!-- <div class="col_ctn_little" v-html='currentMsg.jbnr'></div> -->
-            <div class="col_ctn_little">{{ currentMsg.jbnr }}</div>
-          </el-col>
-        </el-row>
+            <div class="stat-item">
+              <div class="stat-value">{{ currentDistrict.reports || 0 }}</div>
+              <div class="stat-label">举报数量</div>
+            </div>
+            <div class="stat-item">
+              <div class="stat-value">{{ currentDistrict.handled || 0 }}</div>
+              <div class="stat-label">处理数量</div>
+            </div>
+          </div>
+          <div class="problem-list" v-if="currentDistrict.problemList && currentDistrict.problemList.length">
+            <div class="problem-title">主要问题类型</div>
+            <div class="problem-item" v-for="(item, index) in currentDistrict.problemList" :key="index">
+              <span class="problem-dot"></span>
+              <span class="problem-name">{{ item.name }}</span>
+              <span class="problem-value">{{ item.value }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- 数据卡片 -->
+    <div class="data-card">
+      <div class="data-card-title">数据信息</div>
+      <div class="data-card-content">
+        <div class="data-row">
+          <div class="data-label">网络动态:</div>
+          <div class="data-value highlight">88 条</div>
+        </div>
+        <div class="data-row">
+          <div class="data-label">舆情事件:</div>
+          <div class="data-value highlight">78 次</div>
+        </div>
+        <div class="data-row">
+          <div class="data-label">举报事件:</div>
+          <div class="data-value highlight">24 个</div>
+        </div>
       </div>
-      <div class="dialogClose" @click="isShowDialog = false">关闭</div>
-    </el-dialog>
+    </div>
   </div>
 </template>
 
 <script>
-import location from "@/assets/ecosphere/point.png";
-import { listJbmap, getJbmap } from "@/api/netManage/index.js";
 import AMapLoader from "@amap/amap-jsapi-loader";
+import * as echarts from 'echarts';
+
 export default {
   data() {
-    // VueAMap.initAMapApiLoader({
-    //   key: 'b3c7a7ce466721c3be1d4ea539f82421',              // 高德key
-    //   securityJsCode: 'ec84db9c5dfc3d304ca9219e764ffeb8',   // 安全密钥
-    // });
     return {
-      isShowDialog: false,
-      center: [121.136909, 31.463778],
-      zoom: 14.5,
-      zooms: [14, 18],
-      // markerOffset: [-35,-123],
-      // markers: [],
-      // 展示的内容
-      currentMsg: {
-        jbdx: "电子科技有限公司",
-        szbh: "SZ2023",
-        jbsj: "2023-07-31",
-        dz: "太仓人民政府",
-        jbnr: "偷电",
-      },
       map: null,
-      pointList: [
-        { id: 1, lng: 121.136909, lat: 31.463778, title: "太仓人民政府" },
+      districtLayer: null,
+      showOverlay: false,
+      currentDistrict: {},
+      districts: [
+        {
+          id: 1,
+          name: "苏州工业园区金鸡湖商务区",
+          center: [120.7214, 31.3217],
+          issues: 24,
+          reports: 68,
+          handled: 56,
+          problemList: [
+            { name: "网络违法行为", value: 12 },
+            { name: "有害信息传播", value: 8 },
+            { name: "信息安全隐患", value: 4 }
+          ]
+        },
         {
           id: 2,
-          lng: 121.086958,
-          lat: 31.460883,
-          title: "苏州吉闽物流有限公司",
+          name: "苏州工业园区高新制造与国际贸易区",
+          center: [120.7531, 31.2945],
+          issues: 32,
+          reports: 45,
+          handled: 38,
+          problemList: [
+            { name: "网络违法行为", value: 14 },
+            { name: "有害信息传播", value: 10 },
+            { name: "信息安全隐患", value: 8 }
+          ]
         },
         {
           id: 3,
-          lng: 121.05452,
-          lat: 31.515175,
-          title: "太仓星兴亮机械设备有限公司",
+          name: "苏州阳澄湖半岛旅游度假区",
+          center: [120.7895, 31.3915],
+          issues: 15,
+          reports: 29,
+          handled: 22,
+          problemList: [
+            { name: "网络违法行为", value: 7 },
+            { name: "有害信息传播", value: 5 },
+            { name: "信息安全隐患", value: 3 }
+          ]
         },
-        { id: 4, lng: 121.127801, lat: 31.472566, title: "兴和电子有限公司" },
         {
-          id: 5,
-          lng: 121.142345,
-          lat: 31.477655,
-          title: "太仓裕盛体育用品有限公司",
-        },
+          id: 4,
+          name: "苏州独墅湖科教创新区",
+          center: [120.7364, 31.2650],
+          issues: 18,
+          reports: 36,
+          handled: 30,
+          problemList: [
+            { name: "网络违法行为", value: 8 },
+            { name: "有害信息传播", value: 6 },
+            { name: "信息安全隐患", value: 4 }
+          ]
+        }
       ],
-      layers: {
-        layer: null,
-      },
+      mapStyle: [
+        {
+          "featureType": "land",
+          "elementType": "geometry",
+          "stylers": {
+            "color": "#081220",
+            "visibility": "off"  // 隐藏陆地
+          }
+        },
+        {
+          "featureType": "water",
+          "elementType": "geometry",
+          "stylers": {
+            "color": "#0e253d",
+            "visibility": "off"  // 隐藏水域
+          }
+        },
+        {
+          "featureType": "green",
+          "elementType": "geometry",
+          "stylers": {
+            "color": "#0c1f34",
+            "visibility": "off"  // 隐藏绿地
+          }
+        },
+        {
+          "featureType": "building",
+          "elementType": "geometry",
+          "stylers": {
+            "color": "#113549",
+            "visibility": "off"  // 隐藏建筑
+          }
+        },
+        {
+          "featureType": "road",
+          "elementType": "geometry",
+          "stylers": {
+            "color": "#193e5e",
+            "visibility": "off"  // 隐藏道路
+          }
+        },
+        {
+          "featureType": "road",
+          "elementType": "labels",
+          "stylers": {
+            "visibility": "off"
+          }
+        },
+        {
+          "featureType": "highway",
+          "elementType": "geometry",
+          "stylers": {
+            "color": "#193e5e",
+            "visibility": "off"  // 隐藏高速公路
+          }
+        },
+        {
+          "featureType": "highway",
+          "elementType": "labels",
+          "stylers": {
+            "visibility": "off"
+          }
+        },
+        {
+          "featureType": "nationalway",
+          "elementType": "geometry",
+          "stylers": {
+            "color": "#193e5e",
+            "visibility": "off"  // 隐藏国道
+          }
+        },
+        {
+          "featureType": "nationalway",
+          "elementType": "labels",
+          "stylers": {
+            "visibility": "off"
+          }
+        },
+        {
+          "featureType": "provincialway",
+          "elementType": "geometry",
+          "stylers": {
+            "color": "#193e5e",
+            "visibility": "off"  // 隐藏省道
+          }
+        },
+        {
+          "featureType": "provincialway",
+          "elementType": "labels",
+          "stylers": {
+            "visibility": "off"
+          }
+        },
+        {
+          "featureType": "background",
+          "elementType": "all",
+          "stylers": {
+            "visibility": "off"  // 隐藏背景
+          }
+        }
+      ]
     };
   },
   mounted() {
     this.$nextTick(() => {
-      this.initGdMap();
+      this.initMap();
     });
   },
   methods: {
-    // 初始化高德地图
-    initGdMap() {
-      let _this = this;
-      AMapLoader.load({
-        key: "b3c7a7ce466721c3be1d4ea539f82421", // 申请好的Web端开发者Key，首次调用 load 时必填
-        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-      })
-        .then((AMap) => {
-          _this.map = new AMap.Map("container", {
-            // 设置地图容器id
-            showLabel: false,
-            viewMode: "2D", // 是否为3D地图模式
-            zoom: 15, // 初始化地图级别
-            center: _this.center, // 初始化地图中心点位置
-            mapStyle: "amap://styles/darkblue",
-          });
-          _this.getMarkerData();
-        })
-        .catch((e) => {
-          console.log(e);
+    async initMap() {
+      try {
+        // 加载高德地图API
+        const AMap = await AMapLoader.load({
+          key: "b3c7a7ce466721c3be1d4ea539f82421", 
+          version: "2.0",
+          plugins: [
+            'AMap.DistrictSearch',
+            'AMap.DistrictLayer'
+          ]
         });
-    },
 
-    // 获取图标数据
-    async getMarkerData() {
-      let res = await listJbmap({ isStatus: 1, pageNum: 1, pageSize: 50 });
-      res.rows.map((row, index) => {
-        if (index == 0) {
-          //将地图的经纬度设置第一个坐标点
-          this.map.setCenter([row.longitude, row.latitude]);
-        }
-        var viaMarker = new AMap.Marker({
-          position: new AMap.LngLat(row.longitude, row.latitude),
-          // 将一张图片的地址设置为 icon
-          icon: location,
-          extData: row,
-          // 设置了 icon 以后，设置 icon 的偏移量，以 icon 的 [center bottom] 为原点
-          // offset: new AMap.Pixel(-13, -30),
-        });
-        viaMarker.on("click", (e) => {
-          let rowItem = e.target.getExtData();
-          this.getMarkerInfo(rowItem.id);
+        // 初始化地图
+        this.map = new AMap.Map("container", {
+          zoom: 11.5,
+          center: [120.7389, 31.2909], // 苏州工业园区中心
+          viewMode: "3D",
+          pitch: 35,
+          rotation: 0,
+          mapStyle: this.generateCustomMapStyle(), // 使用自定义地图样式
+          expandZoomRange: true,
+          zooms: [8, 20],
+          showBuildingBlock: false,
+          showLabel: false,
+          skyColor: 'transparent', // 透明天空
+          features: [], // 不显示任何默认特性
+          defaultCursor: 'default',
+          isHotspot: false,
+          defaultLayer: false, // 不显示默认图层
+          layers: [], // 不使用默认图层
+          backgroundColor: 'transparent' // 透明背景
         });
 
-        var text = new AMap.Text({
-          text: row.jbObj,
-          anchor: "bottom-center", // 设置文本标记锚点
-          cursor: "pointer",
-          angle: 0,
-          style: {
-            "font-size": "20px",
-            color: "#fff",
-          },
-          offset: [30, 0],
-          position: new AMap.LngLat(row.longitude, row.latitude),
-          extData: row,
+        // 禁用地图旋转和缩放交互
+        this.map.setStatus({
+          dragEnable: false,
+          zoomEnable: false,
+          doubleClickZoom: false,
+          keyboardEnable: false,
+          rotateEnable: false
         });
-        text.on("click", (e) => {
-          let rowItem = e.target.getExtData();
-          this.getMarkerInfo(rowItem.id);
+
+        // 创建自定义地图
+        this.createCustomMap();
+
+      } catch (error) {
+        console.error("地图加载失败", error);
+      }
+    },
+
+    // 生成自定义地图样式
+    generateCustomMapStyle() {
+      return {
+        styleJson: this.mapStyle
+      };
+    },
+
+    // 创建自定义地图
+    createCustomMap() {
+      // 园区轮廓坐标（这是示例坐标，需要替换为实际的苏州工业园区坐标）
+      const parkBoundary = [
+        [120.7214, 31.3317], [120.7714, 31.3417], [120.7894, 31.3307],
+        [120.7994, 31.3107], [120.7894, 31.2907], [120.7714, 31.2707],
+        [120.7514, 31.2607], [120.7314, 31.2607], [120.7114, 31.2707],
+        [120.6914, 31.2907], [120.6914, 31.3107], [120.7114, 31.3307]
+      ];
+
+      // 定义子区域坐标（仅示例，需要使用实际的坐标）
+      const subDistricts = [
+        {
+          name: "苏州阳澄湖半岛旅游度假区",
+          coordinates: [
+            [120.7214, 31.3517], [120.7714, 31.3617], [120.7894, 31.3407],
+            [120.7614, 31.3307], [120.7414, 31.3407]
+          ],
+          center: [120.7614, 31.3417],
+          markerType: "blue"
+        },
+        {
+          name: "苏州工业园区高新制造与国际贸易区",
+          coordinates: [
+            [120.7614, 31.3007], [120.7894, 31.3107], [120.7894, 31.2907],
+            [120.7714, 31.2707], [120.7514, 31.2807], [120.7514, 31.2907]
+          ],
+          center: [120.7714, 31.2907],
+          markerType: "blue"
+        },
+        {
+          name: "苏州工业园区金鸡湖商务区",
+          coordinates: [
+            [120.7114, 31.3107], [120.7514, 31.3207], [120.7514, 31.2907],
+            [120.7314, 31.2807], [120.7114, 31.2907]
+          ],
+          center: [120.7314, 31.3007],
+          markerType: "red"
+        },
+        {
+          name: "苏州独墅湖科教创新区",
+          coordinates: [
+            [120.7214, 31.2707], [120.7414, 31.2607], [120.7614, 31.2507],
+            [120.7414, 31.2407], [120.7214, 31.2507]
+          ],
+          center: [120.7414, 31.2607],
+          markerType: "blue"
+        }
+      ];
+
+      // 创建园区主轮廓
+      this.createDistrictPolygon(parkBoundary, {
+        strokeColor: '#00eaff',
+        strokeWeight: 3,
+        fillColor: '#3ecbff',
+        fillOpacity: 0.3,
+        strokeStyle: 'solid',
+        zIndex: 2
+      });
+
+      // 为主轮廓添加发光效果
+      this.createDistrictPolygon(parkBoundary, {
+        strokeColor: '#00eaff',
+        strokeWeight: 6,
+        fillColor: 'transparent',
+        fillOpacity: 0,
+        strokeOpacity: 0.4,
+        zIndex: 1
+      });
+
+      // 创建子区域
+      subDistricts.forEach(district => {
+        // 创建子区域多边形
+        this.createDistrictPolygon(district.coordinates, {
+          strokeColor: '#00eaff',
+          strokeWeight: 2,
+          fillColor: '#3ecbff',
+          fillOpacity: 0.2,
+          zIndex: 3
         });
-        this.map.add([viaMarker, text]);
+
+        // 添加区域名称标签
+        this.createDistrictLabel(district.center, district.name);
+
+        // 添加标记点
+        this.createMarker(district.center, district.markerType);
       });
+
+      // 添加静态数据卡片
+      this.addDataCard();
     },
 
-    // 获取点位详情
-    async getMarkerInfo(id) {
-      let res = await getJbmap(id);
-      let { jbObj, number, jbTime, address, content } = res.data;
-      this.currentMsg.jbdx = jbObj;
-      this.currentMsg.szbh = number;
-      this.currentMsg.jbsj = jbTime;
-      this.currentMsg.dz = address;
-      this.currentMsg.jbnr = content;
-      this.isShowDialog = true;
+    // 创建区域多边形
+    createDistrictPolygon(coordinates, style) {
+      const AMap = window.AMap;
+      if (!AMap) return;
+
+      const polygon = new AMap.Polygon({
+        path: coordinates,
+        ...style
+      });
+
+      this.map.add(polygon);
+      return polygon;
     },
+
+    // 创建区域标签
+    createDistrictLabel(position, name) {
+      const AMap = window.AMap;
+      if (!AMap) return;
+
+      const textMarker = new AMap.Text({
+        text: name,
+        position: position,
+        style: {
+          'color': '#fff',
+          'background-color': 'transparent',
+          'font-size': '14px',
+          'font-weight': 'bold',
+          'text-shadow': '0 0 5px rgba(0, 0, 0, 0.8)'
+        },
+        zIndex: 10
+      });
+
+      this.map.add(textMarker);
+      return textMarker;
+    },
+
+    // 创建标记点
+    createMarker(position, type) {
+      const AMap = window.AMap;
+      if (!AMap) return;
+
+      // 这里使用一个模拟的图标
+      const icon = type === 'red' ? 
+        '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png' : 
+        '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png';
+      
+      // 创建标记
+      const marker = new AMap.Marker({
+        position: position,
+        icon: new AMap.Icon({
+          image: icon,
+          size: new AMap.Size(24, 34),
+          imageSize: new AMap.Size(24, 34)
+        }),
+        offset: new AMap.Pixel(-12, -34),
+        zIndex: 11
+      });
+
+      // 添加到地图
+      this.map.add(marker);
+
+      // 添加脉冲效果
+      const pulseMarker = new AMap.Marker({
+        position: position,
+        content: '<div class="pulse-marker-container"><div class="pulse-marker"></div></div>',
+        zIndex: 10,
+        offset: new AMap.Pixel(-10, -10)
+      });
+      
+      this.map.add(pulseMarker);
+      
+      return marker;
+    },
+
+    // 添加数据卡片
+    addDataCard() {
+      // 数据卡片的实现已在模板中完成
+    }
   },
   beforeDestroy() {
-    this.map?.destroy();
-  },
+    if (this.map) {
+      this.map.destroy();
+    }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
 .map-container {
   width: 100%;
-  height: $ScreenHeight;
+  height: 100%;
+  position: relative;
+  pointer-events: none; /* 允许点击穿透到背景图 */
+
   #container {
     width: 100%;
     height: 100%;
-    background-color: rgb(26, 61, 106, 0.3);
+    background-color: transparent !important;
   }
-}
-
-.screen-dialog {
-  left: 30%;
-  right: 30%;
-  top: 10%;
-  bottom: 20%;
-  z-index: 9999;
-  ::v-deep .el-dialog__header {
-    background: rgba(255, 255, 255, 0);
+  
+  /* 确保高德地图的容器背景透明 */
+  :deep(.amap-maps),
+  :deep(.amap-drags),
+  :deep(.amap-layers),
+  :deep(.amap-overlays) {
+    background-color: transparent !important;
   }
-  ::v-deep .el-dialog {
-    background: url("~@/assets/dialog/wlglDialog/bg.png") no-repeat 100% 100%;
-    //width: 1260px;
-    height: 590px;
-    //padding-top:20px;
-    background-size: cover;
+  
+  .map-overlay {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10;
+    width: 400px;
+    background: rgba(4, 32, 66, 0.8);
+    border: 1px solid #0a5080;
+    border-radius: 5px;
+    box-shadow: 0 0 15px rgba(0, 193, 222, 0.7);
+    overflow: hidden;
+    pointer-events: auto; /* 允许点击交互 */
   }
-  ::v-deep .el-dialog__headerbtn {
-    top: 1;
+  
+  .overlay-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 15px;
+    background: rgba(10, 80, 128, 0.8);
+    border-bottom: 1px solid #0a5080;
   }
-  ::v-deep .el-dialog__footer {
-    background: rgba(255, 255, 255, 0);
+  
+  .overlay-title {
+    color: #fff;
+    font-size: 18px;
+    font-weight: bold;
   }
-  .top_title {
-    font-family: SourceHanSansCN-Bold;
-    font-size: 28px;
-    letter-spacing: 1px;
-    color: #ffffff;
-    margin-top: -35px;
-    margin-left: 20px;
+  
+  .overlay-close {
+    color: #fff;
+    font-size: 24px;
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    line-height: 1;
   }
-  .dialog_ctn {
-    padding: 60px 0 0 60px;
+  
+  .overlay-body {
+    padding: 15px;
   }
-  .col_title {
-    font-family: SourceHanSansCN-Regular;
-    font-size: 28px;
-    color: #1dd1fe;
+  
+  .data-stats {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 15px;
   }
-  .col_ctn {
-    font-family: SourceHanSansCN-Bold;
-    font-size: 30px;
-    color: #ffe90c;
-    margin: 13px 0;
+  
+  .stat-item {
+    flex: 1;
+    text-align: center;
+    padding: 0 10px;
   }
-  .col_ctn_little {
-    font-family: DIN-Medium;
-    font-size: 28px;
-    color: #ffffff;
-    margin: 13px 0;
+  
+  .stat-value {
+    font-size: 24px;
+    font-weight: bold;
+    color: #00c1de;
   }
-  .dialogClose {
-    text-align: center;
-    width: 160px;
-    height: 50px;
+  
+  .stat-label {
+    font-size: 14px;
+    color: #ccc;
+    margin-top: 5px;
+  }
+  
+  .problem-list {
+    background: rgba(10, 80, 128, 0.3);
+    border-radius: 5px;
+    padding: 10px;
+  }
+  
+  .problem-title {
+    font-size: 16px;
+    color: #fff;
+    margin-bottom: 10px;
+  }
+  
+  .problem-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+  
+  .problem-dot {
+    width: 8px;
+    height: 8px;
+    background-color: #00c1de;
+    border-radius: 50%;
+    margin-right: 8px;
+  }
+  
+  .problem-name {
+    flex: 1;
+    color: #ccc;
+  }
+  
+  .problem-value {
+    color: #00c1de;
+    font-weight: bold;
+  }
+  
+  .data-card {
     position: absolute;
-    bottom: 25px;
-    left: 261px;
-    background: url("~@/assets/dialog/btn-bg.png") no-repeat 100% 100%;
-    font-family: SourceHanSansCN-Regular;
-    font-size: 28px;
-    font-weight: normal;
-    font-stretch: normal;
-    line-height: 50px;
-    letter-spacing: 2px;
-    color: #ffffff;
-    cursor: pointer;
+    top: 20px;
+    right: 20px;
+    width: 300px;
+    background: rgba(4, 32, 66, 0.8);
+    border: 1px solid #0a5080;
+    border-radius: 5px;
+    box-shadow: 0 0 15px rgba(0, 193, 222, 0.3);
+    z-index: 9;
+    overflow: hidden;
+    pointer-events: auto; /* 允许点击交互 */
+  }
+  
+  .data-card-title {
+    padding: 10px 15px;
+    background: rgba(10, 80, 128, 0.8);
+    color: #fff;
+    font-size: 16px;
+    font-weight: bold;
+    border-bottom: 1px solid rgba(0, 193, 222, 0.3);
+  }
+  
+  .data-card-content {
+    padding: 15px;
+  }
+  
+  .data-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 12px;
+  }
+  
+  .data-label {
+    color: #ccc;
+    font-size: 14px;
+  }
+  
+  .data-value {
+    font-size: 14px;
   }
-  .dialogClose:hover {
-    background: url("~@/assets/dialog/btn-bg-act.png") no-repeat 100% 100%;
+  
+  .highlight {
+    color: #f7d342;
+    font-weight: bold;
   }
 }
-.dialog-title {
-  text-align: center;
-  width: 756px;
-  margin: 0 auto;
-  font-family: SourceHanSansCN-Bold;
-  font-size: 36px;
-  font-weight: normal;
-  font-stretch: normal;
-  line-height: 38px;
-  letter-spacing: 0;
-  color: #ffe850;
+
+/* 脉冲标记的样式 */
+:global(.pulse-marker-container) {
+  position: relative;
+  width: 20px;
+  height: 20px;
+  pointer-events: auto; /* 允许点击交互 */
 }
-.dialog-explain {
-  margin-top: 39px;
-  height: 125px;
-  background: url("~@/assets/dialog/信息-bg.png") no-repeat 100% 100%;
+
+:global(.pulse-marker) {
+  width: 12px;
+  height: 12px;
+  background: rgba(0, 193, 222, 0.7);
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  box-shadow: 0 0 10px rgba(0, 193, 222, 0.9);
+  animation: pulse 1.5s ease-in-out infinite;
 }
-.dialog-content {
-  width: 1073px;
-  max-height: 500px;
-  margin: 20px auto;
-  font-family: SourceHanSansCN-Medium;
-  font-size: 30px;
-  font-weight: normal;
-  font-stretch: normal;
-  line-height: 50px;
-  letter-spacing: 2px;
-  color: #ffffff;
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(0, 193, 222, 0.9);
+  }
+  70% {
+    box-shadow: 0 0 0 15px rgba(0, 193, 222, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(0, 193, 222, 0);
+  }
 }
 </style>
diff --git a/src/views/privateOrder/ecosphere/index.vue b/src/views/privateOrder/ecosphere/index.vue
index 39006aa..819f83f 100644
--- a/src/views/privateOrder/ecosphere/index.vue
+++ b/src/views/privateOrder/ecosphere/index.vue
@@ -1,9 +1,14 @@
 <template>
   <div class="main">
-    <!-- <div class="map" style="z-index:1;">
-      <day-map></day-map>
+    <!-- 标题 -->
+    <div class="header">
+      <div class="header-title">苏州工业园区网络综合治理平台</div>
+    </div>
+    
+    <!-- 地图层 -->
+    <div class="map" style="z-index:1;">
       <component-mapbox />
-    </div> -->
+    </div>
 
     <div class="left-container" style="z-index:3;">
       <component-left />
@@ -11,14 +16,13 @@
     <div class="right-container" style="z-index:2;">
       <component-right />
     </div>
-    <div class="center-container" style="z-index:1;">
+    <!-- <div class="center-container" style="z-index:3;">
       <component-center />
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script>
-// import DayMap from '../common/DayMap.vue'
 import ComponentMapbox from './components/componentmapbox.vue'
 import ComponentLeft from './components/componentLeft.vue'
 import ComponentRight from './components/componentRight.vue'
@@ -31,7 +35,6 @@ export default {
     ComponentRight,
     ComponentCenter,
     ComponentMapbox
-    // DayMap
   },
   data() {
     return {
@@ -82,16 +85,40 @@ export default {
   -khtml-user-select: none; /*早期浏览器*/
   user-select: none;
   position: relative;
-  background: url("~@/assets/sentimeent/背景底图.png")
-    no-repeat;
+  background: url("~@/assets/sentimeent/背景底图.png") no-repeat;
   background-size: 100% 100%;
+  color: #fff;
+  z-index: 1;
 }
+
+/* 标题样式 */
+.header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  z-index: 10;
+  padding-top: 20px;
+}
+
+.header-title {
+  font-size: 36px;
+  font-weight: bold;
+  color: #fff;
+  text-shadow: 0 0 10px rgba(29, 233, 255, 0.8);
+  letter-spacing: 2px;
+  display: inline-block;
+}
+
 .map {
   position: absolute;
-  z-index: 1;
+  z-index: 2;
   width: 100%;
   height: $ScreenHeight;
+  background-color: transparent;
 }
+
 .left-container {
   z-index: 3;
   position: absolute;
@@ -99,7 +126,6 @@ export default {
   top: 0;
   width: 1603px;
   height: $ScreenHeight;
-  // background: url("~@/assets/privateOrder/common/bg-left.png") no-repeat;
   margin-left: 40px;
 }
 
@@ -111,8 +137,6 @@ export default {
   width: 1603px;
   height: $ScreenHeight;
   margin-right: 65px
-  // background: url("~@/assets/privateOrder/common/bg-right.png") right center
-    // no-repeat;
 }
 
 .center-container {
@@ -121,6 +145,5 @@ export default {
   left: 1500px;
   margin: 0 auto;
   width: 1914px;
-  // height: $ScreenHeight;
 }
 </style>