完善支付页面响应式设计

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

@@ -16,6 +16,7 @@ import Link from 'next/link'
 import {merge} from '@/lib/utils'
 import {useFormContext} from 'react-hook-form'
 import {Schema} from '@/components/composites/purchase/long/form'
+import {Card} from '@/components/ui/card'
 
 export default function Right() {
   const profile = useProfileStore(store => store.profile)
@@ -44,9 +45,8 @@ export default function Right() {
   }, [dailyLimit, expire, live, quota, mode])
 
   return (
-    <div className={merge(
+    <Card className={merge(
       `flex-none basis-90 p-6 flex flex-col gap-6 relative`,
-      `after:absolute after:inset-0 after:my-6 after:border-l after:border-gray-200 after:select-none after:pointer-events-none`,
     )}>
       <h3>订单详情</h3>
       <ul className="flex flex-col gap-3">
@@ -166,6 +166,6 @@ export default function Right() {
           登录后支付
         </Link>
       )}
-    </div>
+    </Card>
   )
 }