style(CheckoutPage): 优化支付失败页面的响应式布局

调整了支付失败页面的样式，使其在不同屏幕尺寸下显示更加一致。增加了断点处理，优化了按钮和文本的间距、大小以及悬停效果，提升用户体验。

@@ -47,27 +47,29 @@
     </div>
     </div>
 
 
     <!-- 支付失败提示 -->
     <!-- 支付失败提示 -->
-    <div v-else-if="paymentStatus === 'failed'" class="h-screen flex flex-col items-center justify-center px-4">
-      <FrostedGlass class="p-6 rounded-xl text-center">
-        <div class="w-20 h-20 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-4">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <div v-else-if="paymentStatus === 'failed'" class="h-screen flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
+      <FrostedGlass class="w-full max-w-sm sm:max-w-md lg:max-w-lg p-6 sm:p-8 rounded-2xl text-center">
+        <div class="w-20 h-20 sm:w-24 sm:h-24 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-2 sm:mb-4">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 sm:h-12 sm:w-12 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
           </svg>
           </svg>
         </div>
         </div>
-        <h2 class="text-2xl font-bold mb-2">支付失败</h2>
-        <p class="text-gray-600 mb-6">{{ paymentError || '支付过程中出现错误，请重试' }}</p>
+        <h2 class="text-xl sm:text-2xl font-bold mb-2 sm:mb-3">支付失败</h2>
+        <p class="text-sm sm:text-base text-gray-600 mb-6 sm:mb-8 px-2 sm:px-4">{{ paymentError || '支付过程中出现错误，请重试' }}</p>
+        <div class="space-y-2 sm:space-y-3 max-w-xs mx-auto">
           <button
           <button
             @click="handleSubmit"
             @click="handleSubmit"
-          class="w-full bg-gradient-to-r from-red-500 to-red-600 text-white py-3 rounded-xl font-medium mb-3"
+            class="w-full bg-gradient-to-r from-red-500 to-red-600 text-white py-3 sm:py-3.5 rounded-xl font-medium text-base sm:text-lg hover:from-red-600 hover:to-red-700 transition-colors"
           >
           >
             重新支付
             重新支付
           </button>
           </button>
           <button
           <button
             @click="handleBackToHome"
             @click="handleBackToHome"
-          class="w-full bg-gray-100 text-gray-700 py-3 rounded-xl font-medium"
+            class="w-full bg-gray-100 text-gray-700 py-3 sm:py-3.5 rounded-xl font-medium text-base sm:text-lg hover:bg-gray-200 transition-colors"
           >
           >
             返回首页
             返回首页
           </button>
           </button>
+        </div>
       </FrostedGlass>
       </FrostedGlass>
     </div>
     </div>