|
|
@@ -5,7 +5,6 @@ import Progress from "@/app/[locale]/(navbar)/cashback/@cashbackInfo/components/
|
|
|
import { useRouter } from "@/i18n/routing";
|
|
|
import { getToken } from "@/utils/Cookies";
|
|
|
import { percentage, timeFormat } from "@/utils/methods";
|
|
|
-import { LuckyWheel } from "@lucky-canvas/react";
|
|
|
import { Mask } from "antd-mobile";
|
|
|
import Image from "next/image";
|
|
|
import { FC, forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
|
|
|
@@ -212,67 +211,67 @@ export const WheelClient: FC<WheelProps> = (props) => {
|
|
|
}, [wheel]);
|
|
|
|
|
|
return (
|
|
|
- <div className={"relative w-[100%]"}>
|
|
|
- <img src="/wheels/aura.png" alt="" className={"absolute"} />
|
|
|
+ <div className={"relative h-[5.1rem]" + " w-[100%]"}>
|
|
|
+ {/*<img src="/wheels/aura.png" alt="" className={"absolute"} />*/}
|
|
|
<img
|
|
|
src={"/wheels/wheel-bg.png"}
|
|
|
- className={"h-[5.3819rem] w-[100%]" + " border-[2px] border-[red]"}
|
|
|
+ className={"h-[5.1rem] w-[100%] " + " border-[2px] border-[red]"}
|
|
|
/>
|
|
|
<img
|
|
|
src={"/wheels/title.png"}
|
|
|
className={"absolute left-[15%] top-[42%] z-10 w-[69%]"}
|
|
|
/>
|
|
|
{/*定位到中心圆*/}
|
|
|
- <div className={"absolute bottom-[30px] h-[2.7rem] w-[100%] border-[1px] p-[5px]"}>
|
|
|
- {/*光圈图片 */}
|
|
|
- <div className={"flex h-[100%] w-[100%] justify-center"}>
|
|
|
- <img src="/wheels/light-1.png" alt="" className={"h-[100%]"} />
|
|
|
- </div>
|
|
|
- {/*转盘*/}
|
|
|
- <div
|
|
|
- className={
|
|
|
- "absolute bottom-[0] flex h-[100%] w-[100%] justify-center p-[0.1389rem]"
|
|
|
- }
|
|
|
- >
|
|
|
- <div
|
|
|
- className={
|
|
|
- "relative mr-[0.06rem] mt-[0.05rem] h-[2.4rem] w-[2.4rem]" +
|
|
|
- " rounded-[50%]"
|
|
|
- }
|
|
|
- >
|
|
|
- <div className={"absolute bottom-[50%] z-50 w-[100%] translate-y-1/2"}>
|
|
|
- <div
|
|
|
- className={"flex justify-center"}
|
|
|
- onClick={() => startRotate("desktop")}
|
|
|
- >
|
|
|
- <Image
|
|
|
- src={"/wheels/pointer.png"}
|
|
|
- className={"h-[0.6944rem] w-[0.625rem] object-contain"}
|
|
|
- width={90}
|
|
|
- height={120}
|
|
|
- alt={"start"}
|
|
|
- />
|
|
|
- <span
|
|
|
- className={
|
|
|
- "absolute bottom-[40%] translate-y-1/2 text-[#ffdb0e]"
|
|
|
- }
|
|
|
- >
|
|
|
- {buttonText}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <LuckyWheel
|
|
|
- ref={wheelRef}
|
|
|
- width="2.4rem"
|
|
|
- height="2.4rem"
|
|
|
- blocks={blocks}
|
|
|
- defaultConfig={defaultConfig}
|
|
|
- prizes={prizes}
|
|
|
- onEnd={(prize: any) => endRotate(prize)}
|
|
|
- />
|
|
|
- </div>
|
|
|
- </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"}>*/}
|
|
|
+ {/* <img src="/wheels/light-1.png" alt="" className={"h-[100%]"} />*/}
|
|
|
+ {/* </div>*/}
|
|
|
+ {/* /!*转盘*!/*/}
|
|
|
+ {/* <div*/}
|
|
|
+ {/* className={*/}
|
|
|
+ {/* "absolute bottom-[0] flex h-[100%] w-[100%] justify-center p-[0.1389rem]"*/}
|
|
|
+ {/* }*/}
|
|
|
+ {/* >*/}
|
|
|
+ {/* <div*/}
|
|
|
+ {/* className={*/}
|
|
|
+ {/* "relative mr-[0.06rem] mt-[0.05rem] h-[2.4rem] w-[2.4rem]" +*/}
|
|
|
+ {/* " rounded-[50%]"*/}
|
|
|
+ {/* }*/}
|
|
|
+ {/* >*/}
|
|
|
+ {/* <div className={"absolute bottom-[50%] z-50 w-[100%] translate-y-1/2"}>*/}
|
|
|
+ {/* <div*/}
|
|
|
+ {/* className={"flex justify-center"}*/}
|
|
|
+ {/* onClick={() => startRotate("desktop")}*/}
|
|
|
+ {/* >*/}
|
|
|
+ {/* <Image*/}
|
|
|
+ {/* src={"/wheels/pointer.png"}*/}
|
|
|
+ {/* className={"h-[0.6944rem] w-[0.625rem] object-contain"}*/}
|
|
|
+ {/* width={90}*/}
|
|
|
+ {/* height={120}*/}
|
|
|
+ {/* alt={"start"}*/}
|
|
|
+ {/* />*/}
|
|
|
+ {/* <span*/}
|
|
|
+ {/* className={*/}
|
|
|
+ {/* "absolute bottom-[40%] translate-y-1/2 text-[#ffdb0e]"*/}
|
|
|
+ {/* }*/}
|
|
|
+ {/* >*/}
|
|
|
+ {/* {buttonText}*/}
|
|
|
+ {/* </span>*/}
|
|
|
+ {/* </div>*/}
|
|
|
+ {/* </div>*/}
|
|
|
+ {/* <LuckyWheel*/}
|
|
|
+ {/* ref={wheelRef}*/}
|
|
|
+ {/* width="2.4rem"*/}
|
|
|
+ {/* height="2.4rem"*/}
|
|
|
+ {/* blocks={blocks}*/}
|
|
|
+ {/* defaultConfig={defaultConfig}*/}
|
|
|
+ {/* prizes={prizes}*/}
|
|
|
+ {/* onEnd={(prize: any) => endRotate(prize)}*/}
|
|
|
+ {/* />*/}
|
|
|
+ {/* </div>*/}
|
|
|
+ {/* </div>*/}
|
|
|
+ {/*</div>*/}
|
|
|
</div>
|
|
|
);
|
|
|
};
|
Before