Browse Source

💄 style(order): optimize text display for long routes

- update order detail page: change flex alignment to start and add top padding for route label, set text to break words with line height 1.4
- update order list page: adjust line height from 1.3 to 1.4 and add break-words for pickup and dropoff points to better display long addresses
yourname 3 tháng trước cách đây
mục cha
commit
5cde1b4ac5
2 tập tin đã thay đổi với 5 bổ sung5 xóa
  1. 3 3
      mini/src/pages/order-detail/index.tsx
  2. 2 2
      mini/src/pages/orders/index.tsx

+ 3 - 3
mini/src/pages/order-detail/index.tsx

@@ -163,9 +163,9 @@ const OrderDetailPage = () => {
               <Text className="text-[28rpx] text-gray-900 flex-1 font-medium">{order.id}</Text>
             </View>
 
-            <View className="flex items-center">
-              <Text className="text-[28rpx] text-gray-600 w-[160rpx] flex-shrink-0">行程路线:</Text>
-              <Text className="text-[28rpx] text-gray-900 flex-1 font-medium text-right">
+            <View className="flex items-start">
+              <Text className="text-[28rpx] text-gray-600 w-[160rpx] flex-shrink-0 pt-[6rpx]">行程路线:</Text>
+              <Text className="text-[28rpx] text-gray-900 flex-1 font-medium break-words leading-[1.4]">
                 {order.routeSnapshot?.pickupPoint} → {order.routeSnapshot?.dropoffPoint}
               </Text>
             </View>

+ 2 - 2
mini/src/pages/orders/index.tsx

@@ -72,7 +72,7 @@ const OrderCard = ({ order, onViewDetail }) => {
         <View className="flex items-center mb-[28rpx] p-[20rpx] bg-primary/5 rounded-[16rpx] border border-primary/10">
           <View className="flex-1">
             <Text className={`text-[24rpx] ${isCharterOrder ? 'text-gray-300' : 'text-gray-500'}`}>出发</Text>
-            <Text className={`block text-[30rpx] font-semibold leading-[1.3] ${
+            <Text className={`block text-[30rpx] font-semibold leading-[1.4] break-words ${
               isCharterOrder ? 'text-white' : 'text-gray-900'
             }`}>
               {order.routeSnapshot?.pickupPoint}
@@ -85,7 +85,7 @@ const OrderCard = ({ order, onViewDetail }) => {
           </Text>
           <View className="flex-1">
             <Text className={`text-[24rpx] ${isCharterOrder ? 'text-gray-300' : 'text-gray-500'}`}>到达</Text>
-            <Text className={`block text-[30rpx] font-semibold leading-[1.3] ${
+            <Text className={`block text-[30rpx] font-semibold leading-[1.4] break-words ${
               isCharterOrder ? 'text-white' : 'text-gray-900'
             }`}>
               {order.routeSnapshot?.dropoffPoint}