diff --git a/src/index.less b/src/index.less index 0e46a55..d9516ef 100644 --- a/src/index.less +++ b/src/index.less @@ -7,7 +7,7 @@ .feedContainer { margin: 0 auto; padding: 0 8px; - max-width: 1200px; + max-width: 1440px; } @font-face { diff --git a/src/main.tsx b/src/main.tsx index 39646bf..a113086 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -31,7 +31,7 @@ const router = createBrowserRouter([ { //默认页面 index: true, - element: , + element: , }, { // video瀑布流展示页面 diff --git a/src/routers/layout/header.tsx b/src/routers/layout/header.tsx index b15a294..5c8873f 100644 --- a/src/routers/layout/header.tsx +++ b/src/routers/layout/header.tsx @@ -1,6 +1,5 @@ import SearchSharpIcon from "@mui/icons-material/SearchSharp"; import { Form } from "react-router-dom"; -import { Unstable_Grid2 as Grid } from "@mui/material"; import Header_Nav from "./nav"; import styles from "./layout.module.less"; import { useFocus } from "./hooks"; @@ -11,15 +10,8 @@ export default function Header() { return (
- - - + +
); } diff --git a/src/routers/layout/index.tsx b/src/routers/layout/index.tsx index b35cfc1..053dfd8 100644 --- a/src/routers/layout/index.tsx +++ b/src/routers/layout/index.tsx @@ -1,10 +1,14 @@ import { Flipped } from "react-flip-toolkit"; import { Outlet } from "react-router-dom"; import Header from "./header"; +import Header_Nav from "./nav"; export default function Layout() { return ( <>
+
{ //最后一个span是否可见 const { ref, inView } = useInView({ initialInView: true }); - const { handlerChangeShow } = useNavShowed(); + const { handlerChangeShow, showed } = useNavShowed(); return ( <> { display: inView ? "none" : "flex", }} > - + {showed ? ( + + ) : ( + + )} @@ -164,4 +167,3 @@ const NavTagChipItem: FC = memo((props) => { }); //todo：修复展示更多栏的bug //todo：拆分组件 -//todo：点击事件后修改icon diff --git a/src/routers/layout/nav/tools.ts b/src/routers/layout/nav/tools.ts index bf967a3..dc11ead 100644 --- a/src/routers/layout/nav/tools.ts +++ b/src/routers/layout/nav/tools.ts @@ -1,7 +1,6 @@ import { nanoid } from "nanoid"; import { useMemo, useState } from "react"; import { getLocalStorage } from "../tools"; -//todo 将数据加密 export function useNavList(): [ NavQueryItemType[], React.Dispatch> diff --git a/src/routers/layout/rightSide/index.tsx b/src/routers/layout/rightSide/index.tsx index cd4f28a..aeec436 100644 --- a/src/routers/layout/rightSide/index.tsx +++ b/src/routers/layout/rightSide/index.tsx @@ -1,13 +1,5 @@ import { Avatar } from "@mui/material"; export default function RightSide() { - return ( - - Data - - ); + return App; } diff --git a/src/routers/video/item/icon.tsx b/src/routers/video/item/icon.tsx index b96d774..412bb22 100644 --- a/src/routers/video/item/icon.tsx +++ b/src/routers/video/item/icon.tsx @@ -27,3 +27,36 @@ export const BiliIcon: FC<{ > ); + +export const UPIcon: FC<{ + height: number | string; + width?: number | string; + color?: string; + title: string; +}> = ({ height, width = height, color = "#fff", title }) => ( + + + {title} + + + + + + + + + + + + UP + + + +); diff --git a/src/routers/video/item/index.tsx b/src/routers/video/item/index.tsx index 2d8bd37..210e123 100644 --- a/src/routers/video/item/index.tsx +++ b/src/routers/video/item/index.tsx @@ -57,4 +57,5 @@ export const VideoRouterImageCard: FC<{ data: VideoRouterImageCardType }> = ({
); }; -//todo 修改卡片样式 +//todo 传统的两行有兼容问题，修改 +//todo 使用redux替换preview diff --git a/src/routers/video/item/item.module.less b/src/routers/video/item/item.module.less index abe1594..ca29190 100644 --- a/src/routers/video/item/item.module.less +++ b/src/routers/video/item/item.module.less @@ -3,10 +3,6 @@ display: flex; flex-flow: column nowrap; - // &>:first-child { - // flex: 1; - // } - .video-data { transition: opacity .3s linear; @@ -83,6 +79,10 @@ margin-left: 5px; } + &>svg { + flex-shrink: 0; + } + &-desc { flex: 1; font-size: 13px; @@ -119,9 +119,7 @@ } &>span { - overflow: hidden; - text-overflow: ellipsis; - word-break: break-all; + &:not(:first-of-type)::before { content: '·'; diff --git a/src/routers/video/item/videodata.tsx b/src/routers/video/item/videodata.tsx index e946dd8..ca34d7c 100644 --- a/src/routers/video/item/videodata.tsx +++ b/src/routers/video/item/videodata.tsx @@ -1,5 +1,5 @@ import { useScreenSize } from "@components/proview/screenSize"; -import SlowMotionVideoSharpIcon from "@mui/icons-material/SlowMotionVideoSharp"; +import SlideshowIcon from "@mui/icons-material/Slideshow"; import SubjectSharpIcon from "@mui/icons-material/SubjectSharp"; import getFixedNumber from "@utils/number"; import { getVideoTime } from "@utils/time"; @@ -15,12 +15,20 @@ export const VideoData: FC<
- + {getFixedNumber(view)} {sm && ( - + {getFixedNumber(danmaku)} )} diff --git a/src/routers/video/item/videoinfo.tsx b/src/routers/video/item/videoinfo.tsx index 9e2296a..607fea6 100644 --- a/src/routers/video/item/videoinfo.tsx +++ b/src/routers/video/item/videoinfo.tsx @@ -1,12 +1,9 @@ import { Avatar, Link, styled } from "@mui/material"; -import ThumbUpSharpIcon from "@mui/icons-material/ThumbUpSharp"; -import FavoriteSharpIcon from "@mui/icons-material/FavoriteSharp"; import { useScreenMatchSize } from "@utils/hooks/match"; -import getFixedNumber from "@utils/number"; import getrealtiveTime from "@utils/time"; import { FC } from "react"; import { VideoRouterImageCardType } from "../videotype"; -import { BiliIcon, CoinIcon } from "./icon"; +import { UPIcon } from "./icon"; import styles from "./item.module.less"; export const VideoInfo: FC< Pick @@ -24,31 +21,12 @@ export const VideoInfo: FC< {title}
- {matchsmSize ? ( - - ) : ( - - )} +
{name} {matchsmSize && {getrealtiveTime(pubdate * 1000)}} - {/* {matchsmSize && ( -
- - {" "} - {getFixedNumber(like)} - - - {getFixedNumber(coin)} - - - {" "} - {getFixedNumber(favorite)} - -
- )} */}