's'

src/pages/index/index.jsx

@@ -52,7 +52,6 @@ import nomadPoster from "../../images/nomadPoster.jpg";
 import qrcodeoffice from "../../images/qrcodeoffice.jpg";
 import qrcode_planet from "../../images/qrcode_planet.jpg";
 
-
 import yintian from "../../images/cloud/yintian.png";
 import taiyang from "../../images/cloud/taiyang.png";
 import xiayu from "../../images/cloud/xiayu.png";
@@ -228,7 +227,7 @@ const Index = () => {
       const newCityList = _.cloneDeep(cityList);
 
       const custDomIndex = newCityList.findIndex(
-        (item) => item.cityName === "custDom"
+        (item) => item.cityName === "custDom",
       );
 
       if (custDomIndex !== -1) {
@@ -248,7 +247,6 @@ const Index = () => {
 
   return (
     <View className="Index">
-
       {/* <Nav></Nav> */}
 
       {/* <View className="header">
@@ -275,7 +273,6 @@ const Index = () => {
 
       {/* {!mobile ? ( */}
       <View className="up">
-
         <View className="upText">
           <span className="title">📣成为数字游民,并旅居在任何地方</span>
           <br />
@@ -322,9 +319,11 @@ const Index = () => {
                 onClick={() => {
                   // setqrOpen(true);
                   // 在手机/微信
-                  isWeChat ? Taro.navigateTo({
+                  isWeChat
-                    url: "/pages/salon/index",
+                    ? Taro.navigateTo({
-                  }) : setqrOpen(true)
+                      url: "/pages/salon/index",
+                    })
+                    : setqrOpen(true);
                 }}
               >{`加入社群💬`}</AtButton>
             </View>
@@ -367,13 +366,42 @@ const Index = () => {
       {/* <View className="items"> */}
       {/* <View className="itemsLeft"> */}
       <View className="items">
-
         {/* 右侧固定内容，放前面 */}
-        <View className="rightItem">11</View>
+        <View className="rightItem">
-        <View className="rightItem">22</View>
+          <View className="newMembers">
-        <View className="rightItem">33</View>
+            <View className="newMembersUp">新加入成员</View>
-
+          <View className="AvatarView">
-
+            {[
+              { image: girla },
+              { image: avatar },
+              { image: girlb },
+              { image: cat },
+              { image: girl },
+              { image: boya },
+              { image: touxiang },
+              { image: girlc },
+              { image: boyb },
+              { image: girla },
+              { image: avatar },
+              { image: girlb },
+              { image: cat },
+              { image: girl },
+              { image: boya }
+            ].map((item, index) => {
+              return (
+                // <AtAvatar
+                //   className="Avatar"
+                //   circle
+                //   image={item?.image}
+                // ></AtAvatar>
+                <Image className="Avatar" mode="heightFix" src={item?.image} />
+              );
+            })}
+          </View>
+          </View>
+        </View>
+        {/* <View className="rightItem">22</View> */}
+        {/* <View className="rightItem">33</View> */}
 
         {/* 数组尽量是4的倍数 */}
         {/* 随着屏幕变化,改变自定义数组的索引/顺序 */}
@@ -392,8 +420,7 @@ const Index = () => {
                 </View>
                 {/* 城市名 */}
                 <View className="itemiddle"> {item.cityName}</View>
-                <View className="itemDown">
+                <View className="itemDown"></View>
-                </View>
                 <LazyLoadImage
                   alt="Sample"
                   src={item.img}
@@ -406,7 +433,6 @@ const Index = () => {
             );
           }
         })}
-
       </View>
       {/* <View className="itemsRight"><View className="rightItem">11</View><View className="rightItem">22</View><View className="rightItem">33</View></View> */}
       {/* </View> */}
@@ -425,7 +451,6 @@ const Index = () => {
               mode="heightFix"
               // src={qrcode_planet}
               src={qrsalon}
-
             />
           </View>
         </AtModalContent>

src/pages/index/index.scss

@@ -123,16 +123,16 @@
     }
   }
 
-
-
-
-
   .items {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
+    // grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
+
     /* 核心改动：前面自适应列 + 最后一列固定 260px 给 rightItem */
     grid-auto-rows: 280px;
+    // grid-auto-rows: 220px;
     gap: 40px;
+    // gap: 30px;
     padding: 20px;
     box-sizing: border-box;
     // background-color: #f5222d;
@@ -143,6 +143,8 @@
     }
     .item {
       height: 280px;
+      // height: 240px;
+
       border-radius: 15px;
       position: relative;
       color: white;
@@ -226,7 +228,9 @@
     }
 
     .rightItem {
+      // padding: 20px;
       height: 280px;
+      // height: 240px;
       border-radius: 15px;
       position: relative;
       color: white;
@@ -235,7 +239,43 @@
       min-width: 260px; // 保证最小宽度不被挤掉
       // max-width: 340px; // 最大宽度
       box-sizing: border-box;
-      background-color: yellow;
+      // background-color: yellow;
+      border: 1px solid black;
+      .newMembers {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        color: black;
+        .newMembersUp {
+          width: 100%;
+          height: 40px;
+          // background-color: #f5222d;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          border-bottom: 1px solid black;
+        }
+        .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: 6px;
+            margin-bottom: 20px;
+            border: 2px solid #fff;
+            border-radius: 50%;
+          }
+        }
+      }
     }
 
     /* 保证右侧永远在最后一列 */
@@ -254,121 +294,6 @@
     }
   }
 
-  .items11 {
-    height: 100%;
-    padding: 20px;
-    // background-color: #ff4d4f;
-
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 30px; /* 设置元素之间的间隔 */
-
-    // padding-left: 10px; /* 确保两侧固定边距 */
-    // padding-right: 10px;
-    // background-color: aqua;
-
-    .item:hover {
-      animation: pulse 0.6s ease;
-    }
-
-    .item {
-      flex-grow: 1; /* 自动增长填充空间 */
-      flex-basis: 260px; /* 基本宽度为 300px，元素数量随可用空间调整 */
-
-      // flex: 1 1 260px; /* 自动增长并设置基础宽度为 260px，确保元素均匀分布 */
-      max-width: 330px; /* 设置最大宽度 */
-      // max-width: 350px; /* 设置最大宽度 */
-
-      // max-width: 280px; /* 设置最大宽度 */
-      // width: 100%; /* 确保可以响应式变化 */
-      height: 280px;
-      // background-color: yellow;
-      margin-bottom: 20px;
-      border-radius: 5%;
-      position: relative;
-      color: white;
-
-      .weBook {
-        height: 100%;
-      }
-      .weGroup {
-        height: 100%;
-      }
-
-      .itemUp {
-        margin-top: 10px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        z-index: 1;
-        width: 100%;
-        height: 20px;
-        position: absolute;
-        top: 0px;
-        .itemUpleft {
-          height: 100%;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          // justify-content: center;
-          font-size: 20px;
-          margin-left: 10px;
-          // background-color: yellow;
-        }
-        .itemUpright {
-          margin-right: 10px;
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          // justify-content: center;
-          .itemUprightWifi {
-            margin-left: 10px;
-          }
-        }
-      }
-      .itemiddle {
-        font-size: 30px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: center;
-        z-index: 1;
-        width: 100%;
-        height: 20px;
-        // background-color: green;
-        position: absolute;
-        top: 50%;
-      }
-      .itemDown {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        z-index: 1;
-        width: 100%;
-        height: 20px;
-        // background-color: red;
-        position: absolute;
-        bottom: 10px;
-        margin-bottom: 10px;
-        .itemDownleft {
-          margin-left: 10px;
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          // justify-content: space-between;
-        }
-        .itemDownright {
-          margin-right: 10px;
-        }
-      }
-    }
-  }
-
   .custDom {
     width: 100%;
     height: 40px;