From f75a861cc1ca8e4e793524eb84b2f494a078f113 Mon Sep 17 00:00:00 2001
From: hackrobot <xiaoshuang.eric@gmail.com>
Date: Tue, 19 Mar 2024 17:38:39 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4css=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80/=E5=A4=AE=E8=A7=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/index.jsx  | 166 +++++++++++++++++++++++--------------
 src/pages/index/index.scss |  91 ++++++++++----------
 2 files changed, 150 insertions(+), 107 deletions(-)

diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx
index 732cdc7..924c0a9 100644
--- a/src/pages/index/index.jsx
+++ b/src/pages/index/index.jsx
@@ -44,16 +44,55 @@ export default function Index() {
     // });
   }, []);
 
+  const CustomTest = () => {
+    return <View>自定义组件</View>;
+  };
+
   const HomeCardItem = () => {
     return [
-      { cityName: "北京", imagePath: beijing },
-      { cityName: "上海", imagePath: shanghai },
-      { cityName: "广州", imagePath: guangzhou },
-      { cityName: "深圳", imagePath: shenzhen },
-      { cityName: "深圳", imagePath: shenzhen },
-      { cityName: "深圳", imagePath: shenzhen },
-      { cityName: "深圳", imagePath: shenzhen },
-
+      {
+        cityName: "北京",
+        imagePath: beijing,
+        isCustom: false,
+        customCom: "test",
+      },
+      // 双数插入
+      {
+        cityName: "上海",
+        imagePath: shanghai,
+        isCustom: true,
+        customCom: <CustomTest />,
+      },
+      {
+        cityName: "上海",
+        imagePath: shanghai,
+        isCustom: false,
+        customCom: "test",
+      },
+      {
+        cityName: "上海",
+        imagePath: shanghai,
+        isCustom: true,
+        customCom: <CustomTest />,
+      },
+      {
+        cityName: "广州",
+        imagePath: guangzhou,
+        isCustom: false,
+        customCom: "test",
+      },
+      {
+        cityName: "上海",
+        imagePath: shanghai,
+        isCustom: true,
+        customCom: <CustomTest />,
+      },
+      {
+        cityName: "深圳",
+        imagePath: shenzhen,
+        isCustom: false,
+        customCom: "test",
+      },
     ].map((item, index) => {
       return (
         // 设置自动换行
@@ -61,19 +100,23 @@ export default function Index() {
           style={{ marginRight: index % 2 != 1 ? "10px" : "0px" }}
           className="homeCardItem"
         >
-          <View className="homeCard">
-            {/* 城市封面图片 */}
-            <Image
-              style={{
-                width: "100%",
-                height: "100%",
-                background: " #fff",
-                borderRadius: "10px",
-              }}
-              mode="scaleToFill"
-              src={item.imagePath}
-            />
-          </View>
+          {!item.isCustom ? (
+            <View className="homeCard">
+              {/* 城市封面图片 */}
+              <Image
+                style={{
+                  width: "100%",
+                  height: "100%",
+                  background: " #fff",
+                  borderRadius: "10px",
+                }}
+                mode="scaleToFill"
+                src={item.imagePath}
+              />
+            </View>
+          ) : (
+            item.customCom
+          )}
         </View>
       );
     });
@@ -93,47 +136,48 @@ export default function Index() {
 
   return (
     <View className="index">
-      {/* 顶部 */}
-      <View className="indexHeader">
-        {/* 头像 */}
-        <AtAvatar circle image={touxiang}></AtAvatar>
-        {/* color="#F00" */}
-        <AtIcon value="chevron-down" size="30"></AtIcon>
-        <AtButton
-          type="primary"
-          onClick={() => {
-            Taro.request({
-              url: " http://172.19.0.1:8082/test", //仅为示例，并非真实的接口地址
-              method: "POST",
-              data: {
-                openid: "111",
-                wxid: "22",
-              },
-              header: {
-                "content-type": "application/json", // 默认值
-              },
-              success: function (res) {
-                console.log(res.data);
-              },
-            });
-          }}
-        >
-          发起请求
-        </AtButton>
+      <View className="indexHome">
+        {/* 顶部 */}
+        <View className="indexHeader">
+          {/* 头像 */}
+          <AtAvatar circle image={touxiang}></AtAvatar>
+          {/* color="#F00" */}
+          <AtIcon value="chevron-down" size="30"></AtIcon>
+          <AtButton
+            type="primary"
+            onClick={() => {
+              Taro.request({
+                url: " http://172.19.0.1:8082/test", //仅为示例，并非真实的接口地址
+                method: "POST",
+                data: {
+                  openid: "111",
+                  wxid: "22",
+                },
+                header: {
+                  "content-type": "application/json", // 默认值
+                },
+                success: function (res) {
+                  console.log(res.data);
+                },
+              });
+            }}
+          >
+            发起请求
+          </AtButton>
+        </View>
+
+        {/* 省份标签 */}
+        <View className="provinceTag">
+          <ProvinceTag />
+        </View>
+
+        {/* 城市列表 */}
+        <View className="homeCards">
+          <HomeCardItem />
+        </View>
+
+        <View className="tabbbarDiv"></View>
       </View>
-
-      {/* 省份标签 */}
-      <View className="provinceTag">
-        <ProvinceTag />
-      </View>
-
-      {/* 城市列表 */}
-      <View className="homeCards">
-        <HomeCardItem />
-      </View>
-
-      <View className="tabbbarDiv"></View>
-
       {/* 底部tabbar */}
       <View className="tabbbar">
         <AtTabBar
diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss
index 3075388..5e4429f 100644
--- a/src/pages/index/index.scss
+++ b/src/pages/index/index.scss
@@ -1,57 +1,56 @@
 .index {
-  padding-left: 20px;
-  padding-right: 20px;
-  background-color: aquamarine;
-
-  .indexHeader {
-    margin-top: 10px;
-    display: flex;
-    flex-direction: row;
-    // justify-content: space-between;
-    align-items: center;
-    margin-bottom: 10px;
-  }
-
-  .provinceTag {
-    display: flex;
-    flex-direction: row;
-    // justify-content: space-between;
-    align-items: center;
-    margin-bottom: 10px;
-  }
-
-  .homeCards {
-    display: flex;
-    // flex-direction: column;
-    flex-direction: row;
-    flex-wrap: wrap;
-
-    .homeCardItem {
+  .indexHome {
+    padding-left: 20px;
+    padding-right: 20px;
+    background-color: aquamarine;
+    .indexHeader {
       margin-top: 10px;
-      width: 340px;
-      height: 250px;
       display: flex;
       flex-direction: row;
-      background-color: aqua;
       // justify-content: space-between;
-      // align-items: center;
-      .homeCard {
-        width: 100%;
-        height: 100%;
-        background-color: yellow;
-        border-radius: 20px;
-        // margin-left:20px;
-      }
-     
-    }
-    .homeCardDiv{
-      width: 30px;
-      height: 100%;
-      background-color: blue;
+      align-items: center;
+      margin-bottom: 10px;
     }
 
-  
+    .provinceTag {
+      display: flex;
+      flex-direction: row;
+      // justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+    }
+
+    .homeCards {
+      display: flex;
+      // flex-direction: column;
+      flex-direction: row;
+      flex-wrap: wrap;
+
+      .homeCardItem {
+        margin-top: 10px;
+        width: 340px;
+        height: 250px;
+        display: flex;
+        flex-direction: row;
+        background-color: aqua;
+        // justify-content: space-between;
+        // align-items: center;
+        .homeCard {
+          width: 100%;
+          height: 100%;
+          background-color: yellow;
+          border-radius: 20px;
+          // margin-left:20px;
+        }
+      }
+      .homeCardDiv {
+        width: 30px;
+        height: 100%;
+        // background-color: blue;
+      }
+    }
   }
+
   .tabbbarDiv {
     width: 100%;
     height: 140px;