{props.type === "router" ? (
* {
+ margin: @itemMarginHalfHeight @itemMarginHalfWidth;
+ }
+
+ &[data-showed=true] {
+ &>span:nth-last-child(2) {
+ display: none;
+ }
+
+ &>div:last-child {
+ position: relative;
+ }
+ }
+
+ &-filter-tag {
+ // width: @itemWidth;
+ // flex: 0 0 @itemWidth;
+ }
+
+ .navlink {
+ text-decoration: none;
+
+ &-active>div {
+ // background-color: ;
+ }
+ }
+ }
+
+ &-right-show-btn {
+ justify-content: center;
+ margin: 0 !important;
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ height: 40px;
+ display: flex;
+ justify-items: center;
+ align-items: center;
+ overflow: hidden;
+ background-color: #fff;
+ box-shadow: rgb(255 255 255) -11px 0px 12px 0px;
+ z-index: 1;
+ cursor: pointer;
+ }
+}
\ No newline at end of file
diff --git a/src/routers/video/item/icon.tsx b/src/routers/video/item/icon.tsx
new file mode 100644
index 0000000..03350ab
--- /dev/null
+++ b/src/routers/video/item/icon.tsx
@@ -0,0 +1,14 @@
+import { FC } from "react";
+export const CoinIcon: FC<{
+ height: number | string;
+ width?: number | string;
+}> = ({ height, width = height }) => (
+
+);
diff --git a/src/routers/video/item/index.tsx b/src/routers/video/item/index.tsx
new file mode 100644
index 0000000..230e5ea
--- /dev/null
+++ b/src/routers/video/item/index.tsx
@@ -0,0 +1,59 @@
+import { ImageBasic } from "@components/image";
+import { FC } from "react";
+import { Link } from "@mui/material";
+import { VideoRouterImageCardType } from "../videotype";
+import styles from "./item.module.less";
+import { Omit, Pick } from "@utils/index";
+import { VideoData } from "./videodata";
+import { VideoInfo } from "./videoinfo";
+
+export const VideoRouterImageCard: FC<{ data: VideoRouterImageCardType }> = ({
+ data,
+}) => {
+ const { pic, bvid } = data;
+ return (
+
+
+
+
+
+
+ );
+};
diff --git a/src/routers/video/item/item.module.less b/src/routers/video/item/item.module.less
new file mode 100644
index 0000000..cca42b8
--- /dev/null
+++ b/src/routers/video/item/item.module.less
@@ -0,0 +1,143 @@
+.video-section {
+ height: 100%;
+ display: flex;
+ flex-flow: column nowrap;
+
+ &>:first-child {
+ flex: 1;
+ }
+
+ .video-data {
+ transition: opacity .3s linear;
+
+ *:hover+& {
+ opacity: 0;
+ }
+
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ box-sizing: border-box;
+ padding: 16px 8px 6px;
+ border-bottom-left-radius: 8px;
+ border-bottom-right-radius: 8px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ color: #fff;
+ font-size: 13px;
+ font-weight: 400;
+ background-image: linear-gradient(180deg,
+ rgba(0, 0, 0, 0) 0%,
+ rgba(0, 0, 0, .8) 100%);
+
+ &-left {
+ flex: 1;
+ display: flex;
+ align-items: center;
+
+ &>span {
+ font-size: 13px;
+ display: flex;
+ align-items: center;
+
+ }
+
+ &>span:not(:last-of-type) {
+ margin-right: 12px;
+ }
+ }
+ }
+
+ .video-info {
+
+ &>*:not(:first-child) {
+ margin-top: 5px;
+ }
+
+ &>p {
+ color: #18191c;
+ // font-size: 15px;
+ cursor: pointer;
+ transition: color .2s linear;
+ height: 40px;
+ overflow: hidden;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ text-overflow: ellipsis;
+ line-break: anywhere;
+ -webkit-line-clamp: 2;
+ word-wrap: break-all;
+
+ &:hover,
+ &:active {
+ color: #00aeec;
+ }
+
+ &>a {
+ line-height: 1.25;
+ }
+ }
+
+ .video-up {
+ display: flex;
+ align-items: stretch;
+
+ &>*:not(:first-child) {
+ margin-left: 5px;
+ }
+
+ &-desc {
+ font-size: 13px;
+ display: flex;
+ flex-flow: column nowrap;
+ justify-content: space-between;
+ cursor: default;
+
+ &-data {
+ display: flex;
+ flex-flow: row nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ &>span {
+ white-space: nowrap;
+ display: flex;
+ align-items: center;
+
+ &:not(:first-of-type) {
+ margin-left: 10px;
+ }
+ }
+ }
+
+
+ a {
+
+ color: rgb(148, 153, 160);
+ cursor: pointer;
+ transition: color .2s linear;
+
+ &:hover,
+ &:active {
+ color: #00aeec;
+ }
+
+ &>span {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ word-break: break-all;
+
+ &:not(:first-of-type)::before {
+ content: '·';
+ margin: 0 4px;
+ }
+
+ }
+ }
+ }
+
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/routers/video/item/videodata.tsx b/src/routers/video/item/videodata.tsx
new file mode 100644
index 0000000..e946dd8
--- /dev/null
+++ b/src/routers/video/item/videodata.tsx
@@ -0,0 +1,31 @@
+import { useScreenSize } from "@components/proview/screenSize";
+import SlowMotionVideoSharpIcon from "@mui/icons-material/SlowMotionVideoSharp";
+import SubjectSharpIcon from "@mui/icons-material/SubjectSharp";
+import getFixedNumber from "@utils/number";
+import { getVideoTime } from "@utils/time";
+import { FC } from "react";
+import { VideoRouterImageCardType } from "../videotype";
+import styles from "./item.module.less";
+export const VideoData: FC<
+ Pick
+> = (props) => {
+ const { view, danmaku, duration } = props;
+ const { sm } = useScreenSize();
+ return (
+
+
+ );
+};
diff --git a/src/routers/video/item/videoinfo.tsx b/src/routers/video/item/videoinfo.tsx
new file mode 100644
index 0000000..824ceb0
--- /dev/null
+++ b/src/routers/video/item/videoinfo.tsx
@@ -0,0 +1,71 @@
+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 { CoinIcon } from "./icon";
+import styles from "./item.module.less";
+export const VideoInfo: FC<
+ Pick<
+ VideoRouterImageCardType,
+ | "title"
+ | "name"
+ | "updated_at"
+ | "bvid"
+ | "coin"
+ | "favorite"
+ | "like"
+ | "face"
+ >
+> = (props) => {
+ const { title, name, bvid, updated_at, coin, like, favorite, face } = props;
+ const matchsmSize = useScreenMatchSize("sm");
+ return (
+
+
+
+ {getVideoTime(duration)}
+
+
+
+ {title}
+
+
+
+ );
+};
+
+const DataP = styled("p")(({ theme }) => ({
+ fontSize: "15px",
+ [theme.breakpoints.down("sm")]: {
+ fontSize: "13px",
+ },
+}));
diff --git a/src/routers/video/masonry.tsx b/src/routers/video/masonry.tsx
index f95a9af..09ba61f 100644
--- a/src/routers/video/masonry.tsx
+++ b/src/routers/video/masonry.tsx
@@ -2,13 +2,12 @@ import { fetchVideos } from "@utils/fetch";
import { concurrencyRequest, Pick } from "@utils/index";
import { useState, useEffect, FC, memo } from "react";
import { VideoRouterImageCardType, VideoRouterMasonryType } from "./videotype";
-import { getImageSize } from "@components/image/tool";
-import Grid from "@mui/material/Unstable_Grid2";
+import { Unstable_Grid2 as Grid } from "@mui/material";
import ImageShouldResizeProview from "@components/proview/imageSize";
-import { VideoRouterImageCard } from "./masonryItem";
+import { VideoRouterImageCard } from "./item";
import { Skeleton } from "@mui/material";
import { nanoid } from "nanoid";
-import { useScreenSize } from "../../components/proview/screenSize";
+import styles from "./video.module.less";
/**
* @description 该组件负责渲染视频图片的瀑布流
*/
@@ -117,27 +116,18 @@ const LoadingSkeleton: FC<{ num: number }> = ({ num = 0 }) => {
+ {matchsmSize &&
+
+
+ {name}
+ {matchsmSize && {getrealtiveTime(updated_at * 1000)}}
+
+ {matchsmSize && (
+
+
+
+
+ )}
+
+
+
-
-
-
-
-
- );
-};
-const VideoData: FC<
- Pick
-> = (props) => {
- const { view, danmaku, duration } = props;
- const { sm } = useScreenSize();
- return (
-
-
- );
-};
-const VideoInfo: FC<
- Pick<
- VideoRouterImageCardType,
- | "title"
- | "name"
- | "updated_at"
- | "bvid"
- | "coin"
- | "favorite"
- | "like"
- | "face"
- >
-> = (props) => {
- const { title, name, bvid, updated_at, coin, like, favorite, face } = props;
- const matchsmSize = useScreenMatchSize("sm");
- return (
-
-
-
- {getVideoTime(duration)}
-
-
- );
-};
-
-export const CoinIcon: FC<{
- height: number | string;
- width?: number | string;
-}> = ({ height, width = height }) => (
-
-);
diff --git a/src/routers/video/video.module.less b/src/routers/video/video.module.less
index 29f8010..b30f277 100644
--- a/src/routers/video/video.module.less
+++ b/src/routers/video/video.module.less
@@ -1,143 +1,13 @@
-.video-section {
- height: 100%;
+.skeleton-img {
+ aspect-ratio: 16/9;
+ max-width: 100%;
+ height: auto !important;
+}
+
+.skeleton-content {
display: flex;
- flex-flow: column nowrap;
- &>:first-child {
+ .skeleton-info {
flex: 1;
}
-
- .video-data {
- transition: opacity .3s linear;
-
- *:hover+& {
- opacity: 0;
- }
-
- position: absolute;
- left: 0;
- bottom: 0;
- width: 100%;
- box-sizing: border-box;
- padding: 16px 8px 6px;
- border-bottom-left-radius: 8px;
- border-bottom-right-radius: 8px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- color: #fff;
- font-size: 13px;
- font-weight: 400;
- background-image: linear-gradient(180deg,
- rgba(0, 0, 0, 0) 0%,
- rgba(0, 0, 0, .8) 100%);
-
- &-left {
- flex: 1;
- display: flex;
- align-items: center;
-
- &>span {
- font-size: 13px;
- display: flex;
- align-items: center;
-
- }
-
- &>span:not(:last-of-type) {
- margin-right: 12px;
- }
- }
- }
-
- .video-info {
-
- &>*:not(:first-child) {
- margin-top: 5px;
- }
-
- &>p {
- color: #18191c;
- font-size: 15px;
- cursor: pointer;
- transition: color .2s linear;
- height: 40px;
- overflow: hidden;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- text-overflow: ellipsis;
- line-break: anywhere;
- -webkit-line-clamp: 2;
- word-wrap: break-all;
-
- &:hover,
- &:active {
- color: #00aeec;
- }
-
- &>a {
- line-height: 1.25;
- }
- }
-
- .video-up {
- display: flex;
- align-items: stretch;
-
- &>*:not(:first-child) {
- margin-left: 5px;
- }
-
- &-desc {
- font-size: 13px;
- display: flex;
- flex-flow: column nowrap;
- justify-content: space-between;
- cursor: default;
-
- &-data {
- display: flex;
- flex-flow: row nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-
- &>span {
- white-space: nowrap;
- display: flex;
- align-items: center;
-
- &:not(:first-of-type) {
- margin-left: 10px;
- }
- }
- }
-
-
- a {
-
- color: rgb(148, 153, 160);
- cursor: pointer;
- transition: color .2s linear;
-
- &:hover,
- &:active {
- color: #00aeec;
- }
-
- &>span {
- overflow: hidden;
- text-overflow: ellipsis;
- word-break: break-all;
-
- &:not(:first-of-type)::before {
- content: '·';
- margin: 0 4px;
- }
-
- }
- }
- }
-
- }
- }
}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 40ef216..d68ac50 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,10 +1,12 @@
-import { defineConfig } from "vite";
+import { defineConfig, splitVendorChunkPlugin } from "vite";
import path from "path";
import react from "@vitejs/plugin-react-swc";
// 可视化打包文件
import { visualizer } from "rollup-plugin-visualizer";
// gzip
import viteCompression from "vite-plugin-compression";
+// polyfill
+import legacy from "@vitejs/plugin-legacy";
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
@@ -15,9 +17,21 @@ export default defineConfig({
"@routers": path.resolve(__dirname, "src/routers"),
},
},
- plugins: [react(), visualizer(), viteCompression()],
+ plugins: [
+ react(),
+ visualizer(),
+ viteCompression(),
+ legacy({
+ // 设置目标浏览器，browserslist 配置语法
+ targets: [
+ "defaults",
+ "iOS >= 9, Android >= 4.4, last 2 versions, > 0.2%, not dead",
+ ],
+ }),
+ splitVendorChunkPlugin(),
+ ],
build: {
- target: "es2015",
+ // target: "es2015",
minify: "esbuild",
rollupOptions: {
output: {
- - {title} - -
-
- {matchsmSize &&
-
-
- {name}
- {matchsmSize && {getrealtiveTime(updated_at * 1000)}}
-
- {matchsmSize && (
-
-
-
-
- )}
-