diff --git a/src/constants/factory.js b/src/constants/factory.js index aaa9bf313..4b9b85f62 100644 --- a/src/constants/factory.js +++ b/src/constants/factory.js @@ -3,7 +3,7 @@ export const factoryZoneId = 102 export const dirId = 9 export const versionId = '工厂版本' export const lessonId = '学习资源' -export const commontoolId = '社区软件' +export const commontoolId = '共建工具' // export const commontoolId = '开发工具' export const toolId = '开发工具' export const standardId = '标准规范' diff --git a/src/factory/components/Feature/index.jsx b/src/factory/components/Feature/index.jsx index 0755da9e8..391d9f168 100644 --- a/src/factory/components/Feature/index.jsx +++ b/src/factory/components/Feature/index.jsx @@ -1,21 +1,34 @@ import React, { useEffect, useState, useRef } from 'react'; import './index.scss'; import featureLeft1 from '../../../images/factory/feature-left-1.webp'; -import featureright1 from '../../../images/factory/feature-right-1.png'; +import featureLeft2 from '../../../images/factory/feature-left-2.webp'; +import featureright1 from '../../../images/factory/feature-right-1.webp'; +import featureright2 from '../../../images/factory/feature-right-2.webp'; import featureBottom1 from '../../../images/factory/feature-bottom-1.webp'; import gif1 from '../../../images/factory/feature-gif-1.webp' import gif2 from '../../../images/factory/feature-gif-2.gif' import gif3 from '../../../images/factory/feature-gif-3.webp' +import { factoryZoneId, standardId} from '../../../constants/factory' +import { getSourceList, httpUrl } from '../../api'; + +import logo1 from '../../../images/factory/standard-logo-1.webp' +import logo2 from '../../../images/factory/standard-logo-2.webp' +import logo3 from '../../../images/factory/standard-logo-3.webp' + import { Link } from 'react-router-dom'; +const logolist = [logo1, logo2, logo3] + function Feature(props) { const contentRef = useRef(null); const [isVisible, setIsVisible] = useState(false); + const [standardList, setStandardList] = useState([]); useEffect(() => { + getStandard() const observer = new IntersectionObserver((entries) => { const entry = entries[0]; // 如果元素进入视口 @@ -36,6 +49,20 @@ function Feature(props) { }; }, []); + const getStandard = () => { + getSourceList({ id: factoryZoneId, keywords: standardId }).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 }) + }); + setStandardList(rows.slice(0, 3)); + }); + } + return (
@@ -43,35 +70,28 @@ function Feature(props) {

标准化生产线，为菌用软件工厂奠定基石

-
-

动态开放架构，让“奠基”就在高原

+
+

动态开放架构，让“奠基”就在高原

“强规制底座+热插拔工具”架构，内生联合、众创众筹、生态协同。

- + {/* */}
-
-

全程数字纳管，让“信息”顺畅流转

+
+

全程数字纳管，让“信息”顺畅流转

群智众创与受控交付有机结合，从数字化向信息化、智能化飞跃。

-
- -
-
-

灵活定制编排，让“适应”不再困难

+
+

灵活定制编排，让“适应”不再困难

支持流水线定制编排、研发工具扩展等多种集成扩展，适应不同需求。

- - +
-
-

开发运维一体，让“交付”更加便捷

+
+

开发运维一体，让“交付”更加便捷

支持多种应用快速部署方式，实现从开发到运维全环节的能力覆盖。

-
- -
- +
@@ -79,7 +99,20 @@ function Feature(props) {

软件工厂标准（众创版本）

- + { + standardList.map((item,index) => { + return ( +
+ {item.title} +
+

{item.name}

+

{item.summary}

+ +
+
+ ) + }) + }
{/* */} diff --git a/src/factory/components/Feature/index.scss b/src/factory/components/Feature/index.scss index c62326b34..b126364c0 100644 --- a/src/factory/components/Feature/index.scss +++ b/src/factory/components/Feature/index.scss @@ -9,7 +9,7 @@ width: 100%; margin: auto; padding-top: 67px; - background:#f1f6fd; + background: #f1f6fd; // background-image: url('../../../images/factory/feature-bg.png'); // background-repeat: no-repeat; // background-size: 100% 100%; @@ -17,7 +17,7 @@ } h1 { - color:#091221 !important; + color: #091221 !important; } .feature-content { @@ -42,16 +42,17 @@ font-weight: 700; color: #091221; font-size: 26px; + text-align: center; } p { - width: 519px; + // width: 519px; height: 22px; line-height: 30px; font-family: alibabareg; color: #091221; font-size: 16px; - + text-align: center; } } @@ -61,32 +62,30 @@ flex-direction: column; h3 { - - margin-top: 58px; - margin-left: 50px; + margin-top: 40px; } p { - - margin-top: 24px; - margin-left: 50px; + margin-top: 15px; } img { - margin: 19px auto; + margin: 32px auto 19px auto; } } .content-top { - margin-bottom: 25px; + margin-bottom: 30px; display: flex; &-left { width: 787.5px; height: 506px; - margin-right: 25px; + margin-right: 31px; position: relative; background-image: url('../../../images/factory/feature-left-bg.webp'); + background-repeat: no-repeat; + background-size: 100% 100%; img { width: 614px; @@ -101,14 +100,24 @@ top: 250px } } + .left-1 { + background-image: url('../../../images/factory/feature-left-bg2.webp'); + img { + width: 669px; + height: unset; + } + } &-right { width: 787.5px; height: 502px; position: relative; background-image: url('../../../images/factory/feature-right-bg.webp'); + background-repeat: no-repeat; + background-size: 100% 100%; img { + margin-top: 0; width: 735px; } @@ -120,16 +129,24 @@ width: 60px; height: 60px; overflow: hidden; + .content-top-right-gif { position: absolute; - width: 80px !important; - margin: 0; - left: -10px; + width: 80px !important; + margin: 0; + left: -10px; } - + } } + .right-2 { + background-image: url('../../../images/factory/feature-right-bg.webp'); + img { + width: 708px; + margin-top: 22px + } + }; } .content-bottom { @@ -148,16 +165,80 @@ color: white; } - p { - margin-left: 50px; - margin-top: 24px; - } - img { width: 1016px; height: 315px; } + .df { + display: flex; + justify-content: space-between; + margin-top: 31px; + + .df-item { + width: 470px; + height: 244px; + background: #ffffff; + border: 1px solid; + border-color: rgba(22, 76, 228, 0.2); + border-radius: 20px; + box-shadow: 0px 0px 20px rgba(22, 76, 228, 0.44); + display: flex; + padding: 32px; + + img { + width: 44px; + height: 44px; + margin-right: 18px; + } + + div { + display: flex; + flex-direction: column; + } + + h4 { + width: 236px; + line-height: 33px; + font-family: alibabaBold; + color: #091221; + font-size: 24px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + word-break: break-all; + } + + p { + margin-top: 10px; + width: 308px; + line-height: 30px; + font-family: alibabareg; + color: #091221; + font-size: 15px; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + height: 82px; + } + + button { + margin-top: auto; + width: 65px; + height: 32px; + border: 1px solid; + border-color: #091221; + border-radius: 9px; + font-family: alibaba; + font-weight: 500; + color: #091221; + font-size: 14px; + cursor: pointer; + } + } + } + &-gif { width: 93px !important; height: 70px !important; @@ -167,4 +248,7 @@ } } } + .headerBlue { + color: #164ce4; + } } \ No newline at end of file diff --git a/src/images/factory/feature-left-1.webp b/src/images/factory/feature-left-1.webp index b7fdf7d6a..1cbf883eb 100644 Binary files a/src/images/factory/feature-left-1.webp and b/src/images/factory/feature-left-1.webp differ diff --git a/src/images/factory/feature-left-2.webp b/src/images/factory/feature-left-2.webp new file mode 100644 index 000000000..fc8039faa Binary files /dev/null and b/src/images/factory/feature-left-2.webp differ diff --git a/src/images/factory/feature-left-bg2.webp b/src/images/factory/feature-left-bg2.webp new file mode 100644 index 000000000..0bd43f41c Binary files /dev/null and b/src/images/factory/feature-left-bg2.webp differ diff --git a/src/images/factory/feature-right-1.png b/src/images/factory/feature-right-1.png deleted file mode 100644 index a36137e40..000000000 Binary files a/src/images/factory/feature-right-1.png and /dev/null differ diff --git a/src/images/factory/feature-right-1.webp b/src/images/factory/feature-right-1.webp new file mode 100644 index 000000000..a61ff27a7 Binary files /dev/null and b/src/images/factory/feature-right-1.webp differ diff --git a/src/images/factory/feature-right-2.webp b/src/images/factory/feature-right-2.webp new file mode 100644 index 000000000..c88dd9e58 Binary files /dev/null and b/src/images/factory/feature-right-2.webp differ diff --git a/src/images/factory/feature-right-bg2.webp b/src/images/factory/feature-right-bg2.webp new file mode 100644 index 000000000..3962f67e1 Binary files /dev/null and b/src/images/factory/feature-right-bg2.webp differ diff --git a/src/images/factory/standard-logo-1.webp b/src/images/factory/standard-logo-1.webp new file mode 100644 index 000000000..5572a317e Binary files /dev/null and b/src/images/factory/standard-logo-1.webp differ diff --git a/src/images/factory/standard-logo-2.webp b/src/images/factory/standard-logo-2.webp new file mode 100644 index 000000000..34d846c87 Binary files /dev/null and b/src/images/factory/standard-logo-2.webp differ diff --git a/src/images/factory/standard-logo-3.webp b/src/images/factory/standard-logo-3.webp new file mode 100644 index 000000000..a1909e607 Binary files /dev/null and b/src/images/factory/standard-logo-3.webp differ