Browse Source

💄 style(activity): 优化活动选择页面布局与样式

- 重构去程和返程活动区域布局,统一使用白色背景卡片
- 将渐变背景限制在标题区域,增强视觉层次感
- 移除冗余的外层容器,简化DOM结构
- 优化空状态显示样式,使其与整体设计更协调
- 删除重复的全部为空状态判断,减少代码冗余
yourname 3 months ago
parent
commit
a602164fdf
1 changed files with 40 additions and 50 deletions
  1. 40 50
      mini/src/pages/select-activity/ActivitySelectPage.tsx

+ 40 - 50
mini/src/pages/select-activity/ActivitySelectPage.tsx

@@ -238,19 +238,19 @@ const ActivitySelectPage: React.FC = () => {
 
           {/* 去程活动区域 */}
           <View className="mb-6">
-            <View className="bg-gradient-to-r from-primary to-primary-dark rounded-card p-card">
-              <View className="flex items-center mb-1">
-                <Text className="text-white text-lg mr-2">✈️</Text>
-                <Text className="text-white text-lg font-bold">去程活动</Text>
+            <View className="bg-white rounded-card border border-gray-200 shadow-light overflow-hidden">
+              <View className="bg-gradient-to-r from-primary to-primary-dark p-card">
+                <View className="flex items-center mb-1">
+                  <Text className="text-white text-lg mr-2">✈️</Text>
+                  <Text className="text-white text-lg font-bold">去程活动</Text>
+                </View>
+                <Text className="text-white/90 text-sm">
+                  前往{routeInfo.toCity}观看活动
+                </Text>
               </View>
-              <Text className="text-white/90 text-sm">
-                前往{routeInfo.toCity}观看活动
-              </Text>
-            </View>
 
-            {departureActivities.length > 0 ? (
-              <View className="bg-white rounded-b-card border border-gray-200 shadow-light">
-                {departureActivities.map(activity => {
+              {departureActivities.length > 0 ? (
+                departureActivities.map(activity => {
                   const info = getActivityDisplayInfo(activity)
                   return (
                     <View
@@ -289,32 +289,32 @@ const ActivitySelectPage: React.FC = () => {
                       </View>
                     </View>
                   )
-                })}
-              </View>
-            ) : (
-              <View className="bg-white rounded-b-card border border-gray-200 p-8 text-center shadow-light">
-                <Text className="text-4xl mb-4">🎭</Text>
-                <Text className="text-lg text-gray-600 block mb-2">暂无去程活动</Text>
-                <Text className="text-sm text-gray-500">{routeInfo.toCity}当前没有相关活动</Text>
-              </View>
-            )}
+                })
+              ) : (
+                <View className="p-8 text-center">
+                  <Text className="text-4xl mb-4">🎭</Text>
+                  <Text className="text-lg text-gray-600 block mb-2">暂无去程活动</Text>
+                  <Text className="text-sm text-gray-500">{routeInfo.toCity}当前没有相关活动</Text>
+                </View>
+              )}
+            </View>
           </View>
 
           {/* 返程活动区域 */}
           <View className="mb-6">
-            <View className="bg-gradient-to-r from-charter-dark to-charter-bg rounded-card p-card">
-              <View className="flex items-center mb-1">
-                <Text className="text-charter text-lg mr-2">🏠</Text>
-                <Text className="text-charter text-lg font-bold">返程活动</Text>
+            <View className="bg-white rounded-card border border-gray-200 shadow-light overflow-hidden">
+              <View className="bg-gradient-to-r from-charter-dark to-charter-bg p-card">
+                <View className="flex items-center mb-1">
+                  <Text className="text-charter text-lg mr-2">🏠</Text>
+                  <Text className="text-charter text-lg font-bold">返程活动</Text>
+                </View>
+                <Text className="text-charter/90 text-sm">
+                  从{routeInfo.fromCity}观看活动后返回
+                </Text>
               </View>
-              <Text className="text-charter/90 text-sm">
-                从{routeInfo.fromCity}观看活动后返回
-              </Text>
-            </View>
 
-            {returnActivities.length > 0 ? (
-              <View className="bg-white rounded-b-card border border-gray-200 shadow-light">
-                {returnActivities.map(activity => {
+              {returnActivities.length > 0 ? (
+                returnActivities.map(activity => {
                   const info = getActivityDisplayInfo(activity)
                   return (
                     <View
@@ -353,27 +353,17 @@ const ActivitySelectPage: React.FC = () => {
                       </View>
                     </View>
                   )
-                })}
-              </View>
-            ) : (
-              <View className="bg-white rounded-b-card border border-gray-200 p-8 text-center shadow-light">
-                <Text className="text-4xl mb-4">🎭</Text>
-                <Text className="text-lg text-gray-600 block mb-2">暂无返程活动</Text>
-                <Text className="text-sm text-gray-500">{routeInfo.fromCity}当前没有相关活动</Text>
-              </View>
-            )}
+                })
+              ) : (
+                <View className="p-8 text-center">
+                  <Text className="text-4xl mb-4">🎭</Text>
+                  <Text className="text-lg text-gray-600 block mb-2">暂无返程活动</Text>
+                  <Text className="text-sm text-gray-500">{routeInfo.fromCity}当前没有相关活动</Text>
+                </View>
+              )}
+            </View>
           </View>
 
-          {/* 全部为空的状态 */}
-          {departureActivities.length === 0 && returnActivities.length === 0 && (
-            <View className="bg-white rounded-card border border-gray-200 p-8 text-center shadow-light">
-              <Text className="text-4xl mb-4">🎭</Text>
-              <Text className="text-lg text-gray-600 block mb-2">暂无相关活动</Text>
-              <Text className="text-sm text-gray-500">
-                {routeInfo.fromCity}和{routeInfo.toCity}当前都没有热门活动
-              </Text>
-            </View>
-          )}
         </View>
       </ScrollView>
     </View>