修复图片对不其问题

CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## 1.2.3 (2023-03-07)
+
+
+### 💄 Styles
+
+* **custom**: pc端视频页对齐 ([dc4bf60](https://vlink.dev/EOEFANS/eoefans-web/commits/dc4bf60))
+
+
+
 ## 1.2.2 (2023-03-05)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eoefans-web",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "type": "module",
   "scripts": {
     "dev": "vite --config ./config/vite.dev.config.ts",

src/components/image/image.module.less

@@ -1,7 +1,6 @@
 .imgWrapper {
     position: relative;
     overflow: hidden;
-    border-radius: 8px;
     outline: 0.5px solid rgba(0, 0, 0, .05);
     height: 100%;
 

src/index.less

@@ -30,6 +30,10 @@
     margin: 0 auto;
     padding: 0 8px;
     max-width: 1440px;
+
+    @media (max-width:600px) {
+        padding: 0 2px;
+    }
 }
 
 @font-face {

src/routers/video/item/item.module.less

@@ -42,9 +42,12 @@
         display: flex;
         flex-flow: column nowrap;
         justify-content: space-between;
+        // fixed
+        flex-basis: 80px;
+        flex-shrink: 0;
 
-        &>*:not(:first-child) {
-            margin-top: 5px;
+        @media (max-width:600px) {
+            flex: 1;
         }
 
         p {

src/routers/video/item/videoinfo.tsx

@@ -38,7 +38,7 @@ export const VideoInfo: FC<
 
 const DataP = styled("p")(({ theme }) => ({
   fontSize: "15px",
-  margin: "5px 0",
+  marginTop: "5px",
   [theme.breakpoints.down("sm")]: {
     fontSize: "13px",
   },

src/routers/video/masonry.tsx

@@ -71,40 +71,62 @@ const VideoContent: FC<{ data: VideoListType }> = memo((props) => {
     resItems = shouldNoShowHeroLine ? data : data.slice(rightLen);
   return (
     <>
+      {/* hero排*/}
       <Grid
         container
         spacing={{
           lg: 2,
           sm: 1,
         }}
-        sx={{
-          marginBottom: "30px",
-        }}
         rowSpacing={2}
         columns={{
           md: 10,
           sm: 6,
           xs: 4,
         }}
+        className='mb-8 max-md:mb-4'
       >
-        <Grid xs={4} sm={4} md={5} lg={4} className={styles["hero-content"]}>
-          {loading ? (
-            <LoadingSkeleton />
-          ) : shouldNoShowHeroLine ? (
-            <></>
-          ) : (
-            <VideoRouterImageCard data={heroItem[0]} />
-          )}
+        <Grid xs={4} sm={4} md={5} lg={4} sx={{ padding: "0px" }}>
+          <Grid
+            container
+            columns={{
+              lg: 2,
+              md: 2,
+              sm: 2,
+              xs: 2,
+            }}
+            sx={{
+              height: "100%",
+              margin: "0px",
+              padding: "0px",
+            }}
+            className={styles["hero-content"]}
+          >
+            {loading ? (
+              <Grid xs={2}>
+                <LoadingSkeleton />
+              </Grid>
+            ) : shouldNoShowHeroLine ? (
+              <></>
+            ) : (
+              <MemoItems {...heroItem[0]}></MemoItems>
+            )}
+          </Grid>
         </Grid>
         {!sm && (
-          <Grid sm={2} md={5} lg={6} sx={{ padding: 0 }}>
+          <Grid sm={2} md={5} lg={6} sx={{ padding: "0px" }}>
             <Grid
               container
               columns={{
                 lg: 6,
                 md: 4,
                 sm: 2,
               }}
+              sx={{
+                height: "100%",
+                margin: "0px",
+                padding: "0px",
+              }}
             >
               {loading ? (
                 <LoadingItems length={rightLen - 1} />
@@ -174,17 +196,19 @@ const MemoItems: FC<VideoRouterImageCardType> = memo((props) => {
 });
 
 const LoadingSkeleton = () => (
-  <>
+  <div className='flex flex-col h-full'>
     <Skeleton
       variant='rounded'
       animation='wave'
-      className={styles["skeleton-img"]}
+      className={`${styles["skeleton-img"]} flex-grow`}
     />
-    <Skeleton animation='wave' height={20} />
-    <Skeleton animation='wave' width={"50%"} height={20} />
-    <div className={styles["skeleton-content"]}>
-      <Skeleton animation='wave' width={40} height={25} />
-      <Skeleton animation='wave' width={"60%"} height={20} />
+    <div className='flex-shrink-0 basis-20'>
+      <Skeleton animation='wave' height={20} />
+      <Skeleton animation='wave' width={"50%"} height={20} />
+      <div className={styles["skeleton-content"]}>
+        <Skeleton animation='wave' width={40} height={25} />
+        <Skeleton animation='wave' width={"60%"} height={20} />
+      </div>
     </div>
-  </>
+  </div>
 );

src/routers/video/video.module.less

@@ -14,7 +14,7 @@
 }
 
 .hero-content {
-    &>section:only-child {
+    & section:only-child {
         &>a:first-child {
             flex-grow: 1;
 
@@ -32,20 +32,9 @@
         }
 
         &>div:last-child {
-            justify-content: flex-start;
-
+            // justify-content: flex-start;
+            flex-grow: 0;
         }
 
     }
-}
-
-// .container:empty {
-//     display: flex;
-//     justify-content: center;
-
-//     &::before {
-//         margin-top: 50px;
-//         content: "暂无数据";
-//         color: #c1c1c1;
-//     }
-// }
+}