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 01:19:35 +08:00
parent c6ab010974
commit 95bf4d3d8e
2 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/style.css
+4 -3
View File
@@ -2461,11 +2461,11 @@ body.jr-order-page .station-map-container text {
} }
.jr-station-map { .jr-station-map {
padding: 14px; padding: 10px;
} }
body.jr-order-page .station-map-container svg { body.jr-order-page .station-map-container svg {
min-width: 620px; min-width: 560px;
transform: none; transform: none;
} }
@@ -4529,5 +4529,6 @@ body.jr-admin-login-page {
background-color: var(--warning); background-color: var(--warning);
border-color: white; border-color: white;
} }
␍
web/ticket-order.js
+15 -5
View File
@@ -381,19 +381,29 @@
to { opacity: 1; transform: translateX(0); } to { opacity: 1; transform: translateX(0); }
} }
.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-lines { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -8px; margin-bottom: 2px; }
.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-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) {
.tvm-layout { gap: 12px; }
.tvm-lines { gap: 5px; margin-top: -12px; margin-bottom: 0; }
.tvm-single-line, .tvm-route { min-height: 112px; padding: 6px 0 8px; }
.tvm-route-title { margin-bottom: -8px; font-size: 13px; }
}
</style>`; </style>`;
mapContainer.innerHTML = ` mapContainer.innerHTML = `
${fadeStyle} ${fadeStyle}
<div class="tvm-layout" style="display: flex; flex-direction: column; gap: 16px; width: 100%;"> <div class="tvm-layout">
<div class="tvm-lines" id="tvmLines" style="display: flex; flex-wrap: wrap; gap: 6px; margin-top: -8px; margin-bottom: 2px;"></div> <div class="tvm-lines" id="tvmLines"></div>
<div class="tvm-single-line tvm-scroll-container" id="tvmSingleLine" style="overflow-x: auto; padding: 10px 0; min-height: 120px; display: flex; align-items: center; justify-content: flex-start;"></div> <div class="tvm-single-line tvm-scroll-container" id="tvmSingleLine"></div>
<div class="tvm-route-title" style="font-weight: bold; margin-bottom: -12px; color: #475569; display: none; font-size: 14px;" id="tvmRouteTitle">已选路径</div> <div class="tvm-route-title" id="tvmRouteTitle">已选路径</div>
<div class="tvm-route tvm-scroll-container" id="tvmRoute" style="overflow-x: auto; padding: 10px 0; border-top: 1.5px dashed #cbd5e1; min-height: 120px; display: none; align-items: center; justify-content: flex-start;"></div> <div class="tvm-route tvm-scroll-container" id="tvmRoute" style="border-top: 1.5px dashed #cbd5e1; display: none;"></div>
</div> </div>
`; `;