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 @@ + + +
+
+