样式、文案优化

src/factory/components/Resource/index.jsx

@@ -12,9 +12,9 @@ import '../../common.scss'
 gsap.registerPlugin(ScrollTrigger);
 
 const resourceInfo = [
-  { name: '项目', title: '软件项目', icon: 'icon-xiangmu', desc: '开源共建，模块化架构，一键集成，性能提升50%，安全合规，助力企业快速构建高并发、高可用系统，让开发者专注业务，无需关心底层复杂度。', path: '/softwareFactory/resource/softwareProject' },
-  { name: '版本', title: '工厂版本', icon: 'icon-banben', desc: '一键生成版本快照，自动比对差异、回滚热补丁，多环境并行追踪。', path: '/softwareFactory/resource/factoryVersion' },
-  { name: '工具', title: '开发工具', icon: 'icon-gongju', desc: '一键生成版本快照，自动比对差异、回滚热补丁，多环境并行追踪，审批流+签名验真，让每次发布可溯源、可复刻、零差错。', path: '/softwareFactory/resource/developmentTools' },
+  { 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' },
 ]
 
 const Resource = forwardRef(({ zoneId }, ref) => {

src/factory/lessons/index.jsx

@@ -21,7 +21,7 @@ import { message } from 'antd';
 const backList = [back1, back2, back3]
 
 function Index(props) {
-  const [nowTop, setNowTop] = useState({})
+  const [nowTop, setNowTop] = useState(0)
   const [isVisible, setIsVisible] = useState(false);
   const carouselEL = useRef(null);
 
@@ -96,7 +96,7 @@ function Index(props) {
 
   return (
     <div className={`lessons ${isVisible ? 'animate-active' : ''}`}>
-      <img src={ chapterBg } className="lessons-bg" alt="" />
+      <img src={chapterBg} className="lessons-bg" alt="" />
       <div className="lessons-header">
         <h2><span>学习专区，</span>多样资源服务工厂应用</h2>
         <p >从核心课程到规范标准，构建持续进化的工程能力体系。</p>
@@ -106,33 +106,35 @@ function Index(props) {
       </div>
       <div className="lesson-body">
         <div className="lesson-left">
-          <h3>{ lesson.name }</h3>
-          <p>{ lesson.summary }</p>
-          <div className="chapter-list">
-            {
-              chapterList.map((item, index) => {
-                return <div className="chapter-item" key={item.id}>
-                  {
-                    index < 10 ?
-                      <span className="chapter-index">0{index + 1}</span> :
-                      <span className="chapter-index">{index + 1}</span>
-                  }
-                  <div title={ item.name }>
+          <h3>{lesson.name}</h3>
+          <p>{lesson.summary}</p>
+          <div className="chapter-wrapper">
+            <div className="chapter-list" style={{ marginTop: `-${ 88 * ( chapterList.length - nowTop < 4 ? chapterList.length - 4 : nowTop) }px` }}>
+              {
+                chapterList.map((item, index) => {
+                  return <div className="chapter-item" key={item.id}>
                     {
-                      item.name
+                      index < 10 ?
+                        <span className="chapter-index">0{index + 1}</span> :
+                        <span className="chapter-index">{index + 1}</span>
                     }
-                  </div>
+                    <div title={item.name}>
+                      {
+                        item.name
+                      }
+                    </div>
 
-                </div>
-              })
-            }
+                  </div>
+                })
+              }
+            </div>
           </div>
         </div>
         <div className="lesson-right">
           <Carousel
             autoplay
             ref={carouselEL}
-            afterChange={e => { setNowTop(chapterList[e]) }}
+            afterChange={e => { setNowTop(e)}}
             dots={false}
           >
             {chapterList.map((item, index) => {
@@ -220,7 +222,7 @@ function Index(props) {
             chapterList.slice(3).map((item, index) => {
               return <div className="chapter-chapter2-item" key={item.id}>
                 <div className="chapter-head">
-                  <h4 title={ item.name } onClick={() => { window.open(item.extendDataUrl) }}>{item.name}</h4>
+                  <h4 title={item.name} onClick={() => { window.open(item.extendDataUrl) }}>{item.name}</h4>
                   <div className="line-1"></div>
                   <div className="line-2"></div>
                   <div className="line-3"></div>
@@ -267,10 +269,10 @@ function Index(props) {
           {
             manualList.slice(0, 3).map((item, index) => {
               const nameList = item.name.split('软件工厂')
-              return <div className={ `manual-${ index + 1 }` }>
-                <img src={ index === 0 ? manual1 : manual2} alt="" />
-                { index === 0 ? <div>{item.name}</div> : <div><span>软件工厂</span><div></div>{ nameList[1] }</div> }
-                <p>{ item.summary }</p>
+              return <div className={`manual-${index + 1}`}>
+                <img src={index === 0 ? manual1 : manual2} alt="" />
+                {index === 0 ? <div>{item.name}</div> : <div><span>软件工厂</span><div></div>{nameList[1]}</div>}
+                <p>{item.summary}</p>
                 <button onClick={() => { downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`) }}  >下载</button>
               </div>
             })

src/factory/lessons/index.scss

@@ -114,57 +114,58 @@
         position: relative;
       }
 
-      .chapter-list {
-        margin-left: 36px;
-        // height: 360px;
-        // overflow-y: scroll;
-        // overflow-x: hidden;
+      .chapter-wrapper {
+        height: 387px;
+        overflow: hidden;
+        .chapter-list {
+          transition: all .4s cubic-bezier(.25, .46, .45, .94);
+          margin-left: 36px;
+          .chapter-item {
+            height: 88px;
+            width: 100%;
+            line-height: 88px;
+            font-family: alibaba;
+            font-weight: 500;
+            color: #091221;
+            font-size: 22px;
 
-        .chapter-item {
-          height: 88px;
-          width: 100%;
-          line-height: 88px;
-          font-family: alibaba;
-          font-weight: 500;
-          color: #091221;
-          font-size: 22px;
+            border-top: 2px solid rgba(9, 18, 33, 0.04);
+            position: relative;
+            display: flex;
 
-          border-top: 2px solid rgba(9, 18, 33, 0.04);
-          position: relative;
-          display: flex;
+            div {
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+              padding-right: 30px;
 
-          div {
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-            padding-right: 30px;
+            }
 
-          }
-
-          &::before {
-            content: url('../../images/factory/lessons/triangle.webp');
-            width: 5px;
-            top: -45px;
-            right: 0;
-            display: inline-block;
-            position: absolute;
-          }
-
-          &:nth-last-child(1) {
-            border-bottom: 2px solid rgba(9, 18, 33, 0.04);
-
-            &::after {
+            &::before {
               content: url('../../images/factory/lessons/triangle.webp');
               width: 5px;
-              top: 41px;
+              top: -45px;
               right: 0;
               display: inline-block;
               position: absolute;
             }
-          }
 
-          .chapter-index {
-            margin-right: 21px;
+            &:nth-last-child(1) {
+              border-bottom: 2px solid rgba(9, 18, 33, 0.04);
+
+              &::after {
+                content: url('../../images/factory/lessons/triangle.webp');
+                width: 5px;
+                top: 41px;
+                right: 0;
+                display: inline-block;
+                position: absolute;
+              }
+            }
+
+            .chapter-index {
+              margin-right: 21px;
+            }
           }
         }
       }
@@ -232,7 +233,7 @@
               width: 348px;
               height: 343.59px;
               border-radius: 16px;
-              object-fit: cover;
+              object-fit: contain;
             }
 
             &:nth-child(1) {

src/factory/resource/index.scss

@@ -20,6 +20,8 @@
       position: absolute;
       width: 1600px;
       height: 410px;
+      z-index: 1;
+      pointer-events: none;
 
       div:nth-child(1) {
         top: 70px;