社区首页供应链板块增加动效

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 = () => {
             <div className='governance-item-title font-26 font-bd mt20 mb5 pl40'>{item.title}</div>
             <div className='font-16 pl40' style={{whiteSpace: 'pre-line'}}>{item.subtitle}</div>
             {/* 图片 */}
-            {/* {item.image && <div className="image-container">
-              <img src={item.image} alt={item.title} className="item-image" />
-            </div>} */}
+            {item.image && <img src={item.image} alt={item.title} className="item-gif" />}
           </div>
         ))}
       </div>

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);
+      }
     }
   }
 }