From 3d4dbe30598bc957f4a4de11e61913f30aa7f798 Mon Sep 17 00:00:00 2001 From: lisha Date: Thu, 1 Aug 2024 17:13:25 +0800 Subject: [PATCH] feat: contributor style --- src/pages/contributors/index.tsx | 12 ++++++------ src/pages/contributors/style.css | 6 ++++-- src/pages/contributors/styles.module.css | 2 +- src/pages/contributors/styles.module.scss | 2 +- 4 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/pages/contributors/index.tsx b/src/pages/contributors/index.tsx index 549de2b239f4..a73c605cfbfb 100644 --- a/src/pages/contributors/index.tsx +++ b/src/pages/contributors/index.tsx @@ -33,7 +33,7 @@ const rangerwhyRender = (isMobile) => { method: 'get', }).then(response => response.json()) .then(res => { - setList(res.data) + setList([...res.data,...res.data,...res.data]) }) } @@ -46,11 +46,11 @@ const rangerwhyRender = (isMobile) => {
Why join in
Seeed Ranger?
{list.map((item, index) => { @@ -541,16 +541,16 @@ const wishRender = (isMobile) => { } export default function Ranger(): JSX.Element { function getContributorUuid() { - let uuid = localStorage.getItem('wiki_contributor_uuid') + let uuid = window.localStorage.getItem('wiki_contributor_uuid') if (!uuid) { uuid = generateUUID() - localStorage.setItem('wiki_contributor_uuid', uuid) + window.localStorage.setItem('wiki_contributor_uuid', uuid) } return uuid } - client_key = getContributorUuid() const [isMobile, setIsMobile] = useState(false) useEffect(() => { + client_key = getContributorUuid() setIsMobile(judgeIsMobile()) }, []) return ( diff --git a/src/pages/contributors/style.css b/src/pages/contributors/style.css index 0bff77a33147..ed7675ca6a7f 100644 --- a/src/pages/contributors/style.css +++ b/src/pages/contributors/style.css @@ -5,7 +5,9 @@ .claim_page .swiper-slide { height: auto; } - +.claim_page .swiper-button-next:after,.claim_page .swiper-rtl .swiper-button-prev:after, +.claim_page .swiper-button-prev:after, .claim_page .swiper-rtl .swiper-button-next:after{ +font-size: 24px;} .claim_page .swiper-wrapper { margin-bottom: 40px; } @@ -86,7 +88,7 @@ margin-bottom: 10px;} .claim_page .swiper-button-prev:after, .claim_page .swiper-button-next:after { - font-size: 30px; + font-size: 20px; } .claim_page .person .swiper-button-next { diff --git a/src/pages/contributors/styles.module.css b/src/pages/contributors/styles.module.css index ccebe599f8d0..5d76c6c6cf51 100644 --- a/src/pages/contributors/styles.module.css +++ b/src/pages/contributors/styles.module.css @@ -1 +1 @@ -.claim_page{width:100%;font-family:"Montserrat";background-color:#fff;color:#000}.claim_page .noData{text-align:center;margin:60px 0;font-weight:bold}.claim_page .cursor_pointer{cursor:pointer}.claim_page .bold{font-family:"Montserrat-bold";font-weight:700}.claim_page .section{padding:5% 2%}.claim_page .wrapper{width:100%;margin:0 auto;max-width:1288px}.claim_page .title{font-family:"Montserrat-bold";font-weight:700;font-size:38px;text-align:center;line-height:1.1}.claim_page .sec_title{font-family:"Montserrat-bold";font-weight:700;font-size:22px;line-height:1.1;margin:16px 0}.claim_page .gray{color:rgba(0,0,0,.6)}.claim_page .why{background:#33495b;color:#fff;background:url("https://files.seeedstudio.com/wiki/contributor/banner_bg.png") no-repeat;background-size:cover}.claim_page .why .title{color:#fff}.claim_page .why .title .s_title{background-image:linear-gradient(to right, #a9de2c 20%, #fff 70%);background-clip:text;-webkit-background-clip:text;color:rgba(0,0,0,0) !important;font-size:58px;margin-top:10px;line-height:1.2}.claim_page .why .wrapper{margin-top:5%;max-width:1328px}.claim_page .why .project_desc{font-size:14px;color:#000;-webkit-text-decoration-line:underline;text-decoration-line:underline;text-transform:none;text-align:left;padding:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;text-overflow:ellipsis;text-align:left}.claim_page .why .project_more{text-align:right;font-size:14px;margin-top:26px}.claim_page .why .project_more .more_text{margin-right:4px;cursor:pointer}.claim_page .why .why_container{color:#000;margin-top:3.5%;overflow:hidden;padding:0 3.5%;box-sizing:border-box}.claim_page .why .why_container .why_item{display:inline-block;width:100%;height:100%;background-color:#fff;border-radius:20px;padding:24px;margin-bottom:20px;text-align:center}.claim_page .why .why_container .why_item img{width:100px;height:100px;border-radius:50%}.claim_page .why .why_container .why_item .github{display:inline-block;width:24px;margin-right:8px;vertical-align:top}.claim_page .why .why_container .why_item .sec_desc{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;text-align:left;font-size:14px}.claim_page .why .why_container .why_item .project_wrapper{text-align:left;font-size:18px}.claim_page .why .why_container .why_item .project_wrapper .project_title{margin:16px 0 6px 0;font-weight:600}.claim_page .why .why_container .why_item .project_wrapper .project_name{text-decoration:underline;font-size:14px;cursor:pointer}.claim_page .item_radio{margin:25px 0;text-align:right}.claim_page .like{align-self:center;display:flex;margin-right:24px;font-size:16px}.claim_page .like .like_item{margin-right:20px;cursor:pointer;display:flex}.claim_page .like .like_number{margin-left:6px}.claim_page .claim{background-color:#fff}.claim_page .claim .claim_tab{display:flex}.claim_page .claim .tab_btn{padding:10px 24px;background:#f7f9f2;border-radius:90px;font-weight:500;font-size:16px;color:rgba(0,0,0,.6);margin-right:12px;cursor:pointer}.claim_page .claim .tab_btn.small{padding:5px 16px;font-size:14px}.claim_page .claim .tab_btn.active{background:#ecf4d9;font-weight:700;color:#8fc31f;font-family:"Montserrat-bold"}.claim_page .claim .claim_container{margin-top:3.5%;margin-bottom:4.5%}.claim_page .claim .claim_item{display:flex;border-bottom:1px solid #e7e7e7;padding-bottom:5%;margin-bottom:5%}.claim_page .claim .claim_item .item_left{flex:2}.claim_page .claim .claim_item .item_right{flex:1;max-width:480px;margin-left:5%}.claim_page .claim .claim_item .item_right img{border-radius:20px}.claim_page .claim .claim_item .item_tab{margin:24px 0}.claim_page .claim .claim_item .item_title{font-weight:600;font-size:24px}.claim_page .claim .claim_item .item_desc{margin-bottom:3.5%}.claim_page .claim .claim_item .item_bottom{display:flex;justify-content:space-between}.claim_page .claim .claim_item .item_bottom .item_bottom_wrapper{display:flex}.claim_page .claim .claim_item .item_bottom .item_github{background-color:#000;color:#fff;border-radius:90px;padding:14px;display:flex;justify-content:space-between;margin-right:4%;cursor:pointer}.claim_page .claim .claim_item .item_bottom .item_github .github{margin-right:6px}.claim_page .claim .claim_item .item_bottom .item_github .github_name{margin:0 10px;width:-moz-max-content;width:max-content;align-self:center}.claim_page .claim .claim_item .item_bottom .item_time{color:rgba(0,0,0,.4)}.claim_page .wishpool{background:rgba(218,237,173,.25)}.claim_page .wishpool .add{padding:20px 4%;background:#8fc31f;text-align:center;border-radius:90px;color:#fff;margin:0 auto;font-size:24px;margin-top:24px;width:-moz-fit-content;width:fit-content;font-weight:500}.claim_page .wishpool .wishpool_wrapper{margin-bottom:5%}.claim_page .wishpool .wishpool_item{background-color:#fff;border-radius:16px;padding:3.5%;margin-bottom:16px}.claim_page .wishpool .wishpool_item .item_title{display:flex;justify-content:space-between;font-weight:bold;font-family:"Montserrat-bold";font-size:24px}.claim_page .wishpool .wishpool_item .item_publish{display:flex;margin:16px 0}.claim_page .wishpool .wishpool_item .item_publish .item_time{margin-left:36px}.claim_page .wishpool .wishpool_item .like{margin-right:0}.claim_page .wishpool .wishpool_item .like .like_item:last-child{margin-right:0}.claim_page .wishpool .wishpool_item .item_introduce{display:flex}.claim_page .wishpool .wishpool_item .item_introduce .item_desc{flex:1}.claim_page .wishpool .wishpool_item .item_introduce .item_img{width:98px;height:70px}@media(max-width: 768px){.claim_page .title{font-size:24px;line-height:1.1}.claim_page .sec_title{font-size:18px;margin-top:10px}.claim_page .section{padding:5% 4%}.claim_page .why .why_container .why_item{padding:20px}.claim_page .claim .claim_item{flex-direction:column-reverse}.claim_page .claim .claim_item .item_right{margin-left:0;margin-top:20px}.claim_page .claim .claim_item .item_bottom{display:block}.claim_page .claim .claim_item .item_bottom .item_bottom_wrapper{justify-content:space-between}.claim_page .claim .claim_item .item_bottom .item_time{margin-top:10px}.claim_page .claim .claim_item .item_bottom .item_github{justify-content:space-between;margin-right:0}} \ No newline at end of file +.claim_page{width:100%;font-family:"Montserrat";background-color:#fff;color:#000}.claim_page .noData{text-align:center;margin:60px 0;font-weight:bold}.claim_page .cursor_pointer{cursor:pointer}.claim_page .bold{font-family:"Montserrat-bold";font-weight:700}.claim_page .section{padding:5% 2%}.claim_page .wrapper{width:100%;margin:0 auto;max-width:1288px}.claim_page .title{font-family:"Montserrat-bold";font-weight:700;font-size:38px;text-align:center;line-height:1.1}.claim_page .sec_title{font-family:"Montserrat-bold";font-weight:700;font-size:22px;line-height:1.1;margin:16px 0}.claim_page .gray{color:rgba(0,0,0,.6)}.claim_page .why{background:#33495b;color:#fff;background:url("https://files.seeedstudio.com/wiki/contributor/banner_bg.png") no-repeat;background-size:cover}.claim_page .why .title{color:#fff}.claim_page .why .title .s_title{background-image:linear-gradient(to right, #a9de2c 20%, #fff 70%);background-clip:text;-webkit-background-clip:text;color:rgba(0,0,0,0) !important;font-size:58px;margin-top:10px;line-height:1.2}.claim_page .why .wrapper{margin-top:5%;max-width:1328px}.claim_page .why .project_desc{font-size:14px;color:#000;-webkit-text-decoration-line:underline;text-decoration-line:underline;text-transform:none;text-align:left;padding:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden;text-overflow:ellipsis;text-align:left}.claim_page .why .project_more{text-align:right;font-size:14px;margin-top:26px}.claim_page .why .project_more .more_text{margin-right:4px;cursor:pointer}.claim_page .why .why_container{color:#000;margin-top:3.5%;overflow:hidden;padding:0 24px;box-sizing:border-box}.claim_page .why .why_container .why_item{display:inline-block;width:100%;height:100%;background-color:#fff;border-radius:20px;padding:24px;margin-bottom:20px;text-align:center}.claim_page .why .why_container .why_item img{width:100px;height:100px;border-radius:50%}.claim_page .why .why_container .why_item .github{display:inline-block;width:24px;margin-right:8px;vertical-align:top}.claim_page .why .why_container .why_item .sec_desc{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;text-align:left;font-size:14px}.claim_page .why .why_container .why_item .project_wrapper{text-align:left;font-size:18px}.claim_page .why .why_container .why_item .project_wrapper .project_title{margin:16px 0 6px 0;font-weight:600}.claim_page .why .why_container .why_item .project_wrapper .project_name{text-decoration:underline;font-size:14px;cursor:pointer}.claim_page .item_radio{margin:25px 0;text-align:right}.claim_page .like{align-self:center;display:flex;margin-right:24px;font-size:16px}.claim_page .like .like_item{margin-right:20px;cursor:pointer;display:flex}.claim_page .like .like_number{margin-left:6px}.claim_page .claim{background-color:#fff}.claim_page .claim .claim_tab{display:flex}.claim_page .claim .tab_btn{padding:10px 24px;background:#f7f9f2;border-radius:90px;font-weight:500;font-size:16px;color:rgba(0,0,0,.6);margin-right:12px;cursor:pointer}.claim_page .claim .tab_btn.small{padding:5px 16px;font-size:14px}.claim_page .claim .tab_btn.active{background:#ecf4d9;font-weight:700;color:#8fc31f;font-family:"Montserrat-bold"}.claim_page .claim .claim_container{margin-top:3.5%;margin-bottom:4.5%}.claim_page .claim .claim_item{display:flex;border-bottom:1px solid #e7e7e7;padding-bottom:5%;margin-bottom:5%}.claim_page .claim .claim_item .item_left{flex:2}.claim_page .claim .claim_item .item_right{flex:1;max-width:480px;margin-left:5%}.claim_page .claim .claim_item .item_right img{border-radius:20px}.claim_page .claim .claim_item .item_tab{margin:24px 0}.claim_page .claim .claim_item .item_title{font-weight:600;font-size:24px}.claim_page .claim .claim_item .item_desc{margin-bottom:3.5%}.claim_page .claim .claim_item .item_bottom{display:flex;justify-content:space-between}.claim_page .claim .claim_item .item_bottom .item_bottom_wrapper{display:flex}.claim_page .claim .claim_item .item_bottom .item_github{background-color:#000;color:#fff;border-radius:90px;padding:14px;display:flex;justify-content:space-between;margin-right:4%;cursor:pointer}.claim_page .claim .claim_item .item_bottom .item_github .github{margin-right:6px}.claim_page .claim .claim_item .item_bottom .item_github .github_name{margin:0 10px;width:-moz-max-content;width:max-content;align-self:center}.claim_page .claim .claim_item .item_bottom .item_time{color:rgba(0,0,0,.4)}.claim_page .wishpool{background:rgba(218,237,173,.25)}.claim_page .wishpool .add{padding:20px 4%;background:#8fc31f;text-align:center;border-radius:90px;color:#fff;margin:0 auto;font-size:24px;margin-top:24px;width:-moz-fit-content;width:fit-content;font-weight:500}.claim_page .wishpool .wishpool_wrapper{margin-bottom:5%}.claim_page .wishpool .wishpool_item{background-color:#fff;border-radius:16px;padding:3.5%;margin-bottom:16px}.claim_page .wishpool .wishpool_item .item_title{display:flex;justify-content:space-between;font-weight:bold;font-family:"Montserrat-bold";font-size:24px}.claim_page .wishpool .wishpool_item .item_publish{display:flex;margin:16px 0}.claim_page .wishpool .wishpool_item .item_publish .item_time{margin-left:36px}.claim_page .wishpool .wishpool_item .like{margin-right:0}.claim_page .wishpool .wishpool_item .like .like_item:last-child{margin-right:0}.claim_page .wishpool .wishpool_item .item_introduce{display:flex}.claim_page .wishpool .wishpool_item .item_introduce .item_desc{flex:1}.claim_page .wishpool .wishpool_item .item_introduce .item_img{width:98px;height:70px}@media(max-width: 768px){.claim_page .title{font-size:24px;line-height:1.1}.claim_page .sec_title{font-size:18px;margin-top:10px}.claim_page .section{padding:5% 4%}.claim_page .why .why_container .why_item{padding:20px}.claim_page .claim .claim_item{flex-direction:column-reverse}.claim_page .claim .claim_item .item_right{margin-left:0;margin-top:20px}.claim_page .claim .claim_item .item_bottom{display:block}.claim_page .claim .claim_item .item_bottom .item_bottom_wrapper{justify-content:space-between}.claim_page .claim .claim_item .item_bottom .item_time{margin-top:10px}.claim_page .claim .claim_item .item_bottom .item_github{justify-content:space-between;margin-right:0}} \ No newline at end of file diff --git a/src/pages/contributors/styles.module.scss b/src/pages/contributors/styles.module.scss index 8510f855da6e..7b60651cea79 100644 --- a/src/pages/contributors/styles.module.scss +++ b/src/pages/contributors/styles.module.scss @@ -105,7 +105,7 @@ color: #000; margin-top: 3.5%; overflow: hidden; - padding: 0 3.5%; + padding: 0 24px; box-sizing: border-box; .why_item {