diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx
index 5085064..0a3cb5d 100644
--- a/src/pages/index/index.jsx
+++ b/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 = () => {
{/* 数组尽量是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 ;
+ return (
+
+ itemUp
+ itemiddle
+ itemDown
+
+
+ );
})}
{/* 22 */}
diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss
index fd2f219..3c88744 100644
--- a/src/pages/index/index.scss
+++ b/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;
+ }
}
}
}