refactor(web): 重构全站界面与事件日志,优化功能与样式
1. 重构并统一票务、IC卡的事件日志格式化展示逻辑,替换原有零散的格式化函数,提升事件展示的一致性与可读性 2. 为AI助手面板新增折叠按钮与折叠逻辑,支持收起/展开面板,优化界面空间利用率 3. 移除多个页面的冗余介绍、提醒区块,精简页面结构 4. 修复IC卡购卡页面的充值选项按钮布局问题,将button元素改为div适配样式规范 5. 新增移动端卡片布局的横向滚动适配,优化小屏设备上的卡片展示与浏览体验 6. 更新后台管理页面的导航样式、文案与统计数据展示,新增车票、凭证的统计卡片 7. 统一全站品牌文案与页面格式,修复部分页面的DOCTYPE多余空格问题 8. 简化车票订单页面的地图加载逻辑,修复原有的冗余代码与加载异常问题
This commit is contained in:
+2
-59
@@ -49,23 +49,7 @@
|
||||
<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>
|
||||
@@ -116,48 +100,7 @@
|
||||
</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">
|
||||
|
||||
Reference in New Issue
Block a user