Henry_Du
d6aa03d3a7
- 更新静态资源版本以清理浏览器缓存 - 新增查询概览模块与搜索辅助提示文字 - 添加XSS内容转义防护，优化列表项选中样式 - 重构IC卡查询页面布局，拆分详情与事件记录区域 - 优化移动端响应式展示效果
168 lines
8.2 KiB
HTML
168 lines
8.2 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<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=14" />
|
||
</head>
|
||
|
||
<body class="public-search jr-public-page">
|
||
<div class="jr-public-shell">
|
||
<header class="jr-topbar">
|
||
<div class="jr-topbar-inner">
|
||
<a href="https://ticket.fse-media.group" id="homeLink" class="jr-top-link">
|
||
<i class="fas fa-arrow-left"></i>
|
||
<span>返回首页</span>
|
||
</a>
|
||
<div class="jr-top-status is-checking" data-server-status-root>
|
||
<span class="jr-top-status-label">服务器状态</span>
|
||
<span class="jr-top-status-dot"></span>
|
||
<span class="jr-top-status-value" data-server-status-value>检测中</span>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="jr-brandbar">
|
||
<div class="jr-brandbar-inner">
|
||
<a href="https://ticket.fse-media.group" class="jr-brand" id="brandLink">
|
||
<img src="/FSE-ticket.png" alt="FSE Railway" class="jr-brand-logo" />
|
||
<div class="jr-brand-copy">
|
||
<strong>FarSight-T.N.E铁路运输</strong>
|
||
<span>票务查询</span>
|
||
</div>
|
||
</a>
|
||
<nav class="jr-nav" aria-label="站点导航">
|
||
<a href="https://ticket.fse-media.group/home.html" data-link="home">首页</a>
|
||
<a href="https://ticket.fse-media.group/order" data-link="order">线上预定</a>
|
||
<a href="https://ticket.fse-media.group/search" data-link="search" class="is-active">车票查询</a>
|
||
<a href="https://ticket.fse-media.group/ic-card/search" data-link="card-search">IC 卡查询</a>
|
||
<a href="https://ticket.fse-media.group/ic-card/order" data-link="card-order">线上购卡</a>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
|
||
<main class="jr-public-main">
|
||
<section class="jr-page-intro">
|
||
<span class="jr-kicker">TICKET SEARCH</span>
|
||
<h1>按票号、站点或日期快速查询票据</h1>
|
||
<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>
|
||
</div>
|
||
<div class="jr-search-form">
|
||
<input id="q" class="jr-search-input" type="text"
|
||
placeholder="输入完整票号 / 起点 / 终点 / 日期 (YYYY-MM-DD)" />
|
||
<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">
|
||
<article class="jr-panel-card">
|
||
<div class="jr-panel-headline">
|
||
<h3>结果列表</h3>
|
||
<span class="jr-panel-note">Search Results</span>
|
||
</div>
|
||
<div id="list" class="jr-scroll-box">
|
||
<div class="jr-center-empty">
|
||
<p>请输入关键词开始查询。</p>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<section id="detail-section" class="jr-detail-stack">
|
||
<article class="jr-panel-card" style="margin-bottom:20px;">
|
||
<div class="jr-panel-headline">
|
||
<h3>车票详情</h3>
|
||
<span class="jr-panel-note">Ticket Overview</span>
|
||
</div>
|
||
<div id="detail">
|
||
<div class="jr-center-empty">
|
||
<p>从左侧选择一张车票以查看详情。</p>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
|
||
<div class="jr-grid-two">
|
||
<article class="jr-panel-card">
|
||
<div class="jr-panel-headline">
|
||
<h3>热门站点</h3>
|
||
<span class="jr-panel-note">Popular Stations</span>
|
||
</div>
|
||
<div id="popularStations" class="jr-popular-list"></div>
|
||
</article>
|
||
<article class="jr-panel-card">
|
||
<div class="jr-panel-headline">
|
||
<h3>热门路线</h3>
|
||
<span class="jr-panel-note">Popular Routes</span>
|
||
</div>
|
||
<div id="popularRoutes" class="jr-popular-list"></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>
|
||
<span class="version">v1.0.12</span>
|
||
</footer>
|
||
</main>
|
||
</div>
|
||
|
||
<script src="/custom-dialog.js?v=12"></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>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const isDomain = location.hostname.includes('fse-media.group');
|
||
const links = {
|
||
home: isDomain ? 'https://ticket.fse-media.group' : '/home.html',
|
||
order: isDomain ? 'https://ticket.fse-media.group/order' : '/ticket-order.html',
|
||
search: isDomain ? 'https://ticket.fse-media.group/search' : '/ticket-search.html',
|
||
'card-search': isDomain ? 'https://ticket.fse-media.group/ic-card/search' : '/ic-card-search.html',
|
||
'card-order': isDomain ? 'https://ticket.fse-media.group/ic-card/order' : '/ic-card-order.html'
|
||
};
|
||
|
||
const homeLink = document.getElementById('homeLink');
|
||
const brandLink = document.getElementById('brandLink');
|
||
if (homeLink) homeLink.href = links.home;
|
||
if (brandLink) brandLink.href = links.home;
|
||
|
||
document.querySelectorAll('[data-link]').forEach((el) => {
|
||
const key = el.getAttribute('data-link');
|
||
if (links[key]) el.href = links[key];
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
|
||
</html>
|