'homepage'

src/pages/index/index.jsx

@@ -1,6 +1,6 @@
 import { Component } from "react";
 import Taro from "@tarojs/taro";
-import { View, Text, Image, Button } from "@tarojs/components";
+import { View, Text, Image, Button, Video } from "@tarojs/components";
 import "./index.scss";
 import { AtTabBar } from "taro-ui";
 import React, { useCallback, useEffect, useState } from "react";
@@ -231,26 +231,42 @@ const Index = () => {
         </View>
       </View> */}
 
-      {!mobile ? (
-        <View className="up">
-          <View className="upText">
-            <span className="title">📣成为数字游民,并旅居在任何地方</span>
-            <br />
-            nomadcna.com，代表着目前中国各地远程生活和工作的数字游民，不局限于某一处
-            <br />
-            🍹每年在 100 多个城市 参加聚会
-            <br />
-            ❤️结识新朋友，约会
-            <br />
-            🧪研究目的地并找到最适合居住和工作的地方
-            <br />
-            🌎追踪你的旅行，记录你去过的地方
-            <br />
-            💬加入微信群，在旅途中找到你的社区
-          </View>
-          <View className="nomadvideo">video</View>
+      {/* {!mobile ? ( */}
+      <View className="up">
+        <View className="upText">
+          <span className="title">📣成为数字游民,并旅居在任何地方</span>
+          <br />
+          nomadcna.com，代表着目前中国各地远程生活和工作的数字游民，不局限于某一处
+          <br />
+          🍹每年在 30 多个城市 参加聚会
+          <br />
+          ❤️结识新朋友，约会
+          <br />
+          🧪研究目的地并找到最适合居住和工作的地方
+          <br />
+          🌎追踪你的旅行，记录你去过的地方
+          <br />
+          💬加入微信群，在旅途中找到你的社区
         </View>
-      ) : null}
+        <View className="nomadvideo">
+          <Video
+            className="videoDom"
+            id="video"
+            src="https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
+            poster={guangzhou}
+            initialTime={0}
+            controls={true}
+            autoplay={false}
+            loop={false}
+            muted={false}
+            floatingMode={"page"}
+          />
+          <View className="jonNomad">
+            <AtButton className="jonNomadBtn" type="primary" size="small">{`踏上游牧之旅->`}</AtButton>
+          </View>
+        </View>
+      </View>
+      {/* ) : null} */}
 
       <View className="items">
         {/* 数组尽量是4的倍数 */}

src/pages/index/index.scss

@@ -1,4 +1,3 @@
-
 .Index {
   font-size: 16px;
   // padding: 20px;
@@ -21,7 +20,7 @@
   .up {
     // width: 100%;
     padding: 100px;
-    min-height: 400px;
+    // min-height: 400px;
     color: #fff;
     display: flex;
     flex-direction: row;
@@ -42,11 +41,45 @@
       }
     }
     .nomadvideo {
-      width: 300px;
-      height: 300px;
-      background-color: yellow;
+      display: flex;
+      flex-direction: column;
+      // align-items: center;
+      // justify-content: space-between;
+      width: 400px;
+      // height: 300px;
+      background-color: #fafafa;
+      padding: 20px;
+      border-radius: 15px;
+      // position: absolute;
+      .videoDom {
+        width: 100%;
+        height: 200px;
+        // background-color: aquamarine;
+        position: relative;
+      }
+      .jonNomad {
+        margin-top: 10px;
+        width: 100%;
+        height: 50px;
+        font-size: 40px !important;
+        // background-color: yellow;
+        // position: relative;
+        .jonNomadBtn {
+          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; /* 悬浮时的字体颜色 */
+        }
+      }
     }
-
   }
   .items {
     height: 100%;
@@ -164,8 +197,15 @@
     color: aqua;
   }
 }
-@media (max-width: 1000px) {
-  .Index .nomadvideo{
+
+@media (max-width: 2000px) {
+  .Index .nomadvideo {
+    display: none !important;
+  }
+  .Index .videoDom {
     display: none;
   }
-}
+  .Index .jonNomad {
+    display: none;
+  }
+}