实现直播详情页

components/live-detail/odds-card.tsx

@@ -0,0 +1,122 @@
+import { ThemedText } from "@/components/themed-text";
+import { ThemedView } from "@/components/themed-view";
+import { LiveScoreMatch } from "@/types/api";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { StyleSheet, View } from "react-native";
+
+interface OddsCardProps {
+  match: LiveScoreMatch;
+  isDark: boolean;
+}
+
+export function OddsCard({ match, isDark }: OddsCardProps) {
+  const { t } = useTranslation();
+  // 提取队名缩写或前3个字母
+  const homeAbbr =
+    match.event_home_team?.substring(0, 3).toUpperCase() || "HOME";
+  const awayAbbr =
+    match.event_away_team?.substring(0, 3).toUpperCase() || "AWAY";
+
+  return (
+    <ThemedView style={[styles.container, isDark && styles.darkContainer]}>
+      <View style={styles.header}>
+        <ThemedText style={styles.title}>
+          {t("detail.odds_card.title")}
+        </ThemedText>
+        <View style={styles.badge}>
+          <ThemedText style={styles.badgeText}>bet365</ThemedText>
+        </View>
+      </View>
+
+      <View style={styles.row}>
+        <View style={[styles.item, isDark && styles.darkItem]}>
+          <ThemedText style={styles.team}>{homeAbbr}</ThemedText>
+          <ThemedText style={styles.odds}>-0.93</ThemedText>
+        </View>
+        <View style={[styles.item, isDark && styles.darkItem]}>
+          <ThemedText style={styles.team}>HDP</ThemedText>
+          <ThemedText style={styles.odds}>0/0.5</ThemedText>
+        </View>
+        <View style={[styles.item, isDark && styles.darkItem]}>
+          <ThemedText style={styles.team}>{awayAbbr}</ThemedText>
+          <ThemedText style={styles.odds}>0.72</ThemedText>
+        </View>
+      </View>
+
+      <ThemedText style={styles.disclaimer}>
+        {t("detail.odds_card.disclaimer")}
+      </ThemedText>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    margin: 16,
+    borderRadius: 20,
+    padding: 20,
+    backgroundColor: "#FFF",
+    marginBottom: 16,
+    shadowColor: "#000",
+    shadowOpacity: 0.05,
+    shadowRadius: 10,
+    elevation: 2,
+  },
+  darkContainer: {
+    backgroundColor: "#1E1E20",
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 20,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "500",
+  },
+  badge: {
+    backgroundColor: "#1E4D40",
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 8,
+  },
+  badgeText: {
+    color: "#FFF",
+    fontSize: 14,
+    fontWeight: "bold",
+  },
+  row: {
+    flexDirection: "row",
+    gap: 10,
+  },
+  item: {
+    flex: 1,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    backgroundColor: "#F8F8F8",
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 14,
+  },
+  darkItem: {
+    backgroundColor: "rgba(255,255,255,0.05)",
+  },
+  team: {
+    fontSize: 16,
+    fontWeight: "500",
+  },
+  odds: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#FF9800",
+  },
+  disclaimer: {
+    fontSize: 12,
+    color: "#BBB",
+    marginTop: 20,
+    textAlign: "center",
+  },
+});