's'

2026-02-03 04:27:49 -06:00
parent 9a22d87017
commit 1b3bbb715c
2 changed files with 87 additions and 137 deletions
--- a/src/pages/index/index.jsx
+++ b/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({
-                    url: "/pages/salon/index",
-                  }) : setqrOpen(true)
+                  isWeChat
+                    ? Taro.navigateTo({
+                      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">22</View>
-        <View className="rightItem">33</View>
-
-
+        <View className="rightItem">
+          <View className="newMembers">
+            <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>
+                <View className="itemDown"></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>
--- a/src/pages/index/index.scss
+++ b/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;