fix: triangle style optimize

src/views/map-config/mini-map/components/DefaultTip.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="tip-content">
     <span>默认摄像头</span>
-    <div v-if="props.position === TipPositionEnum.TOP" class="bottom-narrow"></div>
-    <div v-else-if="props.position === TipPositionEnum.BOTTOM" class="top-narrow"></div>
-    <div v-else-if="props.position === TipPositionEnum.RIGHT" class="left-narrow"></div>
-    <div v-else class="right-narrow"></div>
+    <div v-if="props.position === TipPositionEnum.TOP" class="tip-narrow bottom"></div>
+    <div v-else-if="props.position === TipPositionEnum.BOTTOM" class="tip-narrow top"></div>
+    <div v-else-if="props.position === TipPositionEnum.RIGHT" class="tip-narrow left"></div>
+    <div v-else class="tip-narrow right"></div>
   </div>
 </template>
 
@@ -16,7 +16,7 @@
   });
 </script>
 
-<style scoped>
+<style scoped lang="scss">
   .tip-content {
     position: relative;
     width: 86px;
@@ -32,47 +32,36 @@
     margin: 5px;
   }
 
-  .bottom-narrow {
+  .tip-narrow {
     position: absolute;
-    top: 100%;
-    left: 50%;
-    border-top: 5px solid #3c3c3d;
-    border-right: 5px solid transparent;
-    border-bottom: 5px solid transparent;
-    border-left: 5px solid transparent;
-    transform: translateX(-50%);
-  }
+    border: 5px solid transparent;
 
-  .top-narrow {
-    position: absolute;
-    top: 0%;
-    left: 50%;
-    border-bottom: 5px solid #3c3c3d;
-    border-right: 5px solid transparent;
-    border-top: 5px solid transparent;
-    border-left: 5px solid transparent;
-    transform: translate(-50%, -100%);
-  }
+    &.bottom {
+      top: 100%;
+      left: 50%;
+      border-top-color: #3c3c3d;
+      transform: translateX(-50%);
+    }
 
-  .left-narrow {
-    position: absolute;
-    top: 50%;
-    left: 0%;
-    border-right: 5px solid #3c3c3d;
-    border-bottom: 5px solid transparent;
-    border-top: 5px solid transparent;
-    border-left: 5px solid transparent;
-    transform: translate(-100%, -50%);
-  }
+    &.top {
+      top: 0%;
+      left: 50%;
+      border-bottom-color: #3c3c3d;
+      transform: translate(-50%, -100%);
+    }
 
-  .right-narrow {
-    position: absolute;
-    top: 50%;
-    right: 0%;
-    border-left: 5px solid #3c3c3d;
-    border-bottom: 5px solid transparent;
-    border-top: 5px solid transparent;
-    border-right: 5px solid transparent;
-    transform: translate(100%, -50%);
+    &.left {
+      top: 50%;
+      left: 0%;
+      border-right-color: #3c3c3d;
+      transform: translate(-100%, -50%);
+    }
+
+    &.right {
+      top: 50%;
+      right: 0%;
+      border-left-color: #3c3c3d;
+      transform: translate(100%, -50%);
+    }
   }
 </style>