feat: 购买页面

src/pages/pricing/index.tsx

@@ -45,10 +45,11 @@ const Pricing = memo(() => {
                         </span>
                         <div
                             ref={planCardsContainerRef}
+                            data-count={plans.length}
                             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)] [&>*]:max-w-[calc(25%-1.5rem)]'
+                                    : 'grid grid-cols-4 gap-x-8 gap-y-4 [&[data-count="1"]]:grid-cols-3 [&[data-count="2"]]:grid-cols-3 [&[data-count="3"]]:grid-cols-3'
                             }
                         >
                             {plans.map((plan) => (

src/pages/pricing/useService.ts

@@ -55,7 +55,8 @@ export function useService(): UseServiceReturn {
                 tag: '无优惠',
                 tagType: PlanTagType.NONE,
                 price: 1.99,
-            },            {
+            },
+            {
                 id: 5,
                 title: '7天',
                 subTitle: 'USD 1.99',