调整详情页样式

components/match-detail/score-header.tsx

@@ -20,8 +20,10 @@ export function ScoreHeader({ data, isDark, topInset }: ScoreHeaderProps) {
 
   return (
     <LinearGradient
-      colors={["#1A2138", "#2A3C5B"]}
-      style={[styles.container, { paddingTop: Math.max(topInset, 20) }]}
+      colors={["#521e10", "#0e0e10"]}
+      start={{ x: 0, y: 0 }}
+      end={{ x: 1, y: 1 }}
+      style={[styles.container, { paddingTop: Math.max(topInset, 10) }]}
     >
       {/* Top Bar */}
       <View style={styles.topBar}>
@@ -30,7 +32,7 @@ export function ScoreHeader({ data, isDark, topInset }: ScoreHeaderProps) {
             onPress={() => router.back()}
             style={styles.iconBtn}
           >
-            <IconSymbol name="chevron-back" size={24} color="#FFF" />
+            <IconSymbol name="chevron-back" size={28} color="#FFF" />
           </TouchableOpacity>
         </View>
 
@@ -42,10 +44,10 @@ export function ScoreHeader({ data, isDark, topInset }: ScoreHeaderProps) {
 
         <View style={styles.rightContainer}>
           <TouchableOpacity style={styles.iconBtn}>
-            <IconSymbol name="notifications-outline" size={22} color="#FFF" />
+            <IconSymbol name="notifications-outline" size={24} color="#FFF" />
           </TouchableOpacity>
           <TouchableOpacity style={styles.iconBtn}>
-            <IconSymbol name="star-outline" size={22} color="#FFF" />
+            <IconSymbol name="star-outline" size={24} color="#FFF" />
           </TouchableOpacity>
         </View>
       </View>
@@ -69,7 +71,7 @@ export function ScoreHeader({ data, isDark, topInset }: ScoreHeaderProps) {
             <ThemedText style={styles.scoreValue}>
               {match.eventFinalResult && match.eventFinalResult !== "-"
                 ? match.eventFinalResult
-                : "0 - 0"}
+                : "0-0"}
             </ThemedText>
           </View>
           <TouchableOpacity style={styles.fieldBtn}>
@@ -95,14 +97,14 @@ export function ScoreHeader({ data, isDark, topInset }: ScoreHeaderProps) {
 
 const styles = StyleSheet.create({
   container: {
-    paddingBottom: 30,
+    paddingBottom: 24,
     paddingHorizontal: 16,
   },
   topBar: {
     flexDirection: "row",
     alignItems: "center",
-    marginBottom: 20,
-    minHeight: 40,
+    marginBottom: 16,
+    minHeight: 44,
   },
   leftContainer: {
     flex: 1,
@@ -119,78 +121,87 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     justifyContent: "flex-end",
     alignItems: "center",
-    gap: 12,
+    gap: 4,
   },
   statusText: {
     color: "#FFF",
-    fontSize: 16,
+    fontSize: 17,
     fontWeight: "600",
-    opacity: 0.8,
-  },
-  rightIcons: {
-    flexDirection: "row",
-    gap: 12,
+    opacity: 0.9,
   },
   iconBtn: {
-    width: 36,
-    height: 36,
+    width: 40,
+    height: 40,
     justifyContent: "center",
     alignItems: "center",
+    borderRadius: 20,
+    backgroundColor: "rgba(255,255,255,0.1)",
+    marginHorizontal: 4,
   },
   scoreRow: {
     flexDirection: "row",
-    alignItems: "center",
+    alignItems: "flex-start",
     justifyContent: "space-between",
-    paddingHorizontal: 10,
+    paddingHorizontal: 0,
+    marginTop: 10,
   },
   teamInfo: {
-    flex: 1.2,
+    flex: 1,
     alignItems: "center",
   },
   logoContainer: {
-    width: 64,
-    height: 64,
-    borderRadius: 32,
-    backgroundColor: "rgba(255,255,255,0.1)",
+    width: 70,
+    height: 70,
+    marginBottom: 10,
     justifyContent: "center",
     alignItems: "center",
-    marginBottom: 8,
-    overflow: "hidden",
   },
   teamLogo: {
-    width: 48,
-    height: 48,
+    width: 60,
+    height: 60,
     resizeMode: "contain",
   },
   teamName: {
     color: "#FFF",
     fontSize: 14,
-    fontWeight: "600",
+    fontWeight: "700",
     textAlign: "center",
+    lineHeight: 18,
   },
   centerScore: {
-    flex: 1,
+    flex: 1.4,
     alignItems: "center",
+    paddingTop: 8,
   },
   scoreBox: {
     backgroundColor: "#FFF",
-    borderRadius: 12,
-    paddingHorizontal: 16,
-    paddingVertical: 8,
-    marginBottom: 12,
+    borderRadius: 16,
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    marginBottom: 16,
+    minWidth: 100,
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 4,
   },
   scoreValue: {
     color: "#000",
-    fontSize: 19,
-    fontWeight: "bold",
-    letterSpacing: 2,
+    fontSize: 30,
+    fontWeight: "700",
+    lineHeight: 30,
+    letterSpacing: 1,
   },
   fieldBtn: {
-    backgroundColor: "#0055FF",
-    width: 80,
-    height: 28,
-    borderRadius: 14,
+    backgroundColor: "#0044FF",
+    width: 60,
+    height: 32,
+    borderRadius: 16,
     justifyContent: "center",
     alignItems: "center",
+    borderWidth: 1,
+    borderColor: "rgba(255,255,255,0.2)",
   },
 });