wanwu/sub2apipay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 移动端支付方式选择器改为两列网格布局

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

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
erio
2026-03-06 18:54:28 +08:00
parent d46793f072
commit e72325140b
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/PaymentForm.tsx
View File

@@ -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 className={['mb-2 block text-sm font-medium', dark ? 'text-slate-200' : 'text-gray-700'].join(' ')}>
支付方式 支付方式
</label> </label>
<div className="flex gap-3"> <div className="grid grid-cols-2 gap-3 sm:flex">
{enabledPaymentTypes.map((type) => { {enabledPaymentTypes.map((type) => {
const meta = PAYMENT_TYPE_META[type]; const meta = PAYMENT_TYPE_META[type];
const isSelected = effectivePaymentType === type; const isSelected = effectivePaymentType === type;
@@ -248,7 +248,7 @@ export default function PaymentForm({
onClick={() => !isUnavailable && setPaymentType(type)} onClick={() => !isUnavailable && setPaymentType(type)}
title={isUnavailable ? '今日充值额度已满，请使用其他支付方式' : undefined} title={isUnavailable ? '今日充值额度已满，请使用其他支付方式' : undefined}
className={[ 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 isUnavailable
? dark ? dark
? 'cursor-not-allowed border-slate-700 bg-slate-800/50 opacity-50' ? 'cursor-not-allowed border-slate-700 bg-slate-800/50 opacity-50'