fix: 7092 【bcwin网站】轮盘活动修改本地时间，倒计时会出现直接变为0的情况

src/api/cashWheel.ts

@@ -56,6 +56,8 @@ export interface Activate {
     end_time: number;
     history: History[];
     can: 0 | 1;
+    // 倒计时
+    count_down: number;
 }
 
 export interface History {

src/app/[locale]/(TabBar)/[[...share]]/@actionWidget/Service.tsx

@@ -1,10 +1,10 @@
 "use client";
 import { ServiceTypes } from "@/api/customservice";
 import { getPaysApi, lredPacketApi, PayDataType, redPacketApi } from "@/api/promo";
-import RedPacketModal, { RedPacketModalProps } from "@/components/Box/RedPacketModal";
-import SlotsModal, { SlotModalRefProps } from "@/components/Box/SlotsModal";
-import UserRecharge, { ModalRefProps, Timeout } from "@/components/Box/UserRecharge";
-import WheelModal, { WheelModalProps } from "@/components/Box/WheelModal";
+import UserRecharge, { ModalRefProps, Timeout } from "@/components/ModalPopup/RechargeModal";
+import RedPacketModal, { RedPacketModalProps } from "@/components/ModalPopup/RedPacketModal";
+import SlotsModal, { SlotModalRefProps } from "@/components/ModalPopup/SlotsModal";
+import WheelModal, { WheelModalProps } from "@/components/ModalPopup/WheelModal";
 
 import { getWheelApi } from "@/api/cashWheel";
 import { getGiveInfoApi } from "@/api/slots";

src/app/[locale]/(TabBar)/[[...share]]/@popupWidget/page.tsx

@@ -1,5 +1,5 @@
 import { NoticeRep, PromotionRep } from "@/api/home";
-import Desktop from "@/components/Box/Desktop";
+import DesktopModal from "@/components/ModalPopup/DesktopModal";
 import { server } from "@/utils/server";
 import HomeMessage from "../_home/HomeMessage";
 import HomePromotion from "../_home/HomePromotion";
@@ -40,7 +40,7 @@ const Page = async () => {
                 type={promotions?.summery?.showType || 1}
             />
             {/*安装弹窗*/}
-            <Desktop source={"page"} />
+            <DesktopModal source={"page"} />
         </>
     );
 };

src/app/[locale]/(wheel)/cashWheel/CashWheelClient.tsx

@@ -2,7 +2,7 @@
 
 import { getWheelReceiveApi } from "@/api/cashWheel";
 import Box from "@/components/Box";
-import { WheelClient } from "@/components/Box/WheelModal";
+import { WheelClient } from "@/components/ModalPopup/WheelModal";
 import { Link } from "@/i18n/routing";
 import { useUserInfoStore } from "@/stores/useUserInfoStore";
 import useWheelStore from "@/stores/useWheelStore";
@@ -287,7 +287,7 @@ const CountdownClient = () => {
         receiveTarget: state.receiveTarget,
     }));
     const [_, formattedRes] = useCountDown({
-        leftTime: currentWheel.end_time ? currentWheel.end_time * 1000 - Date.now() : 0,
+        leftTime: (currentWheel.count_down || 0) * 1000,
         // leftTime: 500000,
         onEnd: () => {
             wheel.cancelHandler && wheel.cancelHandler();

src/app/[locale]/(wheel)/cashWheel/LotteryWheel copy 2.tsx

@@ -1,84 +0,0 @@
-"use client";
-import { useRef, useEffect, useState } from 'react';
-import styles from "./style.module.scss";
-
-const Lottery = () => {
-  const canvasRef = useRef<any>(null);
-  const [isSpinning, setIsSpinning] = useState(false);
-  const [prize, setPrize] = useState('');
-  const segments = ['一等奖', '二等奖', '三等奖', '四等奖', '五等奖', '六等奖', '七等奖', '八等奖'];
-  const segmentAngle = (2 * Math.PI) / segments.length;
-
-  const drawWheel = () => {
-    const canvas = canvasRef.current;
-    const ctx = canvas.getContext('2d');
-    const radius = canvas.width / 2;
-
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.save();
-    ctx.translate(radius, radius);
-
-    segments.forEach((segment, index) => {
-      ctx.beginPath();
-      ctx.moveTo(0, 0);
-      ctx.arc(0, 0, radius, index * segmentAngle, (index + 1) * segmentAngle);
-      ctx.closePath();
-      // ctx.fillStyle = `hsl(${index * 360 / segments.length}, 70%, 50%)`;
-      ctx.fill();
-      ctx.stroke();
-
-      ctx.save();
-      ctx.rotate((index + 0.5) * segmentAngle);
-      ctx.fillStyle = '#fff';
-      ctx.fillText(segment, radius / 2, 0);
-      ctx.restore();
-    });
-
-    ctx.restore();
-  };
-
-  const spinWheel = () => {
-    if (isSpinning) return;
-
-    setIsSpinning(true);
-    let rotation = 0;
-    const spinDuration = 5000; // 旋转持续时间
-    const stopAngle = Math.floor(Math.random() * segments.length) * (360 / segments.length) + 360 * 5; // 随机停下的角度
-    const startAngle = rotation;
-
-    const spinAnimation = (timestamp:any) => {
-      rotation += 10; // 每次增加的角度
-      canvasRef.current.style.transform = `rotate(${rotation}deg)`;
-
-      if (rotation < stopAngle) {
-        requestAnimationFrame(spinAnimation);
-      } else {
-        setIsSpinning(false);
-        const winningSegment = Math.floor(((stopAngle % 360) / (360 / segments.length)));
-        setPrize(segments[winningSegment]);
-      }
-    };
-
-    requestAnimationFrame(spinAnimation);
-  };
-
-  useEffect(() => {
-    drawWheel();
-  }, []);
-
-  return (
-    <>
-      <img src="/wheel/draw.png" className={`${styles.drawImg} ${styles.position}`} onClick={spinWheel}/>
-      <div className={styles.drawContents}>
-        <canvas ref={canvasRef} id={styles.draw} width={306} height={306} />
-      </div>
-      
-      {/* <button onClick={spinWheel} disabled={isSpinning}>
-        {isSpinning ? '正在抽奖...' : '抽奖'}
-      </button> */}
-      {/* {prize && <h2>恭喜您，中奖：{prize}</h2>} */}
-    </>
-  );
-};
-
-export default Lottery;

src/app/[locale]/(wheel)/cashWheel/LotteryWheel copy.tsx

@@ -1,266 +0,0 @@
-"use client";
-
-import React, { useEffect, useRef } from 'react';  
-
-
-const LotteryWheel = () => {  
-
-  const canvasRef = useRef<any>(null);  
-
-  const ctxRef = useRef<any>(null);  
-
-  const centerX = 153; // 画布宽度的一半  
-
-  const centerY = 153; // 画布高度的一半  
-
-  const radius = 130;  // 大转盘的半径  
-
-  const segments = 8;  // 大转盘的份数  
-
-  const colors = [  
-
-    '#FF5733', '#33FF57', '#3357FF', '#F3FF33',  
-
-    '#FF33A1', '#33FFF1', '#FF8A33', '#A133FF'  
-
-  ];  
-
-  let isSpinning = false;  
-
-  let startAngle = 0;  
-
-  let spinTime = 0;  
-
-  let spinTimeTotal = 0;  
-
-  
-
-  const drawWheel = () => {  
-
-    const canvas:any = canvasRef.current;  
-
-    const ctx = canvas.getContext('2d');  
-
-    ctx.clearRect(0, 0, canvas.width, canvas.height);  
-
-  
-
-    // 画外圈  
-
-    ctx.beginPath();  
-
-    ctx.arc(centerX, centerY, radius, 0, Math.PI * 2, false);  
-
-    ctx.lineWidth = 10;  
-
-    ctx.strokeStyle = '#000';  
-
-    ctx.stroke();  
-
-  
-
-    // 画每一份  
-
-    for (let i = 0; i < segments; i++) {  
-
-      const angle = (Math.PI * 2) / segments * i;  
-
-      const x1 = centerX + radius * 0.9 * Math.cos(angle - Math.PI / 2);  
-
-      const y1 = centerY + radius * 0.9 * Math.sin(angle - Math.PI / 2);  
-
-      const x2 = centerX + radius * Math.cos(angle - Math.PI / 2);  
-
-      const y2 = centerY + radius * Math.sin(angle - Math.PI / 2);  
-
-  
-
-      ctx.beginPath();  
-
-      ctx.moveTo(x1, y1);  
-
-      ctx.lineTo(x2, y2);  
-
-      ctx.lineWidth = 10;  
-
-      ctx.strokeStyle = colors[i];  
-
-      ctx.stroke();  
-
-  
-
-      // 填充颜色  
-
-      ctx.beginPath();  
-
-      ctx.moveTo(centerX, centerY);  
-
-      ctx.arc(centerX, centerY, radius * 0.9, angle - Math.PI / 2, angle + Math.PI / (2 * segments) - Math.PI / 2, false);  
-
-      ctx.lineTo(centerX, centerY);  
-
-      ctx.fillStyle = colors[i];  
-
-      ctx.fill();  
-
-    }  
-
-  };  
-
-  
-
-  const spinWheel = () => {  
-
-    isSpinning = true;  
-
-    startAngle = Math.random() * Math.PI * 2;  
-
-    spinTime = 0;  
-
-    spinTimeTotal = Math.random() * 3 + 3; // 3到6秒的旋转时间  
-
-  
-
-    const spinTick = () => {  
-
-      if (!isSpinning) return;  
-
-      spinTime += 30;  
-
-      const spinDegree = spinTime / spinTimeTotal * Math.PI * 2;  
-
-      const ctx = ctxRef.current;  
-
-  
-
-      ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);  
-
-      drawWheel();  
-
-  
-
-      // 旋转画布  
-
-      ctx.save();  
-
-      ctx.translate(centerX, centerY);  
-
-      ctx.rotate(spinDegree + startAngle);  
-
-      // 重新绘制每一份到中心线位置  
-
-      for (let i = 0; i < segments; i++) {  
-
-        const angle = (Math.PI * 2) / segments * i;  
-
-        const x = radius * Math.cos(angle - Math.PI / 2);  
-
-        const y = radius * Math.sin(angle - Math.PI / 2);  
-
-        ctx.beginPath();  
-
-        ctx.moveTo(0, 0);  
-
-        ctx.lineTo(x, y);  
-
-        ctx.lineWidth = 10;  
-
-        ctx.strokeStyle = colors[i];  
-
-        ctx.stroke();  
-
-      }  
-
-      ctx.restore();  
-
-  
-
-      if (spinTime < spinTimeTotal) {  
-
-        requestAnimationFrame(spinTick);  
-
-      } else {  
-
-        stopWheel();  
-
-      }  
-
-    };  
-
-  
-
-    spinTick();  
-
-  };  
-
-  
-
-  const stopWheel = () => {  
-
-    isSpinning = false;  
-
-    const degrees = startAngle + (spinTime / spinTimeTotal) * Math.PI * 2;  
-
-    const index = Math.floor((degrees % (Math.PI * 2)) / (Math.PI * 2 / segments));  
-
-    alert(`你抽中了第 ${index + 1} 份！`);  
-
-  };  
-
-  
-
-  const handleClick = (e:any) => {  
-
-    const rect = canvasRef.current.getBoundingClientRect();  
-
-    const x = e.clientX - rect.left;  
-
-    const y = e.clientY - rect.top;  
-
-    const distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));  
-
-  
-
-    if (distance < radius * 0.75) { // 0.75倍半径内视为点击中间区域  
-
-      spinWheel();  
-
-    }  
-
-  };  
-
-  
-
-  useEffect(() => {  
-
-    const canvas:any = canvasRef?.current;  
-
-    const ctx = canvas.getContext('2d');  
-
-    ctxRef.current = ctx;  
-
-    drawWheel();  
-
-  
-
-    canvas.addEventListener('click', handleClick);  
-
-  
-
-    return () => {  
-
-      canvas.removeEventListener('click', handleClick);  
-
-    };  
-
-  }, []);  
-
-  
-
-  return <canvas ref={canvasRef} width={306} height={306} style={{ cursor: 'pointer' }} />;  
-
-};  
-
-	  
-
-	export default LotteryWheel;

src/app/[locale]/(wheel)/cashWheel/LotteryWheel.tsx

@@ -1,94 +0,0 @@
-"use client";
-import { useEffect, useRef, useState } from "react";
-import styles from "./style.module.scss";
-
-const Lottery = () => {
-    const canvasRef = useRef<any>(null);
-    const [isSpinning, setIsSpinning] = useState(false);
-    const [prize, setPrize] = useState("");
-    const segments = [
-        "一等奖",
-        "二等奖",
-        "三等奖",
-        "四等奖",
-        "五等奖",
-        "六等奖",
-        "七等奖",
-        "八等奖",
-    ];
-    // 4:1940,8:2120
-    const segmentAngle = (2 * Math.PI) / segments.length;
-
-    const drawWheel = () => {
-        const canvas = canvasRef.current;
-        const ctx = canvas.getContext("2d");
-        const radius = canvas.width / 2;
-
-        // 绘制背景图
-        const backgroundImage = new Image();
-        backgroundImage.src = "/wheel/spinBg.png"; // 替换为你的背景图路径
-        backgroundImage.onload = () => {
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); // 绘制背景图
-
-            ctx.save();
-            ctx.translate(radius, radius);
-
-            // 绘制奖项文本
-            segments.forEach((segment, index) => {
-                ctx.save();
-                ctx.rotate(index * segmentAngle);
-                ctx.fillStyle = "#fff"; // 文字颜色
-                ctx.font = "16px Arial";
-                ctx.fillText(segment, radius / 2, 8); // 适当调整位置
-                ctx.restore();
-            });
-
-            ctx.restore();
-        };
-    };
-
-    const spinWheel = () => {
-        if (isSpinning) return;
-
-        setIsSpinning(true);
-        let rotation = 0;
-        const spinDuration = 5000; // 旋转持续时间
-        const stopAngle =
-            Math.floor(Math.random() * segments.length) * (360 / segments.length) + 360 * 5; // 随机停下的角度
-
-        const spinAnimation = (timestamp: any) => {
-            rotation += 10; // 每次增加的角度
-            canvasRef.current.style.transform = `rotate(${rotation}deg)`;
-
-            if (rotation < stopAngle) {
-                requestAnimationFrame(spinAnimation);
-            } else {
-                setIsSpinning(false);
-                const winningSegment = Math.floor((stopAngle % 360) / (360 / segments.length));
-                setPrize(segments[winningSegment]);
-            }
-        };
-
-        requestAnimationFrame(spinAnimation);
-    };
-
-    useEffect(() => {
-        drawWheel();
-    }, []);
-
-    return (
-        <>
-            <img
-                src="/wheel/draw.png"
-                className={`${styles.drawImg} ${styles.position}`}
-                onClick={spinWheel}
-            />
-            <div className={styles.drawContents}>
-                <canvas ref={canvasRef} id={styles.draw} width={306} height={306} />
-            </div>
-        </>
-    );
-};
-
-export default Lottery;

src/app/[locale]/(wheel)/sharecwbr/page.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { LeftListClient, WheelClient } from "@/components/Box/WheelModal";
+import { LeftListClient, WheelClient } from "@/components/ModalPopup/WheelModal";
 import dayjs from "dayjs";
 import { useSearchParams } from "next/navigation";
 import { useEffect } from "react";

src/app/[locale]/game/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import ActivityMask from "@/components/Box/ActivityMask";
+import ActivityMask from "@/components/ModalPopup/ActivityModal";
 import { useRouter } from "@/i18n/routing";
 import { useSearchParams } from "next/navigation";
 import { useEffect } from "react";

src/components/Box/activityMask.module.scss

@@ -1,20 +0,0 @@
-
-.ActivityShadow {
-  font-weight: 900;
-  font-size: var(--font-size, 0.2778rem);
-  text-shadow: 0 1px 0 #fff;
-  color: #fbce72;
-  &::before {
-    content: attr(data-text);
-    font-weight: 900;
-    font-size: var(--font-size, 0.2778rem);
-    position: absolute;
-    z-index: 10;
-    background: linear-gradient(to bottom, #fbd68f, #ed7d03);
-    -webkit-background-clip: text;
-    background-clip: text;
-    -webkit-text-fill-color: transparent;
-    text-shadow: none;
-  }
-
-}

src/components/Box/index.tsx

@@ -2,7 +2,8 @@
 import { getWheelApi } from "@/api/cashWheel";
 import { ActionType } from "@/api/home";
 import { lredPacketApi, redPacketApi } from "@/api/promo";
-import RedPacketModal, { RedPacketModalProps } from "@/components/Box/RedPacketModal";
+import DesktopModal, { DesktopRefProps } from "@/components/ModalPopup/DesktopModal";
+import RedPacketModal, { RedPacketModalProps } from "@/components/ModalPopup/RedPacketModal";
 import { useRouter } from "@/i18n/routing";
 import { isHttpUrl } from "@/utils";
 import { getToken } from "@/utils/Cookies";
@@ -10,7 +11,6 @@ import { Toast } from "antd-mobile";
 import clsx from "clsx";
 import { CSSProperties, FC, PropsWithChildren, useMemo, useRef } from "react";
 import { twMerge } from "tailwind-merge";
-import DesktopModal, { DesktopRefProps } from "./Desktop";
 import { ModalEnum } from "./types";
 interface Props {
     pt?: boolean;

src/components/Box/ActivityMask.tsx → src/components/ModalPopup/ActivityModal/index.tsx

@@ -4,7 +4,7 @@ import { useRequest } from "ahooks";
 import { Mask } from "antd-mobile";
 import { motion } from "framer-motion";
 import { useState } from "react";
-import styles from "./activityMask.module.scss";
+import styles from "./style.module.scss";
 const ActivityMask = () => {
     const [count, setCount] = useState<number>(0);
 

src/components/Box/RedPacketModal.tsx → src/components/ModalPopup/RedPacketModal/index.tsx

@@ -7,8 +7,8 @@ import { Mask } from "antd-mobile";
 import clsx from "clsx";
 import { useTranslations } from "next-intl";
 import { FC, forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
-import animation from "./animations.module.scss";
-import styles from "./redpacked.module.scss";
+import animation from "../animations.module.scss";
+import styles from "./style.module.scss";
 const randomX = (len: number) => {
     return Math.floor(Math.random() * len);
 };

src/components/Box/SlotsModal.tsx → src/components/ModalPopup/SlotsModal/index.tsx

@@ -4,7 +4,7 @@ import { SlotMachine } from "@lucky-canvas/react";
 import { Mask } from "antd-mobile";
 import clsx from "clsx";
 import { FC, forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
-import animation from "./animations.module.scss";
+import animation from "../animations.module.scss";
 
 interface Props {
     onAfterHandler: () => void;

src/components/Box/WheelModal.tsx → src/components/ModalPopup/WheelModal/index.tsx

@@ -1,17 +1,15 @@
 "use client";
-
 import { getWheelRunApi, WheelsType } from "@/api/cashWheel";
-import Progress from "@/app/[locale]/(navbar)/cashback/@cashbackInfo/components/Progress";
 import { useRouter } from "@/i18n/routing";
 import useWheelStore from "@/stores/useWheelStore";
 import { percentage, timeFormat } from "@/utils/methods";
 import { LuckyWheel } from "@lucky-canvas/react";
 import NumberFlow from "@number-flow/react";
-import { Mask } from "antd-mobile";
+import { Mask, ProgressBar } from "antd-mobile";
 import Image from "next/image";
 import { FC, forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
-import styles from "./WheelModal.module.scss";
-import animation from "./animations.module.scss";
+import animation from "../animations.module.scss";
+import styles from "./style.module.scss";
 type Props = {
     onAfterHandler?: () => void;
 };
@@ -421,7 +419,13 @@ const DetailClient = (props: { onUnload: () => void }) => {
                 {/*<div className={styles.bar}>*/}
                 {/*    <span style={{ width: "calc(97.15% - 1rem)" }}></span>*/}
                 {/*</div>*/}
-                <Progress num={percentage(count, 100)} />
+                <ProgressBar
+                    percent={percentage(count, 100)}
+                    style={{
+                        "--fill-color": "#fb8b05",
+                        "--track-width": "0.0694rem",
+                    }}
+                />
             </div>
             <div className={styles.needCash}>
                 Ainda e necessário{" "}

src/components/Box/WheelModal.module.scss → src/components/ModalPopup/WheelModal/style.module.scss

@@ -160,12 +160,12 @@
   }
 
   &.button {
-      width: 100%;
-      height: 0.3472rem;
-      background: #6ddf38;
-      color: #fff;
-      border-radius: 0.0694rem;
-    }
+    width: 100%;
+    height: 0.3472rem;
+    background: #6ddf38;
+    color: #fff;
+    border-radius: 0.0694rem;
+  }
 }
 
 

src/components/ModalPopup/animations.module.scss

@@ -0,0 +1,195 @@
+$time: 0.8s;
+.flashingAnimation {
+  animation: flashing $time  linear infinite ;
+}
+@keyframes flashing {
+  0%, 50% {
+    opacity: 0;
+  }
+  50.01%, 100% {
+    opacity: 1;
+  }
+}
+.antiFlashingAnimation {
+  animation: antiFlashing $time  linear infinite ;
+  animation-delay: $time;
+}
+@keyframes antiFlashing {
+  0%, 50% {
+    opacity: 1;
+  }
+  50.01%, 100% {
+    opacity: 0;
+  }
+}
+
+
+
+.activeAnimation{
+  animation: activing  0.3s ease  infinite alternate;
+}
+@keyframes activing {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+
+.rotateAnimation{
+  animation: rotating 10s  linear  infinite ;
+}
+@keyframes rotating {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  20% {
+    transform: rotate(72deg);
+  }
+
+  40% {
+    transform: rotate(144deg);
+  }
+
+  60% {
+    transform: rotate(216deg);
+  }
+
+  80% {
+    transform: rotate(288deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+
+}
+
+.floatAnimation {
+  animation: floating 2s  ease  infinite alternate;
+}
+@keyframes floating {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(20px);
+  }
+}
+
+$scaleTime: 3s;
+//展开
+.expandAnimation {
+  animation:  expanding $scaleTime linear forwards;
+}
+@keyframes expanding {
+  0% {
+    transform: scale3d(0,0,0);
+    opacity: 1;
+  }
+  50%{
+    transform: scale3d(1.1,1.1,1.1);
+    opacity: 0.5;
+  }
+  100%{
+    transform: scale3d(2,2,2);
+    opacity: 0;
+  }
+}
+
+
+
+.scaleLxAnimation {
+  animation: scaleLx $scaleTime linear forwards; /* 2s 动画，保持最终状态 */
+}
+@keyframes scaleLx {
+  0% {
+    transform: scale(0.1) translate(0, 0);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1) translateX(-0.6944rem); /* 最终放大并位移 */
+    opacity: 0.5; /* 渐隐 */
+  }
+  100% {
+    transform: scale(2) translateX(-1.3889rem); /* 最终放大并位移 */
+    opacity: 0; /* 渐隐 */
+  }
+}
+.scaleRxAnimation {
+  animation: scaleRx $scaleTime linear forwards; /* 2s 动画，保持最终状态 */
+}
+@keyframes scaleRx {
+  0% {
+    transform: rotate(180deg) scale(0.1) translate(0, 0);
+    opacity: 1;
+  }
+  50% {
+    transform:rotate(180deg)  scale(1) translateX(-0.6944rem); /* 最终放大并位移 */
+    opacity: 0.5;
+  }
+  100% {
+    transform:rotate(180deg)  scale(2) translateX(-1.3889rem); /* 最终放大并位移 */
+    opacity: 0;
+  }
+}
+
+.moveAnimation{
+  animation: moveIng 5s linear infinite  ; /* 2s 动画，保持最终状态 */
+}
+@keyframes moveIng {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -100% 0;  /* 终点： /* 终点：向左完全滚出容器 */
+  }
+}
+
+/// 红包雨摇曳动画
+@function random_range($min, $max) {
+  $rand: random();
+  $random_range: $min + floor($rand * (($max - $min) + 1));
+  @return $random_range;
+}
+
+.snow {
+  $total: 300;
+  position: absolute;
+  //width: 77px;
+  //height: 44px;
+  width: fit-content;
+  height: fit-content;
+
+  @for $i from 1 through $total {
+    $random-x: random(100) * 1vw;
+    $random-offset: random_range(-20, 20) * 1vw;
+    $random-x-end: $random-x + $random-offset;
+    $random-x-end-yoyo: $random-x + ($random-offset / 2);
+    $random-yoyo-time: random_range(0.3, 0.8);
+    $random-yoyo-y: $random-yoyo-time * 100vh;
+    $random-scale: random_range(3000, 10000) * 0.0001;
+    $fall-duration: random_range(10, 30) * .5s;
+    $fall-delay: random(30) * -1s;
+    $rotate-speed: random_range(360, 1440);
+    @debug $random-offset;
+    &:nth-child(#{$i}) {
+      //opacity: random(10000) * 0.0001;
+      transform: translate($random-x, -20px) scale($random-scale)  rotate(180deg);
+      animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
+    }
+
+    @keyframes fall-#{$i} {
+      #{percentage($random-yoyo-time)} {
+        transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
+      }
+
+      to {
+        transform: translate($random-x-end-yoyo, 100vh) scale($random-scale)  rotate(180deg) ;
+      }
+    }
+  }
+}