测试20：修订间差异

2026年7月28日 (二) 23:32的版本

加载中...

 width: 700px;
 margin: 15px auto;
 box-sizing: border-box;

}

/* 700px 宽度电子路牌外壳 */ .zhbus-led-casing {

 width: 700px;
 height: 96px;
 background: linear-gradient(180deg, #23252b 0%, #111215 100%);
 border-radius: 8px;
 padding: 10px 14px;
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.15);
 border: 2px solid #30333d;
 position: relative;
 box-sizing: border-box;

}

/* 边角螺丝 */ .zhbus-screw {

 position: absolute;
 width: 7px;
 height: 7px;
 background: radial-gradient(circle, #777 30%, #333 80%);
 border-radius: 50%;
 box-shadow: inset 0 0 1px #000;

} .zhbus-screw.tl { top: 5px; left: 5px; } .zhbus-screw.tr { top: 5px; right: 5px; } .zhbus-screw.bl { bottom: 5px; left: 5px; } .zhbus-screw.br { bottom: 5px; right: 5px; }

/* LED 显示屏（严格控制 24 行圆形点阵） */ .zhbus-led-screen {

 position: relative;
 background-color: #050505;
 border-radius: 4px;
 overflow: hidden;
 border: 2px solid #0a0a0c;
 height: 72px;
 display: flex;
 align-items: center;
 box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.95);

}

/* 24行圆形颗粒感发光罩层 */ .zhbus-led-overlay {

 position: absolute;
 top: 0; left: 0; right: 0; bottom: 0;
 z-index: 10;
 pointer-events: none;
 background-image: 
   radial-gradient(circle at 1.5px 1.5px, transparent 1.2px, #050505 1.5px),
   linear-gradient(to right, rgba(0,0,0,0.85) 1px, transparent 1px),
   linear-gradient(to bottom, rgba(0,0,0,0.85) 1px, transparent 1px);
 background-size: 3px 3px, 3px 3px, 3px 3px;

}

/* 滚动轨 */ .zhbus-led-track {

 display: flex;
 white-space: nowrap;
 position: absolute;
 will-change: transform;

}

/* 24点阵发光文字 */ .zhbus-led-text {

 font-family: "SimSun", "宋体", STSong, "NSimSun", monospace, serif !important;
 font-size: 56px;
 font-weight: 900;
 color: #ffc400;
 letter-spacing: 2px;
 line-height: 72px;
 padding-right: 60px;
 display: flex;
 align-items: center;
 -webkit-font-smoothing: none;
 -moz-osx-font-smoothing: unset;
 font-smooth: never;
 text-shadow: 
   0 0 1px #ffd000,
   0 0 3px rgba(255, 196, 0, 0.8),
   0 0 6px rgba(255, 180, 0, 0.4);

}

/* ※ 隔开符号 */ .zhbus-sep {

 color: #ffc400;
 font-size: 48px;
 margin: 0 10px;
 font-weight: bold;
 text-shadow: 0 0 4px rgba(255, 196, 0, 0.8);

}

@keyframes zhbusMarquee {

 0% { transform: translateX(0); }
 100% { transform: translateX(-50%); }

} </style>

 const API_URL = "https://apiv2.zhbuswx.com/ContentPublish/GetAll?appType=notice&pageIndex=1&pageSize=20";
 const FIXED_FIRST = "珠海巴士频道公交调整信息";
 const SEP = '※';

 const FALLBACK = [
   "关于调整公交201路、K4路运行路线及停靠站点的公告",
   "关于优化调整部分公交线路首尾班车时间的通告",
   "关于针对雷雨恶劣天气实施公交应急保障预案的通知",
   "关于乘车码刷码系统升级维护的温馨提示",
   "关于开通高考专线及学生高考免费乘车政策的通告"
 ];

 async function initZhbusLed() {
   let titles = [];
   try {
     const res = await fetch(API_URL);
     const data = await res.json();
     const items = data.data || data.Data || (data.data && data.data.list) || data;
     titles = items.map(i => i.Title || i.title).filter(Boolean);
     if (!titles.length) throw new Error();
   } catch(e) {
     titles = FALLBACK;
   }

   const allTitles = [FIXED_FIRST, ...titles];
   const fullHtml = SEP + allTitles.join(SEP) + SEP;

   const track = document.getElementById('zhbusLedTrack');
   const content = document.getElementById('zhbusLedContent');
   const contentClone = document.getElementById('zhbusLedContentClone');

   if (!track || !content || !contentClone) return;

   content.innerHTML = fullHtml;
   contentClone.innerHTML = fullHtml;

   // 严格按照【1秒 3 个字】计算滚动时间
   const tempDiv = document.createElement("div");
   tempDiv.innerHTML = fullHtml;
   const charCount = (tempDiv.textContent || tempDiv.innerText || "").length;
   const duration = Math.max(charCount / 3, 2);

   track.style.animation = `zhbusMarquee ${duration}s linear infinite`;
 }

 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', initZhbusLed);
 } else {
   initZhbusLed();
 }

})(); </script>

@@ 第1行： / 第1行： @@
-=珠海巴士频道车辆查询系统（临时）=
+<div class="zhbus-led-wrapper">
+  <div class="zhbus-led-casing">
+    <div class="zhbus-screw tl"></div><div class="zhbus-screw tr"></div>
+    <div class="zhbus-screw bl"></div><div class="zhbus-screw br"></div>
-<html>
+     <div class="zhbus-led-screen">
-<head>
+      <!-- 24行圆形LED点阵遮罩层 -->
-     <title>图片搜索</title>
+      <div class="zhbus-led-overlay"></div>
-    <style>
-        body {
+      <!-- 滚动文本轨 -->
-            display: flex;
+      <div class="zhbus-led-track" id="zhbusLedTrack">
-            flex-direction: column;
+         <div class="zhbus-led-text" id="zhbusLedContent">加载中...</div>
-            align-items: center;
+         <div class="zhbus-led-text" id="zhbusLedContentClone">加载中...</div>
-            padding: 20px;
+      </div>
-        }
-        .search-container {
-            margin: 20px 0;
-        }
-        input {
-            padding: 8px;
-            width: 200px;
-            margin-right: 10px;
-        }
-        button {
-            padding: 8px 16px;
-            cursor: pointer;
-        }
-        #resultImage {
-            max-width: 80%;
-            margin-top: 20px;
-        }
-    </style>
-</head>
-<body>
-    <div class="search-container">
-         <input type="text" id="searchInput" placeholder="请输入你要查询的车牌号，无需输入：粤C">
-         <button onclick="searchImage()">搜索</button>
      </div>
-    <img id="resultImage" alt="搜索结果">
+  </div>
+</div>
-    <script>
+<style>
-        function searchImage() {
+/* 样式独立命名，防止干扰 MediaWiki 原有皮肤 */
-            const input = document.getElementById('searchInput').value;
+.zhbus-led-wrapper {
-            const imageUrl = `https://……/${encodeURIComponent(input)}.jpg`;
+  width: 700px;
-            const imgElement = document.getElementById('resultImage');
+  margin: 15px auto;
+  box-sizing: border-box;
-            imgElement.src = imageUrl;
+}
-            imgElement.onerror = function() {
-                this.style.display = 'none';
-                alert('您查找的车辆不存在或尚未入库，请重新输入');
-            }
-            imgElement.onload = function() {
-                this.style.display = 'block';
-            }
-        }
-    </script>
-</body>
-</html>
-==测试范围==
+/* 700px 宽度电子路牌外壳 */
-*目前仅开放输入2016年以前上线的车辆
+.zhbus-led-casing {
+  width: 700px;
+  height: 96px;
+  background: linear-gradient(180deg, #23252b 0%, #111215 100%);
+  border-radius: 8px;
+  padding: 10px 14px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8), inset 0 1px 1px rgba(255, 255, 255, 0.15);
+  border: 2px solid #30333d;
+  position: relative;
+  box-sizing: border-box;
+}
+/* 边角螺丝 */
+.zhbus-screw {
+  position: absolute;
+  width: 7px;
+  height: 7px;
+  background: radial-gradient(circle, #777 30%, #333 80%);
+  border-radius: 50%;
+  box-shadow: inset 0 0 1px #000;
+}
+.zhbus-screw.tl { top: 5px; left: 5px; }
+.zhbus-screw.tr { top: 5px; right: 5px; }
+.zhbus-screw.bl { bottom: 5px; left: 5px; }
+.zhbus-screw.br { bottom: 5px; right: 5px; }
+/* LED 显示屏（严格控制 24 行圆形点阵） */
+.zhbus-led-screen {
+  position: relative;
+  background-color: #050505;
+  border-radius: 4px;
+  overflow: hidden;
+  border: 2px solid #0a0a0c;
+  height: 72px;
+  display: flex;
+  align-items: center;
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.95);
+}
+/* 24行圆形颗粒感发光罩层 */
+.zhbus-led-overlay {
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  z-index: 10;
+  pointer-events: none;
+  background-image:
+    radial-gradient(circle at 1.5px 1.5px, transparent 1.2px, #050505 1.5px),
+    linear-gradient(to right, rgba(0,0,0,0.85) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(0,0,0,0.85) 1px, transparent 1px);
+  background-size: 3px 3px, 3px 3px, 3px 3px;
+}
+/* 滚动轨 */
+.zhbus-led-track {
+  display: flex;
+  white-space: nowrap;
+  position: absolute;
+  will-change: transform;
+}
+/* 24点阵发光文字 */
+.zhbus-led-text {
+  font-family: "SimSun", "宋体", STSong, "NSimSun", monospace, serif !important;
+  font-size: 56px;
+  font-weight: 900;
+  color: #ffc400;
+  letter-spacing: 2px;
+  line-height: 72px;
+  padding-right: 60px;
+  display: flex;
+  align-items: center;
+  -webkit-font-smoothing: none;
+  -moz-osx-font-smoothing: unset;
+  font-smooth: never;
+  text-shadow:
+0 1px #ffd000,
+0 3px rgba(255, 196, 0, 0.8),
+0 6px rgba(255, 180, 0, 0.4);
+}
+/* ※ 隔开符号 */
+.zhbus-sep {
+  color: #ffc400;
+  font-size: 48px;
+  margin: 0 10px;
+  font-weight: bold;
+  text-shadow: 0 0 4px rgba(255, 196, 0, 0.8);
+}
+@keyframes zhbusMarquee {
+% { transform: translateX(0); }
+% { transform: translateX(-50%); }
+}
+</style>
+<script>
+(function() {
+  const API_URL = "https://apiv2.zhbuswx.com/ContentPublish/GetAll?appType=notice&pageIndex=1&pageSize=20";
+  const FIXED_FIRST = "珠海巴士频道公交调整信息";
+  const SEP = '<span class="zhbus-sep">※</span>';
+  const FALLBACK = [
+    "关于调整公交201路、K4路运行路线及停靠站点的公告",
+    "关于优化调整部分公交线路首尾班车时间的通告",
+    "关于针对雷雨恶劣天气实施公交应急保障预案的通知",
+    "关于乘车码刷码系统升级维护的温馨提示",
+    "关于开通高考专线及学生高考免费乘车政策的通告"
+  ];
+  async function initZhbusLed() {
+    let titles = [];
+    try {
+      const res = await fetch(API_URL);
+      const data = await res.json();
+      const items = data.data || data.Data || (data.data && data.data.list) || data;
+      titles = items.map(i => i.Title || i.title).filter(Boolean);
+      if (!titles.length) throw new Error();
+    } catch(e) {
+      titles = FALLBACK;
+    }
+    const allTitles = [FIXED_FIRST, ...titles];
+    const fullHtml = SEP + allTitles.join(SEP) + SEP;
+    const track = document.getElementById('zhbusLedTrack');
+    const content = document.getElementById('zhbusLedContent');
+    const contentClone = document.getElementById('zhbusLedContentClone');
+    if (!track || !content || !contentClone) return;
+    content.innerHTML = fullHtml;
+    contentClone.innerHTML = fullHtml;
+    // 严格按照【1秒 3 个字】计算滚动时间
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = fullHtml;
+    const charCount = (tempDiv.textContent || tempDiv.innerText || "").length;
+    const duration = Math.max(charCount / 3, 2);
+    track.style.animation = `zhbusMarquee ${duration}s linear infinite`;
+  }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initZhbusLed);
+  } else {
+    initZhbusLed();
+  }
+})();
+</script>