diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx
index 0a3cb5d..06408ca 100644
--- a/src/pages/index/index.jsx
+++ b/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 custDom;
+ };
+
return (
{/* 数组尽量是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 (
-
- itemUp
- itemiddle
- itemDown
-
-
- );
+ if (item.type === "custom") {
+ return {item.dom};
+ } else {
+ return (
+
+ itemUp
+ itemiddle
+ itemDown
+
+
+ );
+ }
})}
{/* 22 */}
diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss
index 3c88744..7ee0e5a 100644
--- a/src/pages/index/index.scss
+++ b/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;
+ }
}