feat:加入微信群

src/pages/index/index.jsx

@@ -45,8 +45,34 @@ export default function Index() {
     // });
   }, []);
 
+  // 自定义组件
   const CustomTest = () => {
-    return <View>自定义组件</View>;
+    return (
+      <View className="CustomTest">
+        <View className="CustomHeader">🥂加入微信群-meetup</View>
+        {/* <View className="CustomAvatar">
+          <AtAvatar
+            className="AtAvatar"
+            circle
+            image={touxiang}
+            size="small"
+          ></AtAvatar>
+        </View> */}
+        <View className="CustomAvatar">
+          {[1, 2, 3, 4,5,6,7].map((item, index) => {
+            return (
+              <AtAvatar
+                className="AtAvatar"
+                circle
+                image={touxiang}
+                size="small"
+              ></AtAvatar>
+            );
+          })}
+        </View>
+        {/* <View>查看更多</View> */}
+      </View>
+    );
   };
 
   const HomeCardItem = () => {
@@ -58,12 +84,12 @@ export default function Index() {
         customCom: "test",
       },
       // 双数插入
-      // {
-      //   cityName: "上海",
-      //   imagePath: shanghai,
-      //   isCustom: true,
-      //   customCom: <CustomTest />,
-      // },
+      {
+        cityName: "上海",
+        imagePath: shanghai,
+        isCustom: true,
+        customCom: <CustomTest />,
+      },
       {
         cityName: "上海",
         imagePath: shanghai,

src/pages/index/index.scss

@@ -26,6 +26,43 @@
       flex-direction: row;
       flex-wrap: wrap;
 
+      .CustomTest {
+        padding: 10px;
+        font-size: 25px;
+        width: 320px;
+        height: 230px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        // justify-content: center;
+        // background-color: red;
+        border-radius: 20px;
+        border: solid 1px;
+        .CustomHeader {
+          width: 100%;
+          height: 60px;
+          // background-color: yellow;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+        }
+        .CustomAvatar {
+          width: 100%;
+          // height: 60px;
+          // background-color: green;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          flex-wrap: wrap;
+          .AtAvatar {
+            width: 70px;
+            height: 70px;
+            margin-right: 5px;
+          }
+        }
+      }
+
       .homeCardItem {
         margin-top: 10px;
         width: 340px;