diff --git a/src/factory/components/Resource/index.jsx b/src/factory/components/Resource/index.jsx
index 1f2be7300..5cd93c4ce 100644
--- a/src/factory/components/Resource/index.jsx
+++ b/src/factory/components/Resource/index.jsx
@@ -5,22 +5,24 @@ import { ScrollTrigger } from 'gsap/ScrollTrigger';
import KFIcon from '../../../components/KFIcon';
import { Link } from 'react-router-dom';
import { getProjectsLists, getSourceList, httpUrl } from '../../api';
-import { factoryZoneId, lessonId, versionId, toolId } from '../../../constants/factory'
+import { factoryZoneId, lessonId, versionId, toolId, commontoolId } from '../../../constants/factory'
import { downloadFunc } from '../../../forge/Utils/utils'
import '../../common.scss'
gsap.registerPlugin(ScrollTrigger);
const resourceInfo = [
- { name: '项目', title: '软件项目', icon: 'icon-xiangmu', desc: '汇聚用户需求,形成开发任务,设置质量门槛,提升软件质量,快速构建软件版本,高效应对市场变化。', path: '/softwareFactory/resource/softwareProject' },
- { name: '版本', title: '软件工厂基座', icon: 'icon-banben', desc: '按照敏捷开发快速迭代的思路,形成解决微小问题的小版本,提供长期支持版本(LTS版)。', path: '/softwareFactory/resource/factoryVersion' },
- { name: '工具', title: '开发工具', icon: 'icon-gongju', desc: '提供开发者所需的各类软件开发工具,包括IDE、Git工具、命令行终端工具、数据库设计工具、图像编辑工具等。', path: '/softwareFactory/resource/developmentTools' },
+ { name: '项目', title: '工厂开源项目', icon: 'icon-xiangmu', desc: '标准化生产线核心代码及软件工厂开发工具源码', path: '/softwareFactory/resource/softwareProject' },
+ { name: '版本', title: '生产线安装包', icon: 'icon-banben', desc: '标准化生产线快速迭代版本和稳定支持版本', path: '/softwareFactory/resource/factoryVersion' },
+ { name: '工具', title: '共建共用工具', icon: 'icon-gongju', desc: '由XX集团、科研院所、地方企业等提供,可免费共用的工具', path: '/softwareFactory/resource/commonTools' },
+ { name: '软件', title: '开源社区软件', icon: 'icon-gongju', desc: '来自开源社区,可按授权许可使用和复用的各类软件', path: '/softwareFactory/resource/developmentTools' },
]
const Resource = forwardRef(({ zoneId }, ref) => {
const r1Ref = useRef(null);
const r2Ref = useRef(null);
const r3Ref = useRef(null);
+ const r4Ref = useRef(null);
const containerRef = useRef(null);
const timelineRef = useRef(null);
@@ -28,11 +30,13 @@ const Resource = forwardRef(({ zoneId }, ref) => {
const [resourceList1, setResourceList1] = useState([]);
const [resourceList2, setResourceList2] = useState([]);
const [resourceList3, setResourceList3] = useState([]);
+ const [resourceList4, setResourceList4] = useState([]);
useEffect(() => {
if (!zoneId) return;
getToolsList();
getVersionList();
+ getCommonToolsList();
getProjectsLists(zoneId, { isHomePage: 1 }).then(res => {
if (res.data && res.data.code === 200) {
setResourceList1(res.data.rows.slice(0, 6));
@@ -59,7 +63,7 @@ const Resource = forwardRef(({ zoneId }, ref) => {
if (!containerRef.current) return;
// 获取面板元素
- const panels = [r1Ref.current, r2Ref.current, r3Ref.current];
+ const panels = [r1Ref.current, r2Ref.current, r3Ref.current, r4Ref.current];
// 创建时间轴动画
timelineRef.current = gsap.timeline({
@@ -76,13 +80,14 @@ const Resource = forwardRef(({ zoneId }, ref) => {
// 第一个面板:逐渐缩小
timelineRef.current.to(panels[0], {
+ y: "-5%",
scale: 0.85,
duration: 1
}, 0);
// 第二个面板:向上移动并缩小
timelineRef.current.to(panels[1], {
- y: "-175%",
+ y: "-50%",
scale: 0.9,
duration: 1
}, 0);
@@ -91,7 +96,14 @@ const Resource = forwardRef(({ zoneId }, ref) => {
timelineRef.current.to(panels[2], {
y: "-150%",
scale: 0.95,
- duration: 1.25
+ duration: 1
+ }, 0);
+
+ // 第三个面板:向上移动最多v
+ timelineRef.current.to(panels[3], {
+ y: "-230%",
+ scale: 0.98,
+ duration: 1.5
}, 0);
// 清理函数
@@ -119,7 +131,7 @@ const Resource = forwardRef(({ zoneId }, ref) => {
const getVersionList = () => {
getSourceList({ id: factoryZoneId, keywords: versionId }).then(res => {
- setResourceList2(res.data.rows.slice(0, 4));
+ setResourceList2(res.data.rows.slice(0, 2));
});
}
@@ -134,6 +146,21 @@ const Resource = forwardRef(({ zoneId }, ref) => {
rows.push({ ...e, extendDataUrl: extendData.url, extendDataHeadImg: extendData.headImg })
});
+ setResourceList4(rows.slice(0, 6));
+ });
+ }
+
+ const getCommonToolsList = () => {
+ getSourceList({ id: factoryZoneId, keywords: commontoolId }).then(res => {
+ const rows = []
+ res.data.rows.forEach(e => {
+ let extendData = {}
+ if (e.extendData) {
+ extendData = JSON.parse(e.extendData)
+ }
+ rows.push({ ...e, extendDataUrl: extendData.url, extendDataHeadImg: extendData.headImg })
+ });
+
setResourceList3(rows.slice(0, 6));
});
}
@@ -144,10 +171,30 @@ const Resource = forwardRef(({ zoneId }, ref) => {
ref={ref}
>
-
资源中枢,共享复用释放生态力量
+
共建共用共享,为软件工厂赋能
+
+
+ {
+ getLeftContent(1)
+ }
+
+ {
+ resourceList2.length > 0 && resourceList2.map((item, index) => {
+ return
+
{item.name}
+
{item.summary}
+
+
+ })
+ }
+
+
+
+
+
{
getLeftContent(0)
@@ -187,25 +234,6 @@ const Resource = forwardRef(({ zoneId }, ref) => {
-
-
- {
- getLeftContent(1)
- }
-
- {
- resourceList2.length > 0 && resourceList2.map((item, index) => {
- return
-
{item.name}
-
{item.summary}
-
-
- })
- }
-
-
-
-
{
@@ -227,6 +255,27 @@ const Resource = forwardRef(({ zoneId }, ref) => {
+
+
+ {
+ getLeftContent(3)
+ }
+
+ {
+ resourceList4.length > 0 && resourceList4.map((item, index) => {
+ return
+
{item.name}
+
{item.summary}
+
+
+
+
+
+ })
+ }
+
+
+
diff --git a/src/factory/components/Resource/index.scss b/src/factory/components/Resource/index.scss
index 6ed435566..2cd1cfae0 100644
--- a/src/factory/components/Resource/index.scss
+++ b/src/factory/components/Resource/index.scss
@@ -1,6 +1,6 @@
.factory-resource {
position: relative;
- min-height: 2000px;
+ min-height: 2300px;
overflow: hidden;
margin-top: 56px;
@@ -10,7 +10,7 @@
position: relative;
width: 100%;
background: linear-gradient(180deg, #ffffff 0%, #ffffff 84.87%, rgba(255, 255, 255, 0) 100%);
- min-height: 800px;
+ min-height: 1000px;
border-top-left-radius: 36px;
border-top-right-radius: 36px;
}
@@ -32,7 +32,7 @@
// 面板堆叠容器
.panels-stack {
position: relative;
- height: 900px;
+ height: 1000px;
display: flex;
justify-content: center;
margin-top: 100px;
@@ -41,7 +41,8 @@
// 面板基础样式
.resource-1,
.resource-2,
- .resource-3 {
+ .resource-3,
+ .resource-4 {
position: absolute;
width: 1600px;
border-radius: 30px;
@@ -52,11 +53,11 @@
// transform-origin: center center;
}
- .resource-1 {
- top: 0;
+ .resource-2 {
+ top: 430px;
height: 663px;
background: #d3ecfc;
- z-index: 1;
+ z-index: 2;
.panel-content .content-right {
.content-item1 {
@@ -140,11 +141,11 @@
}
}
- .resource-2 {
- top: 742px;
+ .resource-1 {
+ top: 0;
height: 350px;
background: #e6ecff;
- z-index: 2;
+ z-index: 1;
.panel-content .content-right {
.content-item2 {
@@ -223,6 +224,51 @@
}
}
}
+ .resource-4 {
+ top: 1810px;
+ height: 622px;
+ background: #DFF0EC;
+ z-index: 4;
+
+ .content-item3 {
+ width: 385px;
+ height: 246px;
+ background: #ffffff;
+ border-radius: 16px;
+ box-shadow: 0px 0px 18px rgba(0, 74, 168, 0.05);
+ padding: 48px 35px 35px 35px;
+ display: flex;
+ flex-direction: column;
+ margin-right: 15px;
+
+ .item-desc {
+ margin-top: 27px;
+ }
+
+ .item-btn {
+ margin-top: auto;
+
+ button {
+ margin-right: 20px;
+ background-color: #ffffff;
+ color: #091221;
+
+ &:nth-child(1) {
+ background-color: #091221;
+ color: #ffffff;
+ border: none;
+ }
+
+ &:nth-child(2) {
+ &:hover {
+ border-color: #164ce4;
+ color: #164ce4;
+ }
+ }
+ }
+ }
+ }
+ }
// 面板内容样式
.panel-content {
diff --git a/src/factory/components/Resource2/index.jsx b/src/factory/components/Resource2/index.jsx
index df0c61126..71546ddfd 100644
--- a/src/factory/components/Resource2/index.jsx
+++ b/src/factory/components/Resource2/index.jsx
@@ -1,20 +1,26 @@
import React, { useEffect, useRef, useState, forwardRef } from 'react';
import './index.scss';
-import lessonsRight1 from '../../../images/factory/lessons-right-1.webp'
+import lessonsStandard1 from '../../../images/factory/lessons-standard-1.webp'
+import lessonsStandard2 from '../../../images/factory/lessons-standard-2.webp'
+import lessonsStandard3 from '../../../images/factory/lessons-standard-3.webp'
import { Link } from 'react-router-dom';
import KFIcon from '../../../components/KFIcon';
import back1 from '../../../images/factory/back1.png'
-import tagIcon from '../../../images/factory/lessons-tag-icon.webp'
import '../../common.scss'
import { getSourceList, httpUrl } from '../../api';
-import { factoryZoneId, manualId, standardId, lessonId } from '../../../constants/factory'
+import { factoryZoneId, manualId, standardId, lessonId } from '../../../constants/factory'
import { downloadFunc } from '../../../forge/Utils/utils'
+import { Carousel } from 'antd';
+
+const iconList = [lessonsStandard1, lessonsStandard2, lessonsStandard3]
const Resource2 = forwardRef(({ zoneId }, ref) => {
const [isVisible, setIsVisible] = useState(false);
- const [standard, setStandard] = useState({});
+ const [standardList, setStandardList] = useState([]);
const [manualList, setManualList] = useState([]);
const [chapterList, setChapterList] = useState([]);
+ const carouselEL = useRef(null);
+ const [current, setCurrent] = useState(0);
useEffect(() => {
const observer = new IntersectionObserver((entries) => {
@@ -43,7 +49,7 @@ const Resource2 = forwardRef(({ zoneId }, ref) => {
}
rows.push({ ...e, extendDataUrl: extendData.url, extendDataHeadImg: extendData.headImg })
});
- setStandard(rows[0]);
+ setStandardList(rows.slice(0, 3));
});
}
@@ -102,13 +108,13 @@ const Resource2 = forwardRef(({ zoneId }, ref) => {