diff --git a/other-module/emergency-screen/xian-center/changchang.png b/other-module/emergency-screen/xian-center/changchang.png new file mode 100644 index 0000000..10a8b84 Binary files /dev/null and b/other-module/emergency-screen/xian-center/changchang.png differ diff --git a/other-module/emergency-screen/xian-center/index-v3.html b/other-module/emergency-screen/xian-center/index-v3.html index 6036be8..12e25fe 100644 --- a/other-module/emergency-screen/xian-center/index-v3.html +++ b/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 @@ + + +
+ changchang +
+ + + + +
+
+ @@ -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: 各按钮具体播报逻辑 + }); + })();