site: fix the problem of the operating area being blocked (ant-design…

…#48195)
CooperHash · Apr 10, 2024 · fc5e6a2 · fc5e6a2
1 parent 08f30d2
commit fc5e6a2
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 30 deletions.
diff --git a/.dumi/pages/index/components/BannerRecommends.tsx b/.dumi/pages/index/components/BannerRecommends.tsx
@@ -1,6 +1,4 @@
-import * as React from 'react';
-import type { FC } from 'react';
-import { useContext } from 'react';
+import React, { useContext } from 'react';
 import { Badge, Carousel, Skeleton, Typography } from 'antd';
 import { createStyles, useTheme } from 'antd-style';
 import classNames from 'classnames';
@@ -46,10 +44,10 @@ const useStyle = createStyles(({ token, css, cx }) => {
     `,
     container: css`
       display: flex;
-      max-width: 1208px;
+      width: 100%;
+      max-width: 100%;
       margin-inline: auto;
       box-sizing: border-box;
-      padding-inline: ${token.marginXXL}px;
       column-gap: ${token.paddingMD * 2}px;
       align-items: stretch;
       text-align: start;
@@ -107,7 +105,7 @@ const RecommendItem: React.FC<RecommendItemProps> = ({ extra, index, icons, clas
   return card;
 };
 
-export const BannerRecommendsFallback: FC = () => {
+export const BannerRecommendsFallback: React.FC = () => {
   const { isMobile } = useContext(SiteContext);
   const { styles } = useStyle();
 
@@ -145,34 +143,34 @@ const BannerRecommends: React.FC = () => {
     return <BannerRecommendsFallback />;
   }
 
-  return (
-    <div>
-      {isMobile ? (
-        <Carousel className={styles.carousel}>
-          {first3.map((extra, index) => (
-            <div key={index}>
-              <RecommendItem
-                extra={extra}
-                index={index}
-                icons={icons}
-                className={styles.sliderItem}
-              />
-            </div>
-          ))}
-        </Carousel>
-      ) : (
-        <div className={styles.container}>
-          {first3.map((extra, index) => (
+  if (isMobile) {
+    return (
+      <Carousel className={styles.carousel}>
+        {first3.map((extra, index) => (
+          <div key={index}>
             <RecommendItem
               extra={extra}
               index={index}
               icons={icons}
-              className={styles.cardItem}
-              key={index}
+              className={styles.sliderItem}
             />
-          ))}
-        </div>
-      )}
+          </div>
+        ))}
+      </Carousel>
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      {first3.map((extra, index) => (
+        <RecommendItem
+          extra={extra}
+          index={index}
+          icons={icons}
+          className={styles.cardItem}
+          key={index}
+        />
+      ))}
     </div>
   );
 };

diff --git a/.dumi/pages/index/components/PreviewBanner/index.tsx b/.dumi/pages/index/components/PreviewBanner/index.tsx
@@ -91,10 +91,11 @@ const useStyle = () => {
         top: -38px;
         transform: ${isRTL ? 'rotate3d(24, 83, -45, 57deg)' : 'rotate3d(24, -83, 45, 57deg)'};
       `,
-
       child: css`
         position: relative;
         width: 100%;
+        max-width: 1200px;
+        margin: 0 auto;
         z-index: 1;
       `,
       btnWrap: css`