fix: 修改红包雨详情ui

src/components/ModalPopup/RedPacketModal/index.tsx

@@ -7,7 +7,6 @@ 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 "./style.module.scss";
 const randomX = (len: number) => {
     return Math.floor(Math.random() * len);
@@ -48,11 +47,42 @@ const HbyInfoDetail = (props: any) => {
         }
         onCloseHby();
     };
+    const str = "12:00".split("");
+
     return (
-        <div className={`absolute left-1/2 top-[50%] w-[90%] -translate-x-1/2 -translate-y-1/2`}>
-            <div onClick={onCloseHby} className={styles.closeIcon}></div>
+        <div className={`absolute h-[100%] w-[100%]`} onClick={onCloseHby}>
+            <div className={"flex h-[100%] w-[100%] items-center"}>
+                <div className={"relative h-[6.2rem] w-[100%]"}>
+                    <img className={"h-[6.2rem] w-[100%]"} src="/redpacket/isEndBg.png" alt="" />
+                    {/* 下一场开始时间*/}
+                    <div className={"absolute top-[27%] w-[100%]"}>
+                        <div className={"relative h-[0.4306rem] border-primary-color"}>
+                            <div className="absolute left-[21%] h-[100%] w-[0.4167rem] text-center text-[0.2778rem] font-black text-[red]">
+                                {str[0]}
+                            </div>
+                            <div className="absolute left-[36%] h-[100%] w-[0.4167rem] text-center text-[0.2778rem] font-black text-[red]">
+                                {str[1]}
+                            </div>
+                            <div className="absolute left-[47%] h-[100%] w-[0.2167rem] text-center text-[0.2778rem] font-black text-[red]">
+                                {str[2]}
+                            </div>
+                            <div className="absolute left-[54%] h-[100%] w-[0.4167rem] text-center text-[0.2778rem] font-black text-[red]">
+                                {str[3]}
+                            </div>
+                            <div className="absolute left-[68%] h-[100%] w-[0.4167rem] text-center text-[0.2778rem] font-black text-[red]">
+                                {str[4]}
+                            </div>
+                        </div>
+                    </div>
 
-            <img src={iconImg} onClick={handler} alt={"detail"} width={672} height={1044} />
+                    <div
+                        className={
+                            "absolute top-[53%] h-[0.6944rem] w-[100%] px-[0.5556rem]" +
+                            " overflow-scroll border-primary-color text-primary-color"
+                        }
+                    ></div>
+                </div>
+            </div>
         </div>
     );
 };
@@ -125,72 +155,6 @@ const HbyInfo2 = (props: any) => {
 /**
  * @description  动画背景 - 下雨动效
  */
-
-const FallAnimation = (props: any) => {
-    const { onClose } = props;
-    const fallContentRef = useRef<HTMLDivElement>(null);
-
-    const totalPackets = 200;
-    const timer = useRef<NodeJS.Timer>(null);
-    const total = useRef(0);
-    const createPacket = (xPoint: number) => {
-        const packetWrapperEl = document.createElement("div");
-        packetWrapperEl.classList.add(styles.packetWrapper);
-        packetWrapperEl.style.left = xPoint + "px";
-        packetWrapperEl.style.width = `77px`;
-        packetWrapperEl.style.height = `44px`;
-        packetWrapperEl.style.transform = `scale(${getRandom(0.4, 1.2)}) `;
-
-        const packetEl = document.createElement("img");
-        packetEl.classList.add(styles.packet);
-
-        packetEl.style.width = `${getRandom(44, 77)}`;
-        packetEl.style.height = `${getRandom(44, 77)}`;
-
-        packetEl.src = `/9f/money${Math.floor(Math.random() * 3) + 1}.png`;
-
-        setInterval(() => {
-            packetEl.style.transform = `rotate(${getRandom(0, 180)}deg) translateX(${Math.random() > 0.5 ? getRandom(0, 180) : -getRandom(0, 180)}px) `;
-        }, 1000);
-
-        packetWrapperEl.appendChild(packetEl);
-        fallContentRef.current?.appendChild(packetWrapperEl);
-    };
-
-    useEffect(() => {
-        // @ts-ignore
-        timer.current = setInterval(() => {
-            if (total.current >= totalPackets - 1) {
-                clearInterval(Number(timer.current));
-                return;
-            }
-            total.current += 1;
-            createPacket(Math.random() * fallContentRef.current?.clientWidth! || 500);
-        }, 200);
-        return () => {
-            clearInterval(Number(timer.current));
-        };
-    }, []);
-    return <div ref={fallContentRef} className={"h-dvh overflow-hidden"} onClick={onClose}></div>;
-};
-const FallAnimation1 = ({ onClose }: { onClose: () => void }) => {
-    const fallContentRef = useRef<HTMLDivElement | null>(null);
-    return (
-        <div
-            ref={fallContentRef}
-            className={"h-[100dvh] h-[100vh] overflow-hidden"}
-            onClick={onClose}
-        >
-            {Array(300)
-                .fill(0)
-                .map((n, index) => (
-                    <div key={index} className={animation.snow}>
-                        <img src={`/9f/money${Math.floor(Math.random() * 3) + 1}.png`} alt="" />
-                    </div>
-                ))}
-        </div>
-    );
-};
 type Props = {
     onAfterHandler?: () => void;
 };
@@ -227,7 +191,7 @@ interface SnowfallProps {
     onClose: () => void;
 }
 
-const Snowfall: FC<SnowfallProps> = ({ images, snowflakeCount = 300, onClose = () => {} }) => {
+const Snowfall: FC<SnowfallProps> = ({ images, snowflakeCount = 80, onClose = () => {} }) => {
     //     canvas
     const canvasRef = useRef<HTMLCanvasElement | null>(null);
     // 预加载图片
@@ -269,6 +233,8 @@ const Snowfall: FC<SnowfallProps> = ({ images, snowflakeCount = 300, onClose = (
 
         let snowflakes: Snowflake[] = createSnowflakes(snowflakeCount, width, height);
 
+        const imgHeight = 80;
+        const imgWidth = 80;
         const animate = () => {
             ctx.clearRect(0, 0, width, height);
             snowflakes.forEach((flake) => {
@@ -286,15 +252,18 @@ const Snowfall: FC<SnowfallProps> = ({ images, snowflakeCount = 300, onClose = (
                 }
 
                 ctx.save();
-                ctx.globalAlpha = 0.8;
-                ctx.translate(flake.x + (77 * flake.scale) / 2, flake.y + (44 * flake.scale) / 2);
+                ctx.globalAlpha = 1;
+                ctx.translate(
+                    flake.x + (imgHeight * flake.scale) / 2,
+                    flake.y + (imgWidth * flake.scale) / 2
+                );
                 ctx.rotate((flake.rotate * Math.PI) / 180);
                 ctx.drawImage(
                     flake.image,
-                    (-77 * flake.scale) / 2,
-                    (-44 * flake.scale) / 2,
-                    77 * flake.scale,
-                    44 * flake.scale
+                    (-imgHeight * flake.scale) / 2,
+                    (-imgWidth * flake.scale) / 2,
+                    imgHeight * flake.scale,
+                    imgWidth * flake.scale
                 );
                 ctx.restore();
             });
@@ -410,14 +379,13 @@ const RedPacketModal = forwardRef<RedPacketModalProps, Props>(function RedPacket
     useEffect(() => {
         element.current = document.getElementById("app");
     }, []);
-    return (
-        <Mask visible={visible} destroyOnClose={true} getContainer={element.current}>
-            {/*<FallAnimation1 onClose={() => setVisible(false)} />*/}
 
-            <Snowfall
-                images={["/9f/money1.png", "/9f/money2.png", "/9f/money3.png"]}
-                onClose={() => setVisible(false)}
-            />
+    const ImagesData = Array.from({ length: 6 }).map((_, index) => {
+        return `/9f/money${index + 1}.png`;
+    });
+    return (
+        <Mask visible={visible} destroyOnClose={true} getContainer={element.current} opacity={0.75}>
+            <Snowfall images={ImagesData} onClose={() => setVisible(false)} />
 
             {status === Status.is_start ? (
                 <HbyInfo