diff --git a/src/pages/ranger/index.tsx b/src/pages/ranger/index.tsx index 196aa0670c46..15a6a79260c1 100644 --- a/src/pages/ranger/index.tsx +++ b/src/pages/ranger/index.tsx @@ -11,7 +11,9 @@ import { Navigation,Pagination } from 'swiper/modules'; import 'swiper/swiper-bundle.css'; import { useState, useRef, useEffect } from 'react' import ThirdPartyComponent from './_components/map'; +import { judgeIsMobile } from '../../utils/jsUtils'; import './style.css' + function getImgUrl(str) { return `https://files.seeedstudio.com/wiki/ranger/${str}.png` } @@ -206,7 +208,7 @@ function getData(key) { return res.data }) } -const rangerPersonRender = () => { +const rangerPersonRender = (isMobile) => { const [list, setList] = useState([]); function queryData() { getData('wiki-ranger-person').then((rangerList) => { @@ -228,7 +230,7 @@ const rangerPersonRender = () => { modules={[Navigation,Pagination]} autoplay={true} navigation - slidesPerView={2} // 每次显示的幻灯片数量 + slidesPerView={isMobile?1:2} // 每次显示的幻灯片数量 spaceBetween={40} pagination={{ clickable: true }} // 显示分页器 > @@ -253,7 +255,7 @@ const rangerPersonRender = () => { ) } -const blogPersonRender = () => { +const blogPersonRender = (isMobile) => { const [list, setList] = useState([]); function queryData() { getData('wiki-ranger-blog').then((rangerList) => { @@ -272,7 +274,7 @@ const blogPersonRender = () => { @@ -306,7 +308,10 @@ const blogPersonRender = () => { ) } export default function Ranger(): JSX.Element { - + const [isMobile,setIsMobile]=useState(false) + useEffect(()=>{ + setIsMobile(judgeIsMobile()) + },[]) return (
@@ -314,8 +319,8 @@ export default function Ranger(): JSX.Element { {topJoinRender()} {whatDoRender()} {centerJoinRender()} - {rangerPersonRender()} - {blogPersonRender()} + {rangerPersonRender(isMobile)} + {blogPersonRender(isMobile)} {doesRender()} {emailRender()}
diff --git a/src/pages/ranger/style.css b/src/pages/ranger/style.css index c312e7bc1d10..e0c6c1ef5d84 100644 --- a/src/pages/ranger/style.css +++ b/src/pages/ranger/style.css @@ -30,3 +30,15 @@ .ranger_page .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: -30px; } +@media (max-width: 768px) { + .ranger_page .swiper-button-prev:after, + .ranger_page .swiper-button-next:after { + font-size: 30px; + } + .ranger_page .person .swiper-button-next { + right: -24px; + } + .ranger_page .person .swiper-button-prev { + left: -24px; + } +} diff --git a/src/pages/ranger/styles.module.scss b/src/pages/ranger/styles.module.scss index d07f31157260..cc4ad921e428 100644 --- a/src/pages/ranger/styles.module.scss +++ b/src/pages/ranger/styles.module.scss @@ -1,9 +1,9 @@ .ranger_page { width: 100%; - font-family: "Montserrat"; + font-family: 'Montserrat'; .bold { - font-family: "Montserrat-bold"; + font-family: 'Montserrat-bold'; font-weight: 700; } @@ -15,12 +15,10 @@ width: 100%; margin: 0 auto; max-width: 1288px; - } - .title { - font-family: "Montserrat-bold"; + font-family: 'Montserrat-bold'; font-weight: 700; font-size: 38px; text-align: center; @@ -28,7 +26,7 @@ } .sec_title { - font-family: "Montserrat-bold"; + font-family: 'Montserrat-bold'; font-weight: 700; font-size: 22px; line-height: 1.1; @@ -36,7 +34,7 @@ } .sec_desc { - font-family: "Montserrat"; + font-family: 'Montserrat'; font-size: 14px; line-height: 1.5; margin-top: 10px; @@ -72,11 +70,9 @@ } .top_join { - background: #33495B; + background: #33495b; color: #fff; - - .top_join_container { display: flex; flex-wrap: wrap; @@ -95,7 +91,7 @@ } .what_do { - background: #F3F5F8; + background: #f3f5f8; color: #000000; .what_do_container { @@ -103,7 +99,7 @@ font-family: 'Montserrat-bold'; font-weight: bold; font-size: 24px; - color: #8FC31F; + color: #8fc31f; line-height: 1; margin-top: 40px; } @@ -165,7 +161,6 @@ .center_join_item { width: 33%; padding-right: 40px; - ; margin-top: 50px; .sec_title { @@ -180,7 +175,7 @@ } .does { - background: #33495B; + background: #33495b; color: #fff; .btn_container { @@ -189,7 +184,7 @@ } .btn { - background: #8FC31F; + background: #8fc31f; box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.043); border-radius: 406px; border: 0; @@ -205,7 +200,6 @@ .does_item { background-color: #fff; border-radius: 20px; - ; margin-right: 24px; padding: 24px; @@ -237,7 +231,7 @@ font-family: 'Montserrat-bold'; font-weight: 700; font-size: 18px; - color: #3D3D3D; + color: #3d3d3d; left: 50%; top: 50%; transform: translate(-50%, -50%); @@ -249,17 +243,13 @@ align-self: center; } } - } - - } } - } .person { - background: #33495B; + background: #33495b; color: #fff; .wrapper { @@ -293,10 +283,11 @@ .blog { background: #fff; + .title { color: #000 !important; } - + .wrapper { max-width: 1328px; } @@ -307,7 +298,6 @@ padding: 0 28px; box-sizing: border-box; - .blog_item_container { padding: 10px; height: 100%; @@ -342,20 +332,17 @@ text-transform: uppercase; } -.blog .title { - color: #000; -} - + .blog .title { + color: #000; + } .sec_desc { font-size: 14px; - } .time_box { display: flex; text-transform: uppercase; - } .time { @@ -384,10 +371,10 @@ .green { line-height: 1; - font-family: "Montserrat-Semibold"; + font-family: 'Montserrat-Semibold'; font-weight: 500; font-size: 18px; - color: #8CC020; + color: #8cc020; margin: 16px 0; } @@ -398,7 +385,6 @@ .newsletter_form_wrap { display: flex; - } input { @@ -413,16 +399,12 @@ input::placeholder { color: rgba(255, 255, 255, 0.6); - } button { width: 40px; color: rgba(255, 255, 255, 0.6); - } - - } .icon_container { @@ -435,4 +417,100 @@ width: 30px; } } + + @media (max-width: 900px) { + .banner { + img { + position: absolute; + height: 100%; + } + + .banner_container { + min-width: 100%; + padding: 20px; + position: relative; + transform: none; + left: 0; + top: 0; + + .title { + font-size: 20px; + } + } + } + } + + @media (max-width: 768px) { + .title { + font-size: 24px; + line-height: 1.1; + } + + .sec_title { + font-size: 18px; + margin-top: 10px; + } + + .section { + padding: 5% 4%; + } + + + + .top_join { + .top_join_container { + .top_join_item { + width: 100%; + margin: 0; + text-align: center; + margin-top: 30px; + } + } + } + + .what_do { + .what_do_container { + .name { + font-size: 20px; + } + + .what_do_item { + flex-direction: column; + } + + img { + width: 100%; + border-radius: 20px; + } + } + } + + .center_join { + .center_join_container { + .center_join_item { + width: 50%; + padding: 0 10px; + } + } + } + + .person { + .person_container { + .person_item { + padding: 20px; + } + } + } + + .does { + .does_container { + display: block; + + .does_item { + margin-right: 0; + margin-bottom: 20px; + } + } + } + } } \ No newline at end of file diff --git a/src/utils/jsUtils.ts b/src/utils/jsUtils.ts index 868a32d06167..db02e1fc2c61 100644 --- a/src/utils/jsUtils.ts +++ b/src/utils/jsUtils.ts @@ -1,29 +1,39 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -// Inspired by https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore#_sortby-and-_orderby export function sortBy( array: T[], getter: (item: T) => string | number | boolean, ): T[] { - const sortedArray = [...array]; + const sortedArray = [...array] sortedArray.sort((a, b) => // eslint-disable-next-line no-nested-ternary getter(a) > getter(b) ? 1 : getter(b) > getter(a) ? -1 : 0, - ); - return sortedArray; + ) + return sortedArray } export function toggleListItem(list: T[], item: T): T[] { - const itemIndex = list.indexOf(item); + const itemIndex = list.indexOf(item) if (itemIndex === -1) { - return list.concat(item); + return list.concat(item) } - const newList = [...list]; - newList.splice(itemIndex, 1); - return newList; + const newList = [...list] + newList.splice(itemIndex, 1) + return newList +} +export function judgeIsMobile() { + const userAgent = navigator.userAgent + const mobileKeywords = [ + 'Mobile', + 'Android', + 'iPhone', + 'iPad', + 'Windows Phone', + ] + + for (let i = 0; i < mobileKeywords.length; i++) { + if (userAgent.indexOf(mobileKeywords[i]) !== -1) { + return true + } + } + + return false }