Procházet zdrojové kódy

💄 style(order): optimize payment button layout and visual effect

- add bottom padding to ScrollView to prevent content being covered by payment button
- redesign payment button container with backdrop blur and shadow effects
- add border and background to improve visual hierarchy
- adjust button shadow to enhance depth perception
- optimize overall mobile interface layout for better user experience
yourname před 3 měsíci
rodič
revize
d7698e29fe
1 změnil soubory, kde provedl 23 přidání a 21 odebrání
  1. 23 21
      mini/src/pages/order/index.tsx

+ 23 - 21
mini/src/pages/order/index.tsx

@@ -268,7 +268,7 @@ export default function OrderPage() {
         {...NavbarPresets.primary}
       />
 
-      <ScrollView className="flex-1">
+      <ScrollView className="flex-1 pb-24">
         {/* 活动信息 */}
         <View className="bg-gradient-to-r from-primary to-primary-dark px-4 py-8 text-white shadow-lg">
           <Text className="text-2xl font-bold text-center tracking-wide">{activityName || '活动'}</Text>
@@ -457,26 +457,28 @@ export default function OrderPage() {
       </ScrollView>
 
       {/* 支付按钮 */}
-      <View className="fixed bottom-4 left-4 right-4 z-100">
-        <Button
-          variant="default"
-          size="lg"
-          onClick={handlePay}
-          disabled={createOrderMutation.isPending || createPaymentMutation.isPending}
-          className="w-full"
-        >
-          {createOrderMutation.isPending || createPaymentMutation.isPending ? (
-            <View className="flex items-center justify-center">
-              <View className="i-heroicons-arrow-path-20-solid animate-spin w-5 h-5 mr-2" />
-              处理中...
-            </View>
-          ) : (
-            <View className="flex items-center justify-center">
-              <View className="i-heroicons-credit-card-20-solid w-5 h-5 mr-2" />
-              {isCharter ? '立即包车支付' : '立即购票支付'} ¥{totalPrice}
-            </View>
-          )}
-        </Button>
+      <View className="fixed bottom-0 left-0 right-0 z-100 bg-white/95 backdrop-blur-md border-t border-gray-200/60 shadow-2xl">
+        <View className="px-4 py-3">
+          <Button
+            variant="default"
+            size="lg"
+            onClick={handlePay}
+            disabled={createOrderMutation.isPending || createPaymentMutation.isPending}
+            className="w-full shadow-lg"
+          >
+            {createOrderMutation.isPending || createPaymentMutation.isPending ? (
+              <View className="flex items-center justify-center">
+                <View className="i-heroicons-arrow-path-20-solid animate-spin w-5 h-5 mr-2" />
+                处理中...
+              </View>
+            ) : (
+              <View className="flex items-center justify-center">
+                <View className="i-heroicons-credit-card-20-solid w-5 h-5 mr-2" />
+                {isCharter ? '立即包车支付' : '立即购票支付'} ¥{totalPrice}
+              </View>
+            )}
+          </Button>
+        </View>
       </View>
 
       {/* 乘车人选择器模态框 */}