奖池分类标签大小调整

app/(tabs)/box.tsx

@@ -7,6 +7,7 @@ import {
     FlatList,
     ImageBackground,
     RefreshControl,
+    ScrollView,
     StatusBar,
     StyleSheet,
     Text,
@@ -83,21 +84,27 @@ const TypeSelector = React.memo(({
     onSortChange: () => void;
 }) => (
     <View style={styles.typeSection}>
-      <View style={styles.typeList}>
-        {typeList.map((item, index) => (
-          <TouchableOpacity
-            key={index}
-            style={styles.typeItem}
-            onPress={() => onTypeChange(index)}
-            activeOpacity={0.7}
-          >
-            <Image
-              source={{ uri: typeIndex === index ? item.imgOn : item.img }}
-              style={styles.typeImage}
-              contentFit="contain"
-            />
-          </TouchableOpacity>
-        ))}
+      <View style={styles.typeListContainer}>
+        <ScrollView 
+          horizontal 
+          showsHorizontalScrollIndicator={false} 
+          contentContainerStyle={styles.typeListContent}
+        >
+          {typeList.map((item, index) => (
+            <TouchableOpacity
+              key={index}
+              style={styles.typeItem}
+              onPress={() => onTypeChange(index)}
+              activeOpacity={0.7}
+            >
+              <Image
+                source={{ uri: typeIndex === index ? item.imgOn : item.img }}
+                style={styles.typeImage}
+                contentFit="fill"
+              />
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
       </View>
       <TouchableOpacity style={styles.sortBtn} onPress={onSortChange} activeOpacity={0.7}>
         <Image
@@ -425,29 +432,31 @@ const styles = StyleSheet.create({
     zIndex: 10,
     backgroundColor: 'transparent',
   },
-  typeList: {
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
+  typeListContainer: {
     flex: 1,
+    marginRight: 10,
+  },
+  typeListContent: {
+    paddingRight: 10,
   },
   typeItem: {
-    width: 60,
-    height: 30,
-    marginRight: 5,
+    width: 73,
+    height: 34,
+    marginRight: 4,
   },
   typeImage: {
     width: '100%',
     height: '100%',
   },
   sortBtn: {
-    width: 40,
-    height: 30,
+    width: 38,
+    height: 38,
     alignItems: 'center',
     justifyContent: 'center',
   },
   sortIcon: {
-    width: 30,
-    height: 30,
+    width: 38,
+    height: 38,
   },
   listContent: {
     paddingHorizontal: 10,