's'

src/pages/index/index.jsx

@@ -74,7 +74,6 @@ import nomadBook from "../../images/nomadBook.jpg";
 import qrsalon from "../../images/qrsalon.png";
 import meetupsalon from "../../images/meetupsalon.png";
 
-
 import wechatGroup from "../../images/wechatGroup.jpg";
 import nomad from "../../images/nomad.mp4";
 
@@ -104,8 +103,8 @@ const Index = () => {
   };
 
   useEffect(() => {
-    isWeChatFun()
+    isWeChatFun();
-  }, [])
+  }, []);
   // 自定义组件模版
   const custDom = () => {
     return <View className="custDom">custDom</View>;
@@ -298,11 +297,6 @@ const Index = () => {
               { image: boyb },
             ].map((item, index) => {
               return (
-                // <AtAvatar
-                //   className="Avatar"
-                //   circle
-                //   image={item?.image}
-                // ></AtAvatar>
                 <Image className="Avatar" mode="heightFix" src={item?.image} />
               );
             })}
@@ -327,8 +321,8 @@ const Index = () => {
                   // 在手机/微信
                   isWeChat
                     ? Taro.navigateTo({
-                      url: "/pages/salon/index",
+                        url: "/pages/salon/index",
-                    })
+                      })
                     : setqrOpen(true);
                 }}
               >{`加入社群💬`}</AtButton>
@@ -374,8 +368,8 @@ const Index = () => {
       <View className="items">
         {/* 右侧固定内容，放前面 */}
         <View className="rightItem">
-          <View className="newMembers">
+          <View className="rightItemcontent">
-            <View className="newMembersUp">新加入成员</View>
+            <View className="rightItemtitle">新加入成员</View>
             <View className="AvatarView">
               {[
                 { image: girla },
@@ -392,20 +386,49 @@ const Index = () => {
                 { image: girlb },
                 { image: cat },
                 { image: girl },
-                { image: boya }
+                { image: boya },
               ].map((item, index) => {
                 return (
-                  // <AtAvatar
+                  <Image
-                  //   className="Avatar"
+                    className="Avatar"
-                  //   circle
+                    mode="heightFix"
-                  //   image={item?.image}
+                    src={item?.image}
-                  // ></AtAvatar>
+                  />
-                  <Image className="Avatar" mode="heightFix" src={item?.image} />
                 );
               })}
             </View>
           </View>
         </View>
+        <View className="rightItem">
+          <View className="rightItemcontent">
+            <View className="rightItemtitle">最新活动</View>
+            <View className="meetup">
+              <View className="meetupDate">活动时间: 2026年3月1日</View>
+              <View className="meetupGps">活动地点: 深圳市</View>{" "}
+              <View className="meetupNum">活动人数: 8人</View>{" "}
+              {/* <View className="meetupDate">活动时间: 2026年3月1日</View> */}
+              <View className="meetupAvatarView">
+                {[
+                  { image: girla },
+                  { image: avatar },
+                  { image: girlb },
+                  { image: cat },
+                  { image: girl },
+                  { image: boya },
+                  { image: touxiang },
+                ].map((item, index) => {
+                  return (
+                    <Image
+                      className="Avatar"
+                      mode="heightFix"
+                      src={item?.image}
+                    />
+                  );
+                })}
+              </View>
+            </View>
+          </View>
+        </View>
         {/* <View className="rightItem">22</View> */}
         {/* <View className="rightItem">33</View> */}
 
@@ -458,7 +481,6 @@ const Index = () => {
               // src={qrcode_planet}
               // src={qrsalon}
               src={meetupsalon}
-
             />
           </View>
         </AtModalContent>

src/pages/index/index.scss

@@ -227,48 +227,101 @@
       }
     }
 
+    // css动画
+    .rightItem:hover {
+      animation: pulse 0.6s ease;
+    }
+
     .rightItem {
-      // padding: 20px;
       height: 280px;
-      // height: 240px;
       border-radius: 15px;
       position: relative;
       color: white;
       overflow: hidden;
       width: 100%;
       min-width: 260px; // 保证最小宽度不被挤掉
-      // max-width: 340px; // 最大宽度
       box-sizing: border-box;
-      // background-color: yellow;
       border: 1px solid black;
-      .newMembers {
+
+      .rightItemcontent {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         color: black;
-        .newMembersUp {
+        // background-color: #ff4d4f;
+        .rightItemtitle {
           width: 100%;
-          height: 40px;
+          height: 44px;
-          // background-color: #f5222d;
+          font-size: 16px;
+          font-weight: 600;
+          letter-spacing: 0.5px;
+
           display: flex;
-          flex-direction: row;
           align-items: center;
           justify-content: center;
-          border-bottom: 1px solid black;
+
+          background: linear-gradient(90deg, #ff4d4f, #ff7a45);
+          color: #fff;
         }
         .AvatarView {
           padding: 20px;
-          margin-top: 10px;
-          margin-bottom: 10px;
           display: flex;
           flex-direction: row;
           flex-wrap: wrap;
-          // align-items: center;
-          // justify-content: space-between;
           .Avatar {
             width: 40px;
             height: 40px;
+            margin-right: 5px;
+            margin-bottom: 20px;
+            border: 2px solid #fff;
+            border-radius: 50%;
+          }
+        }
+        /* ===== 活动信息区 ===== */
+        .meetup {
+          flex: 1;
+          padding: 20px 18px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          gap: 14px;
+          font-size: 14px;
+        }
+
+        .meetupDate,
+        .meetupGps,
+        .meetupNum {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          // padding: 10px 12px;
+          border-radius: 10px;
+          background: #f5f6f7;
+          color: #333;
+          font-weight: 500;
+        }
+
+        .meetupDate::before {
+          content: "🗓";
+        }
+
+        .meetupGps::before {
+          content: "📍";
+        }
+
+        .meetupNum::before {
+          content: "👥";
+        }
+
+        .meetupAvatarView {
+          // padding: 20px;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          .Avatar {
+            width: 34px;
+            height: 34px;
             margin-right: 6px;
             margin-bottom: 20px;
             border: 2px solid #fff;