From 4ddc4cb4ad7f3bc05f8cf9e69fac43cafd45ed4c Mon Sep 17 00:00:00 2001
From: HenryDu8133 <813367384@qq.com>
Date: Sun, 19 Jul 2026 03:41:50 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E7=A8=B3=E5=AE=9A=E8=AE=A2=E7=A5=A8?=
 =?UTF-8?q?=E9=A1=B5=E7=BA=BF=E8=B7=AF=E6=8C=89=E9=92=AE=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E4=B8=8E=E5=B0=BA=E5=AF=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/ticket-order.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/ticket-order.js b/web/ticket-order.js
index 9e320d4..b2a47aa 100644
--- a/web/ticket-order.js
+++ b/web/ticket-order.js
@@ -182,7 +182,7 @@
           const bg = isActive ? li.color : '#f8fafc';
           const fg = isActive ? getContrastColor(li.color) : '#334155';
           const border = isActive ? li.color : '#cbd5e1';
-          html += `<button class="tvm-line-btn" style="padding: 6px 12px; border: 1.5px solid ${border}; background: ${bg}; color: ${fg}; border-radius: 0; cursor: pointer; font-weight: bold; font-size: 13px; transition: all 0.25s ease;" onclick="selectTvmLine(${i})">${li.name}</button>`;
+          html += `<button class="tvm-line-btn" style="--btn-border:${border}; --btn-bg:${bg}; --btn-fg:${fg};" onclick="selectTvmLine(${i})">${li.name}</button>`;
       }
       container.innerHTML = html;
   }
@@ -413,10 +413,10 @@
                 to { opacity: 1; transform: translateX(0); }
             }
             .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-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-layout { display: flex; flex-direction: column; gap: 16px; width: 100%; min-width: 0; box-sizing: border-box; }
+            .tvm-lines { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 6px; width: 100%; min-width: 0; margin-top: -8px; margin-bottom: 2px; box-sizing: border-box; }
+            .tvm-line-btn { flex: 0 0 auto; min-height: 34px; padding: 0 12px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; border: 1.5px solid var(--btn-border, #cbd5e1); background: var(--btn-bg, #f8fafc); color: var(--btn-fg, #334155); border-radius: 0; cursor: pointer; font-weight: 700; font-size: 13px; line-height: 1; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
+            .tvm-single-line, .tvm-route { width: 100%; min-width: 0; overflow-x: auto; padding: 10px 0; min-height: 120px; display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; }
             .tvm-overview { width: 100%; min-height: 120px; display: flex; align-items: center; justify-content: center; background: #f8fbf8; border: 1px solid #d7e0d3; padding: 10px; box-sizing: border-box; }
             .tvm-overview-frame { width: 100%; }
             .tvm-overview img { display: block; max-width: 100%; height: auto; background: #ffffff; margin: 0 auto; }