feat(web): 优化票务与IC卡查询页面的功能与UI
- 更新静态资源版本以清理浏览器缓存 - 新增查询概览模块与搜索辅助提示文字 - 添加XSS内容转义防护,优化列表项选中样式 - 重构IC卡查询页面布局,拆分详情与事件记录区域 - 优化移动端响应式展示效果
This commit is contained in:
+25
-7
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user