feat(web): 优化票务与IC卡查询页面的功能与UI
- 更新静态资源版本以清理浏览器缓存 - 新增查询概览模块与搜索辅助提示文字 - 添加XSS内容转义防护，优化列表项选中样式 - 重构IC卡查询页面布局，拆分详情与事件记录区域 - 优化移动端响应式展示效果
This commit is contained in:
+91
-17
@@ -7,7 +7,7 @@
|
||||
<title>IC 卡查询</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,6 +49,23 @@
|
||||
<h1>按卡号或凭证码查询 IC 卡状态</h1>
|
||||
<p>支持检索 IC 卡当前状态、余额和最近操作记录；输入线上购卡生成的凭证码，也能反查对应卡片。</p>
|
||||
</section>
|
||||
<section class="jr-query-overview jr-grid-three" aria-label="IC 卡查询摘要">
|
||||
<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>
|
||||
@@ -62,28 +79,86 @@
|
||||
查询 IC 卡
|
||||
</button>
|
||||
</div>
|
||||
<p class="jr-search-helper">留空可浏览全部 IC 卡；输入卡号或凭证码后，可直接定位到对应卡片详情。</p>
|
||||
</section>
|
||||
<section class="jr-grid-two">
|
||||
<section class="jr-search-results">
|
||||
<article class="jr-panel-card">
|
||||
<div class="jr-panel-headline">
|
||||
<h3>卡片概览</h3>
|
||||
<span class="jr-panel-note">Card Overview</span>
|
||||
<h3>结果列表</h3>
|
||||
<span class="jr-panel-note">Card Results</span>
|
||||
</div>
|
||||
<div id="summaryBox" class="jr-center-empty">
|
||||
<p>请输入卡号或凭证码开始查询。</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="jr-panel-card">
|
||||
<div class="jr-panel-headline">
|
||||
<h3>事件记录</h3>
|
||||
<span class="jr-panel-note">Recent Events</span>
|
||||
</div>
|
||||
<div id="eventBox" class="jr-history-list">
|
||||
<div id="summaryBox" class="jr-scroll-box">
|
||||
<div class="jr-center-empty" style="min-height:180px;">
|
||||
<p>查询成功后会在这里显示建卡、购卡、充值等操作记录。</p>
|
||||
<p>请输入卡号或凭证码开始查询。</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<section class="jr-detail-stack">
|
||||
<article class="jr-panel-card">
|
||||
<div class="jr-panel-headline">
|
||||
<h3>卡片详情</h3>
|
||||
<span class="jr-panel-note">Card Overview</span>
|
||||
</div>
|
||||
<div id="detailBox">
|
||||
<div class="jr-center-empty" style="min-height:180px;">
|
||||
<p>从左侧选择一张 IC 卡以查看详情。</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="jr-panel-card">
|
||||
<div class="jr-panel-headline">
|
||||
<h3>事件记录</h3>
|
||||
<span class="jr-panel-note">Recent Events</span>
|
||||
</div>
|
||||
<div id="eventBox" class="jr-history-list">
|
||||
<div class="jr-center-empty" style="min-height:180px;">
|
||||
<p>查询成功后会在这里显示建卡、购卡、充值等操作记录。</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<div class="jr-grid-two">
|
||||
<article class="jr-panel-card jr-guide-card">
|
||||
<div class="jr-panel-headline">
|
||||
<h3>状态说明</h3>
|
||||
<span class="jr-panel-note">Card Status</span>
|
||||
</div>
|
||||
<div class="jr-guide-list">
|
||||
<div class="jr-guide-item">
|
||||
<strong>正常</strong>
|
||||
<span>卡片已启用，可在检票设备直接刷卡进出站。</span>
|
||||
</div>
|
||||
<div class="jr-guide-item">
|
||||
<strong>待领卡</strong>
|
||||
<span>请持购卡凭证码前往站内售票机完成领卡后再使用。</span>
|
||||
</div>
|
||||
<div class="jr-guide-item">
|
||||
<strong>不可用</strong>
|
||||
<span>卡片已停用、挂失或退款，建议联系站务进行处理。</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="jr-panel-card jr-guide-card">
|
||||
<div class="jr-panel-headline">
|
||||
<h3>查询提示</h3>
|
||||
<span class="jr-panel-note">Search Guide</span>
|
||||
</div>
|
||||
<div class="jr-guide-list">
|
||||
<div class="jr-guide-item">
|
||||
<strong>留空查询</strong>
|
||||
<span>不输入关键字时，会按建卡时间倒序展示全部 IC 卡记录。</span>
|
||||
</div>
|
||||
<div class="jr-guide-item">
|
||||
<strong>凭证反查</strong>
|
||||
<span>购卡后若未领卡，可直接使用凭证码快速定位对应卡片。</span>
|
||||
</div>
|
||||
<div class="jr-guide-item">
|
||||
<strong>手机查看</strong>
|
||||
<span>移动端会把结果列表、详情和事件记录按顺序折叠为单列阅读。</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<footer class="site-footer jr-footer-space">
|
||||
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">粤ICP备2025450093号</a>
|
||||
@@ -92,7 +167,7 @@
|
||||
</main>
|
||||
</div>
|
||||
<script src="/custom-dialog.js?v=12"></script>
|
||||
<script src="/ic-card-search.js?v=2"></script>
|
||||
<script src="/ic-card-search.js?v=3"></script>
|
||||
<script src="/public-status.js?v=13"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
@@ -120,4 +195,3 @@
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user