From f92afa27abf1ed6b24b0cbc79f45f69b91f7a5c6 Mon Sep 17 00:00:00 2001 From: master1lan <278457198@qq.com> Date: Thu, 2 Feb 2023 12:10:30 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0QA=E6=8F=90=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/masonry/index.tsx | 2 +- src/routers/layout/layout.module.less | 95 ------------ src/routers/layout/logo.tsx | 185 ----------------------- src/routers/layout/logo/index.tsx | 71 +++++++++ src/routers/layout/logo/logo.module.less | 94 ++++++++++++ src/routers/layout/logo/modal.tsx | 166 ++++++++++++++++++++ src/routers/photo/item/index.tsx | 27 ++-- 7 files changed, 346 insertions(+), 294 deletions(-) delete mode 100644 src/routers/layout/logo.tsx create mode 100644 src/routers/layout/logo/index.tsx create mode 100644 src/routers/layout/logo/logo.module.less create mode 100644 src/routers/layout/logo/modal.tsx diff --git a/src/components/masonry/index.tsx b/src/components/masonry/index.tsx index a1364db..6583a97 100644 --- a/src/components/masonry/index.tsx +++ b/src/components/masonry/index.tsx @@ -24,7 +24,7 @@ export default function Masonry() { ]); useEffect(() => { fetchMoreItemsHandler(0, 20, []); - console.log("effect"); + // console.log("effect"); }, [fetchMoreItemsHandler]); return (
p:not(:last-of-type) { - margin-bottom: 12px; - color: grey; - } - - &>p { - display: flex; - - strong { - flex: 0 0 25px; - } - } - - - } -} - - -.line_text { - width: 100%; - // color: #a2a9b6; - border: 0; - font-size: 14px; - padding: 1em 0; - position: relative; - -webkit-mask-image: linear-gradient(to right, - transparent, - black, - transparent); - mask-image: linear-gradient(to right, transparent, black, transparent); - - &::before { - content: attr(data-content); - position: absolute; - padding: 0 1ch; - line-height: 1px; - border: solid #d0d0d5; - border-width: 0 99vw; - width: fit-content; - /* for 不支持fit-content浏览器 */ - white-space: nowrap; - left: 50%; - transform: translateX(-50%); - } } \ No newline at end of file diff --git a/src/routers/layout/logo.tsx b/src/routers/layout/logo.tsx deleted file mode 100644 index 82ca977..0000000 --- a/src/routers/layout/logo.tsx +++ /dev/null @@ -1,185 +0,0 @@ -import { Button, Link, Modal, styled } from "@mui/material"; -import { FC, useState } from "react"; -import styles from "./layout.module.less"; - -const Explain: FC<{ open: boolean; handlerClick: () => void }> = (props) => ( - <> - -
-
-
    -
  • -

    - Q: - 为什么界面这么丑？ -

    -

    - A: - web端没有UI捏🙇‍♂️🙇‍♂️🙇‍♂️果咩。 -

    -
    • -
  • -

    - Q: - 如何查找我想看的视频类型？ -

    -

    - A: - - 😩目前只能通过点击下方tag栏进行查询，其中各分区、原创和转载、 - 最新发布和最多播放互斥外其他tag皆满足异或查询。 -
    - 🤔tag排序不是固定的，可以使用鼠标或者触摸按住tag半秒后进行移动。 -
    - 🤗可以自定义任何你想要的tag栏顺序，下一次访问也有效。 -     -

    -
    • -
  • -

    - Q: - 露早tag为什么不是应援色？ -

    -

    - A: - - 露早GOGO的应援色为 - - #3dff9e - - ,tag字面显示不明显，所以更换为黑露早形态的 - #A0191D - -

    -
    • -
  • -

    - Q: - 如何进行用户反馈？ -

    -

    - A: - - 请前往 - - eoefans反馈 - - -

    -
    • -
  • -

    - Q: - 图片页图片太小了？ -

    -

    - A: - - 图片页可点击图片进入放大镜模式，支持手势返回和空白处返回；可使用双指放大对图片大小进行调整。 - -

    -
    • -
- -
- - -); - -export default function LOGO() { - const [open, set] = useState(false), - handlerClick = () => set((open) => !open); - return ( -
-

- EOEfans-web端 - - -

- -
- ); -} -const H1 = styled("h1")(({ theme }) => ({ - fontSize: "24px", - [theme.breakpoints.down("sm")]: { - fontSize: "15px", - }, -})); - -const Yituo: FC<{ - height: number | string; - width: number | string; -}> = ({ height, width }) => ( - - 芝士蛞蝓 - - - - - - - - - - -); diff --git a/src/routers/layout/logo/index.tsx b/src/routers/layout/logo/index.tsx new file mode 100644 index 0000000..61129b2 --- /dev/null +++ b/src/routers/layout/logo/index.tsx @@ -0,0 +1,71 @@ +import { Button, Badge } from "@mui/material"; +import { useState, useMemo, FC } from "react"; +import { H1, Explain, Yituo } from "./modal"; +import styles from "./logo.module.less"; +import { Storage } from "../tools"; + +const QAStorage = new Storage("QAUpdate"); +//暂时先这样 +const _qa_update_time = `2023-2-2`; +const useCheckQANews = () => { + const local_qa_value = useMemo(() => { + return QAStorage.getLocalStorage(""); + }, []); + const [shouldShowNews, set] = useState(local_qa_value !== _qa_update_time), + handlerReadedNews = () => { + QAStorage.setLocalstorage(_qa_update_time); + set(() => false); + }; + return [shouldShowNews, handlerReadedNews] as [boolean, () => void]; +}; + +export default function LOGO() { + const [open, set] = useState(false); + const [shouldShowNews, handlerReadedNews] = useCheckQANews(); + const handlerClick = () => { + set((open) => !open); + handlerReadedNews(); + }; + return ( +
+

+ EOEfans-web端 + + +

+ +
+ ); +} + +const Show_news: FC<{ visible: boolean }> = ({ visible }) => ( + +
+ +); diff --git a/src/routers/layout/logo/logo.module.less b/src/routers/layout/logo/logo.module.less new file mode 100644 index 0000000..3beb0bc --- /dev/null +++ b/src/routers/layout/logo/logo.module.less @@ -0,0 +1,94 @@ +.logo { + display: flex; + align-items: center; + flex-flow: row-reverse nowrap; + padding: 5px 0; + + a { + color: inherit; + text-decoration: none; + } + + + + h1 { + margin: 0; + white-space: nowrap; + position: relative; + padding-right: 30px; + } + +} + +.modal { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + border-radius: 4px; + padding: 15px 10px; + max-width: 400px; + width: 90%; + + + + + ul { + display: flex; + flex-flow: column nowrap; + max-height: 60vh; + overflow-y: auto; + overflow-x: hidden; + } + + li { + margin: 10px; + list-style: none; + box-sizing: border-box; + + &>p:not(:last-of-type) { + margin-bottom: 12px; + color: grey; + } + + &>p { + display: flex; + + strong { + flex: 0 0 25px; + } + } + + + } +} + + +.line_text { + width: 100%; + // color: #a2a9b6; + border: 0; + font-size: 14px; + padding: 1em 0; + position: relative; + -webkit-mask-image: linear-gradient(to right, + transparent, + black, + transparent); + mask-image: linear-gradient(to right, transparent, black, transparent); + + &::before { + content: attr(data-content); + position: absolute; + padding: 0 1ch; + line-height: 1px; + border: solid #d0d0d5; + border-width: 0 99vw; + width: fit-content; + /* for 不支持fit-content浏览器 */ + white-space: nowrap; + left: 50%; + transform: translateX(-50%); + } +} \ No newline at end of file diff --git a/src/routers/layout/logo/modal.tsx b/src/routers/layout/logo/modal.tsx new file mode 100644 index 0000000..135c03a --- /dev/null +++ b/src/routers/layout/logo/modal.tsx @@ -0,0 +1,166 @@ +import { Button, Link, Modal, styled } from "@mui/material"; +import { FC } from "react"; +import styles from "./logo.module.less"; + +export const Explain: FC<{ open: boolean; handlerClick: () => void }> = ( + props +) => ( + <> + +
+
+ + +
+ + +); + +export const H1 = styled("h1")(({ theme }) => ({ + fontSize: "24px", + [theme.breakpoints.down("sm")]: { + fontSize: "15px", + }, +})); + +export const QA = () => ( + +); + +export const Yituo: FC<{ + height: number | string; + width: number | string; +}> = ({ height, width }) => ( + + 芝士蛞蝓 + + + + + + + + + + +); diff --git a/src/routers/photo/item/index.tsx b/src/routers/photo/item/index.tsx index 3d01348..d535e40 100644 --- a/src/routers/photo/item/index.tsx +++ b/src/routers/photo/item/index.tsx @@ -51,19 +51,20 @@ export default function PhotoCard(props: CardType) { ); } -const DivImgNum = styled("div")` - position: absolute; - right: 0px; - top: 0px; - padding: 7px; - color: white; - background-color: rgba(0, 0, 0, 0.4); - display: flex; - justify-content: center; - align-items: center; - column-gap: 2px; - pointer-events: none; -`; +const DivImgNum = styled("div")(({ theme }) => ({ + position: "absolute", + right: "0px", + top: "0px", + padding: "7px", + color: "white", + backgroundColor: "rgba(0, 0, 0, 0.4)", + display: "flex", + justifyContent: "center", + alignItems: "center", + columnGap: "2px", + pointerEvents: "none", + fontSize: "14px", +})); const DivJump = styled("div")(({ theme }) => ({ borderBottomLeftRadius: "8px",