From 85c9b666d7088f80374b2abf6730560fcaf0b2f2 Mon Sep 17 00:00:00 2001 From: yuchenglong Date: Tue, 20 Jan 2026 09:15:37 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=B5=94=E7=8E=87=E8=A1=8C?= =?UTF-8?q?=E6=B8=B2=E6=9F=93=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E6=AF=94=E8=B5=9B=E5=8D=A1=E7=89=87=E4=B8=AD=E8=B5=94=E7=8E=87?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91=E5=92=8C=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/match-card.tsx | 246 ++++++++++++++++++-------------------- 1 file changed, 119 insertions(+), 127 deletions(-) diff --git a/components/match-card.tsx b/components/match-card.tsx index 45e960a..266f829 100644 --- a/components/match-card.tsx +++ b/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 ( + + + + {val1} + + + + + {val2} + + + + + {val3} + + + + ); + }; + return ( - {/* Middle: Teams & Odds */} + {/* Middle: Teams & Odds Row Integration */} - - - {match.homeTeamLogo ? ( + + + {match.homeTeamLogo && ( - ) : null} + )} {match.homeTeamName || match.home} - - {match.awayTeamLogo ? ( + {renderOddsRow(oddsSettings.selectedBookmakers[0], true)} + + + + + {match.awayTeamLogo && ( - ) : null} + )} {match.awayTeamName || match.away} + {renderOddsRow(oddsSettings.selectedBookmakers[1], false)} - - {/* Odds Section */} - {oddsSettings.enabled && odds.length > 0 && ( - - {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 ( - - - - {val1} - - - - - {val2} - - - - - {val3} - - - - ); - })} - - )} {/* Right: Score box + favorite */} @@ -281,12 +276,16 @@ export function MatchCard({ {scoreParts.home} + {scoreParts.away} @@ -305,7 +304,7 @@ export function MatchCard({ > @@ -318,121 +317,114 @@ export function MatchCard({ const styles = StyleSheet.create({ card: { height: 78, - paddingHorizontal: 14, - marginBottom: 12, + paddingHorizontal: 12, + marginBottom: 8, borderRadius: 14, borderWidth: 1, justifyContent: "center", overflow: "hidden", - // iOS shadow shadowColor: "#000", - shadowOffset: { width: 0, height: 0.5 }, - shadowOpacity: 0.03, + shadowOffset: { width: 0, height: 1 }, + shadowOpacity: 0.05, shadowRadius: 2, - // Android elevation - elevation: 1, + elevation: 2, }, row: { flexDirection: "row", alignItems: "center", - gap: 12, }, left: { - width: 52, - alignItems: "center", + width: 44, + 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: { - flex: 1, - justifyContent: "center", - gap: 8, - minWidth: 0, - }, - teamRow: { + teamInfo: { flexDirection: "row", alignItems: "center", - gap: 8, + flex: 1, + marginRight: 6, }, teamLogo: { - width: 24, - height: 24, + width: 22, + height: 22, }, - teamLine: { - fontSize: 15, - lineHeight: 18, + teamName: { + fontSize: 14, + 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: 6, + paddingHorizontal: 5, paddingVertical: 2, borderRadius: 6, - minWidth: 40, + minWidth: 36, alignItems: "center", + justifyContent: "center", }, oddText: { - fontSize: 11, - fontWeight: "600", - opacity: 0.8, + fontSize: 10.5, + fontWeight: "700", + 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, - fontWeight: "700", - opacity: 0.9, + fontSize: 20, + fontWeight: "900", + }, + scoreDivider: { + width: "60%", + height: 1, + backgroundColor: "rgba(0,0,0,0.06)", + marginVertical: 1, }, scoreBoxPlaceholder: { - width: 44, - height: 56, + width: 36, + height: 54, }, });