's'

src/index.html

@@ -6,11 +6,13 @@
       content="width=device-width,initial-scale=1,user-scalable=no"
       name="viewport"
     />
+    
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-touch-fullscreen" content="yes" />
     <meta name="format-detection" content="telephone=no,address=no" />
     <meta name="apple-mobile-web-app-status-bar-style" content="white" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+
     <title>数字游民CNA</title>
     <!-- <link rel="icon" href="./images/nomadcna.ico" type="image/x-icon" /> -->
     <!-- <link rel="icon" href="/static/images/images/cloud/nomadcna-192.png" type="image/png" /> -->

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";
@@ -72,6 +71,10 @@ import boya from "../../images/Avatar/boya.jpg";
 import boyb from "../../images/Avatar/boyb.jpg";
 
 import nomadBook from "../../images/nomadBook.jpg";
+import qrsalon from "../../images/qrsalon.png";
+import meetupsalon from "../../images/meetupsalon.png";
+import wechat from "../../images/wechat.png";
+
 import wechatGroup from "../../images/wechatGroup.jpg";
 import nomad from "../../images/nomad.mp4";
 
@@ -86,7 +89,23 @@ import "react-lazy-load-image-component/src/effects/blur.css";
 const Index = () => {
   const [current, setcurrent] = useState(0);
   const [qrOpen, setqrOpen] = useState(false);
+  const [isWeChat, setisWeChat] = useState(false);
 
+  // 是否在微信客户端
+  const isWeChatFun = () => {
+    var ua = navigator.userAgent.toLowerCase();
+    if (ua.indexOf("micromessenger") != -1) {
+      setisWeChat(true);
+      return true;
+    } else {
+      setisWeChat(false);
+      return false;
+    }
+  };
+
+  useEffect(() => {
+    isWeChatFun();
+  }, []);
   // 自定义组件模版
   const custDom = () => {
     return <View className="custDom">custDom</View>;
@@ -140,24 +159,24 @@ const Index = () => {
     { cityName: "鹤岗", img: hegang, type: "item", dom: "" },
     { cityName: "北京", img: beijing, type: "item", dom: "" },
     { cityName: "上海", img: shanghai, type: "item", dom: "" },
-    {
-      cityName: "custDom",
-      img: shenzhen,
-      type: "custom",
-      dom: weGroup(),
-    },
+    // {
+    //   cityName: "custDom",
+    //   img: shenzhen,
+    //   type: "custom",
+    //   dom: weGroup(),
+    // },
 
     { cityName: "深圳", img: shenzhen, type: "item", dom: "" },
-    {
-      cityName: "custDom",
-      img: shenzhen,
-      type: "custom",
-      dom: weBook(),
-    },
+
     { cityName: "广州", img: guangzhou, type: "item", dom: "" },
     { cityName: "武汉", img: wuhan, type: "item", dom: "" },
     { cityName: "杭州", img: hangzhou, type: "item", dom: "" },
-
+    // {
+    //   cityName: "custDom",
+    //   img: shenzhen,
+    //   type: "custom",
+    //   dom: weBook(),
+    // },
     { cityName: "成都", img: chengdu, type: "item", dom: "" },
     { cityName: "南京", img: nanjing, type: "item", dom: "" },
     { cityName: "西安", img: xian, type: "item", dom: "" },
@@ -214,7 +233,7 @@ const Index = () => {
       const newCityList = _.cloneDeep(cityList);
 
       const custDomIndex = newCityList.findIndex(
-        (item) => item.cityName === "custDom"
+        (item) => item.cityName === "custDom",
       );
 
       if (custDomIndex !== -1) {
@@ -234,7 +253,6 @@ const Index = () => {
 
   return (
     <View className="Index">
-
       {/* <Nav></Nav> */}
 
       {/* <View className="header">
@@ -261,7 +279,6 @@ const Index = () => {
 
       {/* {!mobile ? ( */}
       <View className="up">
-
         <View className="upText">
           <span className="title">📣成为数字游民,并旅居在任何地方</span>
           <br />
@@ -281,11 +298,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} />
               );
             })}
@@ -298,7 +310,7 @@ const Index = () => {
           <br />
           🌎追踪你的旅行，记录你去过的地方
           <br />
-          💬加入社群，在旅途中找到你的社区
+          💬加入社群，在旅途中找到你的归属
           {!!mobile ? (
             <View className="upjonNomad">
               <AtButton
@@ -308,13 +320,11 @@ const Index = () => {
                 onClick={() => {
                   // setqrOpen(true);
                   // 在手机/微信
-                  Taro.navigateTo({
-                    url: "/pages/salon/index",
-                    // url: "/pages/meetup/index",
-                    // url: "pages/meetup/Detail/index",
-                    // url: "/pages/my/index",
-
-                  });
+                  isWeChat
+                    ? Taro.navigateTo({
+                        url: "/pages/salon/index",
+                      })
+                    : setqrOpen(true);
                 }}
               >{`加入社群💬`}</AtButton>
             </View>
@@ -342,11 +352,11 @@ const Index = () => {
               size="small"
               onClick={() => {
                 // 如果在PC浏览器
-                // setqrOpen(true);
+                setqrOpen(true);
                 // 在手机/微信
-                Taro.navigateTo({
-                  url: "/pages/salon/index",
-                });
+                // Taro.navigateTo({
+                //   url: "/pages/salon/index",
+                // });
               }}
             >{`加入社群💬`}</AtButton>
           </View>
@@ -354,7 +364,100 @@ const Index = () => {
       </View>
       {/* ) : null} */}
 
+      {/* <View className="items"> */}
+      {/* <View className="itemsLeft"> */}
       <View className="items">
+        {/* 右侧固定内容，放前面 */}
+
+        <View
+          className="rightItem"
+          onClick={() => {
+            // 在手机/微信
+            isWeChat
+              ? Taro.navigateTo({
+                  url: "/pages/salon/index",
+                })
+              : setqrOpen(true);
+          }}
+        >
+          <View className="rightItemcontent">
+            <View className="rightItemtitle">加入聊天</View>
+            <View className="chat">
+              <Image className="chatImg" mode="heightFix" src={wechat} />
+            </View>
+          </View>
+        </View>
+
+        <View className="rightItem">
+          <View className="rightItemcontent">
+            <View className="rightItemtitle">新成员</View>
+            <View className="AvatarView">
+              {[
+                { image: girla },
+                { image: avatar },
+                { image: girlb },
+                { image: cat },
+                { image: girl },
+                { image: boya },
+                { image: touxiang },
+                { image: girlc },
+                { image: boyb },
+              ].map((item, index) => {
+                return (
+                  <Image
+                    className="Avatar"
+                    mode="heightFix"
+                    src={item?.image}
+                  />
+                );
+              })}
+            </View>
+          </View>
+        </View>
+
+        <View
+          className="rightItem"
+          onClick={() => {
+            // 在手机/微信
+            isWeChat
+              ? Taro.navigateTo({
+                  url: "/pages/salon/index",
+                })
+              : setqrOpen(true);
+          }}
+        >
+          <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> */}
+
         {/* 数组尽量是4的倍数 */}
         {/* 随着屏幕变化,改变自定义数组的索引/顺序 */}
         {cityList.map((item, index) => {
@@ -368,39 +471,11 @@ const Index = () => {
                   {/* 序列号 */}
                   <View className="itemUpleft">
                     <View>{index + 1}</View>
-                    {/* <View>_</View> */}
                   </View>
-                  {/* 网速 */}
-                  {/* <View className="itemUpright">
-                    <Image
-                      style="width: 20px;height: 20px;"
-                      mode="heightFix"
-                      src={wifi}
-                    />
-                    <View className="itemUprightWifi">70mps</View>
-                  </View> */}
                 </View>
                 {/* 城市名 */}
                 <View className="itemiddle"> {item.cityName}</View>
-                <View className="itemDown">
-                  {/* 温度 */}
-                  {/* <View className="itemDownleft">
-                    <Image
-                      style="width: 30px;height: 30px;"
-                      mode="heightFix"
-                      src={taiyang}
-                    />
-                    <span> 29度</span>
-                  </View> */}
-                  {/* 消费 */}
-                  {/* <View className="itemDownright">¥1545/月</View> */}
-                </View>
-                {/* 0;opacity: 0.93; */}
-                {/* <Image
-                  style="width: 100%;height: 100%;background: #fff;border-radius: 5%;z-index:0;filter: contrast(0.9);"
-                  // mode="heightFix"
-                  src={item.img}
-                /> */}
+                <View className="itemDown"></View>
                 <LazyLoadImage
                   alt="Sample"
                   src={item.img}
@@ -414,7 +489,8 @@ const Index = () => {
           }
         })}
       </View>
-
+      {/* <View className="itemsRight"><View className="rightItem">11</View><View className="rightItem">22</View><View className="rightItem">33</View></View> */}
+      {/* </View> */}
       <AtModal
         isOpened={qrOpen}
         closeOnClickOverlay={true}
@@ -424,11 +500,13 @@ const Index = () => {
         <AtModalContent>
           <View className="qrcode">
             {/* ,加入💬微信群 */}
-            <View>扫码关注公众号</View>
+            <View>立即报名</View>
             <Image
               style="width: 200px;height: 200px;"
               mode="heightFix"
-              src={qrcode_planet}
+              // src={qrcode_planet}
+              // src={qrsalon}
+              src={meetupsalon}
             />
           </View>
         </AtModalContent>

src/pages/index/index.scss

@@ -124,37 +124,32 @@
   }
 
   .items {
-    height: 100%;
-    padding: 20px;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
+    // grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
 
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    // justify-content: space-between;
-    flex-wrap: wrap;
-    gap: 30px; /* 设置元素之间的间隔 */
-    // padding-left: 10px; /* 确保两侧固定边距 */
-    // padding-right: 10px;
-    // background-color: aqua;
+    /* 核心改动：前面自适应列 + 最后一列固定 260px 给 rightItem */
+    grid-auto-rows: 280px;
+    // grid-auto-rows: 220px;
+    gap: 40px;
+    // gap: 30px;
+    padding: 20px;
+    box-sizing: border-box;
+    // background-color: #f5222d;
+    //  grid-auto-columns: 0; // ⛔ 禁止 Grid 偷偷造列
 
     .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: 280px; /* 设置最大宽度 */
-      // width: 100%; /* 确保可以响应式变化 */
       height: 280px;
-      // background-color: yellow;
-      margin-bottom: 20px;
-      border-radius: 5%;
+      // height: 240px;
+
+      border-radius: 15px;
       position: relative;
       color: white;
-
+      width: 100%;
+      box-sizing: border-box;
       .weBook {
         height: 100%;
       }
@@ -231,6 +226,138 @@
         }
       }
     }
+
+    // css动画
+    .rightItem:hover {
+      animation: pulse 0.6s ease;
+    }
+
+    .rightItem {
+      height: 280px;
+      border-radius: 15px;
+      position: relative;
+      color: white;
+      overflow: hidden;
+      width: 100%;
+      min-width: 260px; // 保证最小宽度不被挤掉
+      box-sizing: border-box;
+      border: 1px solid black;
+
+      .rightItemcontent {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        color: black;
+        // background-color: #ff4d4f;
+        .rightItemtitle {
+          width: 100%;
+          height: 44px;
+          font-size: 16px;
+          font-weight: 600;
+          letter-spacing: 0.5px;
+
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          background: linear-gradient(90deg, #ff4d4f, #ff7a45);
+          color: #fff;
+        }
+
+        // 加入聊天
+        .chat {
+          // padding: 20px;
+          // background-color: yellow;
+          width: 100%;
+          .chatImg {
+            width: 280px;
+            // height: 100%;
+          }
+        }
+
+        // 新成员
+        .AvatarView {
+          padding: 20px;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          .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;
+            border-radius: 50%;
+          }
+        }
+      }
+    }
+
+    /* 保证右侧永远在最后一列 */
+    .rightItem:nth-child(1) {
+      grid-column: -1;
+      grid-row: 1;
+    }
+
+    .rightItem:nth-child(2) {
+      grid-column: -1;
+      grid-row: 2;
+    }
+    .rightItem:nth-child(3) {
+      grid-column: -1;
+      grid-row: 3;
+    }
   }
 
   .custDom {

src/pages/salon/index.tsx

@@ -254,13 +254,13 @@ const Salon = () => {
     try {
       await submitApplicationFirst(submitData);
 
-      Taro.showToast({
-        title: "申请已提交，正在跳转支付（88元场地管理费）",
-        icon: "loading",
-        duration: 3000,
-      });
+      // Taro.showToast({
+      //   title: "申请已提交，正在跳转支付（88元场地管理费）",
+      //   icon: "loading",
+      //   duration: 3000,
+      // });
 
-      payh5("meetup", 88);
+      payh5("meetup", 28800);
     } catch {
       // 提交失败已提示
     }