1

project/src/pages/detail2/detail2.jsx

@@ -9,11 +9,15 @@ class Detail2 extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      resList: resList,
+      resList: resList
     };
   }
 
   render() {
+    const arr = [];
+    for(let i=0; i < 20;i++) {
+      arr.push(i)
+    }
     return (
       <div className="detail2 " uuid="c5abc304-1a0b-4804-956a-d61c1d5b75ed">
         <div className="detail2_wrapper" uuid="583667d9-e382-49d8-bfc9-50b6d800c794">
@@ -24,28 +28,26 @@ class Detail2 extends Component {
           />
           <div className="detail2_item_list" uuid="3804f60d-697f-4d68-98b5-ca8cf2e2d3ba">
             {
-              [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => {
-                return (
-                  <div className="detail2_item " uuid="4d8289ea-9464-4a92-a81c-3e24c364e707">
-                    <span className="detail2_item_title " uuid="48b63d65-a3d8-4b94-b979-3fcb19c9d89c">
-                      每日签到{i}
-                    </span>
-                    <span className="detail2_item_day " uuid="5e6c50df-f25c-4b91-acc7-95d4829ff7db">
-                      2020-12-25 09:54:30
+              arr.map((i) => (
+                <div className="detail2_item " uuid="4d8289ea-9464-4a92-a81c-3e24c364e707">
+                  <span className="detail2_item_title " uuid="48b63d65-a3d8-4b94-b979-3fcb19c9d89c">
+                    每日签到{i}
+                  </span>
+                  <span className="detail2_item_day " uuid="5e6c50df-f25c-4b91-acc7-95d4829ff7db">
+                    2020-12-25 09:54:30
               </span>
-                    <span className="detail2_item_num " uuid="e576e938-d57d-4101-82bc-c0b0782033c9">
-                      +418
+                  <span className="detail2_item_num " uuid="e576e938-d57d-4101-82bc-c0b0782033c9">
+                    +418
               </span>
-                    <img
-                      className="detail2_item_bg "
-                      uuid="46e8b6fd-f561-445c-85eb-be7136ea5183"
-                      src={this.state.resList['eed0f2f8-74ef-4680-a29c-d5db6818738f'].url}
-                    />
-                  </div>
-                )
-              })
-            }
+                  <img
+                    className="detail2_item_bg "
+                    uuid="46e8b6fd-f561-445c-85eb-be7136ea5183"
+                    src={this.state.resList['eed0f2f8-74ef-4680-a29c-d5db6818738f'].url}
+                  />
+                </div>
 
+              ))
+            }
           </div>
         </div>
       </div>

project/src/pages/detail2/detail2.less

@@ -9,23 +9,30 @@
   .detail2_wrapper {
     width: 100%;
     height: 100%;
-    overflow: auto;
+    overflow: hidden;
+    display: flex;
+    flex-direction: row;
+    background-color: transparent;
     .detail2_bg {
       width: 750px;
       height: 1624px;
       position: absolute;
-      left: -2px;
+      left: 0px;
       top: 0px;
+      z-index: -1;
       transform-origin: 0 0 0;
     }
     .detail2_item_list {
+      background-color: red;
       width: 100%;
-      height: auto;
-      padding-top: 214px;
+      // height: 100%;
+      flex: 1;
+      margin-top: 214px;
+      display: flex;
+      flex-flow: row wrap;
+      align-content: flex-start;
+      overflow-y: scroll;
       .detail2_item {
-        display: flex;
-        justify-content: center;
-        align-items: center;
         margin-left:63px;
         position: relative;
         box-sizing: border-box;