Merge branch 'factory' of https://gitlink.org.cn/Gitlink/forgeplus-react-v2 into factory

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 = '标准规范'

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 (
     <div className={`factory-feature factory-module ${isVisible ? 'animate-active' : ''}`} ref={contentRef}>
@@ -43,35 +70,28 @@ function Feature(props) {
         <h1 className="module-title">标准化生产线，为菌用软件工厂奠定基石</h1>
         <div className="feature-content">
           <div className="content-top">
-            <div className="content-top-left">
-              <h3>动态开放架构，让“奠基”就在高原</h3>
+            <div className="content-top-left left-1">
+              <h3>动态开放架构，让“<span className="headerBlue">奠基</span>”就在高原</h3>
               <p>“强规制底座+热插拔工具”架构，内生联合、众创众筹、生态协同。</p>
-              <img className="content-top-left-gif" src={gif1} alt="" />
+              {/* <img className="content-top-left-gif" src={gif1} alt="" /> */}
               <img src={featureLeft1} alt="" />
             </div>
-            <div className="content-top-right">
-              <h3>全程数字纳管，让“信息”顺畅流转</h3>
+            <div className="content-top-right right-1">
+              <h3>全程数字纳管，让“<span className="headerBlue">信息</span>”顺畅流转</h3>
               <p>群智众创与受控交付有机结合，从数字化向信息化、智能化飞跃。</p>
-              <div>
-                <img className="content-top-right-gif" src={gif2} alt="" />
-              </div>
               <img src={featureright1} alt="" />
             </div>
           </div>
           <div className="content-top">
-            <div className="content-top-left">
-              <h3>灵活定制编排，让“适应”不再困难</h3>
+            <div className="content-top-left left-2">
+              <h3>灵活定制编排，让“<span className="headerBlue">适应</span>”不再困难</h3>
               <p>支持流水线定制编排、研发工具扩展等多种集成扩展，适应不同需求。</p>
-              <img className="content-top-left-gif" src={gif1} alt="" />
-              <img src={featureLeft1} alt="" />
+              <img src={featureLeft2} alt="" />
             </div>
-            <div className="content-top-right">
-              <h3>开发运维一体，让“交付”更加便捷</h3>
+            <div className="content-top-right right-2">
+              <h3>开发运维一体，让“<span className="headerBlue">交付</span>”更加便捷</h3>
               <p>支持多种应用快速部署方式，实现从开发到运维全环节的能力覆盖。</p>
-              <div>
-                <img className="content-top-right-gif" src={gif2} alt="" />
-              </div>
-              <img src={featureright1} alt="" />
+              <img src={featureright2} alt="" />
             </div>
           </div>
           <div className="content-bottom">
@@ -79,7 +99,20 @@ function Feature(props) {
               <h3>软件工厂标准（众创版本）</h3>
             </div>
             <div className='df'>
-
+              {
+                standardList.map((item,index) => {
+                  return (
+                    <div className='df-item' key={index}>
+                      <img src={logolist[index]} alt={item.title} />
+                      <div>
+                        <h4>{item.name}</h4>
+                        <p>{item.summary}</p>
+                        <button onClick={() => { downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`) }}>下载</button>
+                      </div>
+                    </div>
+                  )
+                })
+              }
             </div>
             {/* <img className="content-bottom-gif" src={gif3} alt="" />
             <img src={featureBottom1} alt="" /> */}

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