diff --git a/src/App.js b/src/App.js index 98062d46..69d6a134 100644 --- a/src/App.js +++ b/src/App.js @@ -113,10 +113,10 @@ const Home = Loadable({ loading: Loading, }) -// const Home = Loadable({ -// loader: () => import('./forge/Main/projectHomeNew/v2'), -// loading: Loading, -// }) +const Store = Loadable({ + loader: () => import('./forge/Main/projectHomeNew/v2'), + loading: Loading, +}) const Relaction = Loadable({ loader: () => import("./forge/Account/Index"), @@ -465,7 +465,7 @@ class App extends Component { ( - + ) } /> diff --git a/src/forge/Component/Component.scss b/src/forge/Component/Component.scss index 5fd9874c..7e53d4cd 100644 --- a/src/forge/Component/Component.scss +++ b/src/forge/Component/Component.scss @@ -278,7 +278,7 @@ li.ant-menu-item{ width: 40px; right: 30px; bottom: 80px; - z-index: 10; + z-index: 20; } // @media screen and (max-width: 1920px){ diff --git a/src/forge/Head/Header.js b/src/forge/Head/Header.js index 84cf2675..e6d1d6c0 100644 --- a/src/forge/Head/Header.js +++ b/src/forge/Head/Header.js @@ -360,7 +360,8 @@ class NewHeader extends Component { settings && settings.navbar && settings.navbar.length > 0 ?
    { - settings.navbar && settings.navbar.map((item, key) => { + settings.navbar && settings.navbar.map((item, key) => { + if (item.hidden) return var new_link = item.link; var is_hidden = item.hidden; var waiLian = (new_link && str.filter(item=>new_link.indexOf(item)>-1) ); diff --git a/src/forge/Main/img/home/button.png b/src/forge/Main/img/home/button.png index 255d12ae..aba71f99 100644 Binary files a/src/forge/Main/img/home/button.png and b/src/forge/Main/img/home/button.png differ diff --git a/src/forge/Main/img/home/chain-gif.gif b/src/forge/Main/img/home/chain-gif.gif index d8994a05..30681c58 100644 Binary files a/src/forge/Main/img/home/chain-gif.gif and b/src/forge/Main/img/home/chain-gif.gif differ diff --git a/src/forge/Main/img/home/factory-bg2.webp b/src/forge/Main/img/home/factory-bg2.webp deleted file mode 100644 index 34d81612..00000000 Binary files a/src/forge/Main/img/home/factory-bg2.webp and /dev/null differ diff --git a/src/forge/Main/img/home/factory-icon.png b/src/forge/Main/img/home/factory-icon.png new file mode 100644 index 00000000..ef47b6b6 Binary files /dev/null and b/src/forge/Main/img/home/factory-icon.png differ diff --git a/src/forge/Main/img/home/factory-item-bg1.png b/src/forge/Main/img/home/factory-item-bg1.png new file mode 100644 index 00000000..ae146db3 Binary files /dev/null and b/src/forge/Main/img/home/factory-item-bg1.png differ diff --git a/src/forge/Main/img/home/factory-item-bg2.png b/src/forge/Main/img/home/factory-item-bg2.png new file mode 100644 index 00000000..28f4fcf9 Binary files /dev/null and b/src/forge/Main/img/home/factory-item-bg2.png differ diff --git a/src/forge/Main/img/home/factory-item-bg3.png b/src/forge/Main/img/home/factory-item-bg3.png new file mode 100644 index 00000000..6e771018 Binary files /dev/null and b/src/forge/Main/img/home/factory-item-bg3.png differ diff --git a/src/forge/Main/img/home/factory-item-bg4.png b/src/forge/Main/img/home/factory-item-bg4.png new file mode 100644 index 00000000..d59ff048 Binary files /dev/null and b/src/forge/Main/img/home/factory-item-bg4.png differ diff --git a/src/forge/Main/img/home/factory3.png b/src/forge/Main/img/home/factory3.png new file mode 100644 index 00000000..9765dc35 Binary files /dev/null and b/src/forge/Main/img/home/factory3.png differ diff --git a/src/forge/Main/img/home/factory3.webp b/src/forge/Main/img/home/factory3.webp deleted file mode 100644 index bcae4766..00000000 Binary files a/src/forge/Main/img/home/factory3.webp and /dev/null differ diff --git a/src/forge/Main/img/home/factory4.png b/src/forge/Main/img/home/factory4.png new file mode 100644 index 00000000..175d972a Binary files /dev/null and b/src/forge/Main/img/home/factory4.png differ diff --git a/src/forge/Main/img/home/factory4.webp b/src/forge/Main/img/home/factory4.webp deleted file mode 100644 index 59e058cd..00000000 Binary files a/src/forge/Main/img/home/factory4.webp and /dev/null differ diff --git a/src/forge/Main/img/home/forum-bg.png b/src/forge/Main/img/home/forum-bg.png new file mode 100644 index 00000000..27fce6ba Binary files /dev/null and b/src/forge/Main/img/home/forum-bg.png differ diff --git a/src/forge/Main/img/home/forum-bg.webp b/src/forge/Main/img/home/forum-bg.webp deleted file mode 100644 index 7918a6d8..00000000 Binary files a/src/forge/Main/img/home/forum-bg.webp and /dev/null differ diff --git a/src/forge/Main/img/home/forum-bg1.png b/src/forge/Main/img/home/forum-bg1.png new file mode 100644 index 00000000..d4fbc0fc Binary files /dev/null and b/src/forge/Main/img/home/forum-bg1.png differ diff --git a/src/forge/Main/projecthome/Index.jsx b/src/forge/Main/projecthome/Index.jsx index 43cfb5b3..d6e3d214 100644 --- a/src/forge/Main/projecthome/Index.jsx +++ b/src/forge/Main/projecthome/Index.jsx @@ -15,13 +15,13 @@ function Index(props) { return(
    - +
    - - - - + + + +
    ) diff --git a/src/forge/Main/projecthome/Index.scss b/src/forge/Main/projecthome/Index.scss index c7c8b15d..1ed2551c 100644 --- a/src/forge/Main/projecthome/Index.scss +++ b/src/forge/Main/projecthome/Index.scss @@ -1,6 +1,18 @@ .home { font-family: alibabareg; + .home-top { + width: 100%; + position: absolute; + z-index: 9; + height: 100px; + background-image: linear-gradient(180deg,#ffffff 0%,#f1f6fd 100%); + border-radius: 100px 100px 0px 0px; + opacity: 0.2; + top: calc(33vw - 117px); + } .home-main { + position: relative; + z-index: 10; border-radius: 100px 100px 0px 0px; margin-top: -100px; background-image:linear-gradient(180deg,#f8faff 0%,#f1f6fd 100%); diff --git a/src/forge/Main/projecthome/components/Banner.jsx b/src/forge/Main/projecthome/components/Banner.jsx index 7c4cd357..561f06fd 100644 --- a/src/forge/Main/projecthome/components/Banner.jsx +++ b/src/forge/Main/projecthome/components/Banner.jsx @@ -3,69 +3,85 @@ import './index.scss'; import banner1 from '../../img/home/banner1.webp'; import banner2 from '../../img/home/banner2.webp'; import banner3 from '../../img/home/banner3.webp'; +import { Link } from "react-router-dom"; 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; - }); -}; + { key: 1, name: '开源仓库', title: '军用开源软件仓库', content: '提供软件源码的集中托管与协作、编译构建后的制品统一管理，并支持一键搜索与下载成熟可用的应用程序，为军事软件的全生命周期提供一站式管理与分发服务', img: banner1 }, + { key: 2, name: '供应链平台', title: '军用开源软件仓库', content: '提供软件源码的集中托管与协作、编译构建后的制品统一管理，并支持一键搜索与下载成熟可用的应用程序，为军事软件的全生命周期提供一站式管理与分发服务', img: banner2 }, + { key: 3, name: '软件工厂', title: '军用开源软件仓库', content: '提供软件源码的集中托管与协作、编译构建后的制品统一管理，并支持一键搜索与下载成熟可用的应用程序，为军事软件的全生命周期提供一站式管理与分发服务', img: banner3 } +] function Banner(props) { const [selected, setSelected] = useState(BANNER_DATA[0]); - const [bannerList] = useState(BANNER_DATA); + const [bannerList, setBannerList] = useState(BANNER_DATA); - // 在组件挂载时预加载图片 useEffect(() => { - preloadImages(bannerList); - }, [bannerList]); // 只在组件挂载时运行一次 + let newData = [] + const nav = props.mygetHelmetapi && props.mygetHelmetapi.navbar ? props.mygetHelmetapi.navbar : [{name: '开源仓库', link: '/explore'},{name: '供应链平台', link: '/explore'},{name: '软件工厂', link: '/explore'}] + for(let i of BANNER_DATA) { + const patch = nav.find(e => { + if (e.name === i.name) i.link = e.link + return e.name === i.name + }) + if ( patch ) { + newData.push(i) + } + } + if (newData.length > 0) { + setBannerList(newData) + } + },[]) 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); + // 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 () => clearInterval(timer); + // }, [selected, bannerList]); return ( -
    - {/* ... 渲染逻辑不变 */} -
    - {bannerList.map(item => ( -
    handleSelect(item.key)} - > - {item.name} -
    -
    - ))} -
    -
    -

    {selected.title}

    -

    {selected.content}

    - +
    + {bannerList.map(item => ( +
    + ))} + +
    +
    + {bannerList.map(item => ( +
    handleSelect(item.key)} + > + {item.name} +
    +
    + ))} +
    +
    +

    {selected.title}

    +

    {selected.content}

    + +
    立即体验
    + +
    ); } + export default Banner; diff --git a/src/forge/Main/projecthome/components/Factory.jsx b/src/forge/Main/projecthome/components/Factory.jsx index f30afab4..7e7c0802 100644 --- a/src/forge/Main/projecthome/components/Factory.jsx +++ b/src/forge/Main/projecthome/components/Factory.jsx @@ -1,9 +1,10 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useRef } 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'; +import factory3 from '../../img/home/factory3.png'; +import factory4 from '../../img/home/factory4.png'; +import factoryIcon from '../../img/home/factory-icon.png'; const Item1 = [ {text: '全流程协同', desc: '提供从需求、设计、开发到测试的端到端线上协同能力，确保信息无缝流转，提升团队协作效率', img: factory1, sub: ['端到端协同', '全流程无缝管理', '团队效率提升']}, @@ -18,12 +19,60 @@ const Item2 = [ ] function Factory(props) { + const content1Ref = useRef(null); + const content2Ref = useRef(null); + const [isVisible1, setIsVisible1] = useState(false); + const [isVisible2, setIsVisible2] = useState(false); + + useEffect(() => { + const observer = new IntersectionObserver((entries) => { + const entry = entries[0]; + // 如果元素进入视口 + if (entry.isIntersecting) { + setIsVisible1(true); + // 只触发一次动画 + observer.disconnect(); + } + }, { + threshold: 0.3 //露出 30% 时触发 + }); + + if (content1Ref.current) { + observer.observe(content1Ref.current); + } + + return () => { + if (content1Ref.current) observer.disconnect(); + }; + }, []); + + useEffect(() => { + const observer = new IntersectionObserver((entries) => { + const entry = entries[0]; + // 如果元素进入视口 + if (entry.isIntersecting) { + setIsVisible2(true); + // 只触发一次动画 + observer.disconnect(); + } + }, { + threshold: 0.3 //露出 30% 时触发 + }); + + if (content2Ref.current) { + observer.observe(content2Ref.current); + } + + return () => { + if (content2Ref.current) observer.disconnect(); + }; + }, []); return (

    软件工厂

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

    -
    +
    { Item1.map((e, index) => { return
    @@ -41,7 +90,7 @@ function Factory(props) { }) }
    -
    +
    { Item2.map((e, index) => { return
    @@ -57,6 +106,37 @@ function Factory(props) {
    + { + index === 0 && <> +
    +
    + + } + { + index === 1 && <> +
    + + 安全管控 +
    +
    + 保 + 障 + 研 + 发 + 资 + 产 + 一 + 致 + 、 + 安 + 全 + 、 + 可 + 追 + 溯 +
    + + }
    }) } diff --git a/src/forge/Main/projecthome/components/Forum.jsx b/src/forge/Main/projecthome/components/Forum.jsx index 0eafc425..b74c748b 100644 --- a/src/forge/Main/projecthome/components/Forum.jsx +++ b/src/forge/Main/projecthome/components/Forum.jsx @@ -3,6 +3,7 @@ import './index.scss'; import forum1 from '../../img/home/forum1.webp'; import forum2 from '../../img/home/forum2.webp'; import forum3 from '../../img/home/forum3.webp'; +import forumBg from '../../img/home/forum-bg1.png'; const Item1 = [ {text: '结构化论坛分区', desc: '清晰划分专业版块，助您快速定位技术话题，参与高效讨论'}, @@ -33,6 +34,7 @@ function forum(props) { }) }
    +
    { Item2.map((e, index) => { diff --git a/src/forge/Main/projecthome/components/Store.jsx b/src/forge/Main/projecthome/components/Store.jsx index ee884606..ee48c8ae 100644 --- a/src/forge/Main/projecthome/components/Store.jsx +++ b/src/forge/Main/projecthome/components/Store.jsx @@ -9,6 +9,7 @@ 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' +import { Link } from "react-router-dom"; const Item = [ {text: '数据存储', img: store1}, @@ -60,17 +61,17 @@ function Store(props) { }) }
    -
    +

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

    -

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

    -

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

    -

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

    +

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

    +

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

    +

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

    + + +
    -
    +
    diff --git a/src/forge/Main/projecthome/components/index.scss b/src/forge/Main/projecthome/components/index.scss index 81ec204c..3e4e4924 100644 --- a/src/forge/Main/projecthome/components/index.scss +++ b/src/forge/Main/projecthome/components/index.scss @@ -1,127 +1,146 @@ + .home-banner { height: 33vw; - display: flex; padding-left: 160px; padding-top: 182px; margin-top: -58px; background-repeat: no-repeat; background-size: auto 100%; + position: relative; + z-index: 1; - // 定义动画关键帧：从高度0变到100% - @keyframes vertical-progress { - from { - height: 0; - } - to { - height: 100%; - } + .banner-image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 0.5s ease-in-out; + background-size: cover; + background-position: center; + z-index: -1; } - .banner-tab { - font-size: 15px; - height: fit-content; - border-right: 1px solid #ffffff44; + .banner-image-active { + opacity: 1; + } - &-item { - width: 148px; - height: 60px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - color: #ffffff; + .banner-overlay-content { + display: flex; + @keyframes vertical-progress { + from { + height: 0; + } + to { + height: 100%; + } + } - &-selected { - background-image: linear-gradient(270deg, rgba(33, 73, 212, 0.46) 0%, rgba(1, 5, 15, 0) 100%); - position: relative; + .banner-tab { + font-size: 15px; + height: fit-content; + border-right: 1px solid #ffffff44; - .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; - } + &-item { + width: 148px; + height: 60px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + color: #ffffff; - 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; + &-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; + background-image: linear-gradient(136.87deg, #5eb4ff 0%, #2149d4 100%); + + //线性匀速，结束后保持最后一帧状态 + 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); + @keyframes content-fade-in { + 0% { + opacity: 0; + transform: translateY(10px); + } + 100% { + opacity: 1; + transform: translateY(0); + } } - 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; + .banner-content { 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; - + 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 { + color: #ffffff; + margin-top: 15px; + cursor: pointer; background-image: url('../../img/home/button.png'); background-repeat: no-repeat; background-size: 100% 100%; - } + width: 140px; + height: 36.5px; + font-size: 16px; + position: relative; + border-radius: 18px; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; - &:hover { &::before { - transform: rotate(180deg); + content: ""; + position: absolute; + width: 150px; + height: 100%; + background-image: linear-gradient(120deg, #fff0 30%, #ffffff4d, #fff0 70%); + top: 0; + left: -150px; + transition: none; + } + + &:hover { + &::before { + left: 100%; + transition: all .65s ease-out; + } } } } - } } .home-module { @@ -169,32 +188,6 @@ 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 { @@ -211,6 +204,72 @@ } } + &.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 执行 + } + .content-left p, .content-left button { + animation: fadeInUp 0.8s ease-out forwards; + } + // 循环生成延迟 + @for $i from 1 through 4 { + .item-#{$i} { + animation-delay: #{$i * 0.1}s !important; + } + } + } + .content-left { + padding: 80px 48px; + color: #091221; + h2 { + font-family: alibaba; + font-size: 24px; + padding-bottom: 37px; + } + p { + opacity: 0; + 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%; + } + } + button { + opacity: 0; + cursor: pointer; + margin-top: 30px; + width: 140px; + height: 36px; + background-color: #2149d4; + border-radius: 22px; + color: #ffffff; + font-size: 16px; + &:hover { + background-color:#325beb; + } + &:active { + background-color:#3b66ff; + } + } + } .content-right { margin-left: auto; width: 918px; @@ -242,20 +301,6 @@ 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 执行 - } - } } } } @@ -341,13 +386,13 @@ &.animate-active { .chain-content-item { - animation: fadeInUp 0.6s ease-out forwards; + animation: fadeInUp 0.8s ease-out forwards; } // 循环生成延迟 @for $i from 1 through 6 { .item-#{$i} { - animation-delay: #{$i * 0.1}s; + animation-delay: #{($i - 1) * 0.1}s; } } } @@ -369,11 +414,11 @@ margin-top: 80px; margin-bottom: 20px; &-item { + opacity: 0; 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; @@ -398,10 +443,28 @@ } } } + @for $i from 1 through 4 { + .item-#{$i} { + background-image: url("../../img/home/factory-item-bg#{$i}.png"); + } + } + &.animate-active { + .factory-content1-item { + animation: fadeInUp 0.8s ease-out forwards; + } + + // 循环生成延迟 + @for $i from 1 through 4 { + .item-#{$i} { + animation-delay: #{($i - 1) * 0.1}s; + } + } + } } .factory-content2 { display: flex; &-item { + position: relative; display: flex; width: 790px; margin-right: 20px; @@ -429,13 +492,104 @@ margin-right: 10px; } } + .line-1 { + border-radius: 1px; + position: absolute; + height: 2px; + width: 0; + background-color: #52cea2; + left: 686px; + top: 68px; + } + .line-2 { + border-radius: 1px; + position: absolute; + height: 2px; + width: 0; + background-color: #52cea2; + left: 686px; + top: 121px; + } + .item-title { + position: absolute; + display: flex; + align-items: center; + right: 33px; + font-family: alibaba; + font-size: 10px; + top: 32px; + img { + width: 16px; + height: 16px; + margin-right: 6px; + } + } + .item-desc { + position: absolute; + font-size: 6px; + display: flex; + align-items: center; + right: 17px; + top: 68px; + + &::before { + content: ""; + width: 4px; + height: 4px; + border-radius: 2px; + background-color: #52cea2; + margin-right: 4px; + } + .char { + opacity: 0; + } + } + + } + @keyframes lineGrow1 { + to { + width: 30px; + } + } + + @keyframes lineGrow2 { + to { + width: 40px; + } + } + + @keyframes fadeIn { + to { + opacity: 1; + } + } + + &.animate-active { + .item-title { + animation: fadeIn 0.8s ease-out forwards; + } + .line-1 { + animation: lineGrow1 0.8s ease-out forwards; + } + .line-2 { + animation: lineGrow2 0.8s ease-out forwards; + } + .item-desc { + .char { + animation: fadeIn 0.5s forwards; + @for $i from 1 through 15 { + &:nth-child(#{$i}) { + animation-delay: #{$i * 0.1}s; + } + } + } + } } } } .home-forum { margin-top: 90px; - height: 694px; - background-image: url("../../img/home/forum-bg.webp"); + background-image: url("../../img/home/forum-bg.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: center bottom; @@ -458,8 +612,12 @@ } } } + .forum-light { + margin-top: 35px; + width: 1600px; + } .forum-content2 { - margin-top: 135px; + margin-bottom: 122px; width: 1600px; height: 160px; background-color: #ffffff;