diff --git a/src/App.js b/src/App.js index 70f2bc56..98062d46 100644 --- a/src/App.js +++ b/src/App.js @@ -109,10 +109,15 @@ const ProjectIndex = Loadable({ }); const Home = Loadable({ - loader: () => import('./forge/Main/projectHomeNew/v2'), + loader: () => import('./forge/Main/projecthome/Index'), loading: Loading, }) +// const Home = Loadable({ +// loader: () => import('./forge/Main/projectHomeNew/v2'), +// loading: Loading, +// }) + const Relaction = Loadable({ loader: () => import("./forge/Account/Index"), loading: Loading, diff --git a/src/forge/Head/Header.js b/src/forge/Head/Header.js index 66013025..84cf2675 100644 --- a/src/forge/Head/Header.js +++ b/src/forge/Head/Header.js @@ -47,9 +47,28 @@ class NewHeader extends Component { visible:false, //浮动消息框展示控制 showSubMenu: false, zoneList: [], // 专区列表 + isHome: true, // 是否首页 } } componentDidMount() { + if (this.props.match.path !== '/') { + this.setState({ + isHome: false + }) + } + const header = document.querySelector('.homeHeader'); + + window.addEventListener('scroll', () => { + const threshold = window.innerWidth * 0.25; + + if (window.scrollY > threshold) { + header.classList.add('active'); + } else { + header.classList.remove('active'); + } + }); + + // 用personal判断是否需要再次请求settings接口，解决登录注册之后无设置按钮的情况 let settings = localStorage.chromesetting && localStorage.chromesetting !=="undefined" &&JSON.parse(localStorage.chromesetting); if(settings){ @@ -300,11 +319,12 @@ class NewHeader extends Component { isRender, visible, showSubMenu, - zoneList + zoneList, + isHome } = this.state; // let search_url = settings && settings.common && settings.common.search; return ( -
+
{isRender === true ? }
*/} - { + {/* { settings && settings.nav_logo_url ? 可控开源社区 : "" - } + } */} {/*
*/} { settings && settings.navbar && settings.navbar.length > 0 ? diff --git a/src/forge/Main/img/home/banner1.webp b/src/forge/Main/img/home/banner1.webp new file mode 100644 index 00000000..56dd7d16 Binary files /dev/null and b/src/forge/Main/img/home/banner1.webp differ diff --git a/src/forge/Main/img/home/banner2.webp b/src/forge/Main/img/home/banner2.webp new file mode 100644 index 00000000..3bdc774f Binary files /dev/null and b/src/forge/Main/img/home/banner2.webp differ diff --git a/src/forge/Main/img/home/banner3.webp b/src/forge/Main/img/home/banner3.webp new file mode 100644 index 00000000..15da786d Binary files /dev/null and b/src/forge/Main/img/home/banner3.webp differ diff --git a/src/forge/Main/img/home/button.png b/src/forge/Main/img/home/button.png new file mode 100644 index 00000000..255d12ae Binary files /dev/null and b/src/forge/Main/img/home/button.png differ diff --git a/src/forge/Main/img/home/chain-bg.webp b/src/forge/Main/img/home/chain-bg.webp new file mode 100644 index 00000000..700e1909 Binary files /dev/null and b/src/forge/Main/img/home/chain-bg.webp differ diff --git a/src/forge/Main/img/home/chain-content.png b/src/forge/Main/img/home/chain-content.png new file mode 100644 index 00000000..569a0939 Binary files /dev/null and b/src/forge/Main/img/home/chain-content.png differ diff --git a/src/forge/Main/img/home/chain-content.webp b/src/forge/Main/img/home/chain-content.webp new file mode 100644 index 00000000..32a8ce9f Binary files /dev/null and b/src/forge/Main/img/home/chain-content.webp differ diff --git a/src/forge/Main/img/home/chain-gif.gif b/src/forge/Main/img/home/chain-gif.gif new file mode 100644 index 00000000..d8994a05 Binary files /dev/null and b/src/forge/Main/img/home/chain-gif.gif differ diff --git a/src/forge/Main/img/home/chain1.png b/src/forge/Main/img/home/chain1.png new file mode 100644 index 00000000..df21eafc Binary files /dev/null and b/src/forge/Main/img/home/chain1.png differ diff --git a/src/forge/Main/img/home/chain2.png b/src/forge/Main/img/home/chain2.png new file mode 100644 index 00000000..7a4260da Binary files /dev/null and b/src/forge/Main/img/home/chain2.png differ diff --git a/src/forge/Main/img/home/chain3.png b/src/forge/Main/img/home/chain3.png new file mode 100644 index 00000000..1adc955b Binary files /dev/null and b/src/forge/Main/img/home/chain3.png differ diff --git a/src/forge/Main/img/home/chain4.png b/src/forge/Main/img/home/chain4.png new file mode 100644 index 00000000..2f47f7af Binary files /dev/null and b/src/forge/Main/img/home/chain4.png differ diff --git a/src/forge/Main/img/home/chain5.png b/src/forge/Main/img/home/chain5.png new file mode 100644 index 00000000..50bcd242 Binary files /dev/null and b/src/forge/Main/img/home/chain5.png differ diff --git a/src/forge/Main/img/home/chain6.png b/src/forge/Main/img/home/chain6.png new file mode 100644 index 00000000..084b1459 Binary files /dev/null and b/src/forge/Main/img/home/chain6.png differ diff --git a/src/forge/Main/img/home/check.png b/src/forge/Main/img/home/check.png new file mode 100644 index 00000000..fbc618e6 Binary files /dev/null and b/src/forge/Main/img/home/check.png differ diff --git a/src/forge/Main/img/home/factory-bg1.webp b/src/forge/Main/img/home/factory-bg1.webp new file mode 100644 index 00000000..8d501822 Binary files /dev/null and b/src/forge/Main/img/home/factory-bg1.webp differ diff --git a/src/forge/Main/img/home/factory-bg2.webp b/src/forge/Main/img/home/factory-bg2.webp new file mode 100644 index 00000000..34d81612 Binary files /dev/null and b/src/forge/Main/img/home/factory-bg2.webp differ diff --git a/src/forge/Main/img/home/factory1.webp b/src/forge/Main/img/home/factory1.webp new file mode 100644 index 00000000..4a282c4c Binary files /dev/null and b/src/forge/Main/img/home/factory1.webp differ diff --git a/src/forge/Main/img/home/factory2.webp b/src/forge/Main/img/home/factory2.webp new file mode 100644 index 00000000..b503c1d8 Binary files /dev/null and b/src/forge/Main/img/home/factory2.webp differ diff --git a/src/forge/Main/img/home/factory3.webp b/src/forge/Main/img/home/factory3.webp new file mode 100644 index 00000000..bcae4766 Binary files /dev/null and b/src/forge/Main/img/home/factory3.webp differ diff --git a/src/forge/Main/img/home/factory4.webp b/src/forge/Main/img/home/factory4.webp new file mode 100644 index 00000000..59e058cd Binary files /dev/null and b/src/forge/Main/img/home/factory4.webp differ diff --git a/src/forge/Main/img/home/forum-bg.webp b/src/forge/Main/img/home/forum-bg.webp new file mode 100644 index 00000000..7918a6d8 Binary files /dev/null and b/src/forge/Main/img/home/forum-bg.webp differ diff --git a/src/forge/Main/img/home/forum1.webp b/src/forge/Main/img/home/forum1.webp new file mode 100644 index 00000000..4d154480 Binary files /dev/null and b/src/forge/Main/img/home/forum1.webp differ diff --git a/src/forge/Main/img/home/forum2.webp b/src/forge/Main/img/home/forum2.webp new file mode 100644 index 00000000..cc8fb49d Binary files /dev/null and b/src/forge/Main/img/home/forum2.webp differ diff --git a/src/forge/Main/img/home/forum3.webp b/src/forge/Main/img/home/forum3.webp new file mode 100644 index 00000000..569969df Binary files /dev/null and b/src/forge/Main/img/home/forum3.webp differ diff --git a/src/forge/Main/img/home/store-bg.png b/src/forge/Main/img/home/store-bg.png new file mode 100644 index 00000000..8a386387 Binary files /dev/null and b/src/forge/Main/img/home/store-bg.png differ diff --git a/src/forge/Main/img/home/store-r-1.webp b/src/forge/Main/img/home/store-r-1.webp new file mode 100644 index 00000000..93b34368 Binary files /dev/null and b/src/forge/Main/img/home/store-r-1.webp differ diff --git a/src/forge/Main/img/home/store-r-2.webp b/src/forge/Main/img/home/store-r-2.webp new file mode 100644 index 00000000..14901be7 Binary files /dev/null and b/src/forge/Main/img/home/store-r-2.webp differ diff --git a/src/forge/Main/img/home/store-r-3.png b/src/forge/Main/img/home/store-r-3.png new file mode 100644 index 00000000..55c40590 Binary files /dev/null and b/src/forge/Main/img/home/store-r-3.png differ diff --git a/src/forge/Main/img/home/store1.png b/src/forge/Main/img/home/store1.png new file mode 100644 index 00000000..389859ce Binary files /dev/null and b/src/forge/Main/img/home/store1.png differ diff --git a/src/forge/Main/img/home/store2.png b/src/forge/Main/img/home/store2.png new file mode 100644 index 00000000..7512fb8d Binary files /dev/null and b/src/forge/Main/img/home/store2.png differ diff --git a/src/forge/Main/img/home/store3.png b/src/forge/Main/img/home/store3.png new file mode 100644 index 00000000..cc6dc627 Binary files /dev/null and b/src/forge/Main/img/home/store3.png differ diff --git a/src/forge/Main/img/home/store4.png b/src/forge/Main/img/home/store4.png new file mode 100644 index 00000000..d5c16dd5 Binary files /dev/null and b/src/forge/Main/img/home/store4.png differ diff --git a/src/forge/Main/img/home/store5.png b/src/forge/Main/img/home/store5.png new file mode 100644 index 00000000..511d9ca0 Binary files /dev/null and b/src/forge/Main/img/home/store5.png differ diff --git a/src/forge/Main/img/home/store6.png b/src/forge/Main/img/home/store6.png new file mode 100644 index 00000000..c9917c8c Binary files /dev/null and b/src/forge/Main/img/home/store6.png differ diff --git a/src/forge/Main/projecthome/Index.jsx b/src/forge/Main/projecthome/Index.jsx index 74c5eaf0..43cfb5b3 100644 --- a/src/forge/Main/projecthome/Index.jsx +++ b/src/forge/Main/projecthome/Index.jsx @@ -1,159 +1,29 @@ import React , { useEffect , useState } from 'react'; import './Index.scss'; -import SubBanner from './SubBanner'; -import Icon from '../img/index/icon.png'; -import { Link } from 'react-router-dom'; -import { Spin , Input, Tooltip } from 'antd'; -import SubList from './SubList'; -import more from '../img/index/more.png'; -import axios from 'axios'; -import { getImageUrl } from 'educoder'; -import Nodata from '../../Nodata'; -import moment from 'moment'; +import { TPMIndexHOC } from "../../../modules/tpm/TPMIndexHOC"; +import Banner from './components/Banner'; +import Store from './components/Store'; +import Chain from './components/Chain'; +import Factory from './components/Factory'; +import Forum from './components/Forum'; -const { Search } = Input; - -const LIMIT = 20; function Index(props) { - const [ cateList , setCateList ] = useState(undefined); - const [ projectsList , setProjectsList ] = useState(undefined); - const [ search , setSearch ] = useState(undefined); - const [ cateID, setCateID ] = useState(undefined); - const [ isSpin, setIsSpin ] = useState(true); - useEffect(()=>{ - getCate(); - document.title='可信代码仓库'; + document.title='JYKYRJ代码仓库'; },[]) - useEffect(()=>{ - setIsSpin(true); - getProject(); - },[cateID, search]) - - function getCate() { - const url = `/project_categories/pinned_index.json`; - axios.get(url).then(result=>{ - if(result && result.data){ - setCateList(result.data.project_categories); - } - }).catch(error=>{}) - } - - function getProject() { - const url = `/projects.json`; - axios.get(url,{ - params:{ - pinned:"d", - category_id:cateID, - limit:LIMIT, - search:search - } - }).then(result=>{ - if(result && result.data){ - setProjectsList(result.data.projects); - setIsSpin(false); - } - }).catch(error=>{}) - } - - function searchFun(value){ - setSearch(value); - } - return( -
- - {/* */} -
-
- -
-
- 开源项目 - - - 更多 -
- -
- { - projectsList && projectsList.length > 0 ? -
- { - projectsList.map((i,k)=>{ - return( -
  • - { - i.platform === "educoder" ? - - - - : - - } -
    -
    - {i.author && i.author.name}/{i.name} - {i.praises_count > 0 ? {i.praises_count} :"" } - {i.forked_count > 0 ? {i.forked_count}:""} -
    -
    - {i.description} -
    - {/* 项目标签 */} - {i.topics &&
    - {i.topics.map(item=>{item.name})} -
    } -
    - {i.category && i.category.id ? {i.category.name} :"" } - {i.language && i.language.id ? {i.language.name} :""} - 更新于{i.time_ago} -
    -
    -
    • - ) - }) - } -
    - :"" - } - { - projectsList && projectsList.length === 0 && - } -
    -     - { - projectsList && projectsList.length > 0 && -
    - 查看更多开源项目 -
    - } -
    -
    - +
    + +
    +
    + + + +
    ) } -export default Index; \ No newline at end of file +export default TPMIndexHOC(Index) \ No newline at end of file diff --git a/src/forge/Main/projecthome/Index.scss b/src/forge/Main/projecthome/Index.scss index 8961320f..c7c8b15d 100644 --- a/src/forge/Main/projecthome/Index.scss +++ b/src/forge/Main/projecthome/Index.scss @@ -1,577 +1,14 @@ -.banners{ - background: url('../img/index/banner.png') no-repeat top; - min-height: 360px; - background-size: cover; - background-color: #0C2A5B; - .bannersCenter{ - padding-top: 30px; - max-width: 1200px; - margin: 0px auto; - position: relative; - height: 360px; - } - .bTitle{ - height: 30px; - line-height: 30px; - font-size: 30px; - font-weight: 500; - color: #FFFFFF; - margin-bottom: 20px!important; - text-align: center; - span{ - background: linear-gradient(to right,#289AF6 0%, #9E84FF 40%, #FFB03B 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } - } - .bSubTitle{ - text-align: center; - height: 30px; - line-height: 30px; - font-size: 16px; - font-weight: 400; - color: #FFFFFF; - } - .bannerBox{ - background: url('../img/index/box.png') no-repeat; - background-size: 100% 100%; - height: 195px; - width: 330px; - margin:0px auto; - padding:25px 30px 34px; - .bannersProject{ - position: relative; - .slick-list{ - width: 100%; - overflow: hidden; - } - .slick-track{ - display: flex; - li{ - padding:3px 10px; - .projectinfos{ - display: flex; - align-items: center; - width: 100%; - margin-bottom: 8px; - img{ - width: 32px; - height: 32px; - margin-right: 7px; - border-radius: 50%; - } - .name{ - height: 28px; - line-height: 28px; - font-size: 18px; - font-weight: 500; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - max-width: 250px; - color: #25EBFF; - a{ - color: #25EBFF!important; - } - } - .company{ - height: 20px; - line-height: 20px; - font-size: 14px; - font-weight: 400; - color: #FFFFFF; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - max-width: 250px; - a{ - color: #FFFFFF!important; - } - } - } - .desc{ - height: 40px; - font-size: 13px; - font-weight: 400; - color: #FFFFFF; - line-height: 20px; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - } - .infoData{ - display: flex; - margin-top: 7px; - justify-content: space-around; - &>span{ - display: flex; - align-items: center; - &>span{ - color: #FFB729; - font-size: 15px; - font-weight: 400; - } - } - img{ - width: 16px; - margin-right: 4px; - } - } - } - } - } - } - .airBubble{ - &>div{ - position: absolute; - height: 100%; - width: 415px; - bottom: 0px; - &.right{ - right: 0px; - } - &.left{ - left: 0px; - } - &.right div, &.left div{ - position: relative; - width: 100%; - height: 100%; - span{ - position: absolute; - border-radius: 50%; - background: linear-gradient(124deg, rgba(255, 255, 255, 0.1) 0%, rgba(5, 200, 220, 0.04) 50%, rgba(5, 200, 220, 0.03) 100%); - box-shadow: 0px 0px 7px 3px rgba(0, 154, 255, 0.19); - border: 1px solid rgba(0, 154, 255, 0.19); - font-size: 14px; - font-weight: 400; - line-height: 17px; - display: flex; - align-items: center; - word-break: break-all; - text-align: center; - padding:5px; - animation: zoomin 1.3s infinite alternate; - &:hover{ - animation:none - } - } - } - &.right span:nth-child(4) a,&.left span:nth-child(1) a,&.left span:nth-child(2) a{ - color: #25EBFF!important; - } - &.right span:nth-child(1) a,&.left span:nth-child(5) a{ - color: #CD8AFF!important; - } - &.right span:nth-child(3) a,&.right span:nth-child(5) a,&.left span:nth-child(6) a{ - color: #FF6125!important; - } - &.left span:nth-child(3) a{ - color: #FF8425!important; - } - &.right span:nth-child(2) a,&.left span:nth-child(4) a{ - color: #8CC2FF!important; - } - &.right span:nth-child(1){ - right: 0px; - height: 120px; - width: 120px; - } - &.right span:nth-child(2){ - right: 160px; - height: 72px; - width: 72px; - bottom: 220px; - padding:0px; - animation-delay: 0.2s; - } - &.right span:nth-child(3){ - right: 300px; - height: 94px; - width: 94px; - bottom: 99px; - padding:8px; - animation-delay: 0.3s; - } - &.right span:nth-child(4){ - right: 156px; - height: 100px; - width: 100px; - bottom: 39px; - font-size: 12px; - animation-delay: 0.2s; - } - &.right span:nth-child(5){ - right: 10px; - height: 94px; - width: 94px; - bottom: 97px; - animation-delay: 0.4s; - } - &.left span:nth-child(1){ - left: 80px; - height: 110px; - width: 110px; - padding:8px; - animation-delay: 0.1s; - } - &.left span:nth-child(2){ - right: 60px; - height: 96px; - width: 96px; - top: 85px; - font-size: 13px; - animation-delay: 0.2s; - } - &.left span:nth-child(3){ - left: 0px; - height: 86px; - width: 86px; - top: 145px; - font-size: 13px; - animation-delay: 0.3s; - } - &.left span:nth-child(4){ - left: 164px; - height: 70px; - width: 70px; - bottom: 158px; - font-size: 12px; - font-size: 12px; - animation-delay: 0.3s; - } - &.left span:nth-child(5){ - left: 35px; - height: 102px; - width: 102px; - bottom: 32px; - font-size: 13px; - animation-delay: 0.4s; - } - &.left span:nth-child(6){ - right: 10px; - height: 114px; - width: 114px; - bottom: 26px; - padding:8px; - } - } - } -} -@keyframes zoomin{ - 0%{-webkit-transform:scale(1.05);transform:scale(1.05)} - 100%{-webkit-transform:scale(0.8);transform:scale(0.8)} -} -@-webkit-keyframes zoomin{ - 0%{-webkit-transform:scale(1.05);transform:scale(1.05)} - 100%{-webkit-transform:scale(0.8);transform:scale(0.8)} -} -.unitBanner{ - padding:29px 0px; - background: #F9F9F9; - .unitContent{ - max-width: 1200px; - margin:0px auto; - .unitTitle{ - height: 28px; - line-height: 28px; - font-size: 20px; - font-weight: 500; - color: #1E1E1E; - display: flex; - align-items: center; - img{ - margin-left: 9px; - } - } - .unitSlider{ - padding:30px 0px 10px; - .slick-list{ - width: 100%; - height: 56px; - overflow: hidden; - .slickline{ - display: flex!important; - align-items: center; - justify-content: space-between; - } - } - } - } -} -.dataPanel{ - width: 1200px; - display: flex; - justify-content: space-between; - padding:30px 0px 60px; - margin:0px auto; - .left{ - width: 850px; - display: flex; - .leftTypes{ - width: 220px; - height: 1576px; - background: url('../img/index/typebg.png'); - background-size: 100% 100%; - box-shadow: 0px 0px 4px 5px rgba(0, 0, 0, 0.02); - a{ - padding:0px 20px; - height: 44px; - margin-top: 10px; - font-size: 16px; - font-weight: 500; - color: #333333; - display: flex; - align-items: center; - cursor: pointer; - &:hover{ - background-color: #F5F5F5; - } - &.active{ - background: linear-gradient(to right,#07228F , #466AFF); - color: #fff!important; - } - img{ - margin-right: 12px; - width: 28px; - } - } - } - .leftLists{ - flex:1; - box-shadow: 0px 0px 4px 5px rgba(0, 0, 0, 0.02); - .leftTitles{ - height: 60px; - display: flex; - align-items: center; - justify-content: space-between; - border-bottom: 1px solid rgba(153, 153, 153, 0.16); - padding:0px 20px; - .ant-btn-primary{ - background-color: #466AFF; - border-color: #466AFF; - &:hover,&:active{ - background-color: rgba(70,106,255,0.8); - border-color: rgba(70,106,255,0.8); - } - } - &>span{ - font-size: 18px; - font-weight: 500; - color: #000000; - } - a{ - color: #466AFF!important; - } - } - .leftlistItem{ - padding:0px 20px; - li{ - border-bottom: 1px solid rgba(153, 153, 153, 0.16); - display: flex; - align-items: flex-start; - padding:20px 0px ; - &>a img{ - width: 32px; - height: 32px; - border-radius: 50%; - margin-right: 10px; - } - .itemTitle{ - flex:1; - .item-title-infos{ - height: 22px; - display: flex; - align-items: center; - .infotitle{ - flex:1; - height: 21px; - font-size: 15px; - font-weight: 600; - line-height: 21px; - color: #333!important; - max-width: 458px; - &:hover{ - color: #466AFF!important; - } - } - span{ - margin-left:20px ; - color: #333; - i{ - color: #666; - } - } - } - .item-desc{ - font-size: 14px; - font-weight: 400; - color: #414141; - line-height: 24px; - max-width: 548px; - margin: 5px 0px; - } - .item-data{ - font-size: 13px; - font-weight: 400; - color: #7D7D7D; - height: 20px; - line-height: 20px; - display: flex; - align-items: center; - .category{ - position: relative; - padding-left: 11px; - margin-right: 10px; - &::before{ - position: absolute; - content: ""; - width: 6px; - height: 6px; - border-radius: 50%; - background-color: #466AFF; - top: 7px; - left: 0px; - } - } - .language{ - position: relative; - &.hasCate{ - padding-left: 11px; - } - &.hasCate::before{ - position: absolute; - content: ""; - width: 1px; - height: 10px; - border-radius: 50%; - border-left: 1px solid #9e9e9e; - bottom: 5px; - left: 0px; - } - } - } - } - } - } - } - .left-bottom-btn{ - display: flex; - justify-content: center; - padding:18px 0px; - a{ - height: 38px; - line-height: 36px; - border-radius: 8px; - border: 1px solid #466AFF; - color: #466AFF; - font-size: 16px; - padding:0px 20px; - img{ - height: 16px; - margin-top: -1px; - margin-left: 8px; - } - } - } - } - .right{ - width: 330px; - &>div{ - box-shadow: 0px 0px 4px 5px rgba(0, 0, 0, 0.02); - margin-bottom: 20px; - } - .partTitle{ - padding:15px; - background: #F6F9FF; +.home { + font-family: alibabareg; + .home-main { + border-radius: 100px 100px 0px 0px; + margin-top: -100px; + background-image:linear-gradient(180deg,#f8faff 0%,#f1f6fd 100%); + h4 { + font-family: alibaba; font-size: 18px; - color: #000000; - font-weight: 500; - margin-bottom: 10px; - img{ - width: 33px; - margin-right: 6px; - } + line-height: 18px; + color:#091221; } - .righthotAuthor{ - padding-bottom: 15px; - li{ - padding-left: 15px; - &>div{ - display: flex; - align-items: flex-start; - padding:10px 15px 10px 0px; - border-bottom: 1px solid rgba(153, 153, 153, 0.1); - img{ - width: 32px; - height: 32px; - border-radius: 50%; - margin-right: 8px; - margin-top: 3px; - } - } - &:hover{ - background-color: #F3F3F3; - } - &:last-child > div{ - border-bottom: none; - } - } - } - .hotProjects{ - li{ - padding:10px 15px; - margin-bottom: 10px; - &:hover{ - background-color: #F3F3F3; - } - .mInfos{ - display: flex; - align-items: center; - height: 20px; - .num{ - width: 18px; - height: 18px; - background: #466AFF; - border-radius: 2px; - color: #fff; - text-align: center; - line-height: 18px; - margin-right: 8px; - } - .name{ - flex:1; - font-size: 15px; - } - } - .sInfos{ - background: #F7F8F9; - padding:0px 5px; - font-size: 13px; - font-weight: 400; - color: #666666; - line-height: 24px; - word-break: break-all; - margin-top: 10px; - } - } - } - } -} -.proListTopics{ - display: flex; - flex-wrap: wrap; - .proListTopic{ - background-color:#f3f8ff; - border-radius: 4px; - max-width: 158px; - padding: 0 10px; - height: 24px; - line-height: 24px; - color: #4c5b76; - margin-bottom: 5px !important; } } \ No newline at end of file diff --git a/src/forge/Main/projecthome/SubBanner.jsx b/src/forge/Main/projecthome/SubBanner.jsx deleted file mode 100644 index 7a11812b..00000000 --- a/src/forge/Main/projecthome/SubBanner.jsx +++ /dev/null @@ -1,114 +0,0 @@ -import React , { useEffect , useState } from 'react'; -import Slider from 'react-slick'; -import { Link } from 'react-router-dom'; -import { getImageUrl } from 'educoder'; -import Eye from '../img/index/eye.png'; -import Data from '../img/index/data.png'; -import Earth from '../img/index/earth.png'; -import axios from 'axios'; - -// const list =[ -// {img:Imgs,name:"矽璓工业物联操作系统XiUOS",company:"泛在操作系统实验室",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"}, -// {img:Imgs,name:"openGauss-operator",company:"华为技术有限公司",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"}, -// {img:Imgs,name:"PaddleDetection 2.0",company:"TrustieMirrors",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"}, -// {img:Imgs,name:"skyline",company:"浪潮信息",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"}, -// {img:Imgs,name:"BitXHub",company:"开放原子开源基金会",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"}, -// {img:Imgs,name:"Device Model",company:"openDACS",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"}, -// {img:Imgs,name:"Gitlink",company:"Gitlink",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"}, -// {img:Imgs,name:"openEuler-datenlord",company:"华为技术有限公司",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"}, -// {img:Imgs,name:"OpenAtom XuperChain",company:"开放原子开源基金会",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"}, -// {img:Imgs,name:"xuos-web",company:"泛在操作系统实验室",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"}, -// {img:Imgs,name:"CrowdOS开源项目开发",company:"西北工业大学",desc:"此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情此处为项目介绍详情",look:432,cloud:"云原声",type:"C++"}, -// ] -const settings={ - dots: false, - infinite: true, - speed: 1000, - slidesToShow: 1, - slidesToScroll: 1, - autoplay:true, - arrows:false, - adaptiveHeight:true -} - -function SubBanner(props) { - const mygetHelmetapi = props && props.mygetHelmetapi; - const [ list , setList ] = useState(undefined); - - useEffect(()=>{ - getList(); - },[]) - - function getList() { - const url = `/projects/banner_recommend.json`; - axios.get(url).then(result=>{ - if(result && result.data){ - setList(result.data.projects); - } - }).catch(error=>{}) - } - return( -
    -
    -

    {mygetHelmetapi && mygetHelmetapi.name}

    -

    新一代开发创新服务平台 让你的创意在这里释放

    -
    - { - list && list.length > 0 ? - - { - list.map((i,k)=>{ - return( -
  • -
    - -
    -

    {i.name}

    -

    {i.author && i.author.name}

    -
    -
    -

    {i.description}

    -
    - {i.visits} - {i.category && i.category.id && {i.category.name}} - {i.language && i.language.id && {i.language.name}} -
    -
    • - ) - }) - } -     - :"" - } -
    -
    -
    -
    - { - list && list.length > 0 && list.map((i,k)=>{ - return( - k%2 === 0? {i.author && i.author.name}/{i.name} : "" - ) - }) - } -
    -
    - -
    -
    - { - list && list.length > 0 && list.map((i,k)=>{ - return( - k%2 > 0 ? {i.author && i.author.name}/{i.name} : "" - ) - }) - } -
    -
    - -
    -
    -
    - ) -} -export default SubBanner diff --git a/src/forge/Main/projecthome/SubList.jsx b/src/forge/Main/projecthome/SubList.jsx deleted file mode 100644 index 9449521c..00000000 --- a/src/forge/Main/projecthome/SubList.jsx +++ /dev/null @@ -1,145 +0,0 @@ -import React , { useEffect , useState } from 'react'; -import hotAuthor from '../img/index/hotAuthor.png'; -import week from '../img/index/week.png'; -import month from '../img/index/month.png'; -import { Link } from 'react-router-dom'; -import axios from 'axios'; -import { getImageUrl } from 'educoder'; - - -function SubList() { - - const [ weekList ,setWeekList ] = useState(undefined); - const [ monthList ,setMonthList ] = useState(undefined); - const [ authorList ,setAuthorList ] = useState(undefined); - - useEffect(()=>{ - getList(7); - getList(30); - getAuthorList(7); - },[]) - - function getList(time){ - const url = `/project_rank.json`; - axios.get(url,{ - params:{ - time - } - }).then(result=>{ - if(result && result.data){ - time === 7 ? setWeekList(result.data.projects) : setMonthList(result.data.projects); - } - }).catch(error=>{}) - } - function getAuthorList(time){ - const url = `/user_rank.json`; - axios.get(url,{ - params:{ - time - } - }).then(result=>{ - if(result && result.data){ - setAuthorList(result.data.users); - } - }).catch(error=>{}) - } - - return( -
    - { - authorList && authorList.length > 0? -
    -
    本周热门开发者
    -
    - { - authorList.map((i,k)=>{ - return( -
  • -
    - -
    - {i.name} - { - i.project && i.project.name ? -

    - - - {i.project && i.project.name} - -

    - :"" - } -
    -
    -
    • - ) - }) - } -
    -
    - :"" - } - - { - weekList && weekList.length > 0 ? -
    -
    本周热门项目
    -
    - { - weekList.map((i,k)=>{ - return( -
  • -
    - {k+1} - {i.owner && i.owner.name}/{i.name} - - {i.praises} - -
    - {i.description && -
    - {i.description} -
    - } -
    • - ) - }) - } -
    -
    - :"" - } - { - monthList && monthList.length > 0? -
    -
    本月热门项目
    -
    - { - monthList.map((i,k)=>{ - return( -
  • -
    - {k+1} - {i.owner && i.owner.name}/{i.name} - - {i.praises} - -
    - {i.description && -
    - {i.description} -
    - } -
    • - ) - }) - } -
    -
    - :"" - } - -
    - ) -} -export default SubList; \ No newline at end of file diff --git a/src/forge/Main/projecthome/SubUnitBanner.jsx b/src/forge/Main/projecthome/SubUnitBanner.jsx deleted file mode 100644 index 1069452d..00000000 --- a/src/forge/Main/projecthome/SubUnitBanner.jsx +++ /dev/null @@ -1,92 +0,0 @@ -import React , { useEffect , useState } from 'react'; -import Hot from '../img/index/hot.png'; -import Slider from "react-slick"; -import huawei from '../img/index/unit/huawei.png'; -import langchao from '../img/index/unit/langchao.png'; -import jijinhui from '../img/index/unit/jijinhui.png'; -import mulan from '../img/index/unit/mulan.png'; -import xigongye from '../img/index/unit/xigongye.png'; -import feiteng from '../img/index/unit/feiteng.png'; -import xiuos from '../img/index/unit/xiuos.png'; -import huake from '../img/index/unit/huake.png'; -import axios from 'axios'; -import { Link } from 'react-router-dom'; -import { getImageUrl } from 'educoder'; - -const settings = { - dots: false, - infinite: true, - slidesToShow: 1, - slidesToScroll: 1, - vertical: true, - verticalSwiping: true, - autoplay:true, - arrows:false -}; -// const group_size = 6; -const list =[ - [ - {url:"/Huawei_Technology",avatar_url:huawei,name:"华为技术有限公司"}, - {url:"/openatom_foundation",avatar_url:jijinhui,name:"开放原子开源基金会"}, - {url:"/Inspur",avatar_url:langchao,name:"浪潮信息"}, - {url:"/mulan-community",avatar_url:mulan,name:"木兰开源社区"}, - ], - [ - {url:"/CrowdOS_WeSense",avatar_url:xigongye,name:"西北工业大学"}, - {url:"/pkecosystem",avatar_url:feiteng,name:"PK开源生态项目组"}, - {url:"/xuos",avatar_url:xiuos,name:"泛在操作系统实验室"}, - {url:"/hustos",avatar_url:huake,name:"华中科技大学操作系统团队"}, - ] -] -function SubUnitBanner() { - - // const [ list , setlist ] = useState(undefined); - - // useEffect(()=>{ - // getRecommandOrz(); - // },[]) - - // function getRecommandOrz(params) { - // const url = `/organizations/recommend.json`; - // axios.get(url,{ - // params:{ - // group_size - // } - // }).then(result=>{ - // if(result){ - // setlist(result.data.organizations) - // } - // }).catch(error=>{}) - // } - return( - list && list.length > 0 ? -
    -
    -
    - 精选开源组织 - -
    - - { - list.map((i,k)=>{ - return( -
    - { - i.map((j,k1)=>{ - return( - {j.name} - ) - }) - } -
    - ) - }) - } -     -
    -
    - :"" - - ) -} -export default SubUnitBanner; \ No newline at end of file diff --git a/src/forge/Main/projecthome/components/Banner.jsx b/src/forge/Main/projecthome/components/Banner.jsx new file mode 100644 index 00000000..7c4cd357 --- /dev/null +++ b/src/forge/Main/projecthome/components/Banner.jsx @@ -0,0 +1,71 @@ +import React, { useEffect, useState } from 'react'; +import './index.scss'; +import banner1 from '../../img/home/banner1.webp'; +import banner2 from '../../img/home/banner2.webp'; +import banner3 from '../../img/home/banner3.webp'; + +const BANNER_DATA = [ + { key: 1, name: '开源仓库', title: '军用开源软件仓库', content: '提供软件源码的集中托管与协作、编译构建后的制品统一管理，并支持一键搜索与下载成熟可用的应用程序，为军事软件的全生命周期提供一站式管理与分发服务', img: banner1}, + { key: 2, name: '供应链平台', title: '军用开源软件仓库', content: '提供软件源码的集中托管与协作、编译构建后的制品统一管理，并支持一键搜索与下载成熟可用的应用程序，为军事软件的全生命周期提供一站式管理与分发服务', img: banner2}, + { key: 3, name: '软件工厂', title: '军用开源软件仓库', content: '提供软件源码的集中托管与协作、编译构建后的制品统一管理，并支持一键搜索与下载成熟可用的应用程序，为军事软件的全生命周期提供一站式管理与分发服务', img: banner3} + ] + +// 预加载所有图片 +const preloadImages = (data) => { + data.forEach(item => { + const img = new Image(); + img.src = item.img; + }); +}; + +function Banner(props) { + const [selected, setSelected] = useState(BANNER_DATA[0]); + const [bannerList] = useState(BANNER_DATA); + + // 在组件挂载时预加载图片 + useEffect(() => { + preloadImages(bannerList); + }, [bannerList]); // 只在组件挂载时运行一次 + + const handleSelect = (key) => { + const item = bannerList.find(b => b.key === key); + if (item) setSelected(item); + }; + + // 定时器逻辑保持不变 + useEffect(() => { + const timer = setInterval(() => { + const currentIndex = bannerList.findIndex(item => item.key === selected.key); + const nextIndex = (currentIndex + 1) % bannerList.length; + setSelected(bannerList[nextIndex]); + }, 5000); + + return () => clearInterval(timer); + }, [selected, bannerList]); + + return ( +
    + {/* ... 渲染逻辑不变 */} +
    + {bannerList.map(item => ( +
    handleSelect(item.key)} + > + {item.name} +
    +
    + ))} +
    +
    +

    {selected.title}

    +

    {selected.content}

    + +
    +
    + ); +} + +export default Banner; + diff --git a/src/forge/Main/projecthome/components/Chain.jsx b/src/forge/Main/projecthome/components/Chain.jsx new file mode 100644 index 00000000..8b901e89 --- /dev/null +++ b/src/forge/Main/projecthome/components/Chain.jsx @@ -0,0 +1,71 @@ +import React, { useEffect, useState, useRef } from 'react'; +import './index.scss'; +import chain1 from '../../img/home/chain1.png'; +import chain2 from '../../img/home/chain2.png'; +import chain3 from '../../img/home/chain3.png'; +import chain4 from '../../img/home/chain4.png'; +import chain5 from '../../img/home/chain5.png'; +import chain6 from '../../img/home/chain6.png'; +import chainGif from '../../img/home/chain-gif.gif' + +const Item = [ + {text: '威胁情报管理', desc: '汇聚内外部威胁数据，实现情报的集中分析与主动防御', img: chain1}, + {text: '软件供应链分析', desc: '深度分析开源及第三方软件依赖，识别其中的潜在威胁与合规问题', img: chain2}, + {text: '全景图谱维护', desc: '构建并动态更新供应链组件关系图谱，清晰洞察依赖与风险来源', img: chain3}, + {text: '智能风险预警', desc: '基于规则与算法实时监测，对供应链潜在中断与安全风险进行提前预警', img: chain4}, + {text: '漏洞风险识别', desc: '快速识别软件组件中的已知漏洞，并提供修复优先级建议', img: chain5}, + {text: '硬件供应链监控', desc: '监控硬件组件从生产到交付的全流程，确保来源可信与固件安全', img: chain6}, +] + +function Chain(props) { + + const contentRef = useRef(null); + const [isVisible, setIsVisible] = useState(false); + + useEffect(() => { + const observer = new IntersectionObserver((entries) => { + const entry = entries[0]; + // 如果元素进入视口 + if (entry.isIntersecting) { + setIsVisible(true); + // 只触发一次动画 + observer.disconnect(); + } + }, { + threshold: 0.3 //露出 30% 时触发 + }); + + if (contentRef.current) { + observer.observe(contentRef.current); + } + + return () => { + if (contentRef.current) observer.disconnect(); + }; + }, []); + + return ( +
    +

    供应链平台

    +

    全链路软硬件风险控制

    +
    + { + Item.map((e, index) => { + return
    + +
    +

    { e.text }

    +

    { e.desc }

    +
    +
    + }) + } +
    + +
    +
    +
    + ); +} + +export default Chain; diff --git a/src/forge/Main/projecthome/components/Factory.jsx b/src/forge/Main/projecthome/components/Factory.jsx new file mode 100644 index 00000000..f30afab4 --- /dev/null +++ b/src/forge/Main/projecthome/components/Factory.jsx @@ -0,0 +1,68 @@ +import React, { useEffect, useState } from 'react'; +import './index.scss'; +import factory1 from '../../img/home/factory1.webp'; +import factory2 from '../../img/home/factory2.webp'; +import factory3 from '../../img/home/factory3.webp'; +import factory4 from '../../img/home/factory4.webp'; + +const Item1 = [ + {text: '全流程协同', desc: '提供从需求、设计、开发到测试的端到端线上协同能力，确保信息无缝流转，提升团队协作效率', img: factory1, sub: ['端到端协同', '全流程无缝管理', '团队效率提升']}, + {text: '持续交付流水线', desc: '提供自动化构建、测试与部署的一站式流水线，实现快速、可靠的软件集成与交付，提升发布效率', img: factory2, sub: ['自动化流水线', '拖拽快速生成流水线', '高效构建']}, + {text: '组件制品管理', desc: '对二进制组件与依赖进行统一存储、版本控制与全生命周期管理，确保制品可信、可追溯、易管理', img: factory1, sub: ['统一存储', '版本管控', '全生命周期']}, + {text: '结构化知识库', desc: '实现项目文档、规范与经验的沉淀、分类与共享，形成可复用的组织资产，赋能团队持续成长', img: factory2, sub: ['知识沉淀', '智能检索', '版本回溯']}, +] + +const Item2 = [ + {text: '自动化测试体系', desc: '集成多层级自动化测试能力，并提供详尽的测试报告与分析，保障产品质量，提升测试效率', img: factory3, sub: ['多级测试', '质量分析', 'GJB测试报告生成']}, + {text: '三库统一管控', desc: '实现源代码库、制品库与知识库的关联与统一管控，保障研发资产的一致性、安全性与可追溯性', img: factory4, sub: ['三库联动', '资产溯源', '统一治理']}, +] + +function Factory(props) { + + return ( +
    +

    软件工厂

    +

    面向军方的高效项目工程化系统管理

    +
    + { + Item1.map((e, index) => { + return
    + +

    { e.text }

    +

    { e.desc }

    +
    + { + e.sub.map((subE, subIndex) => { + return { subE } + }) + } +
    +
    + }) + } +
    +
    + { + Item2.map((e, index) => { + return
    +
    +

    { e.text }

    +

    { e.desc }

    +
    + { + e.sub.map((subE, subIndex) => { + return { subE } + }) + } +
    +
    + +
    + }) + } +
    +
    + ); +} + +export default Factory; diff --git a/src/forge/Main/projecthome/components/Forum.jsx b/src/forge/Main/projecthome/components/Forum.jsx new file mode 100644 index 00000000..0eafc425 --- /dev/null +++ b/src/forge/Main/projecthome/components/Forum.jsx @@ -0,0 +1,53 @@ +import React, { useEffect, useState } from 'react'; +import './index.scss'; +import forum1 from '../../img/home/forum1.webp'; +import forum2 from '../../img/home/forum2.webp'; +import forum3 from '../../img/home/forum3.webp'; + +const Item1 = [ + {text: '结构化论坛分区', desc: '清晰划分专业版块，助您快速定位技术话题，参与高效讨论'}, + {text: '自由开放的交流通道', desc: '支持自由发帖与互动回帖，促进知识共享与思想碰撞'}, + {text: '发帖审核及内容治理', desc: '实施内容审核机制，维护高质量、安全有序的交流环境'}, + {text: '需求提报及产品共创', desc: '提供官方需求提报通道，支持用户反馈需要的组件需求及提报功能建议'}, +] + +const Item2 = [ + {text: '精准探讨专业技术', desc: '设有问答交流、技术专区、最佳实践等核心版块', img: forum1}, + {text: '实现知识的共享与思想的碰撞', desc: '支持自由发帖、回帖，参与各类技术讨论', img: forum2}, + {text: '听见每个用户的声音', desc: '官方【需求提报】通道反馈需要的组件需求与功能建议', img: forum3}, +] + +function forum(props) { + + return ( +
    +

    论坛交流

    +

    需求探讨互动，开启开源新视野

    +
    + { + Item1.map((e, index) => { + return
    +

    { e.text }

    +

    { e.desc }

    +
    + }) + } +
    +
    + { + Item2.map((e, index) => { + return
    + +
    +

    { e.text }

    +

    { e.desc }

    +
    +
    + }) + } +
    +
    + ); +} + +export default forum; diff --git a/src/forge/Main/projecthome/components/Store.jsx b/src/forge/Main/projecthome/components/Store.jsx new file mode 100644 index 00000000..ee884606 --- /dev/null +++ b/src/forge/Main/projecthome/components/Store.jsx @@ -0,0 +1,83 @@ +import React, { useEffect, useState, useRef } from 'react'; +import './index.scss'; +import store1 from '../../img/home/store1.png'; +import store2 from '../../img/home/store2.png'; +import store3 from '../../img/home/store3.png'; +import store4 from '../../img/home/store4.png'; +import store5 from '../../img/home/store5.png'; +import store6 from '../../img/home/store6.png'; +import storeR1 from '../../img/home/store-r-1.webp'; +import storeR2 from '../../img/home/store-r-2.webp'; +import storeR3 from '../../img/home/store-r-3.png' + +const Item = [ + {text: '数据存储', img: store1}, + {text: '元数据管理', img: store2}, + {text: '数据同步', img: store3}, + {text: '数据管理', img: store4}, + {text: '快速检索', img: store5}, + {text: '制品分发', img: store6}, +] + +function Store(props) { + + const contentRef = useRef(null); + const [isVisible, setIsVisible] = useState(false); + + useEffect(() => { + const observer = new IntersectionObserver((entries) => { + const entry = entries[0]; + // 如果元素进入视口 + if (entry.isIntersecting) { + setIsVisible(true); + // 只触发一次动画 + observer.disconnect(); + } + }, { + threshold: 0.3 //露出 30% 时触发 + }); + + if (contentRef.current) { + observer.observe(contentRef.current); + } + + return () => { + if (contentRef.current) observer.disconnect(); + }; + }, []); + + return ( +
    +

    开源仓库

    +

    一站式国产化软硬件体验与适配中心

    +
    + { + Item.map(e => { + return
    + + { e.text } +
    + }) + } +
    +
    +
    +

    一站式国产化软硬件体验与适配中心

    +

    提供统一可信的代码与制品存储服务，确保资产安全稳定、防丢失篡改

    +

    实现制品从创建到归档的全流程可追溯与自动化管理，提升交付效率

    +

    通过数据治理与光宇同步，实现制品快速、安全的分发与极速下载体验

    +
    +
    + + + +
    +
    +
    + ); +} + +export default Store; diff --git a/src/forge/Main/projecthome/components/index.scss b/src/forge/Main/projecthome/components/index.scss new file mode 100644 index 00000000..81ec204c --- /dev/null +++ b/src/forge/Main/projecthome/components/index.scss @@ -0,0 +1,504 @@ +.home-banner { + height: 33vw; + display: flex; + padding-left: 160px; + padding-top: 182px; + margin-top: -58px; + background-repeat: no-repeat; + background-size: auto 100%; + + // 定义动画关键帧：从高度0变到100% + @keyframes vertical-progress { + from { + height: 0; + } + to { + height: 100%; + } + } + + .banner-tab { + font-size: 15px; + height: fit-content; + border-right: 1px solid #ffffff44; + + &-item { + width: 148px; + height: 60px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: #ffffff; + + &-selected { + background-image: linear-gradient(270deg, rgba(33, 73, 212, 0.46) 0%, rgba(1, 5, 15, 0) 100%); + position: relative; + + .item-progress { + position: absolute; + right: -1px; + top: 0; // 【关键】锚定顶部，确保向下生长 + width: 2px; + height: 0; // 【关键】初始高度为0，由动画控制增长 + background-image: linear-gradient(136.87deg, #5eb4ff 0%, #2149d4 100%); + + // 【关键】添加动画：5秒，线性匀速，结束后保持最后一帧状态 + animation: vertical-progress 5s linear forwards; + } + + span { + font-family: alibaba; + background-image: linear-gradient(136.9deg, #5eb4ff 0%, #54b5ff 26.25%, #3c80e9 62.21%, #2249d2 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + } + } + } + + @keyframes content-fade-in { + 0% { + opacity: 0; + transform: translateY(10px); + } + 100% { + opacity: 1; + transform: translateY(0); + } + } + + .banner-content { + color: #ffffff; + margin-left: 43px; + width: 677px; + animation: content-fade-in 0.8s ease-out forwards; + h1 { + font-family: ziyouwenyihei; + color: #ffffff; + font-size: 36px; + margin-bottom: 10px; + line-height: 40px; + } + p { + opacity: 80%; + font-family: alibabaReg; + font-size: 16px; + } + button { + margin-top: 15px; + cursor: pointer; + background: none; + border: unset; + + width: 140px; + height: 36.5px; + font-size: 16px; + + position: relative; + z-index: 1; + display: flex; + align-items: center; + justify-content: center; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + + background-image: url('../../img/home/button.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + } + + &:hover { + &::before { + transform: rotate(180deg); + } + } + } + + } +} +.home-module { + display: flex; + flex-direction: column; + align-items: center; + .module-title { + font-family: alibaba; + color: #091221; + font-size: 36px; + margin-bottom: 10px; + line-height: 50px; + } + .module-desc { + font-family: alibabareg; + color: #091221; + font-size: 18px; + } +} +.home-store { + padding-top: 68px; + .store-feature { + display: flex; + justify-content: space-around; + margin-top: 80px; + &-item { + width: 167px; + height: 54px; + background-color: #ffffff; + border-radius: 27px; + display: flex; + align-items: center; + justify-content: center; + margin-right: 60px; + img { + width: 24px; + margin-right: 4px; + } + } + } + .store-content { + width: 1600px; + height: 470px; + background-color: #ffffff; + border-radius: 15px; + margin-top: 48px; + display: flex; + .content-left { + padding: 80px 48px; + color: #091221; + h2 { + font-family: alibaba; + font-size: 24px; + padding-bottom: 37px; + } + p { + margin-left: 46px; + position: relative; + padding-bottom: 23px; + font-size: 16px; + &::before { + content: ""; + position: absolute; + top: 0; + left: -46px; + width: 36px; + height: 36px; + background-image: url('../../img/home/check.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + } + } + } + + @keyframes shinning { + from { + opacity: 0; + } + 30% { + opacity: 1; + } + 60% { + opacity: 0; + } + to { + opacity: 1; + } + } + + .content-right { + margin-left: auto; + width: 918px; + background-image: url('../../img/home/store-bg.png'); + background-repeat: no-repeat; + background-size: 100% 100%; + position: relative; + + .right-img-1, .right-img-2, .right-img-3 { + opacity: 0; + position: absolute; + } + + .right-img-1 { + width: 640px; + height: 438px; + left: 237px; + top: 15px; + } + .right-img-2 { + width: 588px; + height: 111px; + left: 181px; + top: 80px; + } + .right-img-3 { + width: 57px; + height: 57px; + left: 686px; + top: 20px; + } + + &.animate-active { + .right-img-1 { + animation: fadeInUp 0.8s ease-out forwards; + } + .right-img-2 { + animation: fadeInUp 0.8s ease-out forwards; + animation-delay: 0.2s; // 延迟 0.2s 执行 + } + .right-img-3 { + animation: shinning 1.6s linear forwards; + animation-delay: 0.4s; // 延迟 0.4s 执行 + } + } + } + } +} +.home-chain { + padding-top: 200px; + background-image: url("../../img/home/chain-bg.webp"); + background-repeat: no-repeat; + background-size: 100% 100%; + height: 913px; + margin-top: -100px; + .chain-content { + position: relative; + height: 566px; + width: 1600px; + &-img { + position: absolute; + left: 50%; + transform: translate(-50%, 0); + width: 566px; + height: 566px; + background-image: url("../../img/home/chain-content.webp"); + background-repeat: no-repeat; + background-size: 100% 100%; + img { + width: 121px; + height: 121px; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } + } + &-item { + position: absolute; + width: 580px; + height: 104px; + background-color: #ffffff; + border-radius: 15px; + padding: 28px 30px; + display: flex; + z-index: 1; + opacity: 0; + img { + width: 48px; + height: 48px; + } + .item-right { + margin-left: 25px; + display: flex; + flex-direction: column; + justify-content: space-between; + p { + color:#091221; + font-size: 14px; + line-height: 14px; + } + } + } + .item-1 { + top: 82px; + left: 56px; + } + .item-2 { + top: 82px; + right: 56px; + } + .item-3 { + top: 237px; + left: 0; + } + .item-4 { + top: 237px; + right: 0; + } + .item-5 { + top: 392px; + left: 56px; + } + .item-6 { + top: 392px; + right: 56px; + } + + &.animate-active { + .chain-content-item { + animation: fadeInUp 0.6s ease-out forwards; + } + + // 循环生成延迟 + @for $i from 1 through 6 { + .item-#{$i} { + animation-delay: #{$i * 0.1}s; + } + } + } + } +} +.home-factory { + margin-top: 60px; + background-image: url("../../img/home/factory-bg1.webp"); + background-repeat: no-repeat; + background-size: 100% 100%; + p { + color: #091221; + font-size: 14px; + line-height: 24px; + margin-top: 20px; + } + .factory-content1 { + display: flex; + margin-top: 80px; + margin-bottom: 20px; + &-item { + box-sizing: border-box; + width: 385px; + height: 354px; + background-color: #ffffff; + background-image: url("../../img/home/factory-bg2.webp"); + background-repeat: no-repeat; + background-size: 100% 100%; + padding: 60px 33px; + margin-right: 20px; + border-radius: 14px; + img { + width: 40px; + height: 40px; + margin-bottom: 40px; + } + .item-sub { + margin-top: 30px; + span { + padding: 3px 10px 4px 10px; + background-color: #f6f7fa; + border-radius: 4px; + color: #091221bd; + font-size: 12px; + } + span:not(:last-child) { + margin-right: 10px; + } + } + } + } + .factory-content2 { + display: flex; + &-item { + display: flex; + width: 790px; + margin-right: 20px; + background-image: linear-gradient(171.31deg,#ffffff 0%,#ffffff 52.22%,#e2e9ff 100%); + border-radius: 15px; + justify-content: space-between; + .item-left { + padding: 28px 0 28px 35px; + } + img { + width: 164px; + height: 164px; + flex-shrink: 0; + } + .item-sub { + margin-top: 20px; + span { + padding: 3px 10px 4px 10px; + background-color: #f6f7fa; + border-radius: 4px; + color: #091221bd; + font-size: 12px; + } + span:not(:last-child) { + margin-right: 10px; + } + } + } + } +} +.home-forum { + margin-top: 90px; + height: 694px; + background-image: url("../../img/home/forum-bg.webp"); + background-repeat: no-repeat; + background-size: 100% auto; + background-position: center bottom; + .forum-content1 { + margin-top: 78px; + display: flex; + &-item { + height: 100px; + display: flex; + flex-direction: column; + justify-content: space-between; + width: 356px; + padding: 0 54px; + line-height: 30px; + h4 { + font-size: 18px; + } + &:not(:last-child) { + border-right: 1px dashed rgba(146, 164, 201, 0.56); + } + } + } + .forum-content2 { + margin-top: 135px; + width: 1600px; + height: 160px; + background-color: #ffffff; + border-radius: 15px; + display: flex; + padding: 60px; + justify-content: space-between; + &-item { + display: flex; + &:not(:last-child) { + margin-right: 105px; + padding-right: 105px; + border-right: 1px dashed rgba(146, 164, 201, 0.56); + } + img { + width: 40px; + height: 40px; + flex-shrink: 0; + margin-right: 20px; + } + .item-right { + display: flex; + flex-direction: column; + justify-content: space-between; + p { + line-height: 14px; + } + } + } + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(50px); + } + to { + opacity: 1; + transform: translateY(0); + } +} diff --git a/src/modules/tpm/TPMIndex.css b/src/modules/tpm/TPMIndex.css index 5644113c..81321dc7 100644 --- a/src/modules/tpm/TPMIndex.css +++ b/src/modules/tpm/TPMIndex.css @@ -29,9 +29,22 @@ body>.-task-title { min-width: 1200px; z-index: 1001; position: fixed; - background: #1B2440; + background: rgb(27, 36, 64); color: #fff; } + +.homeHeader { + background: rgba(27, 36, 64, 0.1); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + transition: background 0.3s ease; +} + +.homeHeader.active { + background: rgba(27, 36, 64, 1); +} + + .newHeaders.publicNav{ position: absolute; background: rgba(27, 36, 64,0.2);