【关于我们】页面

src/forge/AboutUs/AboutUs.jsx

@@ -10,6 +10,11 @@ import computer from './image/computer.png';
 import position from './image/position.png';
 import quan1 from './image/quan1.png';
 import quan2 from './image/quan2.png';
+import fun1 from './image/fun1.png';
+import fun2 from './image/fun2.png';
+import fun3 from './image/fun3.png';
+import fun4 from './image/fun4.png';
+import fun5 from './image/fun5.png';
 import img1 from './image/img1.png';
 import img2 from './image/img2.png';
 import img3 from './image/img3.png';
@@ -42,20 +47,25 @@ function AboutUs(){
   //用于刷新组件
   const [flush, setFlush] = useState(false);
   useEffect(()=>{
-    document.addEventListener("scroll", scrollListener);
-    return(
-      document.removeEventListener("scroll", scrollListener)
-    )
+    window.addEventListener('scroll', scrollListener);
   },[])
 
   function scrollListener(e){
-    console.log('111', e,e.srcElement.documentElement.scrollTop);
+    const top = e.srcElement.scrollingElement.scrollTop;
+    //回到顶部时导航栏选中【关于我们】
+    top < 555 && setSelectTitle(1);
+    if (top > 2800 && top< 4000){
+      setFlush(true);
+    }else{
+      setFlush(false);
+    }
   }
 
   return(
     <div className="aboutUs_body">
-      <div className="aboutUs_head">
-
+      <div className="aboutUs_head df">
+        <p className="head_title">GitLink 确实开源</p>
+        <p className="head_cont font-20 mt36">新一代开源创新服务平台，让您的创意在这里释放</p>
       </div>
       <div className="aboutUs_title df">
         <a className={selectTitle === 1 ? "active" : ""} href="#value1" onClick={() => setSelectTitle(1)}>关于我们</a>
@@ -63,7 +73,8 @@ function AboutUs(){
         <a className={selectTitle === 3 ? "active" : ""} href="#value3" onClick={() => setSelectTitle(3)}>加入我们</a>
         <a className={selectTitle === 4 ? "active" : ""} href="#value4" onClick={() => setSelectTitle(4)}>合作单位</a>
       </div>
-      <div id="value1" className="aboutUs">
+      <div className="aboutUs">
+        <a id="value1" className="mao"></a>
         {/* 关于我们 */}
         <div className="about_us">
           <div className="au_bg">
@@ -72,15 +83,15 @@ function AboutUs(){
             <div className="au_cont subt df">
               <div className="cont1_introduction">
                 <p className="subtitle">简介</p>
-                <div className="font-16">&nbsp;&nbsp;&nbsp;&nbsp;GitLink（确实开源）是CCF官方指定的开源创新服务平台，旨在以“为开源创新服务”为使命，以“成为开源创新的汇聚地”为愿景，秉承“创新、开放、协作、共享”的价值观，致力于为大规模开源开放协同创新助力赋能，打造创新成果孵化和新工科人才培养的开源创新生态！</div>
+                <div className="font-16">GitLink（确实开源）是CCF官方指定的开源创新服务平台，旨在以“为开源创新服务”为使命，以“成为开源创新的汇聚地”为愿景，秉承“创新、开放、协作、共享”的价值观，致力于为大规模开源开放协同创新助力赋能，打造创新成果孵化和新工科人才培养的开源创新生态！</div>
               </div>
               <img src={subititle} className="subtitleImg"></img>
             </div>
           </div>
           {/* 确实开源   一脉传承 */}
           <div className="au_cont inherit pl30">
-            <p className="subtitle">确实开源   一脉传承</p>
-            <div>&nbsp;&nbsp;&nbsp;&nbsp;本世纪以来，随着软件创新需求和应用规模的飞速增长，软件开发队伍、开发资源、可信评估呈现出规模化、开放化、持续化的新特点，软件开发活动面临协同难、复用难、评估难的制约，经典的工程化软件开发方法面临严峻挑战，严重影响了软件开发效率和质量的提升。在此背景下，国防科技大学联合国内多所知名高校、科研机构和软件企业，围绕开源创新开展了持续性探索，构建形成了以Trustie（确实）为代表的一系列开源创新服务基础设施。自2006年以来，Trustie经过三个阶段的演化发展，于2021年迎来全面升级：在计算机学会（CCF）的带领指导下，共同推进产学研用深度融合，共筑新一代开源创新服务平台GitLink！</div>
+            <p className="subtitle">确实开源&nbsp;&nbsp;一脉传承</p>
+            <div>本世纪以来，随着软件创新需求和应用规模的飞速增长，软件开发队伍、开发资源、可信评估呈现出规模化、开放化、持续化的新特点，软件开发活动面临协同难、复用难、评估难的制约，经典的工程化软件开发方法面临严峻挑战，严重影响了软件开发效率和质量的提升。在此背景下，国防科技大学联合国内多所知名高校、科研机构和软件企业，围绕开源创新开展了持续性探索，构建形成了以Trustie（确实）为代表的一系列开源创新服务基础设施。自2006年以来，Trustie经过三个阶段的演化发展，于2021年迎来全面升级：在计算机学会（CCF）的带领指导下，共同推进产学研用深度融合，共筑新一代开源创新服务平台GitLink！</div>
             <div className="inherit_items">
               <img src={quan1} className="quan1Img"/>
               <img src={quan2} className="quan2Img"/>
@@ -107,18 +118,73 @@ function AboutUs(){
             </div>
           </div>
 
+          {/* 特色功能  确实给力 */}
+          <div className="feature_function_bg">
+            <div className="au_cont">
+              <p className="au_title">特色功能&nbsp;&nbsp;确实给力</p>
+              <table><tr>
+                <td>
+                  <div className="feat_func_cont">
+                    <div className="feat_fun_img"><img src={fun1} /></div>
+                    <div>
+                      <p>分布式协作开发</p>
+                      <div>支持在线文件编辑、&nbsp;&nbsp;<br />分支管理、贡献统计、<br />仓库复刻、合并请求&nbsp;&nbsp;&nbsp;</div>
+                    </div>
+                  </div>
+                </td>
+                <td>
+                  <div className="feat_func_cont">
+                    <div className="feat_fun_img"><img src={fun2} /></div>
+                    <div>
+                      <p>一站式过程管理</p>
+                      <div>支持易修、里程碑、&nbsp;&nbsp;&nbsp;<br />通知提醒、标签归档、Wiki文档、组织管理&nbsp;&nbsp;&nbsp;</div>
+                    </div>
+                  </div>
+                </td>
+                <td>
+                  <div className="feat_func_cont">
+                    <div className="feat_fun_img"><img src={fun3} /></div>
+                    <div>
+                      <p>高效流水线运维</p>
+                      <div>提供轻量级工作流引擎<br />并支持自定义配置、&nbsp;&nbsp;&nbsp;<br/>静态扫描、制品构建&nbsp;&nbsp;&nbsp;</div>
+                    </div>
+                  </div>
+                </td>
+                <td>
+                  <div className="feat_func_cont">
+                    <div className="feat_fun_img"><img src={fun4} /></div>
+                    <div>
+                      <p>多层次代码分析</p>
+                      <div>支持代码溯源分析、&nbsp;&nbsp;&nbsp;<br />许可证风险分析、开源漏洞检测和加固建议&nbsp;&nbsp;&nbsp;</div>
+                    </div>
+                  </div>
+                </td>
+                <td>
+                  <div className="feat_func_cont">
+                    <div className="feat_fun_img"><img src={fun5} /></div>
+                    <div>
+                      <p>多维度用户画像</p>
+                      <div>支持开发活动统计、&nbsp;&nbsp;&nbsp;<br />贡献日历、能力建模、<br />角色与专业定位分析&nbsp;&nbsp;&nbsp;</div>
+                    </div>
+                  </div>
+                </td>
+              </tr></table>
+            </div>
+          </div>
+
           {/* 成果作用，确实有效 */}
           <div className="au_cont df pl30">
             <img src={achievements} className="achievementsImg"></img>
             <div className="cont1_achievements">
-              <p className="subtitle ml0">成果作用，确实有效</p>
-              <div>&nbsp;&nbsp;&nbsp;&nbsp;GitLink（确实开源）为我国创新型软件产业发展提供了关键技术支撑和实践指南，为各类开源创新活动以及我国军地开源社区建设提供了有效支撑，为推动开源创新发展和创新人才培养发挥了重要作用。&nbsp;&nbsp;&nbsp;&nbsp;通过10多年的发展，GitLink平台显著提升了大型软件企业软件生产能力，支持了我国航空、航天、国防等多个关键领域的可信软件生产，为包括新一代人工智能启智社区、ARM绿色计算社区、科技部云计算与大数据木兰社区、科技委可控开源创造行动红山社区等的建设提供关键技术支撑，为我国关键领域开源社区生态建设发挥了重要作用！</div>
+              <p className="subtitle ml0">成果作用&nbsp;&nbsp;确实有效</p>
+              <div>GitLink（确实开源）为我国创新型软件产业发展提供了关键技术支撑和实践指南，为各类开源创新活动以及我国军地开源社区建设提供了有效支撑，为推动开源创新发展和创新人才培养发挥了重要作用。<br/>通过10多年的发展，GitLink平台显著提升了大型软件企业软件生产能力，支持了我国航空、航天、国防等多个关键领域的可信软件生产，为包括新一代人工智能启智社区、ARM绿色计算社区、科技部云计算与大数据木兰社区、科技委可控开源创造行动红山社区等的建设提供关键技术支撑，为我国关键领域开源社区生态建设发挥了重要作用！</div>
             </div>
           </div>
         </div>
 
         {/* 平台统计 */}
-        <div id="value2" className="about_us statistics">
+        <div className="about_us statistics">
+          <a id="value2" className="mao"></a>
           <div className="au_title">平台统计</div>
           <p>联接海量群智资源，汇聚优秀开源组织，孵化优质创新成果</p>
           <img src={earth} className="earthImg"/>
@@ -139,7 +205,8 @@ function AboutUs(){
         </div>
 
         {/* 加入我们 */}
-        <div id="value3" className="join_us_bg">
+        <div className="join_us_bg">
+          <a id="value3" className="mao"></a>
           <div className="au_cont">
             <div className="au_title">加入我们</div>
             <p className="subtitle">探索你的未来</p>
@@ -152,18 +219,18 @@ function AboutUs(){
                   <p className="df"><img src={position} /><span className="ml10">前端开发工程师</span></p>
                   <div>
                     1、全日制本科及以上学历，5年以上Web前端开发经验，熟练使用Gulp、Webpack等构建工具；<br />
-                    2、熟练掌握VUE编程，项目中使用过VUE；有前端模块化、组件化、自动化开发经验者优先；<br />
-                    3、精通Java 、jQuery、Ajax、Json等技术，对vue，nodeJs等技术有所涉及；<br />
+                    2、熟练掌握VUE或React编程；有前端模块化、组件化、自动化开发经验者优先；<br />
+                    3、精通jQuery、Ajax、Json等技术，对VUE，NodeJs等技术有所涉及；<br />
                     4、熟悉前端开发技术(HTML5、JS、JSON、XHTML、CSS3、ES6)，了解各项技术的相关标准，并严格按照标准进行开发。<br />
                   </div>
                 </div>
-                <div className="position">
+                <div className="position right">
                   <p className="df"><img src={position} /><span className="ml10">后端开发工程师</span></p>
                   <div>
-                    1、本科及以上学历，计算机科学与技术类，软件技术及其应用、软件工程专业相关专业；有金蝶人力资源系统项目实施经验优先；<br />
-                    2、3年以上Java开发相关经验、扎实的Java变成基础，参与过1个以上大/中性高并发、高性能系统架构设计、开发和调优；<br />
-                    3、熟练掌握Spring,MyBatis等开源框架，掌握MVC框架模式及BS架构；<br />
-                    4、精通SQL、熟练使用MySQL,Oracle等数据库，并具有一定的SQL优化能力；熟悉Redis，MongoDB等常用NoSQL解决方案,了解各自的优缺点以及使用场景者优先。<br />
+                    1、全日制本科及以上学历，计算机、软件工程相关专业者优先；<br />
+                    2、3年以上Java开发相关经验，扎实的Java编程基础，参与过1个以上大/中型高并发、高性能系统架构设计、开发和调优；<br />
+                    3、熟练掌握Spring、SpringBoot、Spring MVC、MyBatis等开源框架，掌握MVC框架模式及BS架构；<br />
+                    4、精通SQL，熟练使用MySQL、Oracle等数据库，并具有一定的SQL优化能力；熟悉Redis、MongoDB等常用NoSQL解决方案，了解各自的优缺点以及使用场景者优先。<br />
                   </div>
                 </div>
               </div>
@@ -171,34 +238,44 @@ function AboutUs(){
                 <div className="position">
                   <p className="df"><img src={position} /><span className="ml10">软件测试工程师</span></p>
                   <div>
-                    1、计算机相关专业本科以上学历（硬性要求）；<br />
-                    2、一年以上软件测试经验，具有扎实的软件测试理论知识，深刻理解正规测试流程,并遵照执行测试流程；<br />
-                    3、掌握多种软件测试方法，并能够独立编写测试用例及测试方案、测试报告；<br />
-                    4、擅长功能测试，精通二进制等，能编写简单的代码，了解系统测试优先；<br />
-                    5、有很强的质量和服务意识，沟通能力强，执行力好，能够承受较强的工作压力。<br />
+                    1、熟悉主流开发技术框架，具备软件工程的基本知识；<br />
+                    2、熟练掌握各种测试理论和测试技术，精通测试过程设计和用例设计方法；<br />
+                    3、熟悉性能测试、自动化测试、安全测试其中一种或多种测试工具；（LoadRunner、Jmeter、Selenium、QTP、Robot、Firebug、AppScan，PyCharm等），熟练运用工具从事过相关测试工作；<br />
+                    4、熟悉掌握一种编程语言（Java/Python/C++等）；<br />
+                    5、熟悉Oracle/MySQL数据库，并能熟练编写SQL语句，熟练常用Linux命令；<br />
+                    6、有整体质量意识，测试管理经验。<br />
                   </div>
                 </div>
-                <div className="position">
+                <div className="position right">
                   <p className="df"><img src={position} /><span className="ml10">产品经理</span></p>
                   <div>
-                    1、计算机、通讯或相关专业本科以上学历；3年以上工作经验。<br />
-                    2、熟悉软件项目的管理流程，了解软件需求的调研方法，具备需求分析能力。<br />
+                    1、计算机或相关专业本科以上学历；3年以上工作经验；<br />
+                    2、熟悉开源软件项目的管理流程，了解软件需求的调研方法，具备需求分析能力；<br />
                     3、能以专业的方式向客户提供技术咨询，良好的方案设计能力和文字功底；<br />
                     4、具备良好的交流、沟通和表达能力，良好的方案演示和介绍技巧；<br />
-                    5、承受较强的工作压力，强烈的团队合作意识与工作责任心；<br />
-                    6、有良好人际交往能力，工作积极主动，自信心强，有较强的学习能力<br />
+                    5、了解互联网产品的基本思路及基础方法论，能够基于数据提出产品优化策略；<br />
+                    6、承受较强的工作压力，强烈的团队合作意识与工作责任心；<br />
+                    7、有良好人际交往能力，工作积极主动，自信心强，有较强的学习能力。<br />
                   </div>
                 </div>
               </div>
             </Carousel>
-            <p className="delivery">简历投递邮箱：zengyt@csxjy.</p>
+            <p className="delivery">简历投递邮箱：zengyt#csxjy.com.cn 曾先生  (用@符号替换#)</p>
           </div>
         </div>
 
         {/* 合作单位 */}
-        <div id="value4" className="unit">
+        <div className="unit">
+          <a id="value4" className="mao"></a>
           <div className="au_title">合作单位</div>
           <table>
+            <tr>
+              <td><a href="https://www.nudt.edu.cn/" target="_blank"><img src={img6}></img></a></td>
+              <td><a href="https://www.pku.edu.cn/" target="_blank"><img src={img7}></img></a></td>
+              <td><a href="https://www.buaa.edu.cn/" target="_blank"><img src={img8}></img></a></td>
+              <td><a href="https://www.nju.edu.cn/" target="_blank"><img src={img10}></img></a></td>
+              <td><a href="http://www.iscas.ac.cn/" target="_blank"><img src={img9}></img></a></td>
+            </tr>
             <tr>
               <td><a href="https://www.ccf.org.cn/" target="_blank"><img src={img1}></img></a></td>
               <td><a href="https://www.hnjmrh.gov.cn/newweb/service/detail/305/" target="_blank"><img src={img2}></img></a></td>
@@ -206,13 +283,6 @@ function AboutUs(){
               <td><a href="http://www.zjusdgyy.com/product/wuxi_545.html" target="_blank"><img src={img4}></img></a></td>
               <td><a href="http://www.cec.com.cn/" target="_blank"><img src={img5}></img></a></td>
             </tr>
-            <tr>
-              <td><a href="https://www.nudt.edu.cn/" target="_blank"><img src={img6}></img></a></td>
-              <td><a href="https://www.pku.edu.cn/" target="_blank"><img src={img7}></img></a></td>
-              <td><a href="https://www.buaa.edu.cn/" target="_blank"><img src={img8}></img></a></td>
-              <td><a href="http://www.iscas.ac.cn/" target="_blank"><img src={img9}></img></a></td>
-              <td><a href="https://www.nju.edu.cn/" target="_blank"><img src={img10}></img></a></td>
-            </tr>
             <tr>
               <td><a href="https://www.openi.org.cn/" target="_blank"><img src={img11}></img></a></td>
               <td><a href="https://www.mulanos.cn/" target="_blank"><img src={img12}></img></a></td>

src/forge/AboutUs/AboutUs.scss

@@ -11,16 +11,43 @@
     justify-content: space-around;
     align-items: center;
   }
+  & .join_us_bg, .feature_function_bg, .feat_fun_img, .aboutUs_head{
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  & .mao{
+    position: relative;
+    top: -70px;
+  }
 }
-.aboutUs_head{
-  min-height: 560px;
-  background-color: beige;
+.aboutUs_head.df{
+  flex-direction: column;
+  justify-content: center;
+  height: 500px;
+  line-height: 500px;
+  background-image: url('./image/banner.png');
+  & p{
+    text-align: center;
+  }
+  & .head_title{
+    line-height: 50px;
+    font-size: 48px;
+    font-weight: 600;
+    background-image: -webkit-linear-gradient(bottom,#4CDBF5,#5AACFF);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  & .head_cont{
+    line-height: 39px;
+    color: #FFFFFF;
+    opacity: 0.9;
+  }
 }
 .aboutUs_title{
   width: 800px;
   height: 62px;
   margin: 0 auto;
-  // justify-content: space-around;
   &>table{
     width: 800px;
     font-weight: 400;
@@ -137,6 +164,58 @@
       }
     }
   }
+  //特色功能  确实给力
+  & .feature_function_bg{
+    position: relative;
+    height: 630px;
+    background-image: url(./image/funBg.png);
+    & .au_cont p.au_title{
+      font-size: 30px;
+      padding: 50px 0 70px;
+      color: #FFFFFF;
+      opacity: 0.9;
+    }
+    & table{
+      position: relative;
+      background: none;
+      width: 1200px;}
+    & .funBg2 {
+      width: 1600px;
+      left: 50%;
+      margin-left: -800px;
+      position: absolute;
+      bottom: -15px;
+    }
+  }
+    
+  & .feat_func_cont{
+    width: 200px;
+    & .feat_fun_img{
+      height: 205px;
+      line-height: 205px;
+      background-image: url('./image/funBg3.png');
+      &:hover{background-image: url('./image/funBg4.png');}
+    }
+    & img{ width: 175px;}
+    & p{
+      font-size: 18px;
+      font-weight: 500;
+      color: #FFFFFF;
+      line-height: 28px;
+      background-image: -webkit-linear-gradient(bottom,#4FFDFF,#0183FF);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    & div>div{
+      margin: 10px auto;
+      width: 142px;
+      font-size: 14px;
+      line-height: 28px;
+      color: #FFFFFF;
+      opacity: 0.76;
+    }
+  }
+
   // 平台统计
   &.statistics{
     text-align: center;
@@ -153,7 +232,6 @@
       top: 230px;
       left: 50%;
       margin-left: -500px;
-      // justify-content: space-around;
       & span{
         font-size: 48px;
         font-weight: bold;
@@ -170,20 +248,14 @@
       }
     }
     & .earthImg{
-      width: 1700px;
+      width: 1500px;
       margin-top: -120px;
-      animation: moving 15s linear infinite;
+      animation: moving 60s linear infinite;
     }
     @keyframes moving {
-      0% {
-        transform: rotate(0deg);
-      }
-      50% {
-        transform: rotate(180deg);
-      }
-      100% {
-        transform: rotate(360deg);
-      }
+      0% { transform: rotate(0deg);}
+      50% { transform: rotate(180deg);}
+      100% { transform: rotate(360deg);}
     }
   }
 }
@@ -192,24 +264,21 @@
   height: 710px;
   margin-top: 40px;
   background-image: url(./image/joinUs.png);
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
   & .au_cont{position: relative;}
   & .joinUsImg{
-    width: 610px;
-    height: 300px;
+    width: 260px;
+    height: 265px;
     position: absolute;
-    top: 25px;
-    right: -40px;
+    top: 27px;
+    right: 10px;
   }
   & .df{
     display: flex !important;
-    justify-content: space-between;
     margin-top: 30px;
   }
   & .position{
-    width: 590px;
+    width: 540px;
+    &.right{ margin-right: -30px;}
     & p{
       justify-content: flex-start;
       height: 60px;
@@ -237,17 +306,30 @@
     border-radius: 10px;
     background: #466AFF;
   }
-  & .delivery{height: 60px;line-height: 60px;}
+  & .delivery{
+    height: 60px;
+    line-height: 60px;
+    margin-left: 35px;
+  }
 }
 //合作单位
 .unit{
   margin-bottom: 60px;
-  & img{ width: 224px;}
+  & table{
+    width: 1200px;
+    height: 550px;
+    margin-top: 15px;
+  }
+  & img{ 
+    width: 224px;
+    box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.06);
+    border-radius: 6px;
+    border: 2px solid #FFFFFF;
+    &:hover{ border: 1px solid #466AFF;}
+  }
 }
 .au_cont{
   width: 1200px;
   margin: 50px auto;
-  &.pl30 .subtitle{
-    margin-left: -30px;
-  }
-}
+  &.pl30 .subtitle{ margin-left: -30px;}
+}