Explorar el Código

地图图标跟随缩放动态调整大小

  - 勤务脉冲圆点(duty-progress-node)从固定 24px 改为 var(--special-size),内部白点改为 30% 比例,定位改用
  anchor:center
  - 已通过标记(passed)从固定 14px 改为 var(--dot-size) 等 CSS 变量
  - special-size 倍率从 1.5x 降为 1.2x,最小值从 16px 降为 12px,缩小地图时起点/终点/脉冲圆点更协调
画安 hace 1 semana
padre
commit
d8e78fd03e
Se han modificado 1 ficheros con 5 adiciones y 5 borrados
  1. 5 5
      src/components/TongzhouTrafficMap.vue

+ 5 - 5
src/components/TongzhouTrafficMap.vue

@@ -187,7 +187,7 @@ export default {
     // 自动计算并下发给所有 CSS 的变量字典
     mapCssVars() {
       const size = this.currentZoomSize;
-      const specialSize = Math.max(16, size * 1.5);
+      const specialSize = Math.max(12, size * 1.2);
       return {
         '--dot-size': `${size}px`,
         '--dot-padding': size >= 14 ? '4px' : '0px',
@@ -619,9 +619,9 @@ export default {
             overlays.push(new this.AMap.Marker({
               position: splitPoint,
               zIndex: 150,
-              offset: new this.AMap.Pixel(-12, -12),
+              anchor: 'center',
               bubble: true,
-              content: `<div class="duty-progress-node" style="width:24px;height:24px;border-radius:50%;background:#BC301D;border:3px solid #fff;box-shadow:0 0 0 3px rgba(188,48,29,0.4);display:flex;justify-content:center;align-items:center;cursor:default;"><div style="width:8px;height:8px;border-radius:50%;background:#fff;"></div></div>`
+              content: `<div class="duty-progress-node" style="width:var(--special-size);height:var(--special-size);border-radius:50%;background:#BC301D;border:3px solid #fff;box-shadow:0 0 0 3px rgba(188,48,29,0.4);display:flex;justify-content:center;align-items:center;cursor:default;"><div style="width:30%;height:30%;border-radius:50%;background:#fff;"></div></div>`
             }));
           }
 
@@ -980,8 +980,8 @@ export default {
           `;
         } else if (isPassed) {
           markerContent = `
-            <div class="pure-light-node" style="width: 14px; height: 14px; background: #5A5A5A; border: 1.5px solid rgba(255,255,255,0.25); box-sizing: content-box; display: flex; justify-content: center; align-items: center; color: #888; border-radius: 50%; cursor: pointer; padding: 2px; opacity: 0.55;">
-              <span style="transform: scale(0.8); font-weight: bold; font-size: 12px;">勤</span>
+            <div class="pure-light-node" style="width: var(--dot-size); height: var(--dot-size); background: #5A5A5A; border: 1.5px solid rgba(255,255,255,0.25); box-sizing: content-box; display: flex; justify-content: center; align-items: center; color: #888; border-radius: 50%; cursor: pointer; padding: var(--dot-padding); opacity: 0.55;">
+              <span style="display: var(--text-display); font-weight: bold; font-size: var(--text-size);">勤</span>
             </div>
           `;
         } else if (isAbnormal) {