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

style(web): 优化车站文本颜色层次并增加白色描边以解决与线条重叠的问题

Browse Source
This commit is contained in:
Henry_Du
2026-07-12 10:19:31 +08:00
parent 46f8a17157
commit e1637da9c6
4 changed files with 15 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/.asset-version-state.json
+2 -2
View File
@@ -16,8 +16,8 @@
"mtimeMs": 1783602619602.658 "mtimeMs": 1783602619602.658
}, },
"ticket-order.js": { "ticket-order.js": {
"size": 40778, "size": 40237,
"mtimeMs": 1783821841376.1682 "mtimeMs": 1783822753545.6997
}, },
"ticket-search.js": { "ticket-search.js": {
"size": 17269, "size": 17269,
web/asset-versions.json
+1 -1
View File
@@ -3,7 +3,7 @@
"blog.css": 2, "blog.css": 2,
"custom-dialog.js": 11, "custom-dialog.js": 11,
"public-status.js": 14, "public-status.js": 14,
"ticket-order.js": 26, "ticket-order.js": 27,
"ticket-search.js": 12, "ticket-search.js": 12,
"ticket-route.js": 3, "ticket-route.js": 3,
"index.js": 5, "index.js": 5,
web/ticket-order.html
+1 -1
View File
@@ -158,7 +158,7 @@
</div> </div>
<script src="/custom-dialog.js?v=11"></script> <script src="/custom-dialog.js?v=11"></script>
<script src="/ticket-order.js?v=26"></script> <script src="/ticket-order.js?v=27"></script>
<script src="/public-status.js?v=14"></script> <script src="/public-status.js?v=14"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
web/ticket-order.js
+11 -22
View File
@@ -344,10 +344,10 @@
let lx, textX; let lx, textX;
if (isStart) { if (isStart) {
lx = x - 28 - nameLen; lx = x - 40 - nameLen; // Pushed further out to avoid line overlap
textX = lx + nameLen / 2; textX = lx + nameLen / 2;
} else { } else {
lx = x + 28; lx = x + 40; // Pushed further out
textX = lx + nameLen / 2; textX = lx + nameLen / 2;
} }
@@ -428,18 +428,13 @@
const nameY = showEn ? bottomY - 12 : bottomY; const nameY = showEn ? bottomY - 12 : bottomY;
const codeY = nameY - 16; const codeY = nameY - 16;
if (isTransfer) { textContent += `<rect x="${x - codeW / 2}" y="${codeY - 8}" width="${codeW}" height="12" rx="6" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.5" />`;
const labelW = Math.max(72, name.length * 14 + 18, codeW + 16, showEn ? enName.length * 5.5 + 16 : 0); textContent += `<text x="${x}" y="${codeY + 1}" text-anchor="middle" fill="#64748b" font-size="${codeFontSize}" font-weight="700" letter-spacing="0.02em">${primaryCode}</text>`;
const labelH = showEn ? 46 : 34;
const rectY = codeY - 10;
labelSvg += `<rect x="${x - labelW / 2}" y="${rectY}" width="${labelW}" height="${labelH}" rx="6" fill="rgba(255,255,255,0.95)" stroke="#cbd5e1" stroke-width="1.5" />`;
}
textContent += `<rect x="${x - codeW / 2}" y="${codeY - 8}" width="${codeW}" height="12" rx="3" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1" />`; // Text with white halo for readability
textContent += `<text x="${x}" y="${codeY + 1}" text-anchor="middle" fill="#475569" font-size="${codeFontSize}" font-weight="700" letter-spacing="0.02em">${primaryCode}</text>`; textContent += `<text x="${x}" y="${nameY}" text-anchor="middle" fill="#0f172a" font-size="${nameFontSize}" font-weight="800" stroke="#ffffff" stroke-width="4" stroke-linejoin="round" paint-order="stroke fill">${name}</text>`;
textContent += `<text x="${x}" y="${nameY}" text-anchor="middle" fill="#334155" font-size="${nameFontSize}" font-weight="${isTransfer ? 800 : 700}">${name}</text>`;
if (showEn) { if (showEn) {
textContent += `<text x="${x}" y="${enY}" text-anchor="middle" fill="#94a3b8" font-size="${enFontSize}" font-weight="600">${enName}</text>`; textContent += `<text x="${x}" y="${enY}" text-anchor="middle" fill="#64748b" font-size="${enFontSize}" font-weight="700" stroke="#ffffff" stroke-width="3" stroke-linejoin="round" paint-order="stroke fill">${enName}</text>`;
} }
} else { } else {
const topY = y + 24; const topY = y + 24;
@@ -447,18 +442,12 @@
const nameY = topY + 16; const nameY = topY + 16;
const enY = nameY + 12; const enY = nameY + 12;
if (isTransfer) { textContent += `<rect x="${x - codeW / 2}" y="${codeY - 8}" width="${codeW}" height="12" rx="6" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.5" />`;
const labelW = Math.max(72, name.length * 14 + 18, codeW + 16, showEn ? enName.length * 5.5 + 16 : 0); textContent += `<text x="${x}" y="${codeY + 1}" text-anchor="middle" fill="#64748b" font-size="${codeFontSize}" font-weight="700" letter-spacing="0.02em">${primaryCode}</text>`;
const labelH = showEn ? 46 : 34;
const rectY = codeY - 10;
labelSvg += `<rect x="${x - labelW / 2}" y="${rectY}" width="${labelW}" height="${labelH}" rx="6" fill="rgba(255,255,255,0.95)" stroke="#cbd5e1" stroke-width="1.5" />`;
}
textContent += `<rect x="${x - codeW / 2}" y="${codeY - 8}" width="${codeW}" height="12" rx="3" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1" />`; textContent += `<text x="${x}" y="${nameY}" text-anchor="middle" fill="#0f172a" font-size="${nameFontSize}" font-weight="800" stroke="#ffffff" stroke-width="4" stroke-linejoin="round" paint-order="stroke fill">${name}</text>`;
textContent += `<text x="${x}" y="${codeY + 1}" text-anchor="middle" fill="#475569" font-size="${codeFontSize}" font-weight="700" letter-spacing="0.02em">${primaryCode}</text>`;
textContent += `<text x="${x}" y="${nameY}" text-anchor="middle" fill="#334155" font-size="${nameFontSize}" font-weight="${isTransfer ? 800 : 700}">${name}</text>`;
if (showEn) { if (showEn) {
textContent += `<text x="${x}" y="${enY}" text-anchor="middle" fill="#94a3b8" font-size="${enFontSize}" font-weight="600">${enName}</text>`; textContent += `<text x="${x}" y="${enY}" text-anchor="middle" fill="#64748b" font-size="${enFontSize}" font-weight="700" stroke="#ffffff" stroke-width="3" stroke-linejoin="round" paint-order="stroke fill">${enName}</text>`;
} }
} }
labelSvg += textContent; labelSvg += textContent;