完善支付页面响应式设计

src/components/composites/purchase/long/center.tsx

@@ -9,13 +9,14 @@ import Image from 'next/image'
 import check from '@/components/composites/purchase/_assets/check.svg'
 import {Schema} from '@/components/composites/purchase/long/form'
 import {useFormContext} from 'react-hook-form'
+import {Card} from '@/components/ui/card'
 
 export default function Center() {
   const form = useFormContext<Schema>()
   const type = form.watch('type')
 
   return (
-    <div className="flex-auto p-8 flex flex-col gap-8 relative">
+    <Card className="flex-auto p-6 flex flex-col gap-6 relative">
 
       {/* 计费方式 */}
       <FormField
@@ -27,7 +28,7 @@ export default function Center() {
             id={id}
             defaultValue={field.value}
             onValueChange={field.onChange}
-            className="flex gap-4">
+            className="flex gap-4 max-md:flex-col">
 
             <FormOption
               id={`${id}-2`}
@@ -166,7 +167,7 @@ export default function Center() {
       {/* 产品特性 */}
       <div className="space-y-6">
         <h3>产品特性</h3>
-        <div className="grid grid-cols-3 auto-rows-fr gap-y-6">
+        <div className="grid grid-cols-2 md:grid-cols-3 auto-rows-fr gap-4 gap-y-6">
           <p className="flex gap-2 items-center">
             <Image src={check} alt="check" aria-hidden className="w-4 h-4"/>
             <span className="text-sm text-gray-500">支持高并发提取</span>
@@ -205,6 +206,6 @@ export default function Center() {
           </p>
         </div>
       </div>
-    </div>
+    </Card>
   )
 }