hookehuyr

style: 优化布局和样式以提升用户体验

- 在 AppLayout.vue 中,将 `pb-16` 类动态绑定到 `title` 存在时,避免不必要的底部间距
- 在 CheckoutPage.vue 中,移除支付失败提示中多余的 `mb-2` 和 `mb-4` 类,简化样式
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 - <div class="bg-gradient-to-br from-green-50 via-teal-50 to-blue-50 min-h-screen pb-16"> 9 + <div class="bg-gradient-to-br from-green-50 via-teal-50 to-blue-50 min-h-screen" :class="{ 'pb-16': title }">
10 <GradientHeader 10 <GradientHeader
11 v-if="title" 11 v-if="title"
12 :title="title" 12 :title="title"
......
1 <template> 1 <template>
2 - <AppLayout :title="orderComplete ? '支付成功' : '结账'" :hide-bottom-nav="true" @back-click="router.back()"> 2 + <AppLayout title="" :hide-bottom-nav="true" @back-click="router.back()">
3 <div v-if="cartItems.length === 0 && !orderComplete" class="h-screen flex flex-col items-center justify-center px-4"> 3 <div v-if="cartItems.length === 0 && !orderComplete" class="h-screen flex flex-col items-center justify-center px-4">
4 <FrostedGlass class="p-6 rounded-xl text-center"> 4 <FrostedGlass class="p-6 rounded-xl text-center">
5 <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-400 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 5 <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-gray-400 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
49 <!-- 支付失败提示 --> 49 <!-- 支付失败提示 -->
50 <div v-else-if="paymentStatus === 'failed'" class="h-screen flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8"> 50 <div v-else-if="paymentStatus === 'failed'" class="h-screen flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
51 <FrostedGlass class="w-full max-w-sm sm:max-w-md lg:max-w-lg p-6 sm:p-8 rounded-2xl text-center"> 51 <FrostedGlass class="w-full max-w-sm sm:max-w-md lg:max-w-lg p-6 sm:p-8 rounded-2xl text-center">
52 - <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"> 52 + <div class="w-20 h-20 sm:w-24 sm:h-24 bg-red-50 rounded-full flex items-center justify-center mx-auto">
53 <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"> 53 <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">
54 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> 54 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
55 </svg> 55 </svg>
......