style: 优化布局和样式以提升用户体验
- 在 AppLayout.vue 中,将 `pb-16` 类动态绑定到 `title` 存在时,避免不必要的底部间距 - 在 CheckoutPage.vue 中,移除支付失败提示中多余的 `mb-2` 和 `mb-4` 类,简化样式
Showing
2 changed files
with
3 additions
and
3 deletions
| ... | @@ -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> | ... | ... |
-
Please register or login to post a comment