feat: 购买页面

src/pages/pricing/components/PlanCard/index.tsx

@@ -37,7 +37,7 @@ const PlanCard = memo(
                 className={`relative box-border cursor-pointer transition-all bg-white/10 border-2 ${
                     isMobile
                         ? 'flex-row-bc py-3 px-4 w-full rounded-lg'
-                        : 'flex-col-c p-[33px] w-[362.66px] rounded-2xl gap-4'
+                        : 'flex-col-c p-[33px] w-full max-w-[362.66px] rounded-2xl gap-4'
                 } ${
                     isSelected
                         ? 'border-[#0FA4E9]'

src/pages/pricing/index.tsx

@@ -40,9 +40,11 @@ const Pricing = memo(() => {
                             {t('pages.pricing.selecPlan')}
                         </span>
                         <div
-                            className={`flex ${
-                                isMobile ? 'flex-col-c gap-5' : 'flex-row-c justify-center gap-8'
-                            }`}
+                            className={
+                                isMobile
+                                    ? 'flex-col-c gap-5'
+                                    : 'flex flex-wrap justify-start gap-x-8 gap-y-4 [&>*]:flex-[1_1_calc(25%-1.5rem)]'
+                            }
                         >
                             {plans.map((plan) => (
                                 <PlanCard
@@ -69,7 +71,7 @@ const Pricing = memo(() => {
                             className={
                                 isMobile
                                     ? 'flex-col-c gap-5'
-                                    : 'flex flex-wrap justify-start gap-x-8 gap-y-4 [&>*]:flex-[0_1_calc(50%-1rem)]'
+                                    : 'flex flex-wrap justify-start gap-x-8 gap-y-4 [&>*]:flex-[1_1_calc(50%-1rem)]'
                             }
                         >
                             {payMethods.map((payMethod) => (