perf: 优化样式名

src/components/MMCFlightControlCenter/components/mapImageSwitch/index.vue

 <!-- 飞控地图选择 -->
 <template>
-  <div class="cpt-hwkeys">
-    <div class="hwkeys-wrap cp" @click="change" @mouseout="likai">
-      <div
-        :class="{
-        'hwkeys-item': 1,
-        'hwkeys-item-satellite': 1,
-      }"
-        v-for="item in tabs"
-        :key="item.id"
-        v-show="item.id == current"
-        @click="handle_change(item.id)"
-      >
-        <!-- <div class="typeNmae">{{ item.name }}</div> -->
-      </div>
+  <div class="map-switch">
+    <div class="map-switch-wrap cp" @click="change" @mouseout="likai">
+      <div class="map-item map-item-satellite"></div>
     </div>
 
     <div class="changeMapBox pa cp">
@@ -34,7 +23,7 @@
       <div v-for="item in tabs" :key="item.id" class="dise" @mousemove="jinru(item.id)">
         <div
           :class="{
-          'hwkeys-item': 1,
+          'map-item': 1,
           [item.class_name]: 1,
         }"
           @click="handle_change(item.id)"
@@ -61,22 +50,22 @@ export default {
         {
           id: 1,
           name: "卫星",
-          class_name: "hwkeys-item-satellite",
+          class_name: "map-item-satellite",
         },
         {
           id: 4,
           name: "星图",
-          class_name: "hwkeys-item-satellite",
+          class_name: "map-item-satellite",
         },
         {
           id: 2,
           name: "街道",
-          class_name: "hwkeys-item-street",
+          class_name: "map-item-street",
         },
         {
           id: 3,
           name: "夜景",
-          class_name: "hwkeys-item-night-blue",
+          class_name: "map-item-night-blue",
         },
       ],
     };
@@ -144,7 +133,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.cpt-hwkeys {
+.map-switch {
   z-index: 1;
   bottom: 30px;
 
@@ -161,7 +150,7 @@ export default {
     align-items: center;
 
     // display: flex;
-    .hwkeys-item {
+    .map-item {
       width: 30px;
       height: 30px;
       color: #04d5da;
@@ -174,23 +163,23 @@ export default {
       cursor: pointer;
     }
 
-    .hwkeys-item-satellite {
+    .map-item-satellite {
       background: url(./assets/images/3d.png) center no-repeat;
     }
 
-    .hwkeys-item-street {
+    .map-item-street {
       background: url(./assets/images/2d.png) center no-repeat;
     }
 
-    .hwkeys-item-night-blue {
+    .map-item-night-blue {
       background: url(./assets/images/night-blue.png) center no-repeat;
     }
 
-    .hwkeys-item-3d {
+    .map-item-3d {
       background: url(./assets/images/3d.png) center no-repeat;
     }
 
-    .hwkeys-item-2d {
+    .map-item-2d {
       background: url(./assets/images/2d.png) center no-repeat;
     }
   }
@@ -203,13 +192,7 @@ export default {
   transition: 0.2s;
   transform: translateX(0);
 
-  &.wkeysRight {
-    transition: 0.3s;
-    transform: translateX(-12px);
-    right: 40px;
-  }
-
-  .hwkeys-wrap {
+  .map-switch-wrap {
     position: absolute;
     right: 0;
     min-width: 52px;
@@ -225,7 +208,7 @@ export default {
       width: 166px;
     }
 
-    .hwkeys-item {
+    .map-item {
       width: 52px;
       height: 52px;
       box-sizing: border-box;
@@ -233,30 +216,30 @@ export default {
       border: 3px solid #fff;
       position: relative;
 
-      &.hwkeys-item-satellite {
+      &.map-item-satellite {
         // background: url(./assets/images/3d.png) center no-repeat;
         background: url("./assets/images/ditu_icon.png") center no-repeat;
         background-size: 112% 112%;
       }
 
-      &.hwkeys-item-street {
+      &.map-item-street {
         background: url(./assets/images/2d.png) center no-repeat;
       }
 
-      &.hwkeys-item-night-blue {
+      &.map-item-night-blue {
         background: url(./assets/images/night-blue.png) center no-repeat;
         // background-size: 115% 115%;
       }
 
-      &.hwkeys-item-3d {
+      &.map-item-3d {
         background: url(./assets/images/3d.png) center no-repeat;
       }
 
-      &.hwkeys-item-2d {
+      &.map-item-2d {
         background: url(./assets/images/2d.png) center no-repeat;
       }
 
-      &.hwkeys-item-street {
+      &.map-item-street {
       }
 
       .typeNmae {
@@ -299,7 +282,7 @@ export default {
   }
 }
 
-.cpt-hwkeys:hover {
+.map-switch:hover {
   .changeMapBox {
     display: flex;
   }