diff --git a/src/forge/Main/projecthome/v2/components/supplyChainGovernance.jsx b/src/forge/Main/projecthome/v2/components/supplyChainGovernance.jsx index 12d17d787..9b877d364 100644 --- a/src/forge/Main/projecthome/v2/components/supplyChainGovernance.jsx +++ b/src/forge/Main/projecthome/v2/components/supplyChainGovernance.jsx @@ -10,7 +10,6 @@ const SupplyChainGovernance = () => { id: 'security', title: '供应链安全漏洞库', subtitle: '汇聚漏洞信息,恶意代码信息,组件信息三类关键供应链安全信息要素', - image: require('../image/supply-chain-security.png').default, width: '40%', tag: ["漏洞", "恶意代码", "组件"], tagIcon: icon1 @@ -19,7 +18,7 @@ const SupplyChainGovernance = () => { id: 'software', title: '软件供应链治理', subtitle: '实施软供链成分与安全分析,形成清单并定位漏洞', - image: require('../image/software-supply-chain.png').default, + image: require('../image/gif2.gif').default, width: '28.5%', tag: ["成分分析", "安全性分析", "软件治理"], tagIcon: icon2 @@ -28,7 +27,7 @@ const SupplyChainGovernance = () => { id: 'risk', title: '实时风险预警', subtitle: '据新漏洞评估波及范围,并示警软件供应链', - image: require('../image/risk-warning.png').default, + image: require('../image/gif4.gif').default, width: '28.5%', tag: ["风险预警", "影响范围", "实时监测"], tagIcon: icon1 @@ -37,6 +36,7 @@ const SupplyChainGovernance = () => { id: 'vulnerability', title: '已知漏洞监测', subtitle: '提供供应链已知漏洞检测、恶意代码检测、\n克隆漏洞检测、二进制漏洞检测等多种安\n全性分析能力', + image: require('../image/gif3.gif').default, width: '48%', tag: ["恶意代码检测", "二进制漏洞检测", "克隆漏洞检测"], tagIcon: icon3 @@ -45,6 +45,7 @@ const SupplyChainGovernance = () => { id: 'assessment', title: '软件治理能力评估', subtitle: '数据构建、多维分析、量化打分、结果融合\n的软件治理能力评估体系', + image: require('../image/gif.webp').default, width: '', tag: ["软件治理", "能力评估", "多维分析"], tagIcon: icon3 @@ -73,9 +74,7 @@ const SupplyChainGovernance = () => {
{item.title}
{item.subtitle}
{/* 图片 */} - {/* {item.image &&
- {item.title} -
} */} + {item.image && {item.title}} ))} diff --git a/src/forge/Main/projecthome/v2/image/gif2.gif b/src/forge/Main/projecthome/v2/image/gif2.gif new file mode 100644 index 000000000..30681c58d Binary files /dev/null and b/src/forge/Main/projecthome/v2/image/gif2.gif differ diff --git a/src/forge/Main/projecthome/v2/image/gif3.gif b/src/forge/Main/projecthome/v2/image/gif3.gif new file mode 100644 index 000000000..bee50bd92 Binary files /dev/null and b/src/forge/Main/projecthome/v2/image/gif3.gif differ diff --git a/src/forge/Main/projecthome/v2/image/gif4.gif b/src/forge/Main/projecthome/v2/image/gif4.gif new file mode 100644 index 000000000..72784d866 Binary files /dev/null and b/src/forge/Main/projecthome/v2/image/gif4.gif differ diff --git a/src/forge/Main/projecthome/v2/image/software-assessment.png b/src/forge/Main/projecthome/v2/image/software-assessment.png index b4775a42b..5e1f3d112 100644 Binary files a/src/forge/Main/projecthome/v2/image/software-assessment.png and b/src/forge/Main/projecthome/v2/image/software-assessment.png differ diff --git a/src/forge/Main/projecthome/v2/image/software-supply-chain.png b/src/forge/Main/projecthome/v2/image/software-supply-chain.png index 9a8ba089b..a4da7159c 100644 Binary files a/src/forge/Main/projecthome/v2/image/software-supply-chain.png and b/src/forge/Main/projecthome/v2/image/software-supply-chain.png differ diff --git a/src/forge/Main/projecthome/v2/image/vulnerability-detection.png b/src/forge/Main/projecthome/v2/image/vulnerability-detection.png index 4a46ad105..bd747fc5a 100644 Binary files a/src/forge/Main/projecthome/v2/image/vulnerability-detection.png and b/src/forge/Main/projecthome/v2/image/vulnerability-detection.png differ diff --git a/src/forge/Main/projecthome/v2/index.scss b/src/forge/Main/projecthome/v2/index.scss index 76bbd81c1..1186f6617 100644 --- a/src/forge/Main/projecthome/v2/index.scss +++ b/src/forge/Main/projecthome/v2/index.scss @@ -586,36 +586,38 @@ } } - .image-container { - width: 100%; - - .item-image { - max-width: 100%; - } - } - &.governance-item0 { height:478px; background-image: url('./image/supply-chain-security.png'); background-size: 100% 100%; - .image-container { - position: relative; - top: -157px; - } } &.governance-item1 { background-image: url('./image/software-supply-chain.png'); background-size: 100% 100%; + position: relative; .tag-text { color:#417aff; background-color:#edf2ff; } + .item-gif{ + width: 55px; + position: absolute; + bottom: 47px; + right: 66px; + } } &.governance-item2 { background-image: url('./image/risk-warning.png'); background-size: 100% 100%; + position: relative; + .item-gif{ + width: 22px; + position: absolute; + bottom: 144px; + left: 175px; + } } &.governance-item3 { @@ -625,6 +627,7 @@ background-size: auto 100%; background-position: right; background-repeat: no-repeat; + position: relative; .tag-text { color:#8d56da; background-color:#f8f3ff; @@ -633,6 +636,12 @@ padding-top: 20px; padding-bottom: 10px; } + .item-gif{ + width: 60px; + position: absolute; + bottom: 63px; + right: 95px; + } } &.governance-item4 { @@ -644,6 +653,7 @@ background-size: auto 100%; background-position: right; background-repeat: no-repeat; + position: relative; .tag-text { color:#8d56da; background-color:#f8f3ff; @@ -660,6 +670,13 @@ div { // color: white; } + .item-gif{ + width: 200px; + position: absolute; + bottom: -60px; + right: -25px; + transform: scaleX(-1); + } } } }