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; + } }