Explorar o código

fix: 修改地图红绿灯点只有离线、降级、故障有呼吸状态

sequoia tungfang hai 1 mes
pai
achega
3e3b277659
Modificáronse 1 ficheiros con 13 adicións e 1 borrados
  1. 13 1
      src/components/TongzhouTrafficMap.vue

+ 13 - 1
src/components/TongzhouTrafficMap.vue

@@ -220,7 +220,7 @@ export default {
       const marker = new this.AMap.Marker({
         position: position,
         // 去掉了数字显示,仅保留呼吸灯效果
-        content: `<div class="pure-light-node" style="background: ${config.color}; box-shadow: 0 0 15px ${config.color}; font-size: 12px; display: flex; justify-content: center; align-items: center; color: #fff; padding: 8px;">${config?.name?.charAt(0)}</div>`,
+        content: `<div class="pure-light-node ${['离线', '降级', '故障'].includes(config.name) ? 'breathe' : ''}" style="background: ${config.color}; box-shadow: 0 0 15px ${config.color}; font-size: 12px; display: flex; justify-content: center; align-items: center; color: #fff; padding: 8px;"><span>${config?.name?.charAt(0)}</span></div>`,
         offset: new this.AMap.Pixel(-10, -10),
         extData: {
           ...config,
@@ -317,9 +317,21 @@ export default {
   border: 2px solid rgba(255, 255, 255, 0.8);
   cursor: pointer;
   transition: all 0.3s;
+}
+
+::v-deep .pure-light-node.breathe {
   animation: light-breathe 2s infinite ease-in-out;
 }
 
+::v-deep .pure-light-node span {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  transform: scale(0.75);
+  align-items: center;
+}
+
 ::v-deep .pure-light-node:hover {
   transform: scale(1.4);
   filter: brightness(1.2);