feat(web): 优化票务与IC卡查询页面的功能与UI

- 更新静态资源版本以清理浏览器缓存
- 新增查询概览模块与搜索辅助提示文字
- 添加XSS内容转义防护,优化列表项选中样式
- 重构IC卡查询页面布局,拆分详情与事件记录区域
- 优化移动端响应式展示效果
This commit is contained in:
2026-06-28 11:20:57 +08:00
parent 042720d812
commit d6aa03d3a7
5 changed files with 314 additions and 49 deletions
+25 -7
View File
@@ -1,4 +1,4 @@
<!doctype html>
<!doctype html>
<html lang="zh-CN">
<head>
@@ -7,7 +7,7 @@
<title>票务查询</title>
<link rel="icon" type="image/png" href="/FSE-ticket.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/style.css?v=13" />
<link rel="stylesheet" href="/style.css?v=14" />
</head>
<body class="public-search jr-public-page">
@@ -49,13 +49,31 @@
<section class="jr-page-intro">
<span class="jr-kicker">TICKET SEARCH</span>
<h1>按票号、站点或日期快速查询票据</h1>
<p>输入完整票号、起终点、日期或关键词,左侧浏览结果,右侧查看票据详情与最近流转记录。</p>
<p>输入完整票号、起终点、日期或关键词,左侧浏览结果,右侧查看票据详情与最近流转记录。</p>
</section>
<section class="jr-query-overview jr-grid-three" aria-label="车票查询摘要">
<article class="jr-query-stat">
<span class="jr-query-stat-label">检索方式</span>
<strong>票号 / 站点 / 日期</strong>
<p>支持完整票号与站点关键词联合查询,适合快速反查近期票据。</p>
</article>
<article class="jr-query-stat">
<span class="jr-query-stat-label">结果浏览</span>
<strong>列表与详情并排</strong>
<p>左侧先筛选票据,右侧立即查看电子票概览与最近流转记录。</p>
</article>
<article class="jr-query-stat">
<span class="jr-query-stat-label">移动端</span>
<strong>单列阅读更顺手</strong>
<p>手机端自动切为单列,查询、结果与详情会按操作顺序依次展开。</p>
</article>
</section>
<section class="jr-panel-card" style="margin-bottom:24px;">
<div class="jr-panel-headline">
<h2>检索条件</h2>
<span class="jr-panel-note">Ticket ID / Station / Date</span>
<span class="jr-panel-note">Ticket ID / Station / Date</span>
</div>
<div class="jr-search-form">
<input id="q" class="jr-search-input" type="text"
@@ -63,6 +81,7 @@
<button id="searchBtn" class="btn primary jr-search-button"><i class="fas fa-search"></i>
立即搜索</button>
</div>
<p class="jr-search-helper">可直接输入完整票号,也可输入起点、终点或日期关键字进行模糊检索。</p>
</section>
<section class="jr-search-results">
@@ -78,7 +97,7 @@
</div>
</article>
<section id="detail-section">
<section id="detail-section" class="jr-detail-stack">
<article class="jr-panel-card" style="margin-bottom:20px;">
<div class="jr-panel-headline">
<h3>车票详情</h3>
@@ -118,7 +137,7 @@
</div>
<script src="/custom-dialog.js?v=12"></script>
<script src="/ticket-search.js?v=11"></script>
<script src="/ticket-search.js?v=12"></script>
<script src="/public-status.js?v=13"></script>
<script src="/ai-assistant.js?v=6"></script>
<script>
@@ -146,4 +165,3 @@
</body>
</html>