商品列表封面图片-奖池列表封面图片样式调整

app/(tabs)/box.tsx

@@ -171,7 +171,7 @@ export default function BoxScreen() {
         <Image
           source={{ uri: item.cover }}
           style={styles.itemImage}
-          contentFit="cover"
+          contentFit="cover" // Changed back to 'cover' to fill height/width
         />
         <View style={styles.itemInfo}>
           <Text style={styles.itemName} numberOfLines={1}>{item.name}</Text>
@@ -440,20 +440,22 @@ const styles = StyleSheet.create({
   },
   itemBg: {
     width: '100%',
-    height: 210,
-    padding: 8,
+    height: 230, // Increased total height slightly for safety
+    // Remove padding to control children individually
   },
   itemImage: {
-    width: '100%',
-    height: 142,
-    borderRadius: 0,
+    width: '95%', // Very tight fit (leaving ~2.5% gap on sides = small gap)
+    height: 142, // restore height
+    borderRadius: 6,
+    alignSelf: 'center',
+    marginTop: 13, // Tighter top fit (approx 1px-2px visual gap)
   },
   itemInfo: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingHorizontal: 15,
-    paddingTop: 15,
+    paddingHorizontal: 20, // Visual padding for text
+    paddingTop: 12, // Space between image and text
   },
   itemName: {
     flex: 1,

components/home/GoodsCard.tsx

@@ -23,16 +23,20 @@ export function GoodsCard({ data, onPress }: GoodsCardProps) {
       <ImageBackground
         source={{ uri: Images.home.cellGoodsBg }}
         style={[styles.cell, { width: CARD_WIDTH }]}
-        resizeMode="cover"
+        resizeMode="stretch"
       >
         <View style={[styles.content, { width: CARD_WIDTH - 10 }]}>
           <View style={styles.imgBox}>
-            <Image source={data.cover} style={styles.image} contentFit="contain" />
-            {/* 图片边框装饰 */}
+            <Image 
+                source={typeof data.cover === 'string' ? { uri: data.cover } : data.cover} 
+                style={styles.image} 
+                contentFit="contain" 
+            />
+            {/* 图片边框装饰 - scaled to 70% to match Vue implementation */}
             <ImageBackground
               source={{ uri: Images.home.imgBoxBorder }}
               style={styles.imgBoxBorder}
-              resizeMode="center"
+              resizeMode="contain"
             />
           </View>
           <View style={styles.textBox}>
@@ -59,18 +63,24 @@ const styles = StyleSheet.create({
   cell: {
     height: CARD_HEIGHT,
     marginBottom: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   content: {
     overflow: 'hidden',
     borderRadius: 8,
+    alignItems: 'center',
+    // Width set inline to CARD_WIDTH - 10
   },
   imgBox: {
-    width: IMG_BOX_WIDTH,
+    width: IMG_BOX_WIDTH, // Vue uses fixed width 340rpx (170pt)
     height: IMG_BOX_HEIGHT,
     borderRadius: 7,
     overflow: 'hidden',
-    paddingHorizontal: 6,
+    paddingHorizontal: 6, // Match Vue: padding: 0 12rpx
     alignSelf: 'center',
+    justifyContent: 'center', // Ensure content centers if padding affects it
+    alignItems: 'center',
   },
   image: {
     width: '100%',
@@ -78,10 +88,10 @@ const styles = StyleSheet.create({
   },
   imgBoxBorder: {
     position: 'absolute',
-    left: 0,
-    top: 0,
-    width: '100%',
-    height: '100%',
+    width: '85%', // 70% background-size in Vue roughly maps to shrinking this, but let's try 85% first as 70% might be too small if cover is contain. Vue says bg-size 70%.
+    height: '85%',
+    alignSelf: 'center',
+    top: '7.5%', // Center it vertically
   },
   textBox: {
     paddingHorizontal: 9,