Merge branch 'dev' of http://10.0.0.22:3000/lingxi/lingxi-business-paltform into dev

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

@@ -39,7 +39,7 @@
 //   }
 // }
 .advertisementSpace {
-  width: 386px;
+  margin-bottom: 16px;
   height: 217px;
   .img {
     width: 100%;

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

@@ -2,6 +2,7 @@
   padding: 24px;
   background-color: #fff;
   border-radius: 8px;
+  height: 361px;
   .header {
     display: flex;
     flex-direction: row;
@@ -25,6 +26,10 @@
       display: flex;
       flex-direction: row;
       align-items: center;
+      &:last-of-type {
+        margin-bottom: 0px;
+      }
+
       .date {
         margin-right: 16px;
         padding: 2px 6px;
@@ -42,6 +47,13 @@
       }
       .content {
         cursor: pointer;
+        text-overflow: -o-ellipsis-lastline;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
       }
     }
   }

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

@@ -2,6 +2,7 @@
   background-color: #fff;
   padding: 24px;
   border-radius: 8px;
+  height: 235px;
 
   .header {
     .title {

src/pages/home/index.less

-.userGuaid {
-  margin-bottom: 24px;
+.grid_container {
+  display: grid;
 }
-
-.main {
-  // display: flex;
-  // flex-direction: row;
-
-  .mainSide {
-    // flex: 1;
-    // display: flex;
-    // flex-direction: column;
-    .ability {
-      margin-top: 24px;
-    }
-  }
-
-  .rightSide {
-    .actions {
-      display: flex;
-    }
-
-    .announce {
-      margin-top: 24px;
-    }
-
-    .controller {
+.ability {
+  margin-top: 16px;
+}
+.controller {
   background-color: @main-color;
   height: 48px;
   display: flex;
@@ -43,6 +23,78 @@
   .text {
     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: -425px;
+    }
+    .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;
+  }
+}
+

src/pages/home/index.tsx

@@ -57,12 +57,35 @@ const Home: React.FC<{}> = () => {
         <div className={styles.userGuaid} style={{display: visible ? 'none': 'none'}}>
           <UseGuaid/>
         </div>
-        <div className={styles.main}>
-          <Row gutter={[16,16]}>
-            <Col className={styles.mainSide}  sm={24} md={24} lg={24} xl={16} xxl={18}>
-              <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.userCenter}>
               <UserCenter />
             </div>
+            <div className={styles.announce}>
+              <LatestAnnounce />
+            </div>
+            <div className={styles.recentVisit}>
+              <RecentVisit />
+            </div>
+          </div>
+          <div className={styles.bottom}>
+            <div className={styles.otherCenter}>
             {
               layout.map((item) => {
                 const RenderComponent = ComponentSelect[item.name]
@@ -80,36 +103,16 @@ const Home: React.FC<{}> = () => {
                 )
               })
             }
-            </Col>
-            <Col className={styles.rightSide} sm={24} md={24} lg={24} xl={8} xxl={6}>
-              <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 className={styles.announce}>
-                <LatestAnnounce />
-              </div>
-              <div className={styles.announce}>
-                <RecentVisit />
             </div>
-              <div className={styles.announce}>
+            <div className={styles.anyQuestion}>
               <AnyQuestion />
             </div>
-              <div className={styles.announce}>
+            <div className={styles.advertise}>
               <AdvertisementContainer />
             </div>
-            </Col>
-          </Row>
           </div>
+        </div>
+
       </>
     </PageHeaderWrapper>
   )