|
@@ -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>
|
|
|
</>
|
|
|
);
|