'ss'

src/pages/index/index.jsx

@@ -46,9 +46,10 @@ import zhengzhou from "../../images/zhengzhou.jpg";
 import haikou from "../../images/haikou.jpg";
 import hegang from "../../images/hegang.jpg";
 
+// 视频封面图
 import nomadPoster from "../../images/nomadPoster.jpg";
-
+// 公众号二维码
-
+import qrcodeoffice from "../../images/qrcodeoffice.jpg";
 
 import yintian from "../../images/cloud/yintian.png";
 import taiyang from "../../images/cloud/taiyang.png";
@@ -62,7 +63,6 @@ import nomadBook from "../../images/nomadBook.jpg";
 import wechatGroup from "../../images/wechatGroup.jpg";
 import nomad from "../../images/nomad.mp4";
 
-
 import IndexDetail from "./componments/IndexDetail/index";
 
 import { LazyLoadImage } from "react-lazy-load-image-component";
@@ -71,6 +71,7 @@ import "react-lazy-load-image-component/src/effects/blur.css";
 // export default class Index extends Component {
 const Index = () => {
   const [current, setcurrent] = useState(0);
+  const [qrOpen, setqrOpen] = useState(false);
 
   // 自定义组件模版
   const custDom = () => {
@@ -213,6 +214,10 @@ const Index = () => {
     }
   }, [windowWidth]);
 
+  const closeModal = () => {
+    setqrOpen(false); // 关闭模态框
+  };
+
   return (
     <View className="Index">
       {/* <View className="header">
@@ -253,7 +258,20 @@ const Index = () => {
           🌎追踪你的旅行，记录你去过的地方
           <br />
           💬加入微信群，在旅途中找到你的社区
+          {!!mobile ? (
+            <View className="upjonNomad">
+              <AtButton
+                className="upjonNomadBtn"
+                type="primary"
+                size="small"
+                onClick={() => {
+                  setqrOpen(true);
+                }}
+              >{`踏上游牧之旅->`}</AtButton>
+            </View>
+          ) : null}
         </View>
+
         <View className="nomadvideo">
           <Video
             className="videoDom"
@@ -269,7 +287,14 @@ const Index = () => {
             objectFit={"contain"}
           />
           <View className="jonNomad">
-            <AtButton className="jonNomadBtn" type="primary" size="small">{`踏上游牧之旅->`}</AtButton>
+            <AtButton
+              className="jonNomadBtn"
+              type="primary"
+              size="small"
+              onClick={() => {
+                setqrOpen(true);
+              }}
+            >{`踏上游牧之旅->`}</AtButton>
           </View>
         </View>
       </View>
@@ -281,7 +306,7 @@ const Index = () => {
         {cityList.map((item, index) => {
           if (item.type === "custom") {
             // 根据屏幕变化,添加自定义组件
-            return <View className="item"> {item.dom}</View>;
+            // return <View className="item"> {item.dom}</View>;
           } else {
             return (
               <View className="item">
@@ -336,6 +361,27 @@ const Index = () => {
         })}
       </View>
 
+      <AtModal
+        isOpened={qrOpen}
+        closeOnClickOverlay={true}
+        onClose={closeModal}
+      >
+        {/* <AtModalHeader>标题</AtModalHeader> */}
+        <AtModalContent>
+          <View className="qrcode">
+            <View>扫码关注公众号,加入💬微信群</View>
+            <Image
+              style="width: 200px;height: 200px;"
+              mode="heightFix"
+              src={qrcodeoffice}
+            />
+          </View>
+        </AtModalContent>
+        {/* <AtModalAction>
+          <Button>取消</Button> <Button>确定</Button>{" "}
+        </AtModalAction> */}
+      </AtModal>
+
       <IndexDetail></IndexDetail>
       {/* <View className="right">22</View> */}
     </View>

src/pages/index/index.scss

@@ -39,6 +39,28 @@
       .title {
         font-size: 40px;
       }
+      .upjonNomad {
+        margin-top: 10px;
+        width: 100%;
+        height: 50px;
+        font-size: 40px !important;
+        // background-color: yellow;
+        // position: relative;
+        .upjonNomadBtn {
+          height: 50px;
+          font-size: 24px ;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          background-color: #ff4d4f;
+          border-color: #ff4d4f;
+          // justify-content: space-between;
+        }
+        .jonNomadBtn:hover {
+          background-color: #ffffff; /* 悬浮时的背景色 */
+          color: #f5222d; /* 悬浮时的字体颜色 */
+        }
+      }
     }
     .nomadvideo {
       display: flex;
@@ -196,16 +218,25 @@
     background-color: red;
     color: aqua;
   }
+
+  .qrcode{
+    font-size: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
 }
 
 @media (max-width: 2000px) {
   .Index .nomadvideo {
     display: none !important;
   }
-  .Index .videoDom {
+}
-    display: none;
+
-  }
+@media (min-width: 2000px) {
-  .Index .jonNomad {
+  .Index .upjonNomad {
-    display: none;
+    display: none !important;
   }
 }
+