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
+126 -2
View File
@@ -2590,6 +2590,39 @@ body.jr-public-page {
font-size: 0.86rem;
}
.jr-query-overview {
margin-bottom: 24px;
}
.jr-query-stat {
padding: 18px 20px;
background: linear-gradient(180deg, #f7faf7 0, #ffffff 100%);
border: 1px solid #d7e0d3;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.04);
}
.jr-query-stat-label {
display: inline-block;
margin-bottom: 8px;
color: #6a786d;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.12em;
}
.jr-query-stat strong {
display: block;
color: #163024;
font-size: 1.08rem;
font-weight: 800;
}
.jr-query-stat p {
margin: 10px 0 0;
color: #647266;
line-height: 1.7;
}
.jr-grid-two {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -2693,6 +2726,13 @@ body.jr-public-page {
align-items: stretch;
}
.jr-search-helper {
margin: 12px 0 0;
color: #66756a;
line-height: 1.7;
font-size: 0.92rem;
}
.jr-search-input,
body.jr-public-page .jr-search-input {
width: 100%;
@@ -2752,16 +2792,22 @@ body.jr-public-page .jr-search-button:hover {
}
.jr-ticket-row {
padding: 18px 0;
padding: 18px 14px;
border-bottom: 1px solid #e4ece2;
border-left: 4px solid transparent;
cursor: pointer;
transition: background-color 0.2s ease;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.jr-ticket-row:hover {
background: #f7faf7;
}
.jr-ticket-row.is-active {
background: linear-gradient(180deg, #f4f8f4 0, #ffffff 100%);
border-left-color: #0b6b3a;
}
.jr-ticket-row:last-child {
border-bottom: none;
}
@@ -2779,6 +2825,13 @@ body.jr-public-page .jr-search-button:hover {
line-height: 1.7;
}
.jr-list-meta {
margin-top: 8px;
color: #728077;
font-size: 0.88rem;
line-height: 1.6;
}
.jr-ticket-id {
color: #1b3022;
font-weight: 800;
@@ -2920,6 +2973,12 @@ body.jr-public-page .jr-search-button:hover {
gap: 10px;
}
.jr-detail-stack {
display: flex;
flex-direction: column;
gap: 20px;
}
.jr-popular-item {
display: flex;
align-items: center;
@@ -3173,6 +3232,35 @@ body.jr-public-page .jr-secondary-btn:hover {
line-height: 1.7;
}
.jr-guide-card {
min-height: 100%;
}
.jr-guide-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.jr-guide-item {
padding: 14px 16px;
background: #f7faf7;
border: 1px solid #dfe8dd;
}
.jr-guide-item strong {
display: block;
color: #173225;
font-size: 0.98rem;
}
.jr-guide-item span {
display: block;
margin-top: 6px;
color: #647266;
line-height: 1.7;
}
body.jr-ticket-board-page,
body.jr-ticket-board-page #app,
body.jr-ticket-board-page .jr-public-shell {
@@ -3584,6 +3672,37 @@ body.jr-ticket-board-page .jr-board-card:last-child {
min-width: 0;
}
.jr-page-intro h1 {
font-size: clamp(1.75rem, 7vw, 2.35rem);
}
.jr-panel-headline {
flex-direction: column;
align-items: flex-start;
}
.jr-query-stat,
.jr-ticket-preview,
.jr-history-item,
.jr-popular-item,
.jr-guide-item {
padding-left: 16px;
padding-right: 16px;
}
.jr-ticket-row {
padding: 16px 12px;
}
.jr-scroll-box {
min-height: 260px;
max-height: none;
}
.jr-center-empty {
min-height: 180px;
}
.jr-order-info-grid {
grid-template-columns: 1fr;
}
@@ -3610,6 +3729,11 @@ body.jr-ticket-board-page .jr-board-card:last-child {
letter-spacing: 0.08em;
}
.jr-action-row .btn,
.jr-action-row button {
width: 100%;
}
.jr-home-alert {
flex-direction: column;
align-items: flex-start;