调整1发5发抽奖动画样式

app/lottery/components/LotteryReel.tsx

@@ -107,11 +107,11 @@ export default function LotteryReel({
            <View key={item.uniqueKey} style={[styles.itemWrapper, { width: itemWidth }]}>
              <TransCard 
                 item={item} 
-                width={itemWidth === 94 ? 90 : itemWidth - 4} 
-                height={itemWidth === 94 ? 121 : 90}
-                fill={itemWidth === 94 ? 2 : 2}
-                imageWidth={itemWidth === 94 ? 74 : 55}
-                imageHeight={itemWidth === 94 ? 94 : 70}
+                width={itemWidth > 100 ? itemWidth - 10 : (itemWidth === 94 ? 90 : itemWidth - 4)} 
+                height={itemWidth > 100 ? (itemWidth - 10) * 1.35 : (itemWidth === 94 ? 121 : 90)}
+                fill={2}
+                imageWidth={itemWidth > 100 ? (itemWidth - 10) * 0.82 : (itemWidth === 94 ? 74 : 55)}
+                imageHeight={itemWidth > 100 ? ((itemWidth - 10) * 1.35) * 0.77 : (itemWidth === 94 ? 94 : 70)}
              />
            </View>
         ))}

app/lottery/index.tsx

@@ -43,11 +43,13 @@ export default function LotteryScreen() {
   const timerRef = useRef<any>(null);
 
   // Layout calculations
-  const itemWidth = (num === 1) ? 94 : 72; // Adjusted to 72 to match mask calculation exactly (was 71)
-  // Uniapp width logic:
-  // width() { return (screenWidth - (this.num == 1 ? 94 : 72)) / 2 }
-  const maskWidth = (SCREEN_WIDTH - ((num === 1) ? 94 : 72)) / 2; 
+  const singleItemWidth = 240;
+  const itemWidth = (num === 1) ? singleItemWidth : 72; 
+  const maskWidth = (SCREEN_WIDTH - ((num === 1) ? singleItemWidth : 72)) / 2; 
   const padding = SCREEN_WIDTH > 375 ? 32 : 0; 
+  
+  // Dynamic styles
+  const singleReelHeight = singleItemWidth * 1.35 + 20; // 324 + 20
 
   useEffect(() => {
     init();
@@ -56,6 +58,12 @@ export default function LotteryScreen() {
       if (timerRef.current) clearTimeout(timerRef.current);
     };
   }, []);
+  
+  // ... (rest of the file)
+  
+  // Update render styles inline or via StyleSheet
+  // I will update the stylesheet usage in return and the StyleSheet definition below
+
 
   const init = async () => {
       try {
@@ -201,7 +209,13 @@ export default function LotteryScreen() {
                 {/* Reels */}
                 <View style={num === 1 ? styles.height1 : styles.height5}>
                     {results.map((item, index) => (
-                        <View key={index} style={styles.reelRow}> 
+                        <View 
+                            key={index} 
+                            style={[
+                                styles.reelRow, 
+                                num === 1 && { height: singleReelHeight, marginBottom: 0 }
+                            ]}
+                        > 
                             <LotteryReel 
                                 key={`reel-${index}-${pool.length}-${results.length}`} 
                                 pool={pool.length > 0 ? pool : results} 
@@ -225,8 +239,8 @@ export default function LotteryScreen() {
                     style={[
                         styles.middleImage, 
                         { 
-                            height: num === 1 ? 200 : 540, 
-                            top: num === 1 ? -35 : -10,
+                            height: num === 1 ? 360 : 540, 
+                            top: num === 1 ? -20 : -10,
                         }
                     ]}
                     contentFit="contain"
@@ -235,6 +249,7 @@ export default function LotteryScreen() {
          )}
       </View>
 
+
       {/* Video Overlay */}
       {videoVisible && videoUrl ? (
         <View style={styles.videoContainer}>
@@ -298,7 +313,8 @@ const styles = StyleSheet.create({
     flex: 1,
     // justifyContent: 'center', 
     alignItems: 'center',
-    marginTop: 100, // Adjust based on visual
+    marginTop: 0, // Remove fixed margin, let flex center it or use justify center if needed
+    justifyContent: 'center', // Center vertically
   },
   reelsContainer: {
     position: 'relative',
@@ -315,7 +331,7 @@ const styles = StyleSheet.create({
       height: 94, // Height of one row (card height + tiny padding)
   },
   height1: {
-      height: 130, // 1 row + gaps
+      height: 360, // Accommodate larger card (approx 325px height)
       justifyContent: 'center',
   },
   height5: {

app/lottery/result.tsx

@@ -137,7 +137,8 @@ const styles = StyleSheet.create({
       textAlign: 'center',
   },
   button: {
-      marginTop: 20,
+      position: 'absolute',
+      bottom: 30,
       backgroundColor: '#F62C71',
       paddingHorizontal: 40,
       paddingVertical: 10,