|
|
@@ -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);
|