整体大致完成

src/pages/center4.js

@@ -2,6 +2,76 @@ import React, { Component } from "react";
 
 export default class Center4 extends Component {
   render() {
-    return <div></div>;
+    return (
+      <div className="center4">
+        <div className="center4_main">
+          <h2>课堂教学工具</h2>
+          <h5>Classroom Teaching Toolsets</h5>
+          <div className="center4_main_box1">
+            <div className="center4_main_box1_left">加入课堂</div>
+            <div className="center4_main_box1_right">
+              创建课堂
+              <i></i>
+            </div>
+          </div>
+          <div className="center4_main_box2">
+            <div className="center4_main_box2_box">
+              <img src={require("../img/3.png")}></img>
+              <div>
+                <h4>课堂灵活组织</h4>
+                <h6>
+                  头歌教学课堂是一种集成化班级协同空间，支持实验、作业、视频、考试、毕设等十余种线上线下管理工具。
+                </h6>
+              </div>
+            </div>
+            <div className="center4_main_box2_box">
+              <img src={require("../img/4.png")}></img>
+              <div>
+                <h4>作业自动管理</h4>
+                <h6>
+                  头歌作业管理是课堂核心组件，支持普通作业、实践作业、分组作业等自动化批阅、统计和教务数据对接。
+                </h6>
+              </div>
+            </div>
+            <div className="center4_main_box2_box">
+              <img src={require("../img/5.png")}></img>
+              <div>
+                <h4>分组协同开发</h4>
+                <h6>
+                  头歌分组作业是课堂核心组件，支持分组开展项目协同开发、代码托管、任务跟踪、CI/CD、按组评分等。
+                </h6>
+              </div>
+            </div>
+            <div className="center4_main_box2_box">
+              <img src={require("../img/6.png")}></img>
+              <div>
+                <h4>考试与防作弊</h4>
+                <h6>
+                  头歌智能化考试系统提供了全面防作弊机制，试卷支持八种题型，支持随机拍照、查重、IP地址锁定等防作弊机制。
+                </h6>
+              </div>
+            </div>
+            <div className="center4_main_box2_box">
+              <img src={require("../img/7.png")}></img>
+              <div>
+                <h4>结果导向统计</h4>
+                <h6>
+                  头歌支持OBE（成果导向教育）理念和机制，支持作业、实验、考试、课堂等多粒度、多维度的教学成效分析。
+                </h6>
+              </div>
+            </div>
+            <div className="center4_main_box2_box">
+              <img src={require("../img/8.png")}></img>
+              <div>
+                <h4>工程教育认证</h4>
+                <h6>
+                  头歌的工程教育专业认证系统集成了头歌OBE体系，支持基于大数据的自动化专业达成度自动计算和实时改进。
+                </h6>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
   }
 }

src/pages/center5.js

@@ -2,6 +2,81 @@ import React, { Component } from "react";
 
 export default class Center5 extends Component {
   render() {
-    return <div></div>;
+    return (
+      <div className="center5">
+        <div className="center5_main">
+          <h2>头歌企业版</h2>
+          <h5>Enterprise Edition of EduCoder Software and Services</h5>
+          <div className="center5_main_box">
+            <p>
+              为<span>3000家以上高校和企业</span>
+              提供产品和服务
+            </p>
+            <div className="center5_main_box_box1">
+              <a target={"_blank"} href="https://www.nudt.edu.cn">
+                <img src={require("../img/9.png")}></img>
+              </a>
+              <a target={"_blank"} href="https://www.pku.edu.cn">
+                <img src={require("../img/10.png")}></img>
+              </a>
+              <a target={"_blank"} href="https://www.tsinghua.edu.cn">
+                <img src={require("../img/11.png")}></img>
+              </a>
+              <a target={"_blank"} href="https://www.fudan.edu.cn">
+                <img src={require("../img/12.png")}></img>
+              </a>
+              <a target={"_blank"} href="https://www.sjtu.edu.cn">
+                <img src={require("../img/13.png")}></img>
+              </a>
+              <a target={"_blank"} href="https://www.ustc.edu.cn">
+                <img src={require("../img/14.png")}></img>
+              </a>
+              <a target={"_blank"} href="https://www.hust.edu.cn">
+                <img src={require("../img/15.png")}></img>
+              </a>
+              <a target={"_blank"} href="http://www.hnkjxy.net.cn">
+                <img src={require("../img/16.png")}></img>
+              </a>
+              <a target={"_blank"} href="http://www.hnjdzy.net">
+                <img src={require("../img/17.png")}></img>
+              </a>
+            </div>
+            <div className="center5_main_box_box2">
+              <a
+                target={"_blank"}
+                href="http://www.10086.cn/index/hn/index_731_731.html"
+              >
+                <img src={require("../img/18.png")}></img>
+              </a>
+              <a
+                target={"_blank"}
+                href="https://www.huawei.com/cn/?ic_medium=direct&ic_source=surlent"
+              >
+                <img src={require("../img/19.png")}></img>
+              </a>
+              <a target={"_blank"} href="https://cloud.inspur.com">
+                <img src={require("../img/20.png")}></img>
+              </a>
+              <a target={"_blank"} href="https://www.amazon.cn">
+                <img src={require("../img/21.png")}></img>
+              </a>
+              <a
+                target={"_blank"}
+                href="https://www.alibabagroup.com/cn/global/home"
+              >
+                <img src={require("../img/22.png")}></img>
+              </a>
+              <a target={"_blank"} href="https://www.ucloud.cn">
+                <img src={require("../img/23.png")}></img>
+              </a>
+              <a target={"_blank"} href="https://www.lenovo.com.cn">
+                <img src={require("../img/24.png")}></img>
+              </a>
+            </div>
+            <div className="center5_main_box_box3">试用申请</div>
+          </div>
+        </div>
+      </div>
+    );
   }
 }

src/pages/index.css

@@ -313,4 +313,179 @@
 }
 .center3_main_box_right a img{
     width: 100%;
+}
+
+.center4{
+    width: 100%;
+    height: auto;
+    float: left;
+}
+.center4_main{
+    margin: 0 auto;
+    width: 1300px;
+    padding-top: 80px;
+    padding-bottom: 80px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+}
+.center4_main h2{
+    font-size: 30px;
+    font-weight: 400;
+    color: #34495e;
+    margin-bottom: 5px;
+}
+.center4_main h5{
+    height: 18px;
+    font-size: 18px;
+    font-weight: 200;
+    color: #686f9a;
+    margin-bottom: 60px;
+}
+.center4_main_box1{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+.center4_main_box1_left{
+    width: 137px;
+    height: 40px;
+    background: #dfe6ff;
+    border-radius: 5px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #377dff;
+    margin-right: 20px;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+}
+.center4_main_box1_right{
+    width: 137px;
+    height: 40px;
+    background: #377dff;
+    border-radius: 5px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #fff;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.center4_main_box1_right i{
+    font-size: 12px;
+    margin-left: 15px;
+    color: #fff;
+}
+.center4_main_box2{
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 60px;
+}
+.center4_main_box2_box{
+    width: 426px;
+    height: 176px;
+    border-radius: 22px;
+    padding-top: 32px;
+    cursor: pointer;
+    justify-content: center;
+    align-items: flex-start;
+    flex-shrink: 0;
+    margin-bottom: 40px;
+    display: flex;
+}
+.center4_main_box2_box img{
+    margin-top: 4px;
+}
+.center4_main_box2_box div{
+    margin-left: 28px;
+}
+.center4_main_box2_box div h4{
+    width: 235px;
+    height: 25px;
+    font-size: 18px;
+    font-weight: 500;
+    color: #34495e;
+    margin-bottom: 16px;
+}
+.center4_main_box2_box div h6{
+    font-size: 14px;
+    font-weight: 400;
+    color: #6d7278;
+    line-height: 24px;
+    width: 238px;
+    text-align: justify;
+}
+.center4_main_box2_box:hover{
+    background: rgb(255, 255, 255);
+}
+.center5{
+    width: 100%;
+    height: auto;
+    float: left;
+}
+.center5_main{
+    margin: 0 auto;
+    width: 1300px;
+    padding-top: 80px;
+    padding-bottom: 120px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+}
+.center5_main h2{
+    font-size: 30px;
+    font-weight: 400;
+    color: #34495e;
+    margin-bottom: 5px;
+}
+.center5_main h5{
+    height: 18px;
+    font-size: 18px;
+    font-weight: 200;
+    color: #686f9a;
+    margin-bottom: 60px;
+}
+.center5_main_box{
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+}
+.center5_main_box p{
+    font-size: 26px;
+    font-weight: 500;
+    color: #667a8d;
+    margin-bottom: 6px;
+}
+.center5_main_box p span{
+    color: #335eea;
+}
+.center5_main_box_box1{
+    margin-top: 81px;
+}
+.center5_main_box_box1 img{
+    margin-right: 42px;
+}
+.center5_main_box_box2{
+    margin-top: 54px;
+}
+.center5_main_box_box2 img{
+    margin-right: 45px;
+}
+.center5_main_box_box3{
+    width: 137px;
+    height: 40px;
+    background: #377dff;
+    border-radius: 5px;
+    font-size: 16px;
+    color: #fff;
+    line-height: 40px;
+    cursor: pointer;
+    text-align: center;
+    margin-top: 88px;
 }

src/pages/page1.js

@@ -47,7 +47,10 @@ export default class Page1 extends Component {
         </div>
         <div className="center2_page1_right">
           <img src={require("../img/2.png")}></img>
-          <video src="https://video.educoder.net/sv/20821c44-1775248f8e1/20821c44-1775248f8e1.mp4"></video>
+          <video
+            src="https://video.educoder.net/sv/20821c44-1775248f8e1/20821c44-1775248f8e1.mp4"
+            autoplay="autoplay"
+          ></video>
         </div>
       </div>
     );

src/pages/page2.js

@@ -51,7 +51,10 @@ export default class Page2 extends Component {
         </div>
         <div className="center2_page1_right">
           <img src={require("../img/2.png")}></img>
-          <video src="https://video.educoder.net/sv/28357c10-1775907ad78/28357c10-1775907ad78.mp4"></video>
+          <video
+            src="https://video.educoder.net/sv/28357c10-1775907ad78/28357c10-1775907ad78.mp4"
+            autoplay="autoplay"
+          ></video>
         </div>
       </div>
     );

src/pages/page3.js

@@ -47,7 +47,10 @@ export default class Page3 extends Component {
         </div>
         <div className="center2_page1_right">
           <img src={require("../img/2.png")}></img>
-          <video src="https://video.educoder.net/sv/4fdca3e8-17752499adf/4fdca3e8-17752499adf.mp4"></video>
+          <video
+            src="https://video.educoder.net/sv/4fdca3e8-17752499adf/4fdca3e8-17752499adf.mp4"
+            autoplay="autoplay"
+          ></video>
         </div>
       </div>
     );

src/pages/page4.js

@@ -47,7 +47,10 @@ export default class Page4 extends Component {
         </div>
         <div className="center2_page1_right">
           <img src={require("../img/2.png")}></img>
-          <video src="https://video.educoder.net/sv/5490aa0d-17759081e1d/5490aa0d-17759081e1d.mp4"></video>
+          <video
+            src="https://video.educoder.net/sv/5490aa0d-17759081e1d/5490aa0d-17759081e1d.mp4"
+            autoplay="autoplay"
+          ></video>
         </div>
       </div>
     );

src/pages/page5.js

@@ -47,7 +47,10 @@ export default class Page5 extends Component {
         </div>
         <div className="center2_page1_right">
           <img src={require("../img/2.png")}></img>
-          <video src="https://video.educoder.net/sv/3fcef362-17759076bd9/3fcef362-17759076bd9.mp4"></video>
+          <video
+            src="https://video.educoder.net/sv/3fcef362-17759076bd9/3fcef362-17759076bd9.mp4"
+            autoplay="autoplay"
+          ></video>
         </div>
       </div>
     );