feat: 更新西安中心急救大屏v3页面并新增肠肠配图

other-module/emergency-screen/xian-center/index-v3.html

@@ -446,6 +446,48 @@
       opacity:.9;}
     .map-bg::after{content:'';position:absolute;inset:10px;pointer-events:none;border-radius:8px;
       border:1px solid rgba(0,229,255,0.16);box-shadow:inset 0 0 42px rgba(0,229,255,0.10);}
+    /* 地图左下角常驻图片 */
+    .map-changchang{position:absolute;bottom:12px;left:12px;z-index:3;width:80px;
+      cursor:pointer;}
+    .map-changchang img{width:100%;height:auto;display:block;border-radius:4px;
+      opacity:.92;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
+      transition:filter .3s ease,border-radius .3s ease,transform .3s ease;}
+    .map-changchang:hover img{transform:scale(1.12);
+      filter:drop-shadow(0 0 14px rgba(24,144,255,.55)) drop-shadow(0 4px 16px rgba(0,0,0,.4));
+      background:rgba(24,144,255,.08);border-radius:6px;
+      box-shadow:0 0 20px rgba(24,144,255,.25),0 4px 14px rgba(0,0,0,.35);}
+    /* 悬浮气泡 */
+    .map-changchang::before{content:"我是庆庆，可以帮你快速播报各类统计数据，快点击我看看吧~";
+      position:fixed;z-index:9999;pointer-events:none;
+      left:var(--bubble-left,0);top:var(--bubble-top,0);
+      white-space:normal;padding:10px 14px;border-radius:10px;font-size:12px;line-height:1.55;
+      color:#fff;background:rgba(10,22,48,.94);border:1px solid rgba(24,144,255,.35);
+      box-shadow:0 4px 20px rgba(0,0,0,.45),0 0 12px rgba(24,144,255,.18);
+      transition:opacity .28s ease,transform .28s ease;
+      width:200px;text-align:left;
+      opacity:0;transform:translateY(6px);}
+    .map-changchang::after{content:'';position:fixed;z-index:9999;pointer-events:none;
+      left:var(--arrow-left,0);top:var(--arrow-top,0);
+      width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;
+      border-top:7px solid rgba(10,22,48,.94);
+      opacity:0;transform:translateY(6px);
+      transition:opacity .28s ease,transform .28s ease;}
+    .map-changchang:hover::before,
+    .map-changchang:hover::after{opacity:1;transform:translateY(0);}
+    /* 点击后右侧气泡菜单 */
+    .map-changchang__menu{position:absolute;left:calc(100% + 10px);bottom:0;
+      display:none;flex-direction:column;gap:6px;z-index:20;
+      min-width:150px;}
+    .map-changchang__menu--open{display:flex;}
+    .map-changchang__btn{display:flex;align-items:center;gap:5px;
+      padding:7px 13px;border-radius:18px;font-size:11px;line-height:1.3;
+      color:#E0F0FF;background:rgba(10,22,48,.92);border:1px solid rgba(24,144,255,.30);
+      white-space:nowrap;cursor:pointer;transition:all .22s ease;
+      box-shadow:0 2px 8px rgba(0,0,0,.35);}
+    .map-changchang__btn:hover{background:rgba(24,144,255,.20);
+      border-color:rgba(24,144,255,.55);
+      box-shadow:0 0 14px rgba(24,144,255,.30),0 2px 10px rgba(0,0,0,.40);
+      transform:translateX(2px);}
     .map-road{position:absolute;z-index:1;background:rgba(0,229,255,0.18);box-shadow:0 0 10px rgba(0,229,255,0.16);}
     .map-road--h{height:2px;left:0;right:0;}
     .map-road--v{width:2px;top:0;bottom:0;}
@@ -1826,6 +1868,18 @@
           </div>
         </div>
       </div>
+
+      <!-- 地图左下角常驻图片 -->
+      <div class="map-changchang">
+        <img src="changchang.png" alt="changchang" />
+        <div class="map-changchang__menu" id="changchangMenu">
+          <button class="map-changchang__btn" data-action="emergency">🚨 应急求助数据</button>
+          <button class="map-changchang__btn" data-action="wearable">⌚ 穿戴告警数据</button>
+          <button class="map-changchang__btn" data-action="cvd">❤️ 心脑血管预警数据</button>
+          <button class="map-changchang__btn" data-action="crowd">👥 人群分布数据</button>
+        </div>
+      </div>
+
     </div>
 
     <!-- 底部统计卡片栏 -->
@@ -5717,7 +5771,48 @@ function resetConsultRecordFilter(){
   consultRecordFilteredData = CONSULT_RECORD_DATA.slice();
   consultRecordPage = 1;
   renderConsultRecordTable();
-}
+	}
+
+  /* ---- 庆庆悬浮气泡位置计算 ---- */
+  (function(){
+    var el = document.querySelector('.map-changchang');
+    if(!el) return;
+    var menu = document.getElementById('changchangMenu');
+
+    /* 悬浮气泡定位 */
+    el.addEventListener('mouseenter',function(){
+      var r = el.getBoundingClientRect();
+      var tw = 200, th = 52, gap = 14;
+      var left = r.left + r.width/2 - tw/2;
+      var top = r.top - th - gap;
+      if(left < 8) left = 8;
+      if(left + tw > window.innerWidth - 8) left = window.innerWidth - tw - 8;
+      el.style.setProperty('--bubble-left', left + 'px');
+      el.style.setProperty('--bubble-top', top + 'px');
+      el.style.setProperty('--arrow-left', (r.left + r.width/2) + 'px');
+      el.style.setProperty('--arrow-top', (r.top - gap) + 'px');
+    });
+
+    /* 点击切换菜单 */
+    el.addEventListener('click',function(e){
+      e.stopPropagation();
+      menu.classList.toggle('map-changchang__menu--open');
+    });
+    /* 点击其他地方关闭菜单 */
+    document.addEventListener('click',function(){
+      menu.classList.remove('map-changchang__menu--open');
+    });
+    /* 菜单按钮点击 */
+    menu.addEventListener('click',function(e){
+      var btn = e.target.closest('.map-changchang__btn');
+      if(!btn) return;
+      e.stopPropagation();
+      var action = btn.dataset.action;
+      var label = btn.textContent.trim();
+      console.log('庆庆菜单点击:', label, action);
+      // TODO: 各按钮具体播报逻辑
+    });
+  })();
 
 </script>
 </body>