From fd73e99196e00c82885c83ee2f1253c2fc343756 Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期二, 19 十二月 2023 09:32:59 +0800
Subject: [PATCH] 页面修改

---
 src/components/mapol.vue |   64 +++++++++++++------------------
 1 files changed, 27 insertions(+), 37 deletions(-)

diff --git a/src/components/mapol.vue b/src/components/mapol.vue
index 56a3a30..2b7a1e9 100644
--- a/src/components/mapol.vue
+++ b/src/components/mapol.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="mapol">
     <div style="display: flex">
-      <div
+      <!-- <div
         @click="changeMenulayer"
         class="changeLayer"
         style="  position: absolute;
@@ -22,14 +22,10 @@
           class="mapBaseMap"
         ></div>
 
-      </div>
-      <div
-        @click="changeMapType"
-        class="changeMapType"
-        v-if="$store.state.setChangeBaseMap"
-        style="  position: absolute;
+      </div> -->
+      <div @click="changeMapType" class="changeMapType" v-if="$store.state.setChangeBaseMap" style="  position: absolute;
         
-  bottom: 52px;
+  bottom: 84px;
   right: 46px;
   height: 30px;
   width: 30px;
@@ -38,13 +34,8 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  border: 1px solid rgba(255, 255, 255, 0.5);"
-      >
-        <div
-          title="2/3缁村垏鎹�"
-          id="cenBg"
-          :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"
-        ></div>
+  border: 1px solid rgba(255, 255, 255, 0.5);">
+        <div title="2/3缁村垏鎹�" id="cenBg" :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"></div>
       </div>
     </div>
     <!--    <div-->
@@ -58,23 +49,10 @@
     <!--      ></div>-->
 
     <!--    </div>-->
-    <div
-      class="sindagis-map-compass"
-      style=" bottom: 130px; right: 40px;"
-    >
-      <span
-        class="left"
-        @click="leftClick"
-      ></span>
-      <span
-        class="center"
-        @click="recoveryClick"
-        :style="{transform: `rotate(${rotate}deg)`}"
-      ></span>
-      <span
-        class="right"
-        @click="rightClick"
-      ></span>
+    <div class="sindagis-map-compass" style=" bottom: 130px; right: 40px;">
+      <span class="left" @click="leftClick"></span>
+      <span class="center" @click="recoveryClick" :style="{ transform: `rotate(${rotate}deg)` }"></span>
+      <span class="right" @click="rightClick"></span>
     </div>
   </div>
 </template>
@@ -205,7 +183,7 @@
     },
 
     changeMenulayer() {
-      this.$bus.$emit("setChangeBaseMapLayer", {type:'ol',boolen:true})
+      this.$bus.$emit("setChangeBaseMapLayer", { type: 'ol', boolen: true })
       // this.isActive = !this.isActive
       // this.isMenuLayer = !this.isMenuLayer
       // this.setLayerVisible()
@@ -275,9 +253,11 @@
   padding: 0;
   position: relative;
 }
+
 .center {
   left: 1%;
 }
+
 .CenDiv {
   position: absolute;
   bottom: 1%;
@@ -292,9 +272,11 @@
   border-radius: 5px;
   cursor: pointer;
 }
+
 .center1 {
   right: 1%;
 }
+
 .right {
   position: absolute;
   top: 50px;
@@ -306,6 +288,7 @@
   flex-direction: column;
   justify-content: space-between;
 }
+
 // .CenDiv:hover {
 //   border: 1px solid #409eff;
 // }
@@ -317,6 +300,7 @@
   background-size: 100% 100%;
   border-radius: 5px;
 }
+
 .menuLayer {
   width: 100%;
   height: 100%;
@@ -325,6 +309,7 @@
   background-size: 100% 100%;
   border-radius: 5px;
 }
+
 .ol-scale-line {
   bottom: 55px !important;
   right: 130px !important;
@@ -371,6 +356,7 @@
   transform: rotate(0deg);
   transition: 1s;
 }
+
 .sindagis-map-compass .right {
   background: url("../assets/img/compass.png") -75px -5px / 266px no-repeat;
   right: 2px;
@@ -380,9 +366,11 @@
   height: 42px;
   transform: scaleX(-1);
 }
+
 .sindagis-map-compass .right:hover {
   background: url("../assets/img/compass.png") -89px -5px / 266px no-repeat;
 }
+
 .mapBaseMap {
   width: 100%;
   height: 100%;
@@ -392,8 +380,9 @@
   background-repeat: no-repeat;
   background-size: contain;
 }
-.changeMapType {
-}
+
+.changeMapType {}
+
 .mapTypeTwo {
   width: 100%;
   height: 100%;
@@ -403,6 +392,7 @@
   background-repeat: no-repeat;
   background-size: contain;
 }
+
 .mapTypeThree {
   width: 100%;
   height: 100%;
@@ -412,6 +402,6 @@
   background-repeat: no-repeat;
   background-size: contain;
 }
-.changeLayer {
-}
+
+.changeLayer {}
 </style>

--
Gitblit v1.9.3