地图切换

gassafetyprogress-web/src/components/bigWindow/PipeColor.vue

@@ -59,23 +59,15 @@
       </div>
 
     <div class="mapChange">
-      <div class="qiehuan" @mouseover="hover = true" @mouseleave="hover = false">
-        <img class="divfirst" src="../../assets/image/quanjing.png" alt="">
-        <div class="mapqh1">地图切换</div>
-        <transition name="show">
-          <div v-if="hover" class="qiehuanlog">
+      <div class="qiehuan">
         <div :class="{ active: !mapStyle }" @click="mapChange(1)">
-              <img src="../../assets/image/weixing.png" alt="">
-              <div class="mapqh2">卫星</div>
+          <img src="../../assets/image/weixing.png" alt="" v-show="!downIcon">
+          <div class="mapqh2" v-show="!downIcon">卫星</div>
         </div>
         <div :class="{ active: mapStyle }" @click="mapChange(2)">
-              <img class="divsecond" src="../../assets/image/quanxi.png" alt="">
-              <div class="mapqh3">全景</div>
+          <img src="../../assets/image/quanxi.png" alt="" v-show="downIcon">
+          <div class="mapqh3" v-show="downIcon">全景</div>
         </div>
-          </div>
-        </transition>
-
-
       </div>
     </div>
   </div>
@@ -85,15 +77,16 @@
 import { pipeColor } from "@/utils/mapClass/config.js";
 export default {
   data() {
+        downIcon: true;
       return {
         pipeColor,
         mapStyle:true,
-        hover:false
       };
     },
     methods: {
       // 更改卫星图
       mapChange(num) {
+        this.downIcon = !this.downIcon
         if (num == 1) {
           this.mapStyle = false;
         } else {
@@ -208,7 +201,6 @@ export default {
   font-size: 14px;
   color: #838280;
   background-color: #fff;
-  margin-left: 8px;
 }
 @keyframes show {
     0%{