11

src/assets/css/common.css

@@ -64,5 +64,5 @@ body {
   height: 1080px !important;
   overflow: hidden;
   position: absolute;
-  z-index: 101;
+  z-index: -1;
 }

src/components/header.vue

@@ -1,4 +1,7 @@
 <template>
+
+  <teleport to="body">
+    <div class="header_content" style="position: absolute;z-index: 999;width: 1920px;">
       <div class="header">
         <!-- <img class="title" src="../assets/img_07.png" alt="" /> -->
         <!-- <div class="time">
@@ -8,20 +11,14 @@
 
         <div class="header-menu">
           <div class="header-menu-item header-menu-left">
-        <div
+            <div :class="data.nowTab == item.url ? 'leftItemC' : 'leftItem'" v-for="item in data.urlLeft.slice(0, 4)"
-          :class="data.nowTab == item.url ? 'leftItemC' : 'leftItem'"
+              :key="item.name">
-          v-for="item in data.urlLeft.slice(0, 4)"
-          :key="item.name"
-        >
               <div class="itemText" @click="to(item.url)">{{ item.name }}</div>
             </div>
           </div>
           <div class="header-menu-item header-menu-right">
-        <div
+            <div :class="data.nowTab == item.url ? 'rightItemC' : 'rightItem'" v-for="item in data.urlLeft.slice(4, 8)"
-          :class="data.nowTab == item.url ? 'rightItemC' : 'rightItem'"
+              :key="item.name">
-          v-for="item in data.urlLeft.slice(4, 8)"
-          :key="item.name"
-        >
               <div class="itemText" @click="to(item.url)">{{ item.name }}</div>
             </div>
           </div>
@@ -29,6 +26,9 @@
         <img src="../assets/RightLine.gif" class="rightLineClass" />
         <img src="../assets/RightLine.gif" class="leftLineClass" />
       </div>
+    </div>
+     
+  </teleport>
 </template>
 
 <script setup>
@@ -103,7 +103,6 @@ const data = reactive({
   ],
   nowTab: "/home/index",
 }); 
-
 onMounted(() => {
   // 初始调用 updateClock 以立即显示时间
   updateClock();
@@ -241,6 +240,7 @@ onMounted(() => {
     right: -70px;
     bottom: -50px;
   }
+
   .leftLineClass {
     position: absolute;
     transform: scaleX(-1);
@@ -248,4 +248,8 @@ onMounted(() => {
     bottom: -50px;
   }
 }
+
+.header_content{
+  background: url("../assets/bgImg.png") no-repeat 0/100% 100%;
+}
 </style>

src/view/analyze.vue

@@ -828,6 +828,7 @@ onBeforeUnmount(() => {
 .module {
   display: flex;
   width: 100%;
+  margin-top: 112px;
 }
 
 .left_bg {

src/view/education.vue

@@ -756,6 +756,7 @@ onMounted(() => {
 .module {
   display: flex;
   width: 100%;
+  margin-top: 112px;
 }
 
 .left_bg {

src/view/guide.vue

@@ -351,9 +351,12 @@ body {
   height: 100%;
   transform-style: preserve-3d;
   transition: transform 0.1s ease-in-out;
+  // background-color: skyblue;
 }
 
 .image-wall {
+  // background-color: skyblue;
+  z-index: 99;
   width: 80%;
   height: 80%;
   position: absolute;
@@ -571,4 +574,5 @@ body {
     }
   }
 }
+ 
 </style>

src/view/home.vue

@@ -19,9 +19,23 @@ const reset_font = () => {
   let width = document.documentElement.clientWidth || document.body.clientWidth;
   let height =
     document.documentElement.clientHeight || document.body.clientHeight;
+
+  console.log(width, height)
+
   document.querySelector("#m").style.transformOrigin = "top left";
   document.querySelector("#m").style.transform =
     "scale(" + width / 1920 + "," + height / 1080 + ")";
+
+  document.querySelector(".header_content").style.transformOrigin = "top left";
+  document.querySelector(".header_content").style.transform =
+    "scale(" + width / 1920 + "," + height / 1080 + ")";
+
+  document.querySelector(".left").style.transformOrigin = "bottom left";
+  document.querySelector(".left").style.transform =
+    "scale(" + width / 1920 + "," + height / 1080 + ")";
+  document.querySelector(".right").style.transformOrigin = "bottom right";
+  document.querySelector(".right").style.transform =
+    "scale(" + width / 1920 + "," + height / 1080 + ")";
 };
 onMounted(() => {
   reset_font();
@@ -43,28 +57,33 @@ window.addEventListener("resize", function () {
   // width: 100vw;
   // overflow: hidden;
 }
+
 * {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   // color: #ccffff;
 }
+
 html {
   width: 100%;
   height: 100%;
 }
+
 body {
   width: 100%;
   height: 100%;
 }
+
 #m {
   width: 100%;
   height: 100%;
   overflow: hidden;
   // position: absolute;
-  z-index: 101;
+  z-index: -1;
 
 }
+
 #emap {
   width: 100%;
   height: 980px;
@@ -73,6 +92,7 @@ body {
   left: 0;
   z-index: 100;
 }
+
 #container {
   width: 100%;
   height: 100%;
@@ -81,6 +101,7 @@ body {
   position: relative;
   overflow: hidden;
 }
+
 .main {
   * {
     pointer-events: all;

src/view/hygiene.vue

@@ -407,6 +407,7 @@ const getData = async () => {
 .module {
   display: flex;
   width: 100%;
+  margin-top: 112px;
 }
 
 .yd_title {

src/view/sy.vue

@@ -1833,6 +1833,7 @@ onBeforeMount(async () => {
 .module {
   display: flex;
   width: 100%;
+  margin-top: 112px;
 }
 
 .yd_title {

src/view/sy_map.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="module">
-    <div id="map" style="width: 100%; height: 100%"></div>
+    <teleport to="body">
-    <div class="left">
+      <div id="map" style="width: 100vw; height: 100vh; "></div>
+      <div class="left" style="width: 517px;">
       <div class="lyx">
         <div class="title">
           <div class="title_name">{{ title_choose }}</div>
@@ -39,7 +40,7 @@
         </div>
       </div>
     </div>
-    <div class="right">
+    <div class="right"  style="width: 517px;" >
       <div class="jbggfwq">
         <div class="title">
           <div class="title_name">基本公共服务圈</div>
@@ -84,7 +85,10 @@
         </div>
       </div>
     </div>
+    </teleport>  
+
   </div>
+
 </template>
 <script setup>
 import {
@@ -321,9 +325,10 @@ const xkzCenter = reactive([
 var map = null;
 const initMap = () => {
   map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 });
+  map.setMapType(BMAP_SATELLITE_MAP);
   map.enableScrollWheelZoom(true);
-  map.setMapType(BMAP_EARTH_MAP);
   goMapCenter([119.178783, 29.034583], 12);
+
   //加载乡镇信息
   loadTown();
   //渲染地块
@@ -368,14 +373,30 @@ const addPolygonCounty = () => {
         fillOpacity: 0.7,
         name: item.name,
       });
+
       map.addOverlay(polygon);
+      polygon.addEventListener("click", () => {
+        console.log(item.name);
+        let jdCenter = [];
+        if (item.name == "溪口镇") {
+          title_choose.value = '龙游县'
+          title_choose.value = title_choose.value + `>${item.name}`;
+          console.log(title_choose.value);
+          loadCs();
+          addPolygonCountyCs();
+          mapTownCount.map((item) => {
+            if (item.name == "溪口镇") {
+              jdCenter = item.center;
+            }
+          });
+          goMapCenter(jdCenter, 14);
+        }
+      });
     }
   });
-  // mapTownCount.map((item) => {
-  //   createCustomOverlayJd(item);
-  // });
 };
 //添加街道名
+ 
 const addJd = () => {
   mapTownCount.map((item) => {
     createCustomOverlayJd(item);
@@ -1559,6 +1580,7 @@ onMounted(() => {
   width: 100%;
   height: 100%;
   position: relative;
+  margin-top: 112px;
 }
 
 #id {

src/view/sy_table.vue

@@ -316,6 +316,7 @@ const rowState = (row) => {
 .module {
   width: 100%;
   display: flex;
+  margin-top: 112px;
   .displayFlex {
     height: 100%;
     display: flex;

src/view/work.vue

@@ -495,6 +495,7 @@ onBeforeUnmount(() => {
 .module {
   display: flex;
   width: 100%;
+  margin-top: 112px;
 }
 
 .left_bg {

src/view/yl.vue

@@ -703,6 +703,7 @@ const getData = () => {
 .module {
   display: flex;
   width: 100%;
+  margin-top: 112px;
 }
 
 .yd_title {