update

src/pages/index/index.jsx

@@ -24,21 +24,10 @@ import { AtToast } from "taro-ui";
 import { AtIcon } from "taro-ui";
 import { VIEW } from "@tarojs/runtime";
 import "animate.css";
-import touxiang from "../../images/touxiang.png";
-import cat from "../../images/cat.jpg";
-import girl from "../../images/girl.jpg";
+import beijing from "../../images/beijing.jpg";
+import shanghai from "../../images/shanghai.jpg";
+import shenzhen from "../../images/shenzhen.jpg";
 
-import emoji from "../../images/emoji.png";
-import phone from "../../images/phone.png";
-import robot from "../../images/robot.png";
-import nomad from "../../images/nomad.png";
-import book from "../../images/book.png";
-import qrcode from "../../images/qrcode.png";
-
-import meetup from "../../images/meetup.jpg";
-import bookqr from "../../images/bookqr.jpg";
-import loft from "../../images/loft.png";
-import AIGC from "../../images/AIGC.png";
 
 // export default class Index extends Component {
 const Index = () => {
@@ -50,16 +39,27 @@ const Index = () => {
       <View className="items">
         {/* 数组尽量是4的倍数 */}
         {[
-          { 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 },
+          { img: beijing, b: 2 },
+          { img: shanghai, b: 2 },
+          { img: shenzhen, b: 2 },
+          // { img: shanghai, b: 2 },
+          // { img: shanghai, b: 2 },
+          // { img: shanghai, b: 2 },
+          // { img: shanghai, b: 2 },
+          // { img: shanghai, b: 2 },
         ].map((item, index) => {
-          return <View className="item"></View>;
+          return (
+            <View className="item">
+              <View className="itemUp"> itemUp</View>
+              <View className="itemiddle"> itemiddle</View>
+              <View className="itemDown">itemDown </View>
+              <Image
+                style="width: 100%;height: 100%;background: #fff;border-radius: 5%;z-index:-99"
+                // mode="heightFix"
+                src={item.img}
+              />
+            </View>
+          );
         })}
       </View>
       {/* <View className="right">22</View> */}

src/pages/index/index.scss

@@ -18,17 +18,40 @@
     gap: 20px; /* 设置元素之间的间隔 */
     // padding-left: 10px; /* 确保两侧固定边距 */
     // padding-right: 10px;
-    background-color: aqua;
+    // background-color: aqua;
 
     .item {
       flex-grow: 1; /* 自动增长填充空间 */
       flex-basis: 280px; /* 基本宽度为 300px，元素数量随可用空间调整 */
       max-width: 350px; /* 设置最大宽度 */
       // width: 100%; /* 确保可以响应式变化 */
-      height: 258px;
-      background-color: yellow;
+      height: 280px;
+      // background-color: yellow;
       margin-bottom: 20px;
       border-radius: 5%;
+      position: relative;
+      color: white;
+      .itemUp {
+        width: 100%;
+        height: 20px;
+        background-color: burlywood;
+        position: absolute;
+        top: 0px;
+      }
+      .itemiddle {
+        width: 100%;
+        height: 20px;
+        // background-color: green;
+        position: absolute;
+        top: 50%;
+      }
+      .itemDown {
+        width: 100%;
+        height: 20px;
+        // background-color: red;
+        position: absolute;
+        bottom: 0px;
+      }
     }
   }
 }