Bläddra i källkod

fix: 修改轮盘弹窗

Before 7 månader sedan
förälder
incheckning
63e4a78b52

BIN
public/wheels/light-1.png


BIN
public/wheels/light-2.png


BIN
public/wheels/light-3.png


+ 24 - 0
src/components/Box/WheelModal.module.scss

@@ -258,3 +258,27 @@
   }
 }
 
+
+
+.flashing{
+  animation: bling  2s ease-out infinite;
+}
+@keyframes bling {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+}
+.closeFlashing{
+  animation: closebling 2s ease-out infinite;
+}
+@keyframes closebling {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

+ 45 - 11
src/components/Box/WheelModal.tsx

@@ -211,17 +211,49 @@ export const WheelClient: FC<WheelProps> = (props) => {
     }, [wheel]);
 
     return (
-        <div className={"relative h-[5.1rem]" + " w-[100%]"}>
-            {/*<img src="/wheels/aura.png" alt="" className={"absolute"} />*/}
+        <div className={"relative w-[100%]"}>
+            <img src="/wheels/aura.png" alt="" className={"absolute h-[100%]"} />
             <img
                 src={"/wheels/wheel-bg.png"}
-                className={"h-[5.1rem] w-[100%] " + " border-[2px] border-[red]"}
+                className={"mx-auto h-[5.6rem] w-[100%] object-cover"}
             />
             <img
                 src={"/wheels/title.png"}
-                className={"absolute left-[15%] top-[42%] z-10 w-[69%]"}
+                className={"absolute left-[11.5%] top-[41%] z-10 w-[76%]"}
             />
             {/*定位到中心圆*/}
+            <div
+                className={
+                    "absolute bottom-[0px] h-[3.15rem] w-[100%] border-[1px] " +
+                    " border-[1px] p-[0.1389rem]"
+                }
+            >
+                <div className={"relative flex h-[100%] w-[100%] justify-center"}>
+                    <img src="/wheels/light-1.png" alt="" className={`absolute h-[100%]`} />
+                    <img
+                        src="/wheels/light-2.png"
+                        alt=""
+                        className={`absolute h-[100%] ${styles.flashing}`}
+                    />
+                    <img
+                        src="/wheels/light-3.png"
+                        alt=""
+                        className={`absolute h-[100%] ${styles.closeFlashing}`}
+                    />
+
+                    <div className={"border-[1px] border-[red]"}>1</div>
+                </div>
+
+                {/*<div*/}
+                {/*    className={*/}
+                {/*        "absolute bottom-[0] left-0 flex h-[100%] w-[100%] justify-center " +*/}
+                {/*        " border-[1px]"*/}
+                {/*    }*/}
+                {/*>*/}
+                {/*    123*/}
+                {/*</div>*/}
+            </div>
+
             {/*<div className={"absolute bottom-[30px] h-[2.7rem] w-[100%] border-[1px] p-[5px]"}>*/}
             {/*    /!*光圈图片  *!/*/}
             {/*    <div className={"flex h-[100%] w-[100%] justify-center"}>*/}
@@ -358,7 +390,7 @@ const DetailClient = (props: { wheel: Partial<WheelsType>; onUnload: () => void
 };
 
 const WheelModal = forwardRef<WheelModalProps, Props>(function RedPacketModal(props, ref) {
-    const [visible, setVisible] = useState(false);
+    const [visible, setVisible] = useState(true);
 
     const [detailsVisible, setDetailsVisible] = useState(false);
     const [wheel, setWheel] = useState<Partial<WheelsType>>({});
@@ -433,13 +465,15 @@ const WheelModal = forwardRef<WheelModalProps, Props>(function RedPacketModal(pr
                 </div>
             </Mask>
             <Mask visible={visible} destroyOnClose={true} getContainer={null}>
-                <div
-                    className={"absolute right-[0.2083rem] top-[18%] z-50"}
-                    onClick={() => setVisible(false)}
-                >
-                    <span className={"iconfont icon-guanbi"}></span>
+                {/*<div*/}
+                {/*    className={"absolute right-[0.2083rem] top-[18%] z-50"}*/}
+                {/*    onClick={() => setVisible(false)}*/}
+                {/*>*/}
+                {/*    <span className={"iconfont icon-guanbi"}></span>*/}
+                {/*</div>*/}
+                <div className={"absolute top-[5%] w-[100%]"}>
+                    <WheelClient isRotate={true} wheel={wheel} onRotateEnd={onRotateEnd} />
                 </div>
-                <WheelClient isRotate={true} wheel={wheel} onRotateEnd={onRotateEnd} />
             </Mask>
         </>
     );

+ 4 - 1
src/utils/server/index.ts

@@ -28,13 +28,16 @@ const responseInterceptor = <T = any, R = unknown>(
                 console.log(`🚀🚀🚀🚀🚀->server-code: 401`, options.url);
                 redirect({ href: "/login", locale: "en" });
                 break;
+            case 500:
+                reject(response);
+                break;
             default:
                 console.log({
                     ...response,
                     ...options,
                     message: `please check api ${url}${options.url}`,
                 });
-                reject(response);
+                resolve(response);
         }
     });
 };