'首页样式'

2026-02-03 00:13:14 -06:00
parent 23857919dd
commit 444754286a
3 changed files with 181 additions and 55 deletions
--- a/src/images/qrsalon.png
+++ b/src/images/qrsalon.png
--- a/src/pages/index/index.jsx
+++ b/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",
-      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: "" },
@@ -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",
-                    // url: "pages/meetup/Detail/index",
-                    // url: "/pages/my/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,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>
--- a/src/pages/index/index.scss
+++ b/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;