修改加载样式

EOEFANS · Jan 14, 2023 · 09a041e · 09a041e
1 parent ff96cda
commit 09a041e
Show file tree

Hide file tree

Showing 13 changed files with 83 additions and 66 deletions.
diff --git a/src/components/image/image.module.less b/src/components/image/image.module.less
@@ -14,8 +14,6 @@
         transition: transform .3s linear;
         aspect-ratio: 16/9;
 
-        &:hover {
-            transform: scale(1.1);
-        }
+        &:hover {}
     }
 }
diff --git a/src/components/image/index.tsx b/src/components/image/index.tsx
@@ -11,6 +11,7 @@ import {
   fallbackUrl as DefaultFallbackUrl,
   ImageSize,
 } from "./tool";
+import { styled } from "@mui/material";
 
 /**
  * @description 图片预加载hook
@@ -88,7 +89,7 @@ export function ImageBasic({
   return (
     <InView>
       {({ inView, ref, entry }) => (
-        <div ref={ref} className={styles.imgWrapper}>
+        <BorderDiv ref={ref} className={styles.imgWrapper}>
           <img
             src={`${url}${
               !md ? `@480w_270h_1c` : `@672w_378h_1c_!web-search-common-cover`
@@ -101,8 +102,15 @@ export function ImageBasic({
           />
           <>{observer && inView && once_callback(inView)}</>
           {children}
-        </div>
+        </BorderDiv>
       )}
     </InView>
   );
 }
+
+const BorderDiv = styled("div")(({ theme }) => ({
+  borderRadius: "8px",
+  [theme.breakpoints.down("sm")]: {
+    borderRadius: "4px",
+  },
+}));
diff --git a/src/routers/layout/header.tsx b/src/routers/layout/header.tsx
@@ -1,9 +1,7 @@
 import SearchSharpIcon from "@mui/icons-material/SearchSharp";
 import { Form } from "react-router-dom";
-import Header_Nav from "./nav";
 import styles from "./layout.module.less";
 import { useFocus } from "./hooks";
-import RouterNav from "./routernav";
 import LOGO from "./logo";
 import RightSide from "./rightSide";
 export default function Header() {

diff --git a/src/routers/layout/nav/index.tsx b/src/routers/layout/nav/index.tsx
@@ -1,4 +1,4 @@
-import { Chip, Stack } from "@mui/material";
+import { Button, Stack } from "@mui/material";
 import { useInView } from "react-intersection-observer";
 import SegmentIcon from "@mui/icons-material/Segment";
 import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen";
@@ -42,7 +42,7 @@ export default function Header_Nav() {
     // 触摸屏幕
     useSensor(TouchSensor, {
       activationConstraint: {
-        delay: 100,
+        delay: 500,
         tolerance: 5,
       },
     })
@@ -153,21 +153,25 @@ const NavTagChipItem: FC<NavQueryItemType> = memo((props) => {
   const clicked = useAppSelector(selectActiveTags).some(
       (item) => item.id === props.id
     ),
-    dispatch = useAppDispatch();
+    dispatch = useAppDispatch(),
+    handerclick = () => {
+      if (clicked) {
+        dispatch(handerDeleteTag(props));
+      } else {
+        dispatch(handerAddTag(props));
+      }
+    };
+  //todo 修改颜色
   return (
-    <Chip
-      className={styles["navstack-filter-tag"]}
-      label={props.query}
-      color={clicked ? "info" : "default"}
-      onClick={() => {
-        if (clicked) {
-          dispatch(handerDeleteTag(props));
-        } else {
-          dispatch(handerAddTag(props));
-        }
+    <Button
+      variant='contained'
+      color={clicked ? "secondary" : "primary"}
+      onClick={handerclick}
+      sx={{
+        wordBreak: "keep-all",
       }}
-    />
+    >
+      {props.query}
+    </Button>
   );
 });
-//todo：修复展示更多栏的bug
-//todo：拆分组件
diff --git a/src/routers/layout/nav/nav.module.less b/src/routers/layout/nav/nav.module.less
@@ -1,7 +1,7 @@
 .nav {
     position: relative;
     overflow: hidden;
-    margin: 10px;
+    margin: 10px 0;
     background-color: #fff;
 
     .navstack {
@@ -46,7 +46,7 @@
         position: absolute;
         right: 0;
         bottom: 0;
-        height: 40px;
+        height: 100%;
         display: flex;
         justify-items: center;
         align-items: center;

diff --git a/src/routers/video/item/icon.tsx b/src/routers/video/item/icon.tsx
@@ -54,7 +54,13 @@ export const UPIcon: FC<{
           />
         </g>
       </g>
-      <text stroke='#D9D9D9' fontSize='12' y='12' x='8' strokeWidth='0.5'>
+      <text
+        stroke='rgb(222,222,222)'
+        fontSize='12'
+        y='12'
+        x='8'
+        strokeWidth='0.5'
+      >
         UP
       </text>
     </g>

diff --git a/src/routers/video/item/index.tsx b/src/routers/video/item/index.tsx
@@ -57,5 +57,3 @@ export const VideoRouterImageCard: FC<{ data: VideoRouterImageCardType }> = ({
     </section>
   );
 };
-//todo 传统的两行有兼容问题，修改
-//todo 使用redux替换preview
diff --git a/src/routers/video/item/item.module.less b/src/routers/video/item/item.module.less
@@ -33,20 +33,17 @@
             display: flex;
             align-items: center;
 
-            &>span {
-                font-size: 13px;
-                display: flex;
-                align-items: center;
-
-            }
-
             &>span:not(:last-of-type) {
                 margin-right: 12px;
             }
         }
     }
 
     .video-info {
+        flex: 1;
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: space-between;
 
         &>*:not(:first-child) {
             margin-top: 5px;
@@ -63,7 +60,7 @@
             text-overflow: ellipsis;
             line-break: anywhere;
             -webkit-line-clamp: 2;
-            word-wrap: break-all;
+            word-break: break-all;
 
             &:hover,
             &:active {

diff --git a/src/routers/video/item/videodata.tsx b/src/routers/video/item/videodata.tsx
@@ -1,6 +1,7 @@
 import { useScreenSize } from "@components/proview/screenSize";
 import SlideshowIcon from "@mui/icons-material/Slideshow";
 import SubjectSharpIcon from "@mui/icons-material/SubjectSharp";
+import { styled } from "@mui/material";
 import getFixedNumber from "@utils/number";
 import { getVideoTime } from "@utils/time";
 import { FC } from "react";
@@ -10,30 +11,45 @@ export const VideoData: FC<
   Pick<VideoRouterImageCardType, "view" | "danmaku" | "duration">
 > = (props) => {
   const { view, danmaku, duration } = props;
-  const { sm } = useScreenSize();
   return (
     <div className={styles["video-data"]}>
       <div className={styles["video-data-left"]}>
-        <span title='播放量'>
+        <SizeSpan title='播放量'>
           <SlideshowIcon
             sx={{
               fontSize: "18px",
             }}
           />
           {getFixedNumber(view)}
-        </span>
-        {sm && (
-          <span title='弹幕数'>
-            <SubjectSharpIcon
-              sx={{
-                fontSize: "18px",
-              }}
-            />
-            {getFixedNumber(danmaku)}
-          </span>
-        )}
+        </SizeSpan>
+
+        <SizeSpan
+          title='弹幕数'
+          sx={{
+            display: {
+              xs: "none",
+              sm: "flex",
+            },
+          }}
+        >
+          <SubjectSharpIcon
+            sx={{
+              fontSize: "18px",
+            }}
+          />
+          {getFixedNumber(danmaku)}
+        </SizeSpan>
       </div>
       <span title='视频时长'>{getVideoTime(duration)}</span>
     </div>
   );
 };
+
+const SizeSpan = styled("span")(({ theme }) => ({
+  fontSize: "13px",
+  alignItems: "center",
+  display: "flex",
+  [theme.breakpoints.down("sm")]: {
+    fontSize: "11px",
+  },
+}));
diff --git a/src/routers/video/item/videoinfo.tsx b/src/routers/video/item/videoinfo.tsx
@@ -23,6 +23,7 @@ export const VideoInfo: FC<
       <div className={styles["video-up"]}>
         <UPIcon height={16} width={32} title={`芝士${name.slice(0, 2)}`} />
         <div className={styles["video-up-desc"]}>
+          {/* todo 这里在手机端没对齐 */}
           <Link underline='none' color='inherit'>
             <span title={name}>{name}</span>
             {matchsmSize && <span>{getrealtiveTime(pubdate * 1000)}</span>}
@@ -35,11 +36,8 @@ export const VideoInfo: FC<
 
 const DataP = styled("p")(({ theme }) => ({
   fontSize: "15px",
-  height: "40px",
-  lineHeight: "20px",
+  margin: "5px 0",
   [theme.breakpoints.down("sm")]: {
     fontSize: "13px",
-    height: "30px",
-    lineHeight: "15px",
   },
 }));
diff --git a/src/routers/video/masonry.tsx b/src/routers/video/masonry.tsx
@@ -76,6 +76,7 @@ export default function VideoMasonry(props: { q?: string }) {
             sm: 1,
             xs: 1,
           }}
+          rowSpacing={2}
           columns={{
             lg: 10,
             md: 8,
@@ -113,16 +114,8 @@ const LoadingSkeleton: FC<{ num: number }> = ({ num = 0 }) => {
           <Skeleton animation='wave' height={20} />
           <Skeleton animation='wave' width={"50%"} height={20} />
           <div className={styles["skeleton-content"]}>
-            <Skeleton
-              variant='circular'
-              animation='wave'
-              width={40}
-              height={40}
-            />
-            <div className={styles["skeleton-info"]}>
-              <Skeleton animation='wave' width={"80%"} height={20} />
-              <Skeleton animation='wave' width={"80%"} height={20} />
-            </div>
+            <Skeleton animation='wave' width={40} height={25} />
+            <Skeleton animation='wave' width={"60%"} height={20} />
           </div>
         </Grid>
       ))}

diff --git a/src/routers/video/video.module.less b/src/routers/video/video.module.less
@@ -6,8 +6,9 @@
 
 .skeleton-content {
     display: flex;
+    align-items: center;
 
-    .skeleton-info {
-        flex: 1;
+    &>span:last-of-type {
+        margin-left: 5px;
     }
 }
diff --git a/src/utils/hooks/match.ts b/src/utils/hooks/match.ts
@@ -5,7 +5,7 @@ import { Breakpoint, useMediaQuery, useTheme } from "@mui/material";
  */
 export const useScreenMatchSize = (size: Breakpoint) => {
   const theme = useTheme();
-  const matchSize = useMediaQuery(theme.breakpoints.up(size));
+  const matchSize = useMediaQuery(theme.breakpoints.down(size));
   return matchSize;
 };
 //个人主页头像大小