更改文件目录

src/pages/component/component1/menu.js

@@ -0,0 +1,73 @@
+import React, { Component } from "react";
+import "../../index.css";
+
+export default class Caidan extends Component {
+  state = {
+    list: [
+      {
+        id: 1,
+        text: "首页",
+      },
+      {
+        id: 2,
+        text: "实践课程",
+      },
+      {
+        id: 3,
+        text: "实践项目",
+      },
+      {
+        id: 4,
+        text: "教学课堂",
+      },
+      {
+        id: 5,
+        text: "在线竞赛",
+      },
+      {
+        id: 6,
+        text: "教学案例",
+      },
+      {
+        id: 7,
+        text: "交流问答",
+      },
+      {
+        id: 8,
+        text: "大学开源",
+      },
+      {
+        id: 9,
+        text: "工程认证",
+      },
+    ],
+    current: 0,
+  };
+  render() {
+    return (
+      <div className="menu">
+        <ul>
+          {this.state.list.map((item, index) => (
+            <li
+              key={item.id}
+              className={this.state.current === index ? "active" : ""}
+              onClick={() => this.handleClick(index)}
+            >
+              {item.text}
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+  handlemove(index) {
+    console.log(index);
+  }
+  handleClick(index) {
+    console.log(index);
+
+    this.setState({
+      current: index,
+    });
+  }
+}

src/pages/component/component2/center1.css

@@ -0,0 +1,67 @@
+.center1{
+    
+    width: 100%;
+    float: left;
+    height: 345px;
+    margin-top: 30px;
+}
+.center1_main{
+    border-radius: 8px ;
+    height: 345px;
+    width: 1200px;
+    margin: 0 auto;
+    position: relative;
+    overflow: hidden;
+}
+.center1_main_left{
+    list-style: none ;
+    border-radius: 8px 0 0 8px;
+    height: 345px;
+    width: 160px;
+    padding: 10px 20px 0 20px ;
+    background: black ;
+    margin-bottom: 0px;
+    border-right: 0px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 2;
+}
+.center1_main_left_box{
+    margin-right: 20px;
+    color: #fff;
+    width: 120px;
+    height: 40px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #4b4b4b;
+    font-size: 12px;
+    padding: 0!important;
+}
+.center1_main_left_box .ant-menu-submenu-title{
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+.center1_main_left_box .ant-menu-submenu-arrow{
+    right: 0;
+}
+.center1_picture{
+    height: 345px;
+    width: 1200px;
+    line-height: 345px;
+    text-align: center;
+    float: left;
+    background: blue;
+    margin-bottom: 0px;
+}
+.center1_picture img{
+    width: 100%;
+    height:100%;
+}
+
+.center1_picture .ant-carousel .slick-list .slick-track{
+    height: 345px;
+}

src/pages/component/component2/center1.js

@@ -0,0 +1,163 @@
+import React, { Component } from "react";
+import { Carousel } from "antd";
+import "./center1.css";
+import { Menu } from "antd";
+import {
+  MailOutlined,
+  AppstoreOutlined,
+  SettingOutlined,
+} from "@ant-design/icons";
+
+const { SubMenu } = Menu;
+
+export default class Center1 extends Component {
+  render() {
+    return (
+      <div className="center1">
+        <div className="center1_main">
+          <Menu className="center1_main_left">
+            <SubMenu
+              key="sub1"
+              title="程序设计语言"
+              className="center1_main_left_box"
+            >
+              <Menu.Item key="1">C/C++程序设计</Menu.Item>
+              <Menu.Item key="2">Java程序设计</Menu.Item>
+              <Menu.Item key="3">Python程序设计</Menu.Item>
+              <Menu.Item key="4">PHP程序设计</Menu.Item>
+              <Menu.Item key="5">Go语言程序设计</Menu.Item>
+              <Menu.Item key="6">C#程序设计</Menu.Item>
+              <Menu.Item key="7">Matlab程序设计</Menu.Item>
+              <Menu.Item key="8">面向对象程序设计</Menu.Item>
+              <Menu.Item key="9">其他语言</Menu.Item>
+              <Menu.Item key="10">R语言程序设计</Menu.Item>
+            </SubMenu>
+            <SubMenu
+              key="sub2"
+              title="计算机基础"
+              className="center1_main_left_box"
+            >
+              <Menu.Item key="11">离散数学</Menu.Item>
+              <Menu.Item key="12">大学计算机基础</Menu.Item>
+              <Menu.Item key="13">计算思维</Menu.Item>
+              <Menu.Item key="14">图形图像</Menu.Item>
+              <Menu.Item key="15">数理统计</Menu.Item>
+            </SubMenu>
+            <SubMenu
+              key="sub5"
+              title="计算机系统能力"
+              className="center1_main_left_box"
+            >
+              <Menu.Item key="16">计算机组成原理</Menu.Item>
+              <Menu.Item key="17">操作系统</Menu.Item>
+              <Menu.Item key="18">编译原理</Menu.Item>
+              <Menu.Item key="19">计算机系统</Menu.Item>
+              <Menu.Item key="20">信号与系统</Menu.Item>
+              <Menu.Item key="21">汇编语言程序设计</Menu.Item>
+              <Menu.Item key="22">Linux编程设计</Menu.Item>
+              <Menu.Item key="23">Verilog程序设计</Menu.Item>
+              <Menu.Item key="24">机器人</Menu.Item>
+            </SubMenu>
+            <SubMenu
+              key="sub6"
+              title="云计算与大数据"
+              className="center1_main_left_box"
+            >
+              <Menu.Item key="12">数据科学</Menu.Item>
+              <Menu.Item key="12">数据采集</Menu.Item>
+              <Menu.Item key="12">数据存储管理</Menu.Item>
+              <Menu.Item key="12">数据分析处理</Menu.Item>
+              <Menu.Item key="12">数据可视化</Menu.Item>
+              <Menu.Item key="12">大数据应用案例</Menu.Item>
+              <Menu.Item key="12">虚拟化</Menu.Item>
+              <Menu.Item key="12">集群管理</Menu.Item>
+              <Menu.Item key="12">云计算基础</Menu.Item>
+            </SubMenu>
+            <SubMenu
+              key="sub7"
+              title="人工智能"
+              className="center1_main_left_box"
+            >
+              <Menu.Item key="9">Option 9</Menu.Item>
+              <Menu.Item key="10">Option 10</Menu.Item>
+              <Menu.Item key="11">Option 11</Menu.Item>
+              <Menu.Item key="12">Option 12</Menu.Item>
+            </SubMenu>
+            <SubMenu
+              key="sub8"
+              title="软件工程"
+              className="center1_main_left_box"
+            >
+              <Menu.Item key="9">Option 9</Menu.Item>
+              <Menu.Item key="10">Option 10</Menu.Item>
+              <Menu.Item key="11">Option 11</Menu.Item>
+              <Menu.Item key="12">Option 12</Menu.Item>
+            </SubMenu>
+            <SubMenu
+              key="sub9"
+              title="Web开发"
+              className="center1_main_left_box"
+            >
+              <Menu.Item key="9">Option 9</Menu.Item>
+              <Menu.Item key="10">Option 10</Menu.Item>
+              <Menu.Item key="11">Option 11</Menu.Item>
+              <Menu.Item key="12">Option 12</Menu.Item>
+            </SubMenu>
+            <SubMenu key="sub10" title="更多" className="center1_main_left_box">
+              <Menu.Item key="9">Option 9</Menu.Item>
+              <Menu.Item key="10">Option 10</Menu.Item>
+              <Menu.Item key="11">Option 11</Menu.Item>
+              <Menu.Item key="12">Option 12</Menu.Item>
+            </SubMenu>
+          </Menu>
+
+          <div className="center1_picture">
+            <Carousel autoplay>
+              <div>
+                <h3 className="center1_picture">
+                  <img src="https://ali-cdn.educoder.net/images/avatars/PortalImage/146?t=1644571196"></img>
+                </h3>
+              </div>
+              <div>
+                <h3 className="center1_picture">
+                  <img src="https://ali-cdn.educoder.net/images/avatars/PortalImage/89?t=1640671464"></img>
+                </h3>
+              </div>
+              <div>
+                <h3 className="center1_picture">
+                  <img src="https://ali-cdn.educoder.net/images/avatars/PortalImage/98?t=1618836366"></img>
+                </h3>
+              </div>
+              <div>
+                <h3 className="center1_picture">
+                  <img src="https://ali-cdn.educoder.net/images/avatars/PortalImage/111?t=1629197065"></img>
+                </h3>
+              </div>
+
+              <div>
+                <h3 className="center1_picture">
+                  <img src="https://ali-cdn.educoder.net/images/avatars/PortalImage/63?t=1642574531"></img>
+                </h3>
+              </div>
+              <div>
+                <h3 className="center1_picture">
+                  <img src="https://ali-cdn.educoder.net/images/avatars/PortalImage/96?t=1616488300"></img>
+                </h3>
+              </div>
+              <div>
+                <h3 className="center1_picture">
+                  <img src="https://ali-cdn.educoder.net/images/avatars/PortalImage/97?t=1639539417"></img>
+                </h3>
+              </div>
+              <div>
+                <h3 className="center1_picture">
+                  <img src="https://ali-cdn.educoder.net/images/avatars/PortalImage/94?t=1614765799"></img>
+                </h3>
+              </div>
+            </Carousel>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/pages/component/component3/center2.js

@@ -0,0 +1,67 @@
+import React, { Component } from "react";
+import Page1 from "./component/page1";
+import Page2 from "./component/page2";
+import Page3 from "./component/page3";
+import Page4 from "./component/page4";
+import Page5 from "./component/page5";
+
+export default class Center2 extends Component {
+  state = {
+    list: [
+      {
+        id: 1,
+        text: "云端编程环境",
+      },
+      {
+        id: 2,
+        text: "远程桌面",
+      },
+      {
+        id: 3,
+        text: "远程命令行",
+      },
+      {
+        id: 4,
+        text: "虚拟仿真",
+      },
+      {
+        id: 5,
+        text: "交互式笔记",
+      },
+    ],
+    current: 0,
+    availTime: 0,
+  };
+  render() {
+    return (
+      <div className="center2">
+        <h2 className="center2_box1">异质架构实践运行环境</h2>
+        <h5 className="center2_box2">
+          Heterogeneous Architecture Pratice Runtime Environments
+        </h5>
+        <ul className="center2_box3">
+          {this.state.list.map((item, index) => (
+            <li
+              key={item.id}
+              className={this.state.current === index ? "active_xuanxiang" : ""}
+              onClick={() => this.handleClick(index)}
+            >
+              {item.text}
+            </li>
+          ))}
+        </ul>
+        {this.state.current === 0 && <Page1></Page1>}
+        {this.state.current === 1 && <Page2></Page2>}
+        {this.state.current === 2 && <Page3></Page3>}
+        {this.state.current === 3 && <Page4></Page4>}
+        {this.state.current === 4 && <Page5></Page5>}
+      </div>
+    );
+  }
+  handleClick(index) {
+    console.log(index);
+    this.setState({
+      current: index,
+    });
+  }
+}

src/pages/component/component3/component/page1.js

@@ -0,0 +1,58 @@
+import React, { Component } from "react";
+
+export default class Page1 extends Component {
+  render() {
+    return (
+      <div className="center2_page">
+        <div className="center2_page1_left">
+          <h3>云端编程环境特点</h3>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>图文、视频、Latex</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>VS Code编程环境</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>Online Judge（OJ）模式</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>代码自动推荐</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>可定制测试集</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>自动化部署、测试、反馈</span>
+          </p>
+          <h3 style={{ marginTop: "20px" }}>可定制运行环境</h3>
+          <p>
+            <span>CentOS、Ubuntu、Python、Matplotlib</span>
+          </p>
+          <p>
+            <span>Pandas、Numpy、Scrapy … …</span>
+          </p>
+          <div className="center2_page1_left_bottom">
+            <div className="center2_page1_left_bottom_box1">社区支持</div>
+            <div className="center2_page1_left_bottom_box2">
+              立即体验
+              <i className="center2_page1_left_bottom_box2_box"></i>
+            </div>
+          </div>
+        </div>
+        <div className="center2_page1_right">
+          <img src={require("../../../../assets/img/2.png")}></img>
+          <video
+            src="https://video.educoder.net/sv/20821c44-1775248f8e1/20821c44-1775248f8e1.mp4"
+            autoplay="autoplay"
+          ></video>
+        </div>
+      </div>
+    );
+  }
+}

src/pages/component/component3/component/page2.js

@@ -0,0 +1,62 @@
+import React, { Component } from "react";
+
+export default class Page2 extends Component {
+  render() {
+    return (
+      <div className="center2_page">
+        <div className="center2_page1_left" style={{ float: "right" }}>
+          <h3>远程桌面特点</h3>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>图文、视频、Latex</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>图形化操作系统</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>可配置应用软件和模拟器</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>可定制测试集</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>自动化部署、测试、反馈</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>大规模并发实验</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>支持一流课程建设</span>
+          </p>
+          <h3 style={{ marginTop: "20px" }}>可定制运行环境</h3>
+          <p>
+            <span>CentOS、Ubuntu、 Windows、 Kylin OS</span>
+          </p>
+          <p>
+            <span>Wireshark、Vscode、GN3 … …</span>
+          </p>
+          <div className="center2_page1_left_bottom">
+            <div className="center2_page1_left_bottom_box1">社区支持</div>
+            <div className="center2_page1_left_bottom_box2">
+              立即体验
+              <i className="center2_page1_left_bottom_box2_box"></i>
+            </div>
+          </div>
+        </div>
+        <div className="center2_page1_right">
+          <img src={require("../../../../assets/img/2.png")}></img>
+          <video
+            src="https://video.educoder.net/sv/28357c10-1775907ad78/28357c10-1775907ad78.mp4"
+            autoplay="autoplay"
+          ></video>
+        </div>
+      </div>
+    );
+  }
+}

src/pages/component/component3/component/page3.js

@@ -0,0 +1,58 @@
+import React, { Component } from "react";
+
+export default class Page3 extends Component {
+  render() {
+    return (
+      <div className="center2_page">
+        <div className="center2_page1_left">
+          <h3>远程命令行环境</h3>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>标准Linux Shell命令</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>命令操作全程记录</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>可配置命令行应用程序</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>可配置命令行模拟器</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>自动化部署、测试、反馈</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>支持一流课程建设</span>
+          </p>
+          <h3 style={{ marginTop: "20px" }}>可定制运行环境</h3>
+          <p>
+            <span>CentOS、Ubuntu、Python、Vim、Docker</span>
+          </p>
+          <p>
+            <span>SSH、Git、Hadoop、Hive … …</span>
+          </p>
+          <div className="center2_page1_left_bottom">
+            <div className="center2_page1_left_bottom_box1">社区支持</div>
+            <div className="center2_page1_left_bottom_box2">
+              立即体验
+              <i className="center2_page1_left_bottom_box2_box"></i>
+            </div>
+          </div>
+        </div>
+        <div className="center2_page1_right">
+          <img src={require("../../../../assets/img/2.png")}></img>
+          <video
+            src="https://video.educoder.net/sv/4fdca3e8-17752499adf/4fdca3e8-17752499adf.mp4"
+            autoplay="autoplay"
+          ></video>
+        </div>
+      </div>
+    );
+  }
+}

src/pages/component/component3/component/page4.js

@@ -0,0 +1,58 @@
+import React, { Component } from "react";
+
+export default class Page4 extends Component {
+  render() {
+    return (
+      <div className="center2_page">
+        <div className="center2_page1_left" style={{ float: "right" }}>
+          <h3>虚拟仿真项目特点</h3>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>三维动画教学</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>命令操作全程记录</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>构件化、可组装虚拟场景</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>自动化评测、反馈</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>大规模并发仿真实验</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>支持虚拟仿真项目建设</span>
+          </p>
+          <h3 style={{ marginTop: "20px" }}>可定制运行环境</h3>
+          <p>
+            <span>Ubuntu、CentOS、WebGL、Python</span>
+          </p>
+          <p>
+            <span>Java、C#、ThreeJS、Unity … …</span>
+          </p>
+          <div className="center2_page1_left_bottom">
+            <div className="center2_page1_left_bottom_box1">社区支持</div>
+            <div className="center2_page1_left_bottom_box2">
+              立即体验
+              <i className="center2_page1_left_bottom_box2_box"></i>
+            </div>
+          </div>
+        </div>
+        <div className="center2_page1_right">
+          <img src={require("../../../../assets/img/2.png")}></img>
+          <video
+            src="https://video.educoder.net/sv/5490aa0d-17759081e1d/5490aa0d-17759081e1d.mp4"
+            autoplay="autoplay"
+          ></video>
+        </div>
+      </div>
+    );
+  }
+}

src/pages/component/component3/component/page5.js

@@ -0,0 +1,58 @@
+import React, { Component } from "react";
+
+export default class Page5 extends Component {
+  render() {
+    return (
+      <div className="center2_page">
+        <div className="center2_page1_left">
+          <h3>Jupyter NoteBook环境</h3>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>代码编辑与结果展示同步</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>富媒体展示计算结果</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>模块化执行</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>支持Latex、Markdown</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>200种可选运行环境</span>
+          </p>
+          <p>
+            <img src={require("../../../../assets/img/1.png")}></img>
+            <span>自动化部署、测试、反馈</span>
+          </p>
+          <h3 style={{ marginTop: "20px" }}>可定制运行环境</h3>
+          <p>
+            <span>CentOS、openEuler、TensorFlow、Python</span>
+          </p>
+          <p>
+            <span>MindSpore、Spark、Ubuntu … …</span>
+          </p>
+          <div className="center2_page1_left_bottom">
+            <div className="center2_page1_left_bottom_box1">社区支持</div>
+            <div className="center2_page1_left_bottom_box2">
+              立即体验
+              <i className="center2_page1_left_bottom_box2_box"></i>
+            </div>
+          </div>
+        </div>
+        <div className="center2_page1_right">
+          <img src={require("../../../../assets/img/2.png")}></img>
+          <video
+            src="https://video.educoder.net/sv/3fcef362-17759076bd9/3fcef362-17759076bd9.mp4"
+            autoplay="autoplay"
+          ></video>
+        </div>
+      </div>
+    );
+  }
+}

src/pages/component/component4/center3.js

@@ -0,0 +1,385 @@
+import React, { Component } from "react";
+
+export default class Center3 extends Component {
+  render() {
+    return (
+      <div className="main">
+        <div className="center3">
+          <div className="center3_main">
+            <h2>程序设计与软件工程课程方向</h2>
+            <h5>Computer Programming and Software Engineering Courses</h5>
+            <div className="center3_main_box">
+              <div className="center3_main_box_left">
+                <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/1?t=1612190124"></img>
+                <div className="center3_main_box_left_box">社区支持</div>
+              </div>
+              <div className="center3_main_box_right">
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box1"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/51?t=1618281355"></img>
+                </a>
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box2"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/6?t=1612189186"></img>
+                </a>
+
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box1"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/7?t=1612189226"></img>
+                </a>
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box2"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/8?t=1612189263"></img>
+                </a>
+
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box1"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/49?t=1616556680"></img>
+                </a>
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box2"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/10?t=1612230903"></img>
+                </a>
+
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box1"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/11?t=1612189331"></img>
+                </a>
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box2"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/12?t=1612189380"></img>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="center3">
+          <div className="center3_main">
+            <h2>计算机系统能力课程方向</h2>
+            <h5>Computer System Capability Courses</h5>
+            <div className="center3_main_box">
+              <div className="center3_main_box_right">
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box1"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/15?t=1612189437"></img>
+                </a>
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box2"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/21?t=1612189545"></img>
+                </a>
+
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box1"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/16?t=1612231280"></img>
+                </a>
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box2"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/17?t=1612189472"></img>
+                </a>
+
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box1"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/18?t=1612189494"></img>
+                </a>
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box2"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/14?t=1612189427"></img>
+                </a>
+
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box1"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/19?t=1612189514"></img>
+                </a>
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box2"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/48?t=1613355287"></img>
+                </a>
+              </div>
+              <div className="center3_main_box_left">
+                <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/2?t=1612190130"></img>
+                <div
+                  className="center3_main_box_left_box"
+                  style={{ marginLeft: "auto" }}
+                >
+                  社区支持
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="center3">
+          <div className="center3_main">
+            <h2>电子信息专业课程方向</h2>
+            <h5>Electronic Information Courses</h5>
+            <div className="center3_main_box">
+              <div className="center3_main_box_left">
+                <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/3?t=1612190135"></img>
+                <div className="center3_main_box_left_box">社区支持</div>
+              </div>
+              <div className="center3_main_box_right">
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box1"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/31?t=1612189799"></img>
+                </a>
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box2"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/30?t=1612189775"></img>
+                </a>
+
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box1"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/32?t=1612189837"></img>
+                </a>
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box2"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/33?t=1612189865"></img>
+                </a>
+
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box1"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/35?t=1612231123"></img>
+                </a>
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box2"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/36?t=1612190321"></img>
+                </a>
+
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box1"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/37?t=1612190328"></img>
+                </a>
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box2"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/34?t=1612230852"></img>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="center3">
+          <div className="center3_main">
+            <h2>大数据专业课程方向</h2>
+            <h5>Big Data and Data Science Courses</h5>
+            <div className="center3_main_box">
+              <div className="center3_main_box_right">
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box1"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/38?t=1612190620"></img>
+                </a>
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box2"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/39?t=1612190632"></img>
+                </a>
+
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box1"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/47?t=1612190981"></img>
+                </a>
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box2"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/41?t=1612190867"></img>
+                </a>
+
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box1"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/42?t=1612190907"></img>
+                </a>
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box2"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/43?t=1612190791"></img>
+                </a>
+
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box1"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/44?t=1612190808"></img>
+                </a>
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box2"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/45?t=1612190823"></img>
+                </a>
+              </div>
+              <div className="center3_main_box_left">
+                <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/4?t=1612190141"></img>
+                <div
+                  className="center3_main_box_left_box"
+                  style={{ marginLeft: "auto" }}
+                >
+                  社区支持
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="center3">
+          <div className="center3_main">
+            <h2>人工智能专业课程方向</h2>
+            <h5>Artificial Intelligence Courses</h5>
+            <div className="center3_main_box">
+              <div className="center3_main_box_left">
+                <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/5?t=1614734991"></img>
+                <div className="center3_main_box_left_box">社区支持</div>
+              </div>
+              <div className="center3_main_box_right">
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box1"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/22?t=1612190428"></img>
+                </a>
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box2"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/23?t=1612190441"></img>
+                </a>
+
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box1"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/24?t=1612190459"></img>
+                </a>
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box2"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/25?t=1612190472"></img>
+                </a>
+
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box1"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/26?t=1612230653"></img>
+                </a>
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box2"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/28?t=1612190564"></img>
+                </a>
+
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box1"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/29?t=1612190575"></img>
+                </a>
+                <a
+                  target={"_blank"}
+                  href="https://www.educoder.net/paths/2832"
+                  className="center3_main_box_right_box2"
+                >
+                  <img src="https://ali-cdn.educoder.net/images/avatars/HomeDiscipline/27?t=1612190548"></img>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/pages/component/component5/center4.js

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

src/pages/component/component6/center5.js

@@ -0,0 +1,82 @@
+import React, { Component } from "react";
+
+export default class Center5 extends Component {
+  render() {
+    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("../../../assets/img/9.png")}></img>
+              </a>
+              <a target={"_blank"} href="https://www.pku.edu.cn">
+                <img src={require("../../../assets/img/10.png")}></img>
+              </a>
+              <a target={"_blank"} href="https://www.tsinghua.edu.cn">
+                <img src={require("../../../assets/img/11.png")}></img>
+              </a>
+              <a target={"_blank"} href="https://www.fudan.edu.cn">
+                <img src={require("../../../assets/img/12.png")}></img>
+              </a>
+              <a target={"_blank"} href="https://www.sjtu.edu.cn">
+                <img src={require("../../../assets/img/13.png")}></img>
+              </a>
+              <a target={"_blank"} href="https://www.ustc.edu.cn">
+                <img src={require("../../../assets/img/14.png")}></img>
+              </a>
+              <a target={"_blank"} href="https://www.hust.edu.cn">
+                <img src={require("../../../assets/img/15.png")}></img>
+              </a>
+              <a target={"_blank"} href="http://www.hnkjxy.net.cn">
+                <img src={require("../../../assets/img/16.png")}></img>
+              </a>
+              <a target={"_blank"} href="http://www.hnjdzy.net">
+                <img src={require("../../../assets/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("../../../assets/img/18.png")}></img>
+              </a>
+              <a
+                target={"_blank"}
+                href="https://www.huawei.com/cn/?ic_medium=direct&ic_source=surlent"
+              >
+                <img src={require("../../../assets/img/19.png")}></img>
+              </a>
+              <a target={"_blank"} href="https://cloud.inspur.com">
+                <img src={require("../../../assets/img/20.png")}></img>
+              </a>
+              <a target={"_blank"} href="https://www.amazon.cn">
+                <img src={require("../../../assets/img/21.png")}></img>
+              </a>
+              <a
+                target={"_blank"}
+                href="https://www.alibabagroup.com/cn/global/home"
+              >
+                <img src={require("../../../assets/img/22.png")}></img>
+              </a>
+              <a target={"_blank"} href="https://www.ucloud.cn">
+                <img src={require("../../../assets/img/23.png")}></img>
+              </a>
+              <a target={"_blank"} href="https://www.lenovo.com.cn">
+                <img src={require("../../../assets/img/24.png")}></img>
+              </a>
+            </div>
+            <div className="center5_main_box_box3">试用申请</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/pages/index.css

@@ -0,0 +1,427 @@
+*{
+    margin: 0px;
+    padding: 0px;
+}
+.menu{
+    width: 100%;
+    height: 64px;
+    padding: 0 50px;
+    line-height: 64px;
+    background: #001529;
+    float: left;
+}
+.menu ul{
+    list-style: none;
+    display: flex;
+    color: white;
+    margin-bottom: 0;
+}
+.menu ul li{
+    margin-right: 30px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+}
+.menu ul li:hover{
+    color: #b7b7b7;
+}
+.active{
+    color: #1890ff !important;
+}
+
+
+
+
+.center2{
+    margin: 0 auto;
+    width: 1300px;
+    padding-top: 80px;
+    padding-bottom: 90px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    height: auto;
+}
+.center2_box1{
+    font-size: 30px;
+    font-weight: 400;
+    color: #34495e;
+    margin-bottom: 5px;
+    
+}
+.center2_box2{
+    height: 18px;
+    font-size: 18px;
+    font-weight: 200;
+    color: #686f9a;
+    margin-bottom: 60px;
+}
+.center2_box3{
+    padding-left: 40px;
+    margin-bottom: 40px;
+    height: 46px;
+    width: 734px;
+}
+.center2 ul{
+    list-style: none;
+}
+.center2_box3 li{
+    font-size: 16px;
+    color: #34495e;
+    padding: 10px 30px;
+    border: 1px solid transparent;
+    cursor: pointer;
+    float: left;
+}
+.active_xuanxiang{
+    color: #1890ff !important;
+    border-color: #1890ff !important;
+    border-radius: 50px;
+}   
+.center2_page{
+    width: 1300px;
+    height: auto;
+}
+.center2_page1_left{
+    width: 384px;
+    flex-shrink: 0;
+    padding-top: 42px;
+    padding-left: 50px;
+    float: left;
+}
+.center2_page1_left h3{
+    font-size: 18px;
+    color: #34495e;
+    margin-bottom: 16px;
+}
+.center2_page1_left p{
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 12px;
+}
+.center2_page1_left p img{
+    margin-right: 10px;
+}
+.center2_page1_left p span{
+    font-size: 16px;
+    color: #667a8d;
+}
+.center2_page1_left_bottom{
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    margin-top: 34px;
+}
+.center2_page1_left_bottom_box1{
+    width: 137px;
+    height: 40px;
+    background: #377dff;
+    border-radius: 5px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #fff;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+    margin-right: 20px;
+}
+.center2_page1_left_bottom_box2{
+    width: 137px;
+    height: 40px;
+    background: #dfe6ff;
+    border-radius: 5px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #377dff;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.center2_page1_left_bottom_box2 i{
+    font-size: 12px;
+    margin-left: 15px;
+}
+.center2_page1_right{
+    width: 915px;
+    position: relative;
+    margin-top: 41px;
+    height: 445px;
+    float: left;
+}
+.center2_page1_right img{
+    width: 100%;
+}
+.center2_page1_right video{
+    position: absolute;
+    z-index: 4;
+    left: 102px;
+    top: 41px;
+    width: 730px;
+}
+
+.main{
+    height: auto;
+    width: auto;
+}
+.center3{
+    width: 100%;
+    height: auto;
+    float: left;
+}
+.center3_main{
+    margin: 0 auto;
+    width: 1200px;
+    padding-top: 80px;
+    padding-bottom: 80px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    height: auto;
+}
+.center3_main h2{
+    font-size: 30px;
+    font-weight: 400;
+    color: #34495e;
+    margin-bottom: 5px;
+}
+.center3_main h5{
+    height: 18px;
+    font-size: 18px;
+    font-weight: 200;
+    color: #686f9a;
+    margin-bottom: 40px;
+}
+.center3_main_box{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-top: 30px;
+}
+.center3_main_box_left{
+    height: 598px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+.center3_main_box_right{
+    flex-shrink: 0;
+    width: 380px;
+    display: block;
+}
+.center3_main_box_left_box{
+    width: 137px;
+    height: 40px;
+    background: #377dff;
+    border-radius: 5px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #fff;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+}
+.center3_main_box_right_box1{
+    background: black;
+    width: 180px;
+    height: 130px;
+    background: rgba(104,111,154,.2);
+    border-radius: 8px;
+    overflow: hidden;
+    margin: 0 20px 20px 0;
+    float: left;
+}
+.center3_main_box_right_box2{
+    background: black;
+    width: 180px;
+    height: 130px;
+    background: rgba(104,111,154,.2);
+    border-radius: 8px;
+    overflow: hidden;
+    margin: 0 0 20px 0;
+    float: left;
+}
+.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/index.tsx

@@ -1,32 +1,22 @@
 import styles from "./index.less";
 import { Carousel } from "antd";
-
-const contentStyle = {
-  height: "160px",
-  color: "#fff",
-  lineHeight: "160px",
-  textAlign: "center",
-  background: "#364d79",
-};
+import "./index.css";
+import Caidan from "./component/component1/menu.js";
+import Center1 from "./component/component2/center1.js";
+import Center2 from "./component/component3/center2.js";
+import Center3 from "./component/component4/center3.js";
+import Center4 from "./component/component5/center4.js";
+import Center5 from "./component/component6/center5.js";
 
 export default function IndexPage() {
   return (
     <div>
-      <h1 className={styles.title}>Page index</h1>
-      <Carousel autoplay>
-        <div>
-          <h3 style={contentStyle}>1</h3>
-        </div>
-        <div>
-          <h3 style={contentStyle}>2</h3>
-        </div>
-        <div>
-          <h3 style={contentStyle}>3</h3>
-        </div>
-        <div>
-          <h3 style={contentStyle}>4</h3>
-        </div>
-      </Carousel>
+      {<Caidan></Caidan>}
+      {<Center1></Center1>}
+      {<Center2></Center2>}
+      {<Center3></Center3>}
+      {<Center4></Center4>}
+      {<Center5></Center5>}
     </div>
   );
 }