From 234e22468a99e09fda3b00a6cc5852e91cfbd22e Mon Sep 17 00:00:00 2001 From: HenryDu8133 <813367384@qq.com> Date: Fri, 17 Jul 2026 01:13:10 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E5=90=88=E5=B9=B6=E6=96=AD=E7=82=B9?= =?UTF-8?q?=E7=BA=BF=E8=B7=AF=E5=B1=95=E7=A4=BA=E5=B9=B6=E6=94=B9=E4=B8=BA?= =?UTF-8?q?=E7=9B=B4=E8=A7=92=E7=BA=BF=E6=AE=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/ticket-order.js | 91 ++++++++++++++++++++------------------------- 1 file changed, 41 insertions(+), 50 deletions(-) diff --git a/web/ticket-order.js b/web/ticket-order.js index fcc9b19..8c8d9c8 100644 --- a/web/ticket-order.js +++ b/web/ticket-order.js @@ -159,7 +159,7 @@ const bg = isActive ? li.color : '#f8fafc'; const fg = isActive ? getContrastColor(li.color) : '#334155'; const border = isActive ? li.color : '#cbd5e1'; - html += ``; + html += ``; } container.innerHTML = html; } @@ -181,14 +181,30 @@ const startX = 40; const gapX = 65; + const breakGapX = 36; const y = 60; const pts = []; + const lineSegments = []; + let currentSegment = []; + let cursorX = startX; for (let i = 0; i < li.stops.length; i++) { const code = li.stops[i]; - if (code === '-') continue; - const x = startX + pts.length * gapX; - pts.push({ x, y, code }); + if (code === '-') { + if (currentSegment.length > 0) { + lineSegments.push(currentSegment); + currentSegment = []; + } + cursorX += breakGapX; + continue; + } + const point = { x: cursorX, y, code }; + pts.push(point); + currentSegment.push(point); + cursorX += gapX; + } + if (currentSegment.length > 0) { + lineSegments.push(currentSegment); } if (pts.length === 0) { @@ -198,17 +214,18 @@ let svgContent = ''; - if (pts.length >= 2) { - let d = `M ${pts[0].x} ${y}`; - for(let i=1; i`; + for (const segment of lineSegments) { + if (segment.length < 2) continue; + let d = `M ${segment[0].x} ${y}`; + for (let i = 1; i < segment.length; i++) d += ` L ${segment[i].x} ${y}`; + svgContent += ``; } for (let i = 0; i < pts.length; i++) { svgContent += renderStationNode(pts[i].x, pts[i].y, pts[i].code, i, li.color); } - const width = Math.max(container.clientWidth || 800, startX + pts.length * gapX + 40); + const width = Math.max(container.clientWidth || 800, cursorX); const height = 120; // 添加 tvm-animate 类实现动画过渡 container.innerHTML = `${svgContent}`; @@ -266,7 +283,7 @@ } for (const seg of segments) { - svgContent += ``; + svgContent += ``; } const pathD = `M ${startX} ${y} L ${startX + (routeCodes.length - 1) * gapX} ${y}`; @@ -278,7 +295,7 @@ for (let i = 0; i < numArrows; i++) { svgContent += ` - + `; @@ -333,45 +350,19 @@ const stopsRaw = Array.isArray(line.stops) ? line.stops : (Array.isArray(line.站点列表) ? line.站点列表 : []); const stops = stopsRaw.map(c => String(c || '').trim()).filter(Boolean); if (stops.length === 0) continue; - - let currentSegment = []; - let addedAny = false; - for (const c of stops) { - if (c === '-') { - if (currentSegment.length > 0) { - lineStops.push({ idx: currentLineIdx, name: line.name || line.线路名称 || '', enName: line.en_name || line.英文名称 || line.英文名 || '', color, stops: currentSegment }); - lineColors.push(color); - for (const stopCode of currentSegment) { - const arr = linesByStation.get(stopCode) || []; - arr.push(currentLineIdx); - linesByStation.set(stopCode, arr); - const canonical = stationCanonicalByCode[stopCode] || stopCode; - if (!lineIdxsByCanonical[canonical]) lineIdxsByCanonical[canonical] = new Set(); - lineIdxsByCanonical[canonical].add(currentLineIdx); - } - currentSegment = []; - addedAny = true; - } - } else { - currentSegment.push(c); - } - } - if (currentSegment.length > 0) { - lineStops.push({ idx: currentLineIdx, name: line.name || line.线路名称 || '', enName: line.en_name || line.英文名称 || line.英文名 || '', color, stops: currentSegment }); - lineColors.push(color); - for (const stopCode of currentSegment) { - const arr = linesByStation.get(stopCode) || []; - arr.push(currentLineIdx); - linesByStation.set(stopCode, arr); - const canonical = stationCanonicalByCode[stopCode] || stopCode; - if (!lineIdxsByCanonical[canonical]) lineIdxsByCanonical[canonical] = new Set(); - lineIdxsByCanonical[canonical].add(currentLineIdx); - } - addedAny = true; - } - if (addedAny) { - currentLineIdx++; + const stopCodes = stops.filter(stopCode => stopCode !== '-'); + if (stopCodes.length === 0) continue; + lineStops.push({ idx: currentLineIdx, name: line.name || line.线路名称 || '', enName: line.en_name || line.英文名称 || line.英文名 || '', color, stops }); + lineColors.push(color); + for (const stopCode of stopCodes) { + const arr = linesByStation.get(stopCode) || []; + arr.push(currentLineIdx); + linesByStation.set(stopCode, arr); + const canonical = stationCanonicalByCode[stopCode] || stopCode; + if (!lineIdxsByCanonical[canonical]) lineIdxsByCanonical[canonical] = new Set(); + lineIdxsByCanonical[canonical].add(currentLineIdx); } + currentLineIdx++; } if (lineStops.length === 0) { @@ -392,7 +383,7 @@ .tvm-animate { animation: tvmFadeIn 0.3s ease-out forwards; } .tvm-scroll-container { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .tvm-scroll-container::-webkit-scrollbar { height: 4px; } - .tvm-scroll-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; } + .tvm-scroll-container::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 0; } .tvm-scroll-container::-webkit-scrollbar-track { background: transparent; } `;