|
@@ -1,13 +1,8 @@
|
|
|
"use client";
|
|
|
import Box from "@/components/Box";
|
|
|
-import Footer from "@/components/Footer";
|
|
|
import Header from "@/components/Header";
|
|
|
-import Sidebar from "@/components/Layout/Sidebar";
|
|
|
-import styles from "@/components/Layout/style.module.scss";
|
|
|
-import { usePathname, useRouter } from "@/i18n";
|
|
|
-import { SpinLoading } from "antd-mobile";
|
|
|
+import { usePathname } from "@/i18n";
|
|
|
import { FC, PropsWithChildren, ReactNode, useEffect, useRef } from "react";
|
|
|
-import { Swiper, SwiperClass, SwiperSlide } from "swiper/react";
|
|
|
type Props = {
|
|
|
swiperWidget: ReactNode;
|
|
|
popupWidget: ReactNode;
|
|
@@ -27,37 +22,8 @@ const Layout: FC<PropsWithChildren<Props>> = (props) => {
|
|
|
prizeWidget,
|
|
|
...other
|
|
|
} = props;
|
|
|
- const swiperRef = useRef<SwiperClass>();
|
|
|
- const isOpen = useRef<boolean>(false);
|
|
|
- const homeContainerRef = useRef<HTMLDivElement>(null);
|
|
|
const barRef = useRef<HTMLDivElement>(null);
|
|
|
|
|
|
- const startHandler = () => {
|
|
|
- homeContainerRef.current?.classList.add(styles.containerMask);
|
|
|
- barRef.current?.classList.add(styles.cross);
|
|
|
- isOpen.current = true;
|
|
|
- };
|
|
|
- const endHandler = () => {
|
|
|
- homeContainerRef.current?.classList.remove(styles.containerMask);
|
|
|
- barRef.current?.classList.remove(styles.cross);
|
|
|
- isOpen.current = false;
|
|
|
- };
|
|
|
-
|
|
|
- const openSliderHandler = () => {
|
|
|
- if (isOpen.current) {
|
|
|
- swiperRef.current?.slideNext();
|
|
|
- } else {
|
|
|
- swiperRef.current?.slidePrev();
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- const router = useRouter();
|
|
|
- const sidebarChange = (index: number) => {
|
|
|
- if (index === 1) {
|
|
|
- openSliderHandler();
|
|
|
- router.push("/sports");
|
|
|
- }
|
|
|
- };
|
|
|
// 获取分享id
|
|
|
const pathname = usePathname();
|
|
|
useEffect(() => {
|
|
@@ -67,71 +33,25 @@ const Layout: FC<PropsWithChildren<Props>> = (props) => {
|
|
|
}, []);
|
|
|
return (
|
|
|
<>
|
|
|
- <Swiper
|
|
|
- resistanceRatio={10}
|
|
|
- initialSlide={2}
|
|
|
- slidesPerView={"auto"}
|
|
|
- onSlidePrevTransitionStart={startHandler}
|
|
|
- onSlideNextTransitionEnd={endHandler}
|
|
|
- slideToClickedSlide
|
|
|
- onSwiper={(swiper) => {
|
|
|
- swiperRef.current = swiper;
|
|
|
- }}
|
|
|
- allowTouchMove={false}
|
|
|
- >
|
|
|
- <SwiperSlide>
|
|
|
- <section className="relative flex h-[100vh] items-center justify-center">
|
|
|
- <SpinLoading color="default" />
|
|
|
- </section>
|
|
|
- </SwiperSlide>
|
|
|
-
|
|
|
- <SwiperSlide style={{ width: "70%" }} className={"bg-[rgb(31,31,31)]"}>
|
|
|
- <section className="relative h-[100vh]">
|
|
|
- <Sidebar onChange={(index) => sidebarChange(index)}></Sidebar>
|
|
|
- </section>
|
|
|
- </SwiperSlide>
|
|
|
-
|
|
|
- <SwiperSlide style={{ width: "100%" }}>
|
|
|
- <section className="relative h-[100%]" ref={homeContainerRef}>
|
|
|
- <Header
|
|
|
- {...other}
|
|
|
- menuRender={() => (
|
|
|
- <div
|
|
|
- className={`absolute left-[0.1rem] top-[0.03rem] z-40 text-[#fff]`}
|
|
|
- ref={barRef}
|
|
|
- onClick={openSliderHandler}
|
|
|
- >
|
|
|
- <div className={styles.bar}></div>
|
|
|
- <div
|
|
|
- className={styles.bar}
|
|
|
- style={{ width: "0.1389rem" }}
|
|
|
- ></div>
|
|
|
- <div className={styles.bar}></div>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- ></Header>
|
|
|
- <main id="maincontainer" className={"main-footer-header"}>
|
|
|
- {/*弹窗*/}
|
|
|
- {popupWidget}
|
|
|
- <Box>
|
|
|
- {/* swiper */}
|
|
|
- {swiperWidget}
|
|
|
- {/* swiper下的活动 */}
|
|
|
- {cardWidget}
|
|
|
- {/* 跑马灯 */}
|
|
|
- {noticeWidget}
|
|
|
- {/* 搜索组件 */}
|
|
|
- {searchWidget}
|
|
|
- {/* 搜索下面的大奖展示 */}
|
|
|
- {prizeWidget}
|
|
|
- </Box>
|
|
|
- {/* tabs 和 游戏列表 */}
|
|
|
- {children}
|
|
|
- </main>
|
|
|
- <Footer></Footer>
|
|
|
- </section>
|
|
|
- </SwiperSlide>
|
|
|
- </Swiper>
|
|
|
+ <Header {...other}></Header>
|
|
|
+ <main id="maincontainer" className={"main-footer-header"}>
|
|
|
+ {/*弹窗*/}
|
|
|
+ {popupWidget}
|
|
|
+ <Box>
|
|
|
+ {/* swiper */}
|
|
|
+ {swiperWidget}
|
|
|
+ {/* swiper下的活动 */}
|
|
|
+ {cardWidget}
|
|
|
+ {/* 跑马灯 */}
|
|
|
+ {noticeWidget}
|
|
|
+ {/* 搜索组件 */}
|
|
|
+ {searchWidget}
|
|
|
+ {/* 搜索下面的大奖展示 */}
|
|
|
+ {prizeWidget}
|
|
|
+ </Box>
|
|
|
+ {/* tabs 和 游戏列表 */}
|
|
|
+ {children}
|
|
|
+ </main>
|
|
|
</>
|
|
|
);
|
|
|
};
|