Henry_Du/FSE-Ticket.sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 优化移动端线路按钮与区间卡片布局

Browse Source
This commit is contained in:
Henry_Du
2026-07-17 02:54:35 +08:00
parent 95bf4d3d8e
commit 289ed65e79
2 changed files with 24 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/style.css
+18 -1
View File
@@ -2443,11 +2443,14 @@ body.jr-order-page .station-map-container text {
.jr-selection-summary { .jr-selection-summary {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 8px;
margin-bottom: 16px;
} }
.jr-selection-arrow { .jr-selection-arrow {
min-height: 20px; min-height: 12px;
transform: rotate(90deg); transform: rotate(90deg);
font-size: 1rem;
} }
.jr-form-grid, .jr-form-grid,
@@ -2464,6 +2467,20 @@ body.jr-order-page .station-map-container text {
padding: 10px; padding: 10px;
} }
.jr-selection-card {
padding: 12px 14px;
}
.jr-selection-tag {
margin-bottom: 4px;
font-size: 0.76rem;
}
.jr-selection-card strong {
font-size: 1rem;
line-height: 1.35;
}
body.jr-order-page .station-map-container svg { body.jr-order-page .station-map-container svg {
min-width: 560px; min-width: 560px;
transform: none; transform: none;
web/ticket-order.js
+6 -3
View File
@@ -383,17 +383,20 @@
.tvm-animate { animation: tvmFadeIn 0.3s ease-out forwards; } .tvm-animate { animation: tvmFadeIn 0.3s ease-out forwards; }
.tvm-layout { display: flex; flex-direction: column; gap: 16px; width: 100%; } .tvm-layout { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.tvm-lines { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -8px; margin-bottom: 2px; } .tvm-lines { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -8px; margin-bottom: 2px; }
.tvm-line-btn { flex: 0 0 auto; white-space: nowrap; }
.tvm-single-line, .tvm-route { overflow-x: auto; padding: 10px 0; min-height: 120px; display: flex; align-items: center; justify-content: flex-start; } .tvm-single-line, .tvm-route { overflow-x: auto; padding: 10px 0; min-height: 120px; display: flex; align-items: center; justify-content: flex-start; }
.tvm-route-title { font-weight: bold; margin-bottom: -12px; color: #475569; display: none; font-size: 14px; } .tvm-route-title { font-weight: bold; margin-bottom: -15px; color: #475569; display: none; font-size: 14px; }
.tvm-route { margin-top: -4px; }
.tvm-scroll-container { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .tvm-scroll-container { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.tvm-scroll-container::-webkit-scrollbar { height: 4px; } .tvm-scroll-container::-webkit-scrollbar { height: 4px; }
.tvm-scroll-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 0; } .tvm-scroll-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 0; }
.tvm-scroll-container::-webkit-scrollbar-track { background: transparent; } .tvm-scroll-container::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 768px) { @media (max-width: 768px) {
.tvm-layout { gap: 12px; } .tvm-layout { gap: 12px; }
.tvm-lines { gap: 5px; margin-top: -12px; margin-bottom: 0; } .tvm-lines { flex-wrap: nowrap; overflow-x: auto; gap: 5px; margin-top: -14px; margin-bottom: -2px; padding-bottom: 2px; }
.tvm-single-line, .tvm-route { min-height: 112px; padding: 6px 0 8px; } .tvm-single-line, .tvm-route { min-height: 112px; padding: 6px 0 8px; }
.tvm-route-title { margin-bottom: -8px; font-size: 13px; } .tvm-route-title { margin-bottom: -12px; font-size: 13px; }
.tvm-route { margin-top: -6px; }
} }
</style>`; </style>`;