添加赔率行渲染功能，优化比赛卡片中赔率显示逻辑和样式

components/match-card.tsx

@@ -142,6 +142,55 @@ export function MatchCard({
     }
   };
 
+  const renderOddsRow = (bookmakerName: string, isHighlight: boolean) => {
+    if (!oddsSettings.enabled || !bookmakerName || odds.length === 0)
+      return null;
+    const item = odds.find((o) => o.odd_bookmakers === bookmakerName);
+    if (!item) return null;
+
+    const val1 = item.odd_1 || item.ah0_1 || "-";
+    const val2 = item.odd_x || "0" || "-";
+    const val3 = item.odd_2 || item.ah0_2 || "-";
+
+    return (
+      <View style={styles.bookmakerOddsRow}>
+        <View style={[styles.oddBadge, { backgroundColor: oddBadgeBg }]}>
+          <ThemedText
+            style={[
+              styles.oddText,
+              { color: isDark ? "#fff" : "#333" },
+              isHighlight && styles.oddTextHighlight,
+            ]}
+          >
+            {val1}
+          </ThemedText>
+        </View>
+        <View style={[styles.oddBadge, { backgroundColor: oddBadgeBg }]}>
+          <ThemedText
+            style={[
+              styles.oddText,
+              { color: isDark ? "#fff" : "#333" },
+              isHighlight && styles.oddTextHighlight,
+            ]}
+          >
+            {val2}
+          </ThemedText>
+        </View>
+        <View style={[styles.oddBadge, { backgroundColor: oddBadgeBg }]}>
+          <ThemedText
+            style={[
+              styles.oddText,
+              { color: isDark ? "#fff" : "#333" },
+              isHighlight && styles.oddTextHighlight,
+            ]}
+          >
+            {val3}
+          </ThemedText>
+        </View>
+      </View>
+    );
+  };
+
   return (
     <Pressable
       onPress={handlePress}
@@ -176,103 +225,49 @@ export function MatchCard({
           </ThemedText>
         </View>
 
-        {/* Middle: Teams & Odds */}
+        {/* Middle: Teams & Odds Row Integration */}
         <View style={styles.middle}>
-          <View style={styles.teamContainer}>
+          <View style={styles.contentRow}>
-            <View style={styles.teamRow}>
+            <View style={styles.teamInfo}>
-              {match.homeTeamLogo ? (
+              {match.homeTeamLogo && (
                 <Image
                   source={{ uri: match.homeTeamLogo }}
                   style={styles.teamLogo}
                   contentFit="contain"
                 />
-              ) : null}
+              )}
               <ThemedText
                 type="defaultSemiBold"
-                style={styles.teamLine}
+                style={styles.teamName}
                 numberOfLines={1}
                 ellipsizeMode="tail"
               >
                 {match.homeTeamName || match.home}
               </ThemedText>
             </View>
-            <View style={styles.teamRow}>
+            {renderOddsRow(oddsSettings.selectedBookmakers[0], true)}
-              {match.awayTeamLogo ? (
+          </View>
+
+          <View style={styles.contentRow}>
+            <View style={styles.teamInfo}>
+              {match.awayTeamLogo && (
                 <Image
                   source={{ uri: match.awayTeamLogo }}
                   style={styles.teamLogo}
                   contentFit="contain"
                 />
-              ) : null}
+              )}
               <ThemedText
                 type="defaultSemiBold"
-                style={styles.teamLine}
+                style={styles.teamName}
                 numberOfLines={1}
                 ellipsizeMode="tail"
               >
                 {match.awayTeamName || match.away}
               </ThemedText>
             </View>
+            {renderOddsRow(oddsSettings.selectedBookmakers[1], false)}
           </View>
-
-          {/* Odds Section */}
-          {oddsSettings.enabled && odds.length > 0 && (
-            <View style={styles.oddsContainer}>
-              {oddsSettings.selectedBookmakers.map((bookmaker, idx) => {
-                const item = odds.find((o) => o.odd_bookmakers === bookmaker);
-                if (!item) return null;
-                // Pick 3 values to display. Using odd_1, odd_x, odd_2 for example.
-                // Or try to match the screenshot's 3-column style.
-                const val1 = item.odd_1 || item.ah0_1 || "-";
-                const val2 = item.odd_x || "0" || "-";
-                const val3 = item.odd_2 || item.ah0_2 || "-";
-
-                return (
-                  <View key={bookmaker} style={styles.bookmakerOddsRow}>
-                    <View
-                      style={[styles.oddBadge, { backgroundColor: oddBadgeBg }]}
-                    >
-                      <ThemedText
-                        style={[
-                          styles.oddText,
-                          { color: isDark ? "#fff" : "#000" },
-                          idx === 0 && styles.oddTextHighlight,
-                        ]}
-                      >
-                        {val1}
-                      </ThemedText>
-                    </View>
-                    <View
-                      style={[styles.oddBadge, { backgroundColor: oddBadgeBg }]}
-                    >
-                      <ThemedText
-                        style={[
-                          styles.oddText,
-                          { color: isDark ? "#fff" : "#000" },
-                          idx === 0 && styles.oddTextHighlight,
-                        ]}
-                      >
-                        {val2}
-                      </ThemedText>
-                    </View>
-                    <View
-                      style={[styles.oddBadge, { backgroundColor: oddBadgeBg }]}
-                    >
-                      <ThemedText
-                        style={[
-                          styles.oddText,
-                          { color: isDark ? "#fff" : "#000" },
-                          idx === 0 && styles.oddTextHighlight,
-                        ]}
-                      >
-                        {val3}
-                      </ThemedText>
-                    </View>
-                  </View>
-                );
-              })}
-            </View>
-          )}
         </View>
 
         {/* Right: Score box + favorite */}
@@ -281,12 +276,16 @@ export function MatchCard({
             <View
               style={[
                 styles.scoreBox,
-                { borderColor: scoreBorder, backgroundColor: scoreBg },
+                {
+                  borderColor: isLive ? "#FF9500" : scoreBorder,
+                  backgroundColor: scoreBg,
+                },
               ]}
             >
               <ThemedText style={styles.scoreBoxText} numberOfLines={1}>
                 {scoreParts.home}
               </ThemedText>
+              <View style={styles.scoreDivider} />
               <ThemedText style={styles.scoreBoxText} numberOfLines={1}>
                 {scoreParts.away}
               </ThemedText>
@@ -305,7 +304,7 @@ export function MatchCard({
           >
             <IconSymbol
               name={isFav ? "star" : "star-outline"}
-              size={22}
+              size={20}
               color={isFav ? "#FFD700" : iconColor}
             />
           </TouchableOpacity>
@@ -318,121 +317,114 @@ export function MatchCard({
 const styles = StyleSheet.create({
   card: {
     height: 78,
-    paddingHorizontal: 14,
+    paddingHorizontal: 12,
-    marginBottom: 12,
+    marginBottom: 8,
     borderRadius: 14,
     borderWidth: 1,
     justifyContent: "center",
     overflow: "hidden",
-    // iOS shadow
     shadowColor: "#000",
-    shadowOffset: { width: 0, height: 0.5 },
+    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.03,
+    shadowOpacity: 0.05,
     shadowRadius: 2,
-    // Android elevation
+    elevation: 2,
-    elevation: 1,
   },
   row: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 12,
   },
   left: {
-    width: 52,
+    width: 44,
-    alignItems: "center",
+    alignItems: "flex-start",
     justifyContent: "center",
-    gap: 6,
+    gap: 4,
   },
   leagueShortText: {
     fontSize: 12,
     fontWeight: "700",
-    opacity: 0.85,
+    opacity: 0.8,
   },
   timeText: {
     fontSize: 12,
-    opacity: 0.55,
+    opacity: 0.5,
   },
   timeTextLive: {
     color: "#FF3B30",
     opacity: 1,
-    fontWeight: "bold",
+    fontWeight: "800",
   },
   middle: {
     flex: 1,
+    justifyContent: "center",
+    gap: 10,
+    marginHorizontal: 8,
+  },
+  contentRow: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    gap: 8,
-    minWidth: 0,
   },
-  teamContainer: {
+  teamInfo: {
-    flex: 1,
-    justifyContent: "center",
-    gap: 8,
-    minWidth: 0,
-  },
-  teamRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
+    flex: 1,
+    marginRight: 6,
   },
   teamLogo: {
-    width: 24,
+    width: 22,
-    height: 24,
+    height: 22,
   },
-  teamLine: {
+  teamName: {
-    fontSize: 15,
+    fontSize: 14,
-    lineHeight: 18,
+    fontWeight: "600",
+    marginLeft: 6,
     flex: 1,
   },
-  oddsContainer: {
-    gap: 8,
-    alignItems: "flex-end",
-  },
   bookmakerOddsRow: {
     flexDirection: "row",
     gap: 4,
   },
   oddBadge: {
-    backgroundColor: "rgba(0,0,0,0.03)",
+    paddingHorizontal: 5,
-    paddingHorizontal: 6,
     paddingVertical: 2,
     borderRadius: 6,
-    minWidth: 40,
+    minWidth: 36,
     alignItems: "center",
+    justifyContent: "center",
   },
   oddText: {
-    fontSize: 11,
+    fontSize: 10.5,
-    fontWeight: "600",
+    fontWeight: "700",
-    opacity: 0.8,
+    opacity: 0.9,
   },
   oddTextHighlight: {
     color: "#FF9500",
-    opacity: 1,
   },
   right: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 10,
-  },
-  scoreBox: {
-    width: 44,
-    height: 56,
-    borderRadius: 10,
-    borderWidth: 1,
-    borderColor: "rgba(0,0,0,0.12)",
-    backgroundColor: "rgba(255,255,255,0.6)",
-    alignItems: "center",
-    justifyContent: "center",
     gap: 6,
   },
+  scoreBox: {
+    width: 36,
+    height: 54,
+    borderRadius: 8,
+    borderWidth: 1.5,
+    alignItems: "center",
+    justifyContent: "center",
+  },
   scoreBoxText: {
-    fontSize: 16,
+    fontSize: 20,
-    fontWeight: "700",
+    fontWeight: "900",
-    opacity: 0.9,
+  },
+  scoreDivider: {
+    width: "60%",
+    height: 1,
+    backgroundColor: "rgba(0,0,0,0.06)",
+    marginVertical: 1,
   },
   scoreBoxPlaceholder: {
-    width: 44,
+    width: 36,
-    height: 56,
+    height: 54,
   },
 });