update

src/pages/index/index.jsx

@@ -28,38 +28,41 @@ import beijing from "../../images/beijing.jpg";
 import shanghai from "../../images/shanghai.jpg";
 import shenzhen from "../../images/shenzhen.jpg";
 
-
 // export default class Index extends Component {
 const Index = () => {
   const [current, setcurrent] = useState(0);
 
+  const custDom = () => {
+    return <View className="custDom">custDom</View>;
+  };
+
   return (
     <View className="Index">
       <View className="up"></View>
       <View className="items">
         {/* 数组尽量是4的倍数 */}
         {[
-          { 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 },
+          { img: beijing, type: "item", dom: "" },
+          { img: shanghai, type: "item", dom: "" },
+          { img: shenzhen, type: "custom", dom: custDom() },
+          { img: shenzhen, type: "item", dom: "" },
         ].map((item, index) => {
-          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>
-          );
+          if (item.type === "custom") {
+            return <View className="item"> {item.dom}</View>;
+          } else {
+            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:0"
+                  // mode="heightFix"
+                  src={item.img}
+                />
+              </View>
+            );
+          }
         })}
       </View>
       {/* <View className="right">22</View> */}

src/pages/index/index.scss

@@ -26,12 +26,13 @@
       max-width: 350px; /* 设置最大宽度 */
       // width: 100%; /* 确保可以响应式变化 */
       height: 280px;
-      // background-color: yellow;
+      background-color: yellow;
       margin-bottom: 20px;
       border-radius: 5%;
       position: relative;
       color: white;
       .itemUp {
+        z-index: 1;
         width: 100%;
         height: 20px;
         background-color: burlywood;
@@ -39,6 +40,7 @@
         top: 0px;
       }
       .itemiddle {
+        z-index: 1;
         width: 100%;
         height: 20px;
         // background-color: green;
@@ -46,6 +48,7 @@
         top: 50%;
       }
       .itemDown {
+        z-index: 1;
         width: 100%;
         height: 20px;
         // background-color: red;
@@ -54,4 +57,11 @@
       }
     }
   }
+
+  .custDom {
+    width: 100%;
+    height: 40px;
+    background-color: red;
+    color: aqua;
+  }
 }