update

src/pages/index/index.jsx

@@ -46,6 +46,7 @@ const Index = () => {
 
   return (
     <View className="Index">
+      <View className="up"></View>
       <View className="items">
         {/* 数组尽量是4的倍数 */}
         {[
@@ -57,15 +58,6 @@ const Index = () => {
           { a: 1, b: 2 },
           { a: 1, b: 2 },
           { a: 1, b: 2 },
-          { a: 1, b: 2 },
-          { a: 1, b: 2 },
-          { a: 1, b: 2 },
-          { a: 1, b: 2 },
-          { a: 1, b: 2 },
-          { a: 1, b: 2 },
-          { a: 1, b: 2 },
-          { a: 1, b: 2 },
-
         ].map((item, index) => {
           return <View className="item"></View>;
         })}

src/pages/index/index.scss

@@ -2,36 +2,33 @@
   font-size: 16px;
   padding: 20px;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  .up {
+    width: 100%;
+    height: 200px;
+    background-color: red;
+    margin-bottom: 20px;
+  }
   .items {
-    // width: 80%;
-    // height: 200px;
-    // background-color: yellow;
     display: flex;
     flex-direction: row;
     align-items: center;
     // justify-content: space-between;
     flex-wrap: wrap;
     gap: 20px; /* 设置元素之间的间隔 */
+    // padding-left: 10px; /* 确保两侧固定边距 */
+    // padding-right: 10px;
     background-color: aqua;
+
     .item {
-      // min-width: 300px;
+      flex-grow: 1; /* 自动增长填充空间 */
-      max-width: 350px;
+      flex-basis: 280px; /* 基本宽度为 300px，元素数量随可用空间调整 */
-      width: 270px;
+      max-width: 350px; /* 设置最大宽度 */
-      height: 300px;
+      // width: 100%; /* 确保可以响应式变化 */
-      flex-grow: 1;
+      height: 258px;
       background-color: yellow;
-      // margin-right: 20px;
+      margin-bottom: 20px;
-      margin-bottom: 40px;
+      border-radius: 5%;
     }
   }
-
-  .right {
-    width: 400px;
-    display: flex;
-    // flex: 1;
-    // width: 20%;
-    height: 100%;
-    background-color: red;
-  }
 }