fix: 修改首页bug

src/layouts/BasicLayout.tsx

@@ -141,7 +141,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
   return (
     <ProLayout
       pageTitleRender={() => currentRouter ? currentRouter.name : window.location.href}
-      style={{ minHeight: '100vh' }}
+      style={{ minHeight: '100vh', minWidth: "1500px" }}
       logo={logo}
       formatMessage={formatMessage}
       menuHeaderRender={(logoDom, titleDom) => (

src/layouts/components/MenuSlider.tsx

@@ -106,4 +106,4 @@ const MenuSlider: React.FC<MenuSliderProps> = (props) => {
 
 MenuSlider.defaultProps = {}
 
-export default MenuSlider
+export default MenuSlider
\ No newline at end of file

src/pages/handling/components/Appendix/index.tsx

@@ -28,33 +28,12 @@ const AppendixItem = (props) => {
     let link = document.createElement("a");
     link.style.display = "none";
     link.href = url;
-    link.setAttribute("download", name + '.txt');
+    link.setAttribute("download", name);
     document.body.appendChild(link) //a标签插至页面中
     link.click();
     document.body.removeChild(link);
   }
 
-  const downloadUrlFile = (name, url) => {
-    const xhr = new XMLHttpRequest()
-      xhr.open('GET', url, true)
-      xhr.responseType = 'blob'
-      xhr.onload = () => {
-        if (xhr.status === 200) {
-          saveAs(xhr.response, name)
-        }
-      }
-      xhr.send()
-
-  }
-
-  const saveAs = (data, name) => {
-    var urlObject = window.URL
-    var export_blob = new Blob([data]);
-    var save_link = document.createElement("a");
-    save_link.href = urlObject.createObjectURL(export_blob);
-    save_link.download = name;
-    save_link.click();
-  }
 
   return (
     <div style={styles}>

src/pages/home/components/Centers/AfterSoldCenter.tsx

@@ -53,18 +53,18 @@ const SettlementAbility: React.FC<Iprops> = () => {
                 : Object.keys(requestData).map((record) => {
                   return (
                     <Row key={record} className={styles.row}>
-                      <Col xxl={4} xl={4} lg={24} md={24} sm={24} className={styles.rowTitle}>{KEY_TITLE[record]}</Col>
-                      <Col xxl={20} xl={20} lg={24} md={24} sm={24} className={styles.colRow}>
+                      <Col span={4} className={styles.rowTitle}>{KEY_TITLE[record]}</Col>
+                      <Col span={20} className={styles.colRow}>
                         {
                           requestData[record].map((item, key) => {
                             return (
-                              <Col xxl={4} xl={6} lg={6} md={6} sm={12} xs={24} key={key} className={styles.col}>
+                              <Col span={4} key={key} className={styles.col}>
                                 <div className={styles.colTitle}>{item.name}</div>
                                 {
-                                        item.link
-                                        ? <Link to={item.link} className={styles.colValue}>{item.count}</Link>
-                                        : <div className={styles.colValue}>{item.count}</div>
-                                      }
+                                  item.link
+                                  ? <Link to={item.link} className={styles.colValue}>{item.count}</Link>
+                                  : <div className={styles.colValue}>{item.count}</div>
+                                }
                               </Col>
                             )
                           })

src/pages/home/components/Centers/FundCenter.tsx

@@ -64,24 +64,6 @@ const FundCenter: React.FC<Iprops> = () => {
                 ? <Skeleton active />
                 : (
                     <>
-                      {/* <div className={styles.tags}>
-                        {
-                          tagsList.map((item) => {
-                            const hasAuth = !urls.includes(item.url);
-                            if(!hasAuth) {
-                              return null
-                            }
-                            return (
-                              <Link to={item.url} className={styles.tagsItem} key={item.text}>
-                                <div className={styles.icon}>
-                                  <img src={item.icon} />
-                                </div>
-                                <div className={styles.text}>{item.text}</div>
-                              </Link>
-                            )
-                          })
-                        }
-                      </div> */}
                       <Row gutter={[16,16]}>
                         {
                           tagsList.map((item) => {
@@ -90,7 +72,7 @@ const FundCenter: React.FC<Iprops> = () => {
                               return null
                             }
                             return (
-                              <Col xxl={5} xl={12} lg={8} md={12} sm={24} xs={24} key={item.text}>
+                              <Col span={4} key={item.text}>
                                 <Link to={item.url} className={styles.tagsItem}>
                                   <div className={styles.icon}>
                                     <img src={item.icon} />
@@ -107,12 +89,12 @@ const FundCenter: React.FC<Iprops> = () => {
                           Object.keys(requestData).map((item) => {
                             return (
                               <Row key={item} className={styles.row}>
-                                <Col xxl={4} xl={4} lg={24} md={24} sm={24} xs={24}  className={styles.rowTitle}>{KEY_TO_TITLE[item]}</Col>
-                                <Col xxl={20} xl={20} lg={24} md={24} sm={24} xs={24} className={styles.colRow}>
+                                <Col span={4} className={styles.rowTitle}>{KEY_TO_TITLE[item]}</Col>
+                                <Col span={20} className={styles.colRow}>
                                   {
                                     requestData[item].map((record) => {
                                       return (
-                                        <Col xxl={4} xl={6} lg={8} md={8} sm={12} xs={24}  key={record.name} className={styles.col}>
+                                        <Col span={4} key={record.name} className={styles.col}>
                                           <div className={styles.colTitle}>{record.name}</div>
                                           {
                                             record.link

src/pages/home/components/Centers/LogisticsCenter.tsx

@@ -73,7 +73,7 @@ const LogisticsCenter: React.FC<Iprops> = () => {
                 loading
                 ? <Skeleton active  />
                 : <>
-                    <Row gutter={[16,16]}>
+                    <Row gutter={[24,16]}>
                       {
                         data.map((item) => {
                           const hasAuth = !urls.includes(item.url);
@@ -81,7 +81,7 @@ const LogisticsCenter: React.FC<Iprops> = () => {
                             return null
                           }
                           return (
-                            <Col xxl={5} xl={12} lg={8} md={12} sm={24} xs={24} key={item.text}>
+                            <Col span={4} key={item.text}>
                               <Link to={item.url} className={styles.tagsItem}>
                                 <div className={styles.icon}>
                                   <img src={item.icon} />

src/pages/home/components/Centers/ProcessCenter.tsx

@@ -44,12 +44,12 @@ const ProcessCenter: React.FC<Iprops> = () => {
                 : Object.keys(requestData).map((record) => {
                   return (
                     <Row key={record} className={styles.row}>
-                      <Col xxl={4} xl={4} lg={24} md={24} sm={24} xs={24} className={styles.rowTitle}>{KEY_TITLE[record]}</Col>
-                      <Col xxl={20} xl={20} lg={24} md={24} sm={24} xs={24} className={styles.colRow}>
+                      <Col span={4} className={styles.rowTitle}>{KEY_TITLE[record]}</Col>
+                      <Col span={20} className={styles.colRow}>
                         {
                           requestData[record].map((item, key) => {
                             return (
-                              <Col xxl={4} xl={6} lg={8} md={8} sm={12} xs={24} key={key} className={styles.col}>
+                              <Col span={4} key={key} className={styles.col}>
                                 <div className={styles.colTitle}>{item.name}</div>
                                 {
                                   item.link
@@ -69,27 +69,6 @@ const ProcessCenter: React.FC<Iprops> = () => {
           )
         }
       }
-      {/* {
-        data.map((record) => {
-          return (
-            <Row key={record.id} className={styles.row}>
-              <Col span={4} className={styles.rowTitle}>平台代收账款结算</Col>
-              <Col span={20} className={styles.colRow}>
-                {
-                  record.list.map((item) => {
-                    return (
-                      <Col span={4} key={item} className={styles.col}>
-                        <div className={styles.colTitle}>待提交审核咨询单</div>
-                        <div className={styles.colValue}>5</div>
-                      </Col>
-                    )
-                  })
-                }
-              </Col>
-            </Row>
-          )
-        })
-      } */}
 
     </AbilityContainer>
   )

src/pages/home/components/Centers/ProductCenter.tsx

@@ -59,12 +59,12 @@ const ProductCenter: React.FC<Iprops> = () => {
                 ? <Skeleton active />
                 : <>
                     <Row className={styles.row}>
-                      <Col xxl={4} xl={4} lg={24} md={24} sm={24} className={styles.rowTitle}>商品</Col>
-                      <Col xxl={20} xl={20} lg={24} md={24} sm={24} className={styles.colRow}>
+                      <Col span={4} className={styles.rowTitle}>商品</Col>
+                      <Col span={20} className={styles.colRow}>
                         {
                           isArray && requestData.map((item) => {
                             return (
-                              <Col xxl={4} xl={6} lg={8} md={8} sm={12} xs={24} key={item.name} className={styles.col}>
+                              <Col span={4} key={item.name} className={styles.col}>
                                 <div className={styles.colTitle}>{item.name}</div>
                                 {
                                   item.link

src/pages/home/components/Centers/SettlementCenter.tsx

@@ -66,7 +66,7 @@ const SettlementCenter: React.FC<Iprops> = () => {
                 loading
                 ? <Skeleton active />
                 : <>
-                    <Row gutter={[16,16]}>
+                    <Row gutter={[16,24]}>
                       {
                         tagsList.map((item) => {
                           const hasAuth = !urls.includes(item.url);
@@ -74,7 +74,7 @@ const SettlementCenter: React.FC<Iprops> = () => {
                             return null
                           }
                           return (
-                            <Col xxl={6} xl={12} lg={8} md={12} sm={24} xs={24} key={item.text}>
+                            <Col span={4} key={item.text}>
                               <Link to={item.url} className={styles.tagsItem}>
                                 <div className={styles.icon}>
                                   <img src={item.icon} />
@@ -90,12 +90,12 @@ const SettlementCenter: React.FC<Iprops> = () => {
                       Object.keys(requestData).map((record) => {
                         return (
                           <Row key={record} className={styles.row}>
-                            <Col xxl={4} xl={4} lg={24} md={24} sm={24}className={styles.rowTitle}>{KEY_TITLE[record]}</Col>
-                            <Col xxl={20} xl={20} lg={24} md={24} sm={24}  className={styles.colRow}>
+                            <Col span={4} className={styles.rowTitle}>{KEY_TITLE[record]}</Col>
+                            <Col span={20} className={styles.colRow}>
                               {
                                 requestData[record].map((item, key) => {
                                   return (
-                                    <Col xxl={4} xl={6} lg={6} md={6} sm={12} xs={24} key={key} className={styles.col}>
+                                    <Col span={4} key={key} className={styles.col}>
                                       <div className={styles.colTitle}>{item.name}</div>
                                       {
                                         item.link

src/pages/home/components/Centers/ShopCenter.tsx

@@ -15,12 +15,16 @@ const CREATE_SHOP = '/memberCenter/shopAbility/infoManage';
 
 const ShopCenter: React.FC<Iprops> = () => {
   ///template/shop/findShopList
+  const userAuth = getAuth();
   const request = useCallback(async () => {
-    const {code, data} = await PublicApi.getTemplateShopFindShopList({current: '1', pageSize: '1', categoryId: '0', areaCode: '', memberName: ''});
+    const {code, data} = await PublicApi.getTemplateShopFindShop({
+      memberId: userAuth.memberId,
+      roleId: userAuth.roleId
+    });
     return {
       code: code,
       data: {
-        totalCount: code === 1000 ? data.totalCount : 0
+        totalCount: code === 1000  && data.id || 0
       }
     }
   }, [])
@@ -43,9 +47,9 @@ const ShopCenter: React.FC<Iprops> = () => {
           return (
             loading
             ? <Skeleton active />
-            : <Row gutter={[16,16]}>
+            : <Row gutter={[16,24]}>
                 <Authorize url={CREATE_SHOP} canView={true}>
-                  <Col xxl={6} xl={8} lg={8} md={12} sm={24} xs={24} className={styles.tagsSpecial} >
+                  <Col span={4} className={styles.tagsSpecial} >
                     <Link to={CREATE_SHOP} className={styles.tagsItem}>
                       <div className={styles.icon}>
                         <img src={create_shop} />
@@ -66,7 +70,7 @@ const ShopCenter: React.FC<Iprops> = () => {
                   </Col>
                 </Authorize>
                 <Authorize url={SHOP_CENTER} canView={true}>
-                  <Col xxl={6} xl={8} lg={8} md={12} sm={24} xs={24}>
+                  <Col span={4}>
                     <Link to={SHOP_CENTER} className={styles.tagsItem} >
                       <div className={styles.icon}>
                         <img src={create_shop} />
@@ -76,7 +80,7 @@ const ShopCenter: React.FC<Iprops> = () => {
                   </Col>
                 </Authorize>
                 <Authorize url={SHOP_CENTER} canView={true}>
-                  <Col xxl={6} xl={6} lg={6} md={6} sm={24} xs={24}>
+                  <Col span={4}>
                     <Link to={SHOP_CENTER} className={styles.tagsItem} >
                       <div className={styles.icon}>
                         <img src={create_shop} />

src/pages/home/components/Centers/TradeCenter.tsx

@@ -56,12 +56,12 @@ const TradeCenter: React.FC<Iprops> = () => {
                 : Object.keys(requestData).map((record) => {
                     return (
                       <Row key={record} className={styles.row}>
-                        <Col xxl={4} xl={4} lg={24} md={24} sm={24}className={styles.rowTitle}>{KEY_TITLE[record]}</Col>
-                        <Col xxl={20} xl={20} lg={24} md={24} sm={24} className={styles.colRow}>
+                        <Col span={4} className={styles.rowTitle}>{KEY_TITLE[record]}</Col>
+                        <Col span={20} className={styles.colRow}>
                           {
                             requestData[record].map((item, key) => {
                               return (
-                                <Col xxl={4} xl={6} lg={6} md={6} sm={12} xs={24} key={key} className={styles.col}>
+                                <Col span={4} key={key} className={styles.col}>
                                   <div className={styles.colTitle}>{item.name}</div>
                                   {
                                         item.link

src/pages/home/components/UserCenter/index.less

@@ -39,90 +39,98 @@
 
   .content {
     // height: 104px;
+    padding: 24px;
     border-radius: 0px 0px 8px 8px;
     background-color: #fff;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 24px;
+    flex-direction: row;
+    align-items: center;
+    // justify-content: center;
+
+    .userLogo {
+      height: 56px;
+      width: 56px;
+      margin-right: 12px;
+
+      .randomLogo {
+        background-color: #255BA3;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        height: 100%;
+        border-radius: 50%;
+        color: #fff;
+      }
+    }
 
-    .row {
+    .infos {
       display: flex;
       flex-direction: row;
       align-items: center;
+      justify-content: space-between;
+      flex: 1;
+
+      .companyName {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: 12px;
+        .company {
+          font-size: 14px;
+          font-weight: 600;
+          margin-right: 16px;
+        }
 
-      .user {
-        // display: flex;
-        // flex-direction: row;
-        // align-items: center;
-        .pic {
-          width: 56px;
-          height: 56px;
-          margin-right: 12px;
-          border-radius: 50%;
-          // background-color: red;
-          overflow: hidden;
-          img {
-            width: 100%;
-            height: 100%;
-          }
-
-          .randomLogo {
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(135deg, #4981CC 0%, #1A4F97 100%) #255BA3;
-            border-radius: 50%;
-            color: #fff;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            font-size: 18px;
-          }
+        .roles {
+          display: flex;
+          flex-direction: row;
         }
+      }
 
-        .wrapper {
+      .otherValues {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .divider {
+          border-left: 1px solid #EEF0F3;
+          margin-left: 24px;
+          padding-left: 24px;
           display: flex;
-          flex-direction: column;
+          flex-direction: row;
+          align-items: center;
 
-          .company {
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-            .tags {
-              margin-left: 16px;
+          .level {
+            .levelImg {
+              height: 16px;
             }
           }
-        }
 
-        .status {
-          margin-top: 12px;
+          .score {
+            margin: 0 30px;
+          }
         }
       }
-
-      .level {
-        height: 16px;
-      }
-    }
-
-
-  }
-
-  @media (max-width: 576px) {
-    .role {
-      margin: 5px 0;
-    }
-  }
-  @media (max-width: 796px) {
-    .date,
-    .hi {
-      text-overflow: -o-ellipsis-lastline;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-line-clamp: 1;
-      line-clamp: 1;
-      -webkit-box-orient: vertical;
     }
   }
 }
 
+//   @media (max-width: 576px) {
+//     .role {
+//       margin: 5px 0;
+//     }
+//   }
+//   @media (max-width: 796px) {
+//     .date,
+//     .hi {
+//       text-overflow: -o-ellipsis-lastline;
+//       overflow: hidden;
+//       text-overflow: ellipsis;
+//       display: -webkit-box;
+//       -webkit-line-clamp: 1;
+//       line-clamp: 1;
+//       -webkit-box-orient: vertical;
+//     }
+//   }
+// }

src/pages/home/components/UserCenter/index.tsx

@@ -13,7 +13,7 @@ import home_user from '@/assets/imgs/home_user.png';
 interface Iprops {}
 
 const WEEKDAYS = ["天", "一","二", "三", "四", "五","六"];
-const LEVEL_IMAGE = [level1, level2, level3, level4];
+const LEVEL_IMAGE = [level1, level1, level2, level3, level4];
 const EDIT_USER_URL = '/memberCenter/memberAbility/query';
 const USER_CENTER_URL = '/memberCenter/memberAbility/manage/maintain'
 const STATUS_COLOR: ("default" | "processing" | "error" | "success")[] = ["default", "processing", "error", "success"]
@@ -23,7 +23,7 @@ const UserCenter: React.FC<Iprops> = () => {
   const userAuth = getAuth();
   const hasChangeMemberAuth = userAuth?.urls.includes(EDIT_USER_URL);
   const hasCenterAuth = userAuth?.urls.includes(USER_CENTER_URL);
-
+  const currentRole = userAuth.roles.filter((item) => item.memberRoleId === userAuth.memberRoleId)
   if(!userAuth) {
     return null
   }
@@ -44,64 +44,46 @@ const UserCenter: React.FC<Iprops> = () => {
         </div>
       </div>
       <div className={styles.content}>
-        <Row className={styles.row} gutter={[8, 8]}>
-          <Col xxl={14} xl={24} lg={14} md={24} sm={24} xs={24} className={styles.user}>
-            {/* http://10.0.0.25:4000/project/15/interface/api/38926 上传用户头像 */}
-            <Row align={"middle"}>
-              <Col xxl={4} xl={4} lg={4} md={4} sm={4} xs={6}>
-                <div className={styles.pic} >
-                  {
-                    userAuth.logo
-                    ? <img src={userAuth.logo || ''} />
-                    : <div className={styles.randomLogo}>H</div>
-                  }
-
-                </div>
-              </Col>
-              <Col xxl={8}  xl={7} lg={7} md={7} sm={7} xs={18}>
-                <div className={styles.wrapper}>
-                  <div className={styles.company}>
-                    <span>{userAuth.company}</span>
-                  </div>
-                  <div className={styles.status}>
-                    <Badge status={STATUS_COLOR[userAuth.validateStatus]} text={userAuth.validateStatusDesc}></Badge>
-                  </div>
-                </div>
-              </Col>
-              <Col  xxl={8} xl={9} lg={9} md={8} sm={9} xs={24} className={styles.role}>
-                <div className={styles.tags}>
-                  {
-                    userAuth.roles.map((item, key) => {
-                      return (
-                        <div style={{marginRight: '8px'}} key={key}>
-                          <StatusTag type="success"  title={item.memberRoleName} />
-                        </div>
-                      )
-                    })
-                  }
-                </div>
-              </Col>
-              <Col xxl={4} xl={4} lg={4} md={5} sm={4} xs={24} className={styles.role}>
-                <div>
-                  <Link to={EDIT_USER_URL}>修改会员信息</Link>
+        {/* http://10.0.0.25:4000/project/15/interface/api/38926 上传用户头像 */}
+        <div className={styles.userLogo}>
+          {
+            userAuth.logo
+            ? <img src={userAuth.logo || ''} />
+            : <div className={styles.randomLogo}>H</div>
+          }
+        </div>
+        <div className={styles.infos}>
+          <div>
+            <div className={styles.companyName}>
+              <span className={styles.company}>{userAuth.company}</span>
+              <div className={styles.roles}>
+                {
+                  currentRole.map((item, key) => {
+                    const statusList = ["success", "danger", "default", "warning", "nobility", "primary"]
+                    return (
+                      <div style={{marginRight: '16px'}} key={key}>
+                        <StatusTag type={statusList[key]}  title={item.memberRoleName} />
+                      </div>
+                    )
+                  })
+                }
                 </div>
-              </Col>
-            </Row>
-          </Col>
-          <Col xxl={10} xl={24} lg={10} md={24} sm={24}>
-            <Row gutter={[8, 8]} align={"middle"}>
-              <Col xxl={12} lg={12} md={10} sm={10}>
-                <span>会员等级： </span>
-                <img src={LEVEL_IMAGE[userAuth.level]} className={styles.level} />
-              </Col>
-              <Col xxl={6} lg={6} md={10 } sm={10} xs={24}>平台积分: <strong>{userAuth.score}</strong></Col>
-              <Col xxl={6} lg={6} md={4} sm={4} xs={24}>
-                <Link to={USER_CENTER_URL}>进入会员中心</Link>
-              </Col>
-            </Row>
-
-          </Col>
-        </Row>
+            </div>
+            <div className={styles.status}><Badge status={STATUS_COLOR[userAuth.validateStatus]} text={userAuth.validateStatusDesc}></Badge></div>
+          </div>
+          <div className={styles.otherValues}>
+            <Link to={EDIT_USER_URL}>修改会员信息</Link>
+            <div className={styles.divider}>
+              <div className={styles.level}>
+                会员等级： <img src={LEVEL_IMAGE[userAuth.level]} className={styles.levelImg} />
+              </div>
+              <div className={styles.score}>
+                平台积分： <strong>{userAuth.score}</strong>
+              </div>
+              <Link to={USER_CENTER_URL}>进入会员中心</Link>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   )

src/pages/home/index.less

-.grid_container {
-  display: grid;
-}
-.ability {
-  margin-top: 16px;
+.container {
+  display: flex;
+  flex-direction: row;
+  min-width: 1366px;
+
+  .left {
+    flex: 1;
+    .otherCenters {
+      margin-top: 24px;
+    }
+
+    .ability {
+      margin-top: 24px;
+    }
+  }
+  .right {
+    margin-left: 24px;
+    flex-basis: 386px;
+
+    .actions {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 24px;
+
+      .workBench {
+        width: 181px;
+      }
+    }
+
+    .commonMargin {
+      margin-bottom: 24px;
+    }
+  }
 }
+
 .controller {
   background-color: @main-color;
   height: 48px;
@@ -16,6 +47,7 @@
   flex-direction: row;
   margin-left: auto;
   cursor: pointer;
+  width: 181px;
 
   .icon {
     font-size: 22px;
@@ -24,80 +56,3 @@
     margin-left: 8px;
   }
 }
-.advertise {
-  margin-top: 16px;
-}
-
-@media (min-width: 1600px) {
-  .grid_container {
-    // display: grid;
-    // grid-template-columns: 75% 25%;
-    // grid-template-columns: repeat(24, 1fr);
-    // grid-auto-flow: column dense;
-    // grid-column-gap: 16px;
-
-    .top {
-      display: grid;
-      grid-template-columns: repeat(24, 1fr);
-      grid-column-gap: 16px;
-      grid-row-gap: 16px;
-
-      .userCenter {
-        grid-column-start: 1;
-        grid-column-end: 19;
-        grid-row-start: 1;
-      }
-      .actions {
-        grid-column-start: 19;
-        grid-column-end: 25;
-        grid-row-start: 1;
-      }
-      .announce {
-        grid-column-start: 19;
-        grid-column-end: 25;
-        margin-top: -200px;
-      }
-      .recentVisit {
-        grid-column-start: 19;
-        grid-column-end: 25;
-      }
-    }
-  }
-
-  .bottom {
-    display: grid;
-    grid-template-columns: repeat(24, 1fr);
-    grid-column-gap: 16px;
-    grid-row-gap: 16px;
-    .otherCenter {
-      grid-column-start: 1;
-      grid-column-end: 19;
-      grid-row-start: 1;
-      margin-top: -430px;
-    }
-    .anyQuestion {
-      grid-column-start: 19;
-      grid-column-end: 25;
-      margin-top: 16px;
-    }
-    .advertise {
-      grid-column-start: 19;
-      grid-column-end: 25;
-    }
-  }
-
-}
-
-@media (max-width: 1599px) {
-  .userCenter {
-    margin: 16px 0;
-  }
-
-  .recentVisit {
-    margin-top: 16px;
-  }
-}
-
-@media (min-width: 1200px) and (max-width: 1599px) {
-
-}

src/pages/home/index.tsx

@@ -53,64 +53,60 @@ const Home: React.FC<{}> = () => {
 
   return (
     <PageHeaderWrapper>
-      <div style={{minWidth: '1280px'}}>
+      <div >
         <div className={styles.userGuaid} style={{display: visible ? 'none': 'none'}}>
           <UseGuaid/>
         </div>
-        <div className={styles.grid_container}>
-          <div className={styles.top}>
-            <div className={styles.actions}>
-              <Row gutter={24}>
-                <Col span={12}>
-                  <CustomWorkBench
-                    handleChangeOrder={handleChangeOrder}
-                    layouts={layout}
-                  /></Col>
-                <Col span={12}>
-                  <div className={styles.controller} onClick={() => setVisible((state) => !state)}>
-                    <CompassFilled className={styles.icon} />
-                    <span className={styles.text}>使用向导</span>
-                  </div>
-                </Col>
-              </Row>
-            </div>
+        <div className={styles.container}>
+          <div className={styles.left}>
             <div className={styles.userCenter}>
               <UserCenter />
             </div>
-            <div className={styles.announce}>
-              <Row gutter={[24, 12]}>
-                <Col xxl={24} xl={12} lg={12} md={24} sm={24}><LatestAnnounce /></Col>
-                <Col xxl={24} xl={12} lg={12} md={24} sm={24}><RecentVisit /></Col>
-              </Row>
+            <div className={styles.otherCenters}>
+              {
+                layout.map((item) => {
+                  const RenderComponent = ComponentSelect[item.name]
+                  return (
+                    <div
+                      className={styles.ability}
+                      style={{order: item.sort, display: (item.isShow ? 'block' : 'none')}}
+                      key={item.code}
+                    >
+                      {
+                        RenderComponent &&
+                        <RenderComponent />
+                      }
+                    </div>
+                  )
+                })
+              }
             </div>
           </div>
-          <div className={styles.bottom}>
-            <div className={styles.otherCenter}>
-            {
-              layout.map((item) => {
-                const RenderComponent = ComponentSelect[item.name]
-                return (
-                  <div
-                    className={styles.ability}
-                    style={{order: item.sort, display: (item.isShow ? 'block' : 'none')}}
-                    key={item.code}
-                  >
-                    {
-                      RenderComponent &&
-                      <RenderComponent />
-                    }
-                  </div>
-                )
-              })
-            }
+          <div className={styles.right}>
+            <div className={styles.actions}>
+              <div className={styles.workBench}>
+                <CustomWorkBench
+                  handleChangeOrder={handleChangeOrder}
+                  layouts={layout}
+                />
+              </div>
+              <div className={styles.controller} onClick={() => setVisible((state) => !state)}>
+                <CompassFilled className={styles.icon} />
+                <span className={styles.text}>使用向导</span>
+              </div>
             </div>
-            <div className={styles.anyQuestion}>
+            <div className={styles.commonMargin}>
+              <LatestAnnounce />
+            </div>
+            <div className={styles.commonMargin}>
+              <RecentVisit />
+            </div>
+            <div className={styles.commonMargin}>
               <AnyQuestion />
-              <div className={styles.advertise}>
-                <AdvertisementContainer />
-              </div>
             </div>
-
+            <div className={styles.commonMargin}>
+              <AdvertisementContainer />
+            </div>
           </div>
         </div>