feat: 修改

src/components/ModalPopup/SignInModal/index.tsx

@@ -1,11 +1,13 @@
 /* eslint-disable @next/next/no-img-element */
 "use client";
 import { claimActivityReward } from "@/api/activity";
+import GlobalNotify from "@/components/ModalPopup/GlobalNotifyModal";
 import { useRouter } from "@/i18n/routing";
 import { useSignStore } from "@/stores/useSignStore";
 import { formatAmount } from "@/utils";
 import { Mask, Toast } from "antd-mobile";
 import BigNumber from "bignumber.js";
+import clsx from "clsx";
 import { FC, forwardRef, memo, useImperativeHandle, useMemo, useRef, useState } from "react";
 import styles from "./style.module.scss";
 
@@ -25,6 +27,7 @@ export const BoxListCom = forwardRef<BoxList, BoxParams>(function BoxListCom(
     ref
 ) {
     const signData = useSignStore((state) => state.signData);
+
     const handleOpening = (index: number) => {
         const box: any = document.getElementById(`box${index}`);
         box.src = "/sign/box/box-open.png";
@@ -61,7 +64,12 @@ export const BoxListCom = forwardRef<BoxList, BoxParams>(function BoxListCom(
                                                       ? "/sign/box_pay/gift.png"
                                                       : "/sign/box/box.png"
                                             }
-                                            className={"z-50 mx-[auto] h-[100%]"}
+                                            className={clsx("z-50 mx-[auto] h-[100%]", {
+                                                [styles.shake]:
+                                                    !item.is_suss &&
+                                                    signData.cur_num === index &&
+                                                    signData.is_op,
+                                            })}
                                             alt=""
                                         />
                                         <div className="flex justify-center">
@@ -191,6 +199,7 @@ interface SignInModalProps1 {
 const SignInModal = forwardRef(function SignInModal(props: SignInModalProps1, ref) {
     const [visible, setVisible] = useState(false);
     const [amount, setAmount] = useState({});
+    const [visible1, setVisible1] = useState(false);
 
     const signData = useSignStore((state) => state.signData);
     const activity_id = useSignStore((state) => state.activity_id);
@@ -214,6 +223,7 @@ const SignInModal = forwardRef(function SignInModal(props: SignInModalProps1, re
     }, [signData]);
 
     const doClaim = async () => {
+        // setVisible1(true);
         if (!curData || !signData.is_op) return null;
         try {
             const res = await claimActivityReward({
@@ -239,7 +249,7 @@ const SignInModal = forwardRef(function SignInModal(props: SignInModalProps1, re
                     });
                 }
                 setAmount(amountObj);
-                setVisible(true);
+                setVisible1(true);
             } else {
                 throw new Error("Erro de parâmetro");
             }
@@ -345,6 +355,12 @@ const SignInModal = forwardRef(function SignInModal(props: SignInModalProps1, re
                     </div>
                 </div>
             </Mask>
+            <GlobalNotify
+                amount={amount}
+                visible={visible1}
+                onChange={() => setVisible1(false)}
+                deraction={5000}
+            ></GlobalNotify>
         </>
     );
 });

src/components/ModalPopup/SignInModal/style.module.scss

@@ -8,12 +8,12 @@
         height: 0.15rem;
         font-size: 0.1rem;
     }
-    .lock{
-        height:0.14rem;
+    .lock {
+        height: 0.14rem;
         line-height: 0.14rem;
         font-size: 0.12rem;
     }
-    .green{
+    .green {
         font-size: 0.08rem;
     }
 }
@@ -28,12 +28,39 @@
         height: 0.19rem;
         font-size: 0.11rem;
     }
-    .lock{
-        height:0.18rem;
+    .lock {
+        height: 0.18rem;
         line-height: 0.18rem;
         font-size: 0.16rem;
     }
-    .green{
+    .green {
         font-size: 0.1rem;
     }
 }
+
+.shake {
+    animation: shake 0.8s ease-in-out infinite;
+}
+
+/* 定义晃动动画关键帧 */
+@keyframes shake {
+    10%,
+    90% {
+        transform: translate3d(-1px, 0, 0) rotate(-1deg);
+    }
+    20%,
+    80% {
+        transform: translate3d(2px, 0, 0) rotate(1deg);
+    }
+    30%,
+    70% {
+        transform: translate3d(-3px, 0, 0) rotate(-3deg);
+    }
+    40%,
+    60% {
+        transform: translate3d(3px, 0, 0) rotate(1deg);
+    }
+    50% {
+        transform: translate3d(-3px, 0, 0) rotate(3deg);
+    }
+}