From 9d145c3d16eaa35bb5ca565df244df79c1de90f1 Mon Sep 17 00:00:00 2001 From: HenryDu8133 <813367384@qq.com> Date: Thu, 16 Jul 2026 22:16:10 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=20TVM=20=E8=B4=AD?= =?UTF-8?q?=E7=A5=A8=E5=9C=B0=E5=9B=BE=EF=BC=8C=E7=BC=A9=E5=B0=8F=E5=85=83?= =?UTF-8?q?=E7=B4=A0=E5=B0=BA=E5=AF=B8=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=88=87?= =?UTF-8?q?=E6=8D=A2=E5=8A=A8=E7=94=BB=EF=BC=8C=E9=80=82=E9=85=8D=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E7=AB=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/ticket-order.js | 104 +++++++++++++++++++++++++------------------- 1 file changed, 59 insertions(+), 45 deletions(-) diff --git a/web/ticket-order.js b/web/ticket-order.js index e2d740a..4e12a29 100644 --- a/web/ticket-order.js +++ b/web/ticket-order.js @@ -92,44 +92,44 @@ let markerSvg = ''; if (isTransfer) { - markerSvg += ``; - markerSvg += pieSvg(x, y, 11.5, uniqueColors); - markerSvg += ``; + markerSvg += ``; + markerSvg += pieSvg(x, y, 9, uniqueColors); + markerSvg += ``; } else { const color = forceColor || uniqueColors[0] || '#93a2b7'; - markerSvg += ``; - markerSvg += ``; + markerSvg += ``; + markerSvg += ``; } const preferTop = i % 2 === 0; let labelSvg = ''; - const codeFontSize = 9; - const nameFontSize = 13; - const enFontSize = 8.5; - const codeW = primaryCode.length * 6 + 10; + const codeFontSize = 8; + const nameFontSize = 11.5; + const enFontSize = 7.5; + const codeW = primaryCode.length * 5.5 + 8; let textContent = ''; if (preferTop) { - const bottomY = y - 22; + const bottomY = y - 18; const enY = bottomY; - const nameY = showEn ? bottomY - 12 : bottomY; - const codeY = nameY - 18; - textContent += ``; - textContent += `${primaryCode}`; - textContent += `${name}`; + const nameY = showEn ? bottomY - 10 : bottomY; + const codeY = nameY - 13; + textContent += ``; + textContent += `${primaryCode}`; + textContent += `${name}`; if (showEn) { - textContent += `${enName}`; + textContent += `${enName}`; } } else { - const topY = y + 34; + const topY = y + 26; const codeY = topY; - const nameY = topY + 18; - const enY = nameY + 12; - textContent += ``; - textContent += `${primaryCode}`; - textContent += `${name}`; + const nameY = topY + 13; + const enY = nameY + 10; + textContent += ``; + textContent += `${primaryCode}`; + textContent += `${name}`; if (showEn) { - textContent += `${enName}`; + textContent += `${enName}`; } } labelSvg += textContent; @@ -143,7 +143,7 @@ return ` - + ${markerSvg} ${labelSvg} `; @@ -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; } @@ -179,9 +179,9 @@ return; } - const startX = 80; - const gapX = 90; - const y = 80; + const startX = 40; + const gapX = 65; + const y = 60; const pts = []; for (let i = 0; i < li.stops.length; i++) { @@ -201,16 +201,17 @@ if (pts.length >= 2) { let d = `M ${pts[0].x} ${y}`; for(let i=1; i`; + 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 = startX + pts.length * gapX + 80; - const height = 160; - container.innerHTML = `${svgContent}`; + const width = startX + pts.length * gapX + 40; + const height = 120; + // 添加 tvm-animate 类实现动画过渡 + container.innerHTML = `${svgContent}`; } function renderTvmRoute() { @@ -236,9 +237,9 @@ container.style.display = 'flex'; if (title) title.style.display = 'block'; - const startX = 80; - const gapX = 90; - const y = 80; + const startX = 40; + const gapX = 65; + const y = 60; let svgContent = ''; @@ -265,7 +266,7 @@ } for (const seg of segments) { - svgContent += ``; + svgContent += ``; } const pathD = `M ${startX} ${y} L ${startX + (routeCodes.length - 1) * gapX} ${y}`; @@ -277,7 +278,7 @@ for (let i = 0; i < numArrows; i++) { svgContent += ` - + `; @@ -287,9 +288,9 @@ svgContent += renderStationNode(startX + i * gapX, y, routeCodes[i], i); } - const width = startX + routeCodes.length * gapX + 80; - const height = 160; - container.innerHTML = `${svgContent}`; + const width = startX + routeCodes.length * gapX + 40; + const height = 120; + container.innerHTML = `${svgContent}`; } async function renderSystemMap() { @@ -383,12 +384,25 @@ if (uniq.length >= 2) stationTransfer.add(c); } + const fadeStyle = ``; + mapContainer.innerHTML = ` -
-
-
- - + ${fadeStyle} +
+
+
+ +
`;