'首页样式'

src/pages/index/index.jsx

@@ -72,6 +72,8 @@ 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 wechatGroup from "../../images/wechatGroup.jpg";
 import nomad from "../../images/nomad.mp4";
 
@@ -86,7 +88,19 @@ 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;
+    }
+  };
   // 自定义组件模版
   const custDom = () => {
     return <View className="custDom">custDom</View>;
@@ -140,24 +154,24 @@ const Index = () => {
     { cityName: "鹤岗", img: hegang, type: "item", dom: "" },
     { cityName: "北京", img: beijing, type: "item", dom: "" },
     { cityName: "上海", img: shanghai, type: "item", dom: "" },
-    {
+    // {
-      cityName: "custDom",
+    //   cityName: "custDom",
-      img: shenzhen,
+    //   img: shenzhen,
-      type: "custom",
+    //   type: "custom",
-      dom: weGroup(),
+    //   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: "" },
@@ -298,7 +312,7 @@ const Index = () => {
           <br />
           🌎追踪你的旅行，记录你去过的地方
           <br />
-          💬加入社群，在旅途中找到你的社区
+          💬加入社群，在旅途中找到你的归属
           {!!mobile ? (
             <View className="upjonNomad">
               <AtButton
@@ -308,13 +322,9 @@ const Index = () => {
                 onClick={() => {
                   // setqrOpen(true);
                   // 在手机/微信
-                  Taro.navigateTo({
+                  isWeChat ? Taro.navigateTo({
                     url: "/pages/salon/index",
-                    // url: "/pages/meetup/index",
+                  }) : setqrOpen(true)
-                    // url: "pages/meetup/Detail/index",
-                    // url: "/pages/my/index",
-
-                  });
                 }}
               >{`加入社群💬`}</AtButton>
             </View>
@@ -342,11 +352,11 @@ const Index = () => {
               size="small"
               onClick={() => {
                 // 如果在PC浏览器
-                // setqrOpen(true);
+                setqrOpen(true);
                 // 在手机/微信
-                Taro.navigateTo({
+                // Taro.navigateTo({
-                  url: "/pages/salon/index",
+                //   url: "/pages/salon/index",
-                });
+                // });
               }}
             >{`加入社群💬`}</AtButton>
           </View>
@@ -354,7 +364,17 @@ const Index = () => {
       </View>
       {/* ) : null} */}
 
+      {/* <View className="items"> */}
+      {/* <View className="itemsLeft"> */}
       <View className="items">
+
+        {/* 右侧固定内容，放前面 */}
+        <View className="rightItem">11</View>
+        <View className="rightItem">22</View>
+        <View className="rightItem">33</View>
+
+
+
         {/* 数组尽量是4的倍数 */}
         {/* 随着屏幕变化,改变自定义数组的索引/顺序 */}
         {cityList.map((item, index) => {
@@ -368,39 +388,12 @@ 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}
-                /> */}
                 <LazyLoadImage
                   alt="Sample"
                   src={item.img}
@@ -413,8 +406,10 @@ const Index = () => {
             );
           }
         })}
-      </View>
 
+      </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 +419,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}
+
             />
           </View>
         </AtModalContent>

src/pages/index/index.scss

@@ -124,15 +124,141 @@
   }
 
   .items {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
+    grid-auto-rows: 280px;
+    gap: 30px;
+    padding: 20px;
+    box-sizing: border-box;
+    // background-color: #f5222d;
+    .item:hover {
+      animation: pulse 0.6s ease;
+    }
+    .item {
+      height: 280px;
+      border-radius: 15px;
+      position: relative;
+      color: white;
+      width: 100%;
+      box-sizing: border-box;
+      .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;
+        }
+      }
+    }
+
+    .rightItem {
+      height: 280px;
+      border-radius: 15px;
+      position: relative;
+      color: white;
+      overflow: hidden;
+      width: 100%;
+      min-width: 260px; // 保证最小宽度不被挤掉
+      max-width: 340px; // 最大宽度
+      box-sizing: border-box;
+      background-color: yellow;
+    }
+
+    /* 保证右侧永远在最后一列 */
+    .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;
+    }
+  }
+
+  .items11 {
     height: 100%;
     padding: 20px;
+    // background-color: #ff4d4f;
 
     display: flex;
     flex-direction: row;
     align-items: center;
-    // justify-content: space-between;
+    justify-content: center;
     flex-wrap: wrap;
     gap: 30px; /* 设置元素之间的间隔 */
+
     // padding-left: 10px; /* 确保两侧固定边距 */
     // padding-right: 10px;
     // background-color: aqua;
@@ -144,8 +270,11 @@
     .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;