From e72325140b2eb0628786588d6e2d7e6422c2281a Mon Sep 17 00:00:00 2001
From: erio <asakifeng@gmail.com>
Date: Fri, 6 Mar 2026 18:54:28 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=94=AF?=
 =?UTF-8?q?=E4=BB=98=E6=96=B9=E5=BC=8F=E9=80=89=E6=8B=A9=E5=99=A8=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BA=E4=B8=A4=E5=88=97=E7=BD=91=E6=A0=BC=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

避免三个选项挤在一行，移动端使用 grid-cols-2，PC 端保持 flex 等宽一行。

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/PaymentForm.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/PaymentForm.tsx b/src/components/PaymentForm.tsx
index 3e733ea..483184b 100644
--- a/src/components/PaymentForm.tsx
+++ b/src/components/PaymentForm.tsx
@@ -233,7 +233,7 @@ export default function PaymentForm({
           <label className={['mb-2 block text-sm font-medium', dark ? 'text-slate-200' : 'text-gray-700'].join(' ')}>
             支付方式
           </label>
-          <div className="flex gap-3">
+          <div className="grid grid-cols-2 gap-3 sm:flex">
             {enabledPaymentTypes.map((type) => {
               const meta = PAYMENT_TYPE_META[type];
               const isSelected = effectivePaymentType === type;
@@ -248,7 +248,7 @@ export default function PaymentForm({
                   onClick={() => !isUnavailable && setPaymentType(type)}
                   title={isUnavailable ? '今日充值额度已满，请使用其他支付方式' : undefined}
                   className={[
-                    'relative flex h-[58px] flex-1 flex-col items-center justify-center rounded-lg border px-3 transition-all',
+                    'relative flex h-[58px] flex-col items-center justify-center rounded-lg border px-3 transition-all sm:flex-1',
                     isUnavailable
                       ? dark
                         ? 'cursor-not-allowed border-slate-700 bg-slate-800/50 opacity-50'