style: 调整css布局/央视

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: "北京",
-      { cityName: "广州", imagePath: guangzhou },
+        imagePath: beijing,
-      { cityName: "深圳", imagePath: shenzhen },
+        isCustom: false,
-      { cityName: "深圳", imagePath: shenzhen },
+        customCom: "test",
-      { cityName: "深圳", imagePath: shenzhen },
+      },
-      { cityName: "深圳", imagePath: shenzhen },
+      // 双数插入
-
+      {
+        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,6 +100,7 @@ export default function Index() {
           style={{ marginRight: index % 2 != 1 ? "10px" : "0px" }}
           className="homeCardItem"
         >
+          {!item.isCustom ? (
             <View className="homeCard">
               {/* 城市封面图片 */}
               <Image
@@ -74,6 +114,9 @@ export default function Index() {
                 src={item.imagePath}
               />
             </View>
+          ) : (
+            item.customCom
+          )}
         </View>
       );
     });
@@ -93,6 +136,7 @@ export default function Index() {
 
   return (
     <View className="index">
+      <View className="indexHome">
         {/* 顶部 */}
         <View className="indexHeader">
           {/* 头像 */}
@@ -133,7 +177,7 @@ export default function Index() {
         </View>
 
         <View className="tabbbarDiv"></View>
-
+      </View>
       {/* 底部tabbar */}
       <View className="tabbbar">
         <AtTabBar

src/pages/index/index.scss

@@ -1,8 +1,8 @@
 .index {
+  .indexHome {
     padding-left: 20px;
     padding-right: 20px;
     background-color: aquamarine;
-
     .indexHeader {
       margin-top: 10px;
       display: flex;
@@ -42,16 +42,15 @@
           border-radius: 20px;
           // margin-left:20px;
         }
-     
       }
       .homeCardDiv {
         width: 30px;
         height: 100%;
-      background-color: blue;
+        // background-color: blue;
+      }
+    }
   }
 
-  
-  }
   .tabbbarDiv {
     width: 100%;
     height: 140px;