'update

src/pages/index/index.jsx

@@ -151,8 +151,24 @@ const Index = () => {
 
     { cityName: "荆州", img: jingzhou, type: "item", dom: "" },
   ]);
+  const isMobile = () => {
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+
+    // 检查常见移动设备的 userAgent
+    if (/android/i.test(userAgent)) {
+      return true;
+    }
+    if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
+      return true;
+    }
+    return false;
+  };
 
   const [oldcityList, setoldCityList] = useState(cityList);
+  const [mobile, setMobile] = useState(false); //是否移动端
+  useEffect(() => {
+    setMobile(isMobile());
+  }, []);
 
   // 定义屏幕宽度
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
@@ -214,11 +230,28 @@ const Index = () => {
           )}
         </View>
       </View> */}
-      <View className="up">
+
-        <View className="upText">
+      {!mobile ? (
-          📣数字游民CNA,是针对中国用户的城市数据统计
+        <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>
         </View>
-      </View>
+      ) : null}
+
       <View className="items">
         {/* 数组尽量是4的倍数 */}
         {/* 随着屏幕变化,改变自定义数组的索引/顺序 */}

src/pages/index/index.scss

@@ -1,38 +1,57 @@
+
 .Index {
   font-size: 16px;
-  padding: 20px;
+  // padding: 20px;
   display: flex;
   flex-direction: column;
   background-color: #fafafa;
 
-  .header{
+  .header {
-    .headerTag{
+    .headerTag {
       // height: 100%;
       display: flex;
       flex-direction: row;
       align-items: center;
       // justify-content: space-between;
-      .AtTag{
+      .AtTag {
         margin-right: 10px;
-
       }
     }
   }
   .up {
-    width: 100%;
+    // width: 100%;
-    min-height: 100px;
+    padding: 100px;
-    // background-color: red;
+    min-height: 400px;
+    color: #fff;
+    display: flex;
+    flex-direction: row;
+    // align-items: center;
+    justify-content: space-between;
     margin-bottom: 20px;
-    border-radius: 1%;
+    // border-radius: 1%;
-    background-color: #fff;
+    // background-color: #fff;
+    background-color: #1f1f1f;
+    // clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
     .upText {
-      // width: 100%;
+      width: 700px;
-      padding: 40px;
+      // padding: 100px;
       font-size: 20px;
+      margin-right: 10px;
+      .title {
+        font-size: 40px;
+      }
     }
+    .nomadvideo {
+      width: 300px;
+      height: 300px;
+      background-color: yellow;
+    }
+
   }
   .items {
     height: 100%;
+    padding: 20px;
+
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -47,7 +66,6 @@
       animation: pulse 0.6s ease;
     }
 
-    
     .item {
       flex-grow: 1; /* 自动增长填充空间 */
       flex-basis: 260px; /* 基本宽度为 300px，元素数量随可用空间调整 */
@@ -146,3 +164,8 @@
     color: aqua;
   }
 }
+@media (max-width: 1000px) {
+  .Index .nomadvideo{
+    display: none;
+  }
+}