Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
8a08909b 1 parent 1ab58299

style: 调整支付页面和组件的样式以改善视觉效果 

将 `h-screen` 替换为 `h-full`，并在 `OrdersPage.vue` 中添加渐变背景，以提升支付页面的视觉一致性和美观度。
Inline Side-by-side
Showing 2 changed files with 12 additions and 10 deletions
1 <template> 1 <template>
2 <!-- 支付成功状态 --> 2 <!-- 支付成功状态 -->
3 - <div v-if="paymentStatus === 'success'" class="h-screen flex flex-col items-center justify-center px-4"> 3 + <div v-if="paymentStatus === 'success'" class="h-full 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 <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> 5 <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
6 <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 6 <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
22 </div> 22 </div>
23 23
24 <!-- 支付处理中状态 --> 24 <!-- 支付处理中状态 -->
25 - <div v-else-if="paymentStatus === 'processing'" class="h-screen flex flex-col items-center justify-center px-4"> 25 + <div v-else-if="paymentStatus === 'processing'" class="h-full flex flex-col items-center justify-center px-4">
26 <FrostedGlass class="p-6 rounded-xl text-center"> 26 <FrostedGlass class="p-6 rounded-xl text-center">
27 <div class="w-20 h-20 bg-blue-50 rounded-full flex items-center justify-center mx-auto mb-4"> 27 <div class="w-20 h-20 bg-blue-50 rounded-full flex items-center justify-center mx-auto mb-4">
28 <div class="w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div> 28 <div class="w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
33 </div> 33 </div>
34 34
35 <!-- 支付失败状态 --> 35 <!-- 支付失败状态 -->
36 - <div v-else-if="paymentStatus === 'failed'" class="h-screen flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8"> 36 + <div v-else-if="paymentStatus === 'failed'" class="h-full flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
37 <FrostedGlass class="w-full max-w-sm sm:max-w-md lg:max-w-lg p-6 sm:p-8 rounded-2xl text-center"> 37 <FrostedGlass class="w-full max-w-sm sm:max-w-md lg:max-w-lg p-6 sm:p-8 rounded-2xl text-center">
38 <div class="w-20 h-20 sm:w-24 sm:h-24 bg-red-50 rounded-full flex items-center justify-center mx-auto"> 38 <div class="w-20 h-20 sm:w-24 sm:h-24 bg-red-50 rounded-full flex items-center justify-center mx-auto">
39 <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"> 39 <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">
......
...@@ -166,13 +166,15 @@ ...@@ -166,13 +166,15 @@
166 close-icon-position="top-right" 166 close-icon-position="top-right"
167 :style="{ height: '90%' }" 167 :style="{ height: '90%' }"
168 > 168 >
169 - <WechatPayment 169 + <div class="bg-gradient-to-r from-green-500/10 to-blue-500/10 h-full">
170 - v-if="showPaymentPopup && currentOrder" 170 + <WechatPayment
171 - :order-id="currentOrder.id" 171 + v-if="showPaymentPopup && currentOrder"
172 - @success="handlePaymentSuccess" 172 + :order-id="currentOrder.id"
173 - @failed="handlePaymentFailed" 173 + @success="handlePaymentSuccess"
174 - @processing="handlePaymentProcessing" 174 + @failed="handlePaymentFailed"
175 - /> 175 + @processing="handlePaymentProcessing"
176 + />
177 + </div>
176 </van-popup> 178 </van-popup>
177 </AppLayout> 179 </AppLayout>
178 </template> 180 </template>
......