diff --git a/src/routers/layout/header.tsx b/src/routers/layout/header.tsx index 44ffed6..891518e 100644 --- a/src/routers/layout/header.tsx +++ b/src/routers/layout/header.tsx @@ -7,6 +7,7 @@ import { changeLoadingCauseByUrl } from "@store/loading"; import { routerNameToLoading } from "@utils/router"; import { styled } from "@mui/material"; import Search from "./search"; +import PCRightMore from "./rightMore/index"; export default function Header() { const dispatch = useAppDispatch(), location = useLocation(); @@ -22,7 +23,7 @@ export default function Header() { const ReactiveHeader = memo(() => { return ( -
+
{/* 手机端 */}
@@ -35,8 +36,8 @@ const ReactiveHeader = memo(() => {
-
- 敬请期待 +
+
diff --git a/src/routers/layout/index.tsx b/src/routers/layout/index.tsx index 41999c3..b979c46 100644 --- a/src/routers/layout/index.tsx +++ b/src/routers/layout/index.tsx @@ -6,7 +6,7 @@ import { selectNavMoreShowed } from "@store/device/index"; import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward"; import { Link } from "@mui/material"; import styles from "./layout.module.less"; -import MidContent from "./midcontent"; +import Header_Nav from "./nav"; export default function Layout() { const showed = useAppSelector(selectNavMoreShowed); return ( @@ -27,7 +27,9 @@ export default function Layout() {
- +
+ +
@@ -50,8 +52,3 @@ export const ImportTantInfo = () => ( ); - -const NavContent = () => { - const isSearchPage = useMatch(`/search`) !== null; - return
{!isSearchPage && }
; -}; diff --git a/src/routers/layout/logo/index.tsx b/src/routers/layout/logo/index.tsx index b14f185..bdf1423 100644 --- a/src/routers/layout/logo/index.tsx +++ b/src/routers/layout/logo/index.tsx @@ -1,10 +1,12 @@ -import { Button, Badge } from "@mui/material"; +import { Button, Badge, Menu, MenuItem } from "@mui/material"; import { useState, useMemo, FC } from "react"; -import { H1, Explain, Yituo } from "./modal"; +import { Explain, Yituo } from "./modal"; import styles from "./logo.module.less"; import { Storage } from "../tools"; import { useScreenSize } from "@components/proview/screenSize"; - +import { Link, useMatch } from "react-router-dom"; +import { RouterList } from "../routernav/index"; +import React from "react"; const QAStorage = new Storage("QAUpdate"); //暂时先这样 const _qa_update_time = `2023-3-1`; @@ -21,36 +23,100 @@ const useCheckQANews = () => { }; export default function LOGO() { + const { lg } = useScreenSize(); + return ( +
+ +
+ {lg && } + {!lg && } +
+
+ ); +} + +const LGRouterListAndQA = () => { + const [anchorEl, setAnchorEl] = React.useState(null), + handleClick = (event: React.MouseEvent) => + setAnchorEl(event.currentTarget), + handleClose = () => setAnchorEl(null); + const open = Boolean(anchorEl); + return ( + <> +
+ + + + + + {RouterList.slice(0, 2).map((item) => ( + + + {item.label + "站"} + + + ))} + +
+ + ); +}; +const QAButton = () => { const [open, set] = useState(false); const [shouldShowNews, handlerReadedNews] = useCheckQANews(); - const handlerClick = () => { + const handlerClick = (event: React.MouseEvent) => { + event.stopPropagation(); set((open) => !open); handlerReadedNews(); }; - const { md } = useScreenSize(); return ( -
- -

- {!md ? `eoefans-web端` : `eoefans`} - + + ); +}; + +const RouterListAndQA = () => { + return ( + <> + + {RouterList.slice(0, 2).map((item) => ( + - QA - - - -

-
+ {item.label + "站"} + + ))} + ); -} +}; const Show_news: FC<{ visible: boolean }> = ({ visible }) => ( void }> = ( ); -export const H1 = styled("h1")(({ theme }) => ({ - fontSize: "24px", - [theme.breakpoints.down("md")]: { - fontSize: "15px", - }, -})); - const QALists: { question: ReactElement; answer: ReactElement }[] = [ { question: <>露早tag为什么不是应援色？, @@ -104,6 +97,7 @@ export const QA = () => ( export const Yituo: FC<{ height: number | string; width: number | string; + children?: ReactElement; }> = ({ height, width }) => ( diff --git a/src/routers/layout/midcontent/index.tsx b/src/routers/layout/midcontent/index.tsx deleted file mode 100644 index 03afbe3..0000000 --- a/src/routers/layout/midcontent/index.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import { Link } from "react-router-dom"; -import { Link as Mlink } from "@mui/material"; -import { RouterList } from "../routernav"; -import { TabProps } from "../routernav/index"; -import HeadNav from "../nav"; -import LaunchIcon from "@mui/icons-material/Launch"; -import styles from "./midcontent.module.less"; -import { Flipped } from "react-flip-toolkit"; -export default function MidContent() { - return ( - <> - {/* 大屏 */} -
- - -
- -
- - -
- {/* ipad */} - - - ); -} - -const LeftLinks = () => ( -
- {RouterList.map((item, key) => ( - - {item.label} - - ))} -
-); -const GroupLists: TabProps[] = [ - { - label: "露早", - to: "1669777785", - }, - { - label: "虞莫", - to: "1811071010", - }, - { - label: "莞儿", - to: "1875044092", - }, - { - label: "柚恩", - to: "1795147802", - }, - { - label: "米诺", - to: "1778026586", - }, - { - label: "官号", - to: "2018113152", - }, -]; - -const RightLinks = () => ( -
- - {GroupLists.map((item, key) => ( - - {item.label} - - ))} -
-); diff --git a/src/routers/layout/midcontent/midcontent.module.less b/src/routers/layout/midcontent/midcontent.module.less deleted file mode 100644 index dd11fa1..0000000 --- a/src/routers/layout/midcontent/midcontent.module.less +++ /dev/null @@ -1,5 +0,0 @@ -.midcontent { - max-width: 1440px; - margin: 0 auto; - padding: 0 16px; -} \ No newline at end of file diff --git a/src/routers/layout/rightMore/index.tsx b/src/routers/layout/rightMore/index.tsx new file mode 100644 index 0000000..691de3f --- /dev/null +++ b/src/routers/layout/rightMore/index.tsx @@ -0,0 +1,116 @@ +import React, { FC, ReactElement } from "react"; +import MoreVertIcon from "@mui/icons-material/MoreVert"; +import LaunchIcon from "@mui/icons-material/Launch"; +import { Button, Link, Popover } from "@mui/material"; +import { TabProps } from "../routernav"; +export default function PCRightMore() { + const [anchorEl, setAnchorEl] = React.useState( + null + ); + + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + const open = Boolean(anchorEl); + return ( + <> +
+ + +
+ 快捷跳转} + > +
+ {GroupLists.map((item, key) => ( + + {item.label} + + + ))} +
+ + + + 敬请期待 + + +
+ +
+ + ); +} +const GroupLists: TabProps[] = [ + { + label: "露早", + to: "1669777785", + }, + { + label: "虞莫", + to: "1811071010", + }, + { + label: "莞儿", + to: "1875044092", + }, + { + label: "柚恩", + to: "1795147802", + }, + { + label: "米诺", + to: "1778026586", + }, + { + label: "官号", + to: "2018113152", + }, + { + label: "录播组", + to: "3461563583302074", + }, +]; +type PopoverItemProps = { + title: string | ReactElement; + children: ReactElement; +}; +const PopoverItem: FC = (props) => ( +
+

+ {props.title} +

+ {props.children} +
+); diff --git a/src/routers/layout/search/pc/search.tsx b/src/routers/layout/search/pc/search.tsx index 0fe0ada..7c87a4f 100644 --- a/src/routers/layout/search/pc/search.tsx +++ b/src/routers/layout/search/pc/search.tsx @@ -66,7 +66,7 @@ const SearchButton: FC<{ onSubmit?: () => void }> = ({ onSubmit }) => { type='submit' className={`${ styles["search-button"] - } bg-red-700 transition-all duration-250 ${ + } bg-red-700 transition-all duration-250 mr-2 ${ focused ? "p-3 text-2xl" : "p-2 text-xl" }`} onClick={onSubmit} diff --git a/src/routers/layout/search/search.module.less b/src/routers/layout/search/search.module.less index 9899bc6..a92fb52 100644 --- a/src/routers/layout/search/search.module.less +++ b/src/routers/layout/search/search.module.less @@ -20,10 +20,11 @@ .search-button { border-radius: 40px; cursor: pointer; - // padding: 8px; color: white; position: relative; - margin: auto; + // margin: auto; + margin-top: auto; + margin-bottom: auto; display: flex; justify-content: center; align-items: center; diff --git a/src/routers/video/video.module.less b/src/routers/video/video.module.less index c2418cc..bfce141 100644 --- a/src/routers/video/video.module.less +++ b/src/routers/video/video.module.less @@ -23,10 +23,10 @@ } img+div { - padding: 16px; + padding: 8px; span { - font-size: 16px !important; + font-size: 14px !important; } } }