diff --git a/src/pages/index/index.jsx b/src/pages/index/index.jsx index b2cd34e..ceda46a 100644 --- a/src/pages/index/index.jsx +++ b/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 = () => { )} */} - - - 📣数字游民CNA,是针对中国用户的城市数据统计 + + {!mobile ? ( + + + 📣成为数字游民,并旅居在任何地方 +
+ nomadcna.com,代表着目前中国各地远程生活和工作的数字游民,不局限于某一处 +
+ 🍹每年在 100 多个城市 参加聚会 +
+ ❤️结识新朋友,约会 +
+ 🧪研究目的地并找到最适合居住和工作的地方 +
+ 🌎追踪你的旅行,记录你去过的地方 +
+ 💬加入微信群,在旅途中找到你的社区 +
+ video
-
+ ) : null} + {/* 数组尽量是4的倍数 */} {/* 随着屏幕变化,改变自定义数组的索引/顺序 */} diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss index 0c6ae86..4d27b0f 100644 --- a/src/pages/index/index.scss +++ b/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{ - .headerTag{ + .header { + .headerTag { // height: 100%; display: flex; flex-direction: row; align-items: center; // justify-content: space-between; - .AtTag{ + .AtTag { margin-right: 10px; - } } } .up { - width: 100%; - min-height: 100px; - // background-color: red; + // width: 100%; + padding: 100px; + min-height: 400px; + color: #fff; + display: flex; + flex-direction: row; + // align-items: center; + justify-content: space-between; margin-bottom: 20px; - border-radius: 1%; - background-color: #fff; + // border-radius: 1%; + // background-color: #fff; + background-color: #1f1f1f; + // clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%); .upText { - // width: 100%; - padding: 40px; + width: 700px; + // 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; + } +} \ No newline at end of file