改

.gitignore

@@ -0,0 +1,22 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/npm-debug.log*
+/yarn-error.log
+/package-lock.json
+/.idea/*
+/.idea/workspace.xml
+/.msfu-prod/*
+/.msfu-dev/*
+# production
+/dist
+
+# misc
+.DS_Store
+
+# umi
+/src/.umi
+/src/.umi-production
+/src/.umi-test
+/.env.local

package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@ant-design/pro-layout": "^6.5.0",
+    "marked": "^4.0.12",
     "react": "17.x",
     "react-dom": "17.x",
     "umi": "^3.5.20"

src/pages/index.css

@@ -0,0 +1,523 @@
+*{
+    margin: 0px;
+    padding: 0px;
+}
+body{
+    transition: all .5s;
+    background: #f5f5f5;
+}
+.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;
+}
+.menu ul a{
+    color: white;
+    margin-right: 30px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    
+}
+.menu ul a:hover{
+    color: #b7b7b7;
+}
+
+
+
+
+.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;
+}
+.center6{
+    height: auto;
+    width: 100%;
+    float: left;
+}
+.center6_main{
+    padding: 90px 20px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    background: #242424;
+    min-width: 1200px;
+}
+.center6_main_box{
+    width: 200px;
+}
+.center6_main_box .title{
+    font-size: 16px;
+    color: #ddd;
+    margin-bottom: 20px;
+    font-weight: 400;
+}
+.center6_main_box a{
+    display: block;
+    color: #bbb;
+    line-height: 34px;
+    font-weight: 300;
+}
+.center6_main_box2{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 290px;
+    margin-top: -12px;
+}
+.center6_main_box2 p{
+    font-size: 12px;
+    color: #bbb;
+    line-height: 32px;
+    margin-top: 12px;
+    font-weight: 300;
+    text-align: justify;
+}
+.center6_main_box2 ul{
+    list-style-type: none;
+    display: flex;
+    justify-content: space-around;
+    padding: 0;
+    margin-top: 20px;
+
+}
+.center6_main_box2 ul li:first-child{
+    margin-right: 50px;
+}
+.center6_main_box2 ul li span{
+    font-size: 12px;
+    color: #bbb;
+    padding-top: 10px;
+}
+.center6_main_box2 ol{
+    list-style: none;
+    margin-top: 16px;
+    display: flex;
+    justify-content: space-around;
+    padding: 0;
+    height: 108px;
+}
+.center6_main_box2 ol li{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+.center6_main_box2 ol li a{
+    font-size: 14px;
+    color: #bbb;
+    margin-top: 20px;
+}

src/pages/index.less

@@ -0,0 +1,3 @@
+.title {
+  background: rgb(121, 242, 157);
+}

src/pages/index.tsx

@@ -0,0 +1,14 @@
+import styles from "./index.less";
+import { Carousel } from "antd";
+import Menu from "./menu/menu.js";
+import IndexRouter from "./router/IndexRouter.js";
+
+export default function IndexPage() {
+  return (
+    <div>
+      <IndexRouter>
+        <Menu></Menu>
+      </IndexRouter>
+    </div>
+  );
+}

src/pages/menu/menu.js

@@ -0,0 +1,63 @@
+import React, { Component } from "react";
+import "../index.css";
+import Showye from "../shouye/shouye.js";
+import Shijiankecheng from "../shijiankecheng/shijiankecheng";
+import { NavLink } from "react-router-dom";
+
+export default class Menu extends Component {
+  render() {
+    return (
+      <div>
+        <div className="menu">
+          <ul>
+            <li>
+              <NavLink to="/shouye" activeClassName="active">
+                首页
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/shijiankecheng" activeClassName="active">
+                实践课程
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/shijianxiangmu" activeClassName="active">
+                实践项目
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/jiaoxueketang" activeClassName="active">
+                教学课堂
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/zaixianjingsai" activeClassName="active">
+                在线竞赛
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/jiaoxueanli" activeClassName="active">
+                教学案例
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/jiaoliuwenda" activeClassName="active">
+                交流问答
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/daxuekaiyuan" activeClassName="active">
+                大学开源
+              </NavLink>
+            </li>
+            <li>
+              <NavLink to="/gongchengrenzheng" activeClassName="active">
+                工程认证
+              </NavLink>
+            </li>
+          </ul>
+        </div>
+      </div>
+    );
+  }
+}

src/pages/router/IndexRouter.js

@@ -0,0 +1,21 @@
+import React, { Component } from "react";
+import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
+import Shouye from "../shouye/shouye";
+import Shijiankecheng from "../shijiankecheng/shijiankecheng";
+
+export default class IndexRouter extends Component {
+  render() {
+    return (
+      <div>
+        <HashRouter>
+          {this.props.children}
+          <Switch>
+            <Route path="/shouye" component={Shouye}></Route>
+            <Route path="/shijiankecheng" component={Shijiankecheng}></Route>
+            <Redirect from="/" to="/shouye"></Redirect>
+          </Switch>
+        </HashRouter>
+      </div>
+    );
+  }
+}

src/pages/shijiankecheng/Path1.js

@@ -0,0 +1,42 @@
+import React, { Component } from "react";
+import Box4 from "./path1/box4";
+import Center6 from "../shouye/component/tg_dibu/center6";
+export default class Path1 extends Component {
+  render() {
+    return (
+      <div>
+        <div className="kc_main_box1">
+          <img src="https://ali-cdn.educoder.net/images/avatars/LaboratorySetting/1_subject_banner?t=1622205433"></img>
+          <div className="kc_main_box1_main">
+            <div>
+              <div className="kc_main_box1_main_box1">
+                <span>实践课程</span>
+                <span>实践型MOOC，让您的在线课程更专业</span>
+              </div>
+              <div className="kc_main_box1_main_box2">
+                <i></i>
+                新建课程
+              </div>
+              <div className="kc_main_box1_main_box2">
+                <i></i>
+                新手指引
+              </div>
+            </div>
+            <div>
+              <div className="kc_main_box1_main_box3">
+                <span>
+                  <input placeholder="搜索您感兴趣的实践课程"></input>
+                  <div className="kc_main_box1_main_box3_box">
+                    <button type="button">搜索</button>
+                  </div>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <Box4></Box4>
+        <Center6></Center6>
+      </div>
+    );
+  }
+}

src/pages/shijiankecheng/Path2.js

@@ -0,0 +1,15 @@
+import React, { Component } from "react";
+import Path from "./path2/path";
+import Center6 from "../shouye/component/tg_dibu/center6";
+
+export default class Path2 extends Component {
+  render() {
+    console.log(this.props);
+    return (
+      <div>
+        <Path id={this.props.match.params.id}></Path>
+        <Center6></Center6>
+      </div>
+    );
+  }
+}

src/pages/shijiankecheng/path1/box2.js

@@ -0,0 +1,90 @@
+import React, { Component } from "react";
+
+export default class Box2 extends Component {
+  constructor() {
+    super();
+    this.state = {
+      list: [],
+      color: "",
+      color2: -1,
+    };
+    fetch("https://test-data.educoder.net/api/disciplines.json?source=subject")
+      .then((res) => res.json())
+      .then((data) => {
+        this.setState({
+          list: data.disciplines,
+        });
+      });
+  }
+  handleclick2(t, i) {
+    this.props.eventbox(t);
+    this.setState({
+      color2: i,
+      color: "",
+    });
+  }
+  handleclick(e, v, t, i, o) {
+    e.stopPropagation();
+    this.props.event(v, t);
+    this.setState({
+      color: i,
+      color2: o,
+    });
+  }
+  handleclick3() {
+    this.props.eventall();
+    this.setState({
+      color2: -1,
+      color: "",
+    });
+  }
+  render() {
+    return (
+      <div className="kc_main_box2">
+        <div className="kc_main_box2_contain">
+          <ul>
+            <li
+              onClick={() => this.handleclick3()}
+              className={this.state.color2 === -1 ? "kc_active" : ""}
+            >
+              全部
+            </li>
+            {this.state.list.map((item, index) => (
+              <li
+                key={item.id}
+                onClick={() => this.handleclick2(item.id, index)}
+                className={this.state.color2 === index ? "kc_active" : ""}
+              >
+                {item.name}
+                <div className="kc_main_box2_contain_li">
+                  <div className="kc_main_box2_contain_li_ul">
+                    {item.sub_disciplines.map((item1, index2) => (
+                      <div
+                        className="kc_main_box2_contain_li_ul_li"
+                        style={{
+                          color: this.state.color === item1.id ? "#4cacff" : "",
+                        }}
+                        key={item1.id}
+                        onClick={(e) =>
+                          this.handleclick(
+                            e,
+                            item.id,
+                            item1.id,
+                            item1.id,
+                            index
+                          )
+                        }
+                      >
+                        {item1.name}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    );
+  }
+}

src/pages/shijiankecheng/path1/box4.js

@@ -0,0 +1,290 @@
+import React, { Component } from "react";
+import Box2 from "./box2";
+import { NavLink } from "react-router-dom";
+
+export default class Box4 extends Component {
+  constructor() {
+    super();
+    this.state = {
+      map: [],
+      current: 1,
+      button: "new",
+      color: 0,
+      id1: "",
+      id2: "",
+    };
+    fetch(
+      "https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
+        this.state.button +
+        "&page=" +
+        1 +
+        "&limit=16&keyword=&discipline_id=&sub_discipline_id="
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.subjects);
+        this.setState({
+          map: data.subjects,
+        });
+      });
+  }
+  render() {
+    return (
+      <div style={{ background: "#f8f8f8" }}>
+        <Box2
+          event={this.hadnleClick_box2}
+          eventall={this.handleClick_box2_all}
+          eventbox={this.hadnleClick_box2_part}
+        ></Box2>
+        <div className="kc_main_box3">
+          <div
+            className={
+              this.state.color === 0 ? "kc_main_box3_box1" : "kc_main_box3_box2"
+            }
+            onClick={this.handleClick_zuixin}
+          >
+            最新
+          </div>
+          <div
+            className={
+              this.state.color === 1 ? "kc_main_box3_box1" : "kc_main_box3_box2"
+            }
+            onClick={this.handleClick_zuire}
+          >
+            最热
+          </div>
+        </div>
+        <div className="kc_main_box4">
+          {this.state.map.map((item, index) => (
+            <NavLink
+              to={"/shijiankecheng/path2/" + item.identifier}
+              key={item.id}
+              className="kc_main_box4_box"
+              style={{ color: "black", marginRight: index % 4 == 3 ? "0" : "" }}
+            >
+              <div className="kc_main_box4_box_shang">
+                <img
+                  src={"https://testali-cdn.educoder.net/" + item.image_url}
+                ></img>
+              </div>
+              <div className="kc_main_box4_box_xia">
+                <div className="kc_main_box4_box_xia_box1">{item.name}</div>
+                <div className="kc_main_box4_box_xia_box2">
+                  <div className="kc_main_box4_box_xia_box2_box">
+                    {item.stages_count}
+                  </div>
+                  <div className="kc_main_box4_box_xia_box2_box">
+                    {item.members_count}
+                  </div>
+                  <div></div>
+                </div>
+              </div>
+            </NavLink>
+          ))}
+        </div>
+        {
+          (console.log("active"),
+          this.state.map.length === 0 ? console.log("y") : "")
+        }
+        <div className="kc_main_box5">
+          <button
+            onClick={() => this.handleClick_shang(this.state.current)}
+            disabled={this.state.current === 1 ? "disabled" : ""}
+            className={
+              this.state.current === 1 ? "button_color_no" : "button_color_yes"
+            }
+          >
+            上一页
+          </button>
+          <button
+            style={{ marginLeft: "8px" }}
+            onClick={() => this.handleClick_xia(this.state.current)}
+            disabled={this.state.map.length < 16 ? "disabled" : ""}
+            className={
+              this.state.map.length < 16
+                ? "button_color_no"
+                : "button_color_yes"
+            }
+          >
+            下一页
+          </button>
+        </div>
+      </div>
+    );
+  }
+  hadnleClick_box2_part = (disciplines_id) => {
+    this.setState({
+      map: [],
+      id1: disciplines_id,
+      current: 1,
+    });
+    var b = this.state.button;
+    fetch(
+      "https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
+        b +
+        "&page=" +
+        1 +
+        "&limit=16&keyword=&discipline_id=" +
+        disciplines_id +
+        "&sub_discipline_id="
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        this.setState({
+          map: data.subjects,
+        });
+      });
+  };
+  hadnleClick_box2 = (disciplines_id, sub_disciplines_id) => {
+    this.setState({
+      map: [],
+      id1: disciplines_id,
+      id2: sub_disciplines_id,
+      current: 1,
+    });
+    var b = this.state.button;
+    fetch(
+      "https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
+        b +
+        "&page=" +
+        1 +
+        "&limit=16&keyword=&discipline_id=" +
+        disciplines_id +
+        "&sub_discipline_id=" +
+        sub_disciplines_id
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        this.setState({
+          map: data.subjects,
+        });
+      });
+  };
+  handleClick_zuixin = () => {
+    this.setState({
+      color: 0,
+      button: "new",
+      map: [],
+    });
+    var v = this.state.current;
+    var b = "new";
+    var id1 = this.state.id1;
+    var id2 = this.state.id2;
+    fetch(
+      "https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
+        b +
+        "&page=" +
+        v +
+        "&limit=16&keyword=&discipline_id=" +
+        id1 +
+        "&sub_discipline_id=" +
+        id2
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        this.setState({
+          map: data.subjects,
+        });
+      });
+  };
+  handleClick_zuire = () => {
+    this.setState({
+      color: 1,
+      button: "",
+      map: [],
+    });
+    var v = this.state.current;
+    var b = "";
+    var id1 = this.state.id1;
+    var id2 = this.state.id2;
+    fetch(
+      "https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
+        b +
+        "&page=" +
+        v +
+        "&limit=16&keyword=&discipline_id=" +
+        id1 +
+        "&sub_discipline_id=" +
+        id2
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        this.setState({
+          map: data.subjects,
+        });
+      });
+  };
+  handleClick_xia(v) {
+    this.setState({
+      current: this.state.current + 1,
+      map: [],
+    });
+
+    var b = this.state.button;
+    var id1 = this.state.id1;
+    var id2 = this.state.id2;
+    fetch(
+      "https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
+        b +
+        "&page=" +
+        (v + 1) +
+        "&limit=16&keyword=&discipline_id=" +
+        id1 +
+        "&sub_discipline_id=" +
+        id2
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        this.setState({
+          map: data.subjects,
+        });
+      });
+  }
+  handleClick_shang(v) {
+    this.setState({
+      current: this.state.current - 1,
+      map: [],
+    });
+    var b = this.state.button;
+    var id1 = this.state.id1;
+    var id2 = this.state.id2;
+    fetch(
+      "https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
+        b +
+        "&page=" +
+        (v - 1) +
+        "&limit=16&keyword=&discipline_id=" +
+        id1 +
+        "&sub_discipline_id=" +
+        id2
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        this.setState({
+          map: data.subjects,
+        });
+      });
+  }
+  handleClick_box2_all = () => {
+    this.setState({
+      map: [],
+      id1: "",
+      id2: "",
+      current: 1,
+    });
+    var b = this.state.button;
+    fetch(
+      "https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
+        b +
+        "&page=" +
+        1 +
+        "&limit=16&keyword=&discipline_id=&sub_discipline_id="
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        this.setState({
+          map: data.subjects,
+        });
+      });
+  };
+}

src/pages/shijiankecheng/path2/kecheng.js

@@ -0,0 +1,72 @@
+import React, { Component } from "react";
+import Quanbu from "./kecheng/quanbu";
+import Shijianxiangmu from "./kecheng/shijianxiangmu";
+import Shipingxiangmu from "./kecheng/shipingxiangmu";
+import Jiaoxuekejian from "./kecheng/jiaoxuekejian";
+import Taolun from "./kecheng/taolun";
+
+export default class Kecheng extends Component {
+  state = {
+    list: [
+      {
+        id: 0,
+        name: "全部",
+      },
+      {
+        id: 1,
+        name: "实践项目",
+      },
+      {
+        id: 2,
+        name: "视频项目",
+      },
+      {
+        id: 3,
+        name: "教学课件",
+      },
+      {
+        id: 4,
+        name: "讨论",
+      },
+    ],
+    current: 0,
+  };
+
+  handleClick(value) {
+    this.setState({
+      current: value,
+    });
+  }
+  render() {
+    return (
+      <div className="left_three">
+        <div className="left_three_box">
+          {this.state.list.map((item, index) => (
+            <div
+              key={item.id}
+              className={
+                this.state.current === index
+                  ? "left_three_box_box_active"
+                  : "left_three_box_box"
+              }
+              onClick={() => this.handleClick(index)}
+            >
+              {item.name}
+            </div>
+          ))}
+        </div>
+        {this.state.current === 0 && <Quanbu id={this.props.id}></Quanbu>}
+        {this.state.current === 1 && (
+          <Shijianxiangmu id={this.props.id}></Shijianxiangmu>
+        )}
+        {this.state.current === 2 && (
+          <Shipingxiangmu id={this.props.id}></Shipingxiangmu>
+        )}
+        {this.state.current === 3 && (
+          <Jiaoxuekejian id={this.props.id}></Jiaoxuekejian>
+        )}
+        {this.state.current === 4 && <Taolun id={this.props.id}></Taolun>}
+      </div>
+    );
+  }
+}

src/pages/shijiankecheng/path2/kecheng/jiaoxuekejian.js

@@ -0,0 +1,7 @@
+import React, { Component } from "react";
+
+export default class Jiaoxuekejian extends Component {
+  render() {
+    return <div></div>;
+  }
+}

src/pages/shijiankecheng/path2/kecheng/quanbu.js

@@ -0,0 +1,39 @@
+import React, { Component } from "react";
+
+export default class Quanbu extends Component {
+  state = {
+    list: [],
+  };
+  componentDidMount() {
+    fetch(
+      "https://test-data.educoder.net/api/stages.json?subject_id=" +
+        this.props.id
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.stages);
+        this.setState({
+          list: data.stages,
+        });
+      });
+  }
+  render() {
+    return (
+      <div>
+        {this.state.list.map((item) => (
+          <div key={item.stage_id} className="zhangjie">
+            <div className="zhangjie_wenzi">
+              <div className="zhangjie_wenzi_box">{item.stage_name}</div>
+              <div className="zhangjie_wenzi_box">{item.stage_description}</div>
+              {item.items.map((item2) => (
+                <div className="zhangjie_wenzi_box" key={item2.id}>
+                  {item2.name}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+}

src/pages/shijiankecheng/path2/kecheng/shijianxiangmu.js

@@ -0,0 +1,7 @@
+import React, { Component } from "react";
+
+export default class Shijianxiangmu extends Component {
+  render() {
+    return <div></div>;
+  }
+}

src/pages/shijiankecheng/path2/kecheng/shipingxiangmu.js

@@ -0,0 +1,7 @@
+import React, { Component } from "react";
+
+export default class Shipingxiangmu extends Component {
+  render() {
+    return <div></div>;
+  }
+}

src/pages/shijiankecheng/path2/kecheng/taolun.js

@@ -0,0 +1,7 @@
+import React, { Component } from "react";
+
+export default class Taolun extends Component {
+  render() {
+    return <div></div>;
+  }
+}

src/pages/shijiankecheng/path2/paihang.js

@@ -0,0 +1,61 @@
+import React, { Component } from "react";
+import Tongguan from "./paihangbang/tongguan";
+import Shipingxuexi from "./paihangbang/shipingxuexi";
+import Xiazaiziyuan from "./paihangbang/xiazaiziyuan";
+import Hudongtaolun from "./paihangbang/hudongtaolun";
+
+export default class Paihang extends Component {
+  state = {
+    list: [
+      {
+        id: 0,
+        name: "通关榜",
+      },
+      {
+        id: 1,
+        name: "视频学习榜",
+      },
+      {
+        id: 2,
+        name: "下载资源榜",
+      },
+      {
+        id: 3,
+        name: "互动讨论榜",
+      },
+    ],
+    current: 0,
+  };
+  handleClick(index) {
+    this.setState({
+      current: index,
+    });
+  }
+  render() {
+    return (
+      <div className="paihang">
+        <div className="paihang_shang">
+          {this.state.list.map((item, index) => (
+            <li
+              key={item.id}
+              onClick={() => this.handleClick(index)}
+              className={this.state.current === index ? "li_active" : ""}
+            >
+              {item.name}
+            </li>
+          ))}
+        </div>
+        {this.state.current === 0 && <Tongguan id={this.props.id}></Tongguan>}
+        {this.state.current === 1 && (
+          <Shipingxuexi id={this.props.id}></Shipingxuexi>
+        )}
+        {this.state.current === 2 && (
+          <Xiazaiziyuan id={this.props.id}></Xiazaiziyuan>
+        )}
+        {this.state.current === 3 && (
+          <Hudongtaolun id={this.props.id}></Hudongtaolun>
+        )}
+      </div>
+    );
+  }
+}

src/pages/shijiankecheng/path2/paihangbang/hudongtaolun.js

@@ -0,0 +1,106 @@
+import React, { Component } from "react";
+
+export default class Xiazaiziyuan extends Component {
+  state = {
+    number: 1,
+    list: [],
+  };
+
+  componentDidMount() {
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_discusses.json?page=" +
+        this.state.number
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  render() {
+    return (
+      <div>
+        <div className="paihang_style">
+          <div style={{ flex: " 1 1 0%" }}>排名</div>
+          <div style={{ flex: " 1 1 0%" }}>姓名</div>
+          <div style={{ flex: " 1 1 0%" }}>发帖数</div>
+        </div>
+        {this.state.list.map((item) => (
+          <div className="paihang_style" key={item.user_id}>
+            <div style={{ flex: " 1 1 0%" }}>{item.rank}</div>
+            <div style={{ flex: " 1 1 0%" }}>{item.user_real_name}</div>
+            <div style={{ flex: " 1 1 0%" }}> {item.num}</div>
+          </div>
+        ))}
+        <div className="tongguan_xia">
+          <button
+            onClick={() => {
+              this.handleClick_shang(this.state.number);
+            }}
+            className={
+              this.state.number === 1 ? "button_color_no" : "button_color_yes"
+            }
+            disabled={this.state.number === 1 ? "disabled" : ""}
+          >
+            上一页
+          </button>
+          <button
+            onClick={() => {
+              this.handleClick_xia(this.state.number);
+            }}
+            className={
+              this.state.list.length < 10
+                ? "button_color_no"
+                : "button_color_yes"
+            }
+            disabled={this.state.list.length < 10 ? "disabled" : ""}
+          >
+            下一页
+          </button>
+        </div>
+      </div>
+    );
+  }
+  handleClick_shang(number) {
+    this.setState({
+      number: this.state.number - 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_discusses.json?page=" +
+        (number - 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  handleClick_xia(number) {
+    this.setState({
+      number: this.state.number + 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_discusses.json?page=" +
+        (number + 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+}

src/pages/shijiankecheng/path2/paihangbang/shipingxuexi.js

@@ -0,0 +1,105 @@
+import React, { Component } from "react";
+
+export default class Shipingxuexi extends Component {
+  state = {
+    number: 1,
+    list: [],
+  };
+  componentDidMount() {
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_videos.json?page=" +
+        this.state.number
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  render() {
+    return (
+      <div>
+        <div className="paihang_style">
+          <div style={{ flex: " 1 1 0%" }}>排名</div>
+          <div style={{ flex: " 1 1 0%" }}>姓名</div>
+          <div style={{ flex: " 1 1 0%" }}> 累计学习时长</div>
+        </div>
+        {this.state.list.map((item) => (
+          <div className="paihang_style" key={item.user_id}>
+            <div style={{ flex: " 1 1 0%" }}>{item.rank}</div>
+            <div style={{ flex: " 1 1 0%" }}>{item.user_real_name}</div>
+            <div style={{ flex: " 1 1 0%" }}> {item.num}</div>
+          </div>
+        ))}
+        <div className="tongguan_xia">
+          <button
+            onClick={() => {
+              this.handleClick_shang(this.state.number);
+            }}
+            className={
+              this.state.number === 1 ? "button_color_no" : "button_color_yes"
+            }
+            disabled={this.state.number === 1 ? "disabled" : ""}
+          >
+            上一页
+          </button>
+          <button
+            onClick={() => {
+              this.handleClick_xia(this.state.number);
+            }}
+            className={
+              this.state.list.length < 10
+                ? "button_color_no"
+                : "button_color_yes"
+            }
+            disabled={this.state.list.length < 10 ? "disabled" : ""}
+          >
+            下一页
+          </button>
+        </div>
+      </div>
+    );
+  }
+  handleClick_shang(number) {
+    this.setState({
+      number: this.state.number - 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_videos.json?page=" +
+        (number - 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  handleClick_xia(number) {
+    this.setState({
+      number: this.state.number + 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_videos.json?page=" +
+        (number + 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+}

src/pages/shijiankecheng/path2/paihangbang/tongguan.js

@@ -0,0 +1,105 @@
+import React, { Component } from "react";
+
+export default class Tongguan extends Component {
+  state = {
+    number: 1,
+    list: [],
+  };
+  componentDidMount() {
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_shixuns_passed.json?page=" +
+        this.state.number
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  render() {
+    return (
+      <div>
+        <div className="paihang_style">
+          <div style={{ flex: " 1 1 0%" }}>排名</div>
+          <div style={{ flex: " 1 1 0%" }}>姓名</div>
+          <div style={{ flex: " 1 1 0%" }}> 通关关卡数</div>
+        </div>
+        {this.state.list.map((item) => (
+          <div className="paihang_style" key={item.user_id}>
+            <div style={{ flex: " 1 1 0%" }}>{item.rank}</div>
+            <div style={{ flex: " 1 1 0%" }}>{item.user_real_name}</div>
+            <div style={{ flex: " 1 1 0%" }}> {item.num}</div>
+          </div>
+        ))}
+        <div className="tongguan_xia">
+          <button
+            onClick={() => {
+              this.handleClick_shang(this.state.number);
+            }}
+            className={
+              this.state.number === 1 ? "button_color_no" : "button_color_yes"
+            }
+            disabled={this.state.number === 1 ? "disabled" : ""}
+          >
+            上一页
+          </button>
+          <button
+            onClick={() => {
+              this.handleClick_xia(this.state.number);
+            }}
+            className={
+              this.state.list.length < 10
+                ? "button_color_no"
+                : "button_color_yes"
+            }
+            disabled={this.state.list.length < 10 ? "disabled" : ""}
+          >
+            下一页
+          </button>
+        </div>
+      </div>
+    );
+  }
+  handleClick_shang(number) {
+    this.setState({
+      number: this.state.number - 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_shixuns_passed.json?page=" +
+        (number - 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  handleClick_xia(number) {
+    this.setState({
+      number: this.state.number + 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_shixuns_passed.json?page=" +
+        (number + 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+}

src/pages/shijiankecheng/path2/paihangbang/xiazaiziyuan.js

@@ -0,0 +1,105 @@
+import React, { Component } from "react";
+
+export default class Xiazaiziyuan extends Component {
+  state = {
+    number: 1,
+    list: [],
+  };
+  componentDidMount() {
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_pdf_attachments.json?page=" +
+        this.state.number
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  render() {
+    return (
+      <div>
+        <div className="paihang_style">
+          <div style={{ flex: " 1 1 0%" }}>排名</div>
+          <div style={{ flex: " 1 1 0%" }}>姓名</div>
+          <div style={{ flex: " 1 1 0%" }}> 下载资源次数</div>
+        </div>
+        {this.state.list.map((item) => (
+          <div className="paihang_style" key={item.user_id}>
+            <div style={{ flex: " 1 1 0%" }}>{item.rank}</div>
+            <div style={{ flex: " 1 1 0%" }}>{item.user_real_name}</div>
+            <div style={{ flex: " 1 1 0%" }}> {item.num}</div>
+          </div>
+        ))}
+        <div className="tongguan_xia">
+          <button
+            onClick={() => {
+              this.handleClick_shang(this.state.number);
+            }}
+            className={
+              this.state.number === 1 ? "button_color_no" : "button_color_yes"
+            }
+            disabled={this.state.number === 1 ? "disabled" : ""}
+          >
+            上一页
+          </button>
+          <button
+            onClick={() => {
+              this.handleClick_xia(this.state.number);
+            }}
+            className={
+              this.state.list.length < 10
+                ? "button_color_no"
+                : "button_color_yes"
+            }
+            disabled={this.state.list.length < 10 ? "disabled" : ""}
+          >
+            下一页
+          </button>
+        </div>
+      </div>
+    );
+  }
+  handleClick_shang(number) {
+    this.setState({
+      number: this.state.number - 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_pdf_attachments.json?page=" +
+        (number - 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  handleClick_xia(number) {
+    this.setState({
+      number: this.state.number + 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_pdf_attachments.json?page=" +
+        (number + 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+}

src/pages/shijiankecheng/path2/path.js

@@ -0,0 +1,145 @@
+import React, { Component } from "react";
+import Zhangjie from "./zhangjie";
+import marked from "marked";
+
+const bgImg = {
+  bg: {
+    backgroundImage: 'url("")',
+  },
+};
+export default class Path extends Component {
+  state = {
+    list: [],
+    list2: [],
+    url: "",
+  };
+  componentDidMount() {
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        ".json?identifier=" +
+        this.props.id
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data);
+        this.setState({
+          list: data,
+        });
+      });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        ".json?identifier=" +
+        this.props.id
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.attachments);
+        this.setState({
+          list2: data.attachments,
+        });
+        if (typeof this.state.list2[0]?.url === "undefined") {
+          this.setState({
+            url: "https://test.educoder.net/static/banner.4c45dd73.png",
+          });
+        } else {
+          this.setState({
+            url: "https://test-data.educoder.net" + this.state.list2[0].url,
+          });
+        }
+
+        console.log(this.state.url);
+      });
+  }
+  // style={{backgroundImage:this.state.list2!=[]?`url("https://test-data.educoder.net"${this.state.list2[0].url})`:''}}
+  render() {
+    return (
+      <div className="path">
+        <div
+          className="path_box"
+          style={{
+            backgroundImage: `url(${this.state.url})`,
+            backgroundSize: "100%",
+          }}
+        >
+          <div className="path_top">
+            <div className="path_top_box">{this.state.list.name}</div>
+            <div className="path_top_box2">
+              <div className="path_top_box2_box">
+                <span>章节</span>
+                <p>{this.state.list.stages_count}</p>
+              </div>
+              <div className="path_top_box2_box">
+                <span>实训</span>
+                <p>{this.state.list.shixuns_count}</p>
+              </div>
+              <div className="path_top_box2_box">
+                <span>选择题关卡</span>
+                <p>{this.state.list.challenge_choose_count}</p>
+              </div>
+              <div className="path_top_box2_box">
+                <span>实践关卡</span>
+                <p>{this.state.list.challenges_count}</p>
+              </div>
+              <div className="path_top_box2_box">
+                <span>视频</span>
+                <p>{this.state.list.videos_count}</p>
+              </div>
+              <div className="path_top_box2_box">
+                <span>参与人数</span>
+                <p>{this.state.list.member_count}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="path_body" style={{ display: "flex" }}>
+          <div className="left">
+            <div className="left_one">
+              <div className="left_one_box1">
+                <img
+                  style={{ marginRight: "10px" }}
+                  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAO9JREFUOBFj3H//P8ePj//a/jMyRDH8/y/uZcDCyAAEoZP//QfRxAHG54yMDIv+izHUsYANY/hfyECCdkxL/kv+/89QzviKkYGFgZEhGpdhEvwMDJNiwQ6Gm5G3+D/Di49wLgoDaGgc0///QIdSDfyXZKKaWVCDiDLwxUeQN4kLZBZ8LgSGCcP2i/8Zlh6HqIq2/A9MCPh0MAAjBQ94+YmBYf5hhAJkNkIUlUWUl1G14OeNGog/fIiRHQ1DYkIJvxomRgbG5/iVkCLL+BxoIMMiUrTgUwsqtVlkWZnqHv/+Bypj44BZXxKfBtxyiCoAAHADSWb7p5YAAAAAAElFTkSuQmCC"
+                ></img>
+                课程介绍
+              </div>
+
+              <div className="left_one_box2">{this.state.list.description}</div>
+            </div>
+            <Zhangjie id={this.props.id}></Zhangjie>
+          </div>
+          <div className="right">
+            <div className="right_top">
+              <div className="right_top_box1">
+                <img
+                  style={{ marginRight: "10px" }}
+                  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAAv9JREFUSA2dVV1IVEEU/s7sqkuiUAahgREkQVjmS0FEBRWELz1Yj5ZSJBEaVm8RBOFbQSZIQUU9hFT4EqRuBdIP0oOia5lIZBRZoBWYy+a6O3M6s3DxXrurez1wOeee+b7zzZ05dwYIaD0x3dk9rNsD0hAOSgBjDwHTQXmBhZgwB7A8wcwjFI1xYYiw7sA2mshWJqRUHSkkso3b/LMPXJHOw9eaCko6OOUE1muY1pQx490xPuLOO3HZLV7b8BJz9X1QNnbybt8zok/plBlHwlxw5z1CIajbIMwQm87no1xugZeZVVkbN5S28YD5i2mTxmDmkdjm1t/geoux2O5hrpY9vCnhJOWrBzbnmOyr12T5Kg3M8UixunSyF8WJeXQxY7cX5X0jwmvZu9rH+5CeZXMxn1TH4uX/T8gpsfkOF83E0S8zrHRyS3rCu5Iwdo2eobgfzrN0bsCfWVzLWcQSGVt/p4WTxXy/aEM7b0wafBRyKAvPP03QBQoVX5ro82JA+MUYl+h5bKIwkge3IEZELCK1gUVsZZlYhgtcZWmQ6Ai2y5fk6VUYU6mkeaVZv02n9FDviD5m8TJYbf1KzOFGY6bFsB60tSmhn4SJ1HnA7JTZJCMR9TRTnFGyEhE315B6KHUjIhxWpPrCh6qoVwD2WTDCLxFemVmuWE0VfRPX6hTx7TrRGHIAQX02rq+QdE6XbJQOKmI5Ga4P0VfIticx7vrgl0xZjl9rW5KvkB1Yk4dzMsP3Ns7JBFtcBGksf8sqZI+Swnzsl3PsjT91IWsxFjt+gmYXst4oq5CFfTpNU43N2BtSaJBig16q/G+Ss2MWY7GLx93v0ua5W+YOSiFzfUAutu+N9DNXdk5C5R28Op1GnRQtcBc2QFwV4L4ILnnjWo7nKncXccc6jcPGoM2dc2Kex4TEUec9m8/pi44+4lD/FHbInxVxF9KM+I+zGLAHsTvvF+ck5BBLr3OL3KRNcjyxNMGVyWa654wt53NaOqeIzColcVL+L1nJTOwMLev/AaJkF76u7DFoAAAAAElFTkSuQmCC"
+                ></img>
+                课程须知
+              </div>
+              <div className="right_top_box2">
+                {this.state.list.learning_notes}
+              </div>
+            </div>
+            <div className="right_top">
+              <div
+                style={{
+                  fontSsize: "16px",
+                  display: "flex",
+                  alignItems: "center",
+                }}
+              >
+                <img
+                  style={{ marginRight: "10px" }}
+                  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAWCAYAAADTlvzyAAAAAXNSR0IArs4c6QAAA+JJREFUSA2dVltslEUUPmf+f7cXt+oKRKzVtCoICbARtVEJIA+mQiMaI00UXuCBRCT2AZPGaCJvWjUmQowPSBpN+kK8RKVNCIZLorIEVEqFmABVgxsuspi2wHZ3Z+f4za7/9r9sSe0k7Zz55pzzzZzL7M80zdHaJ7fnx+g9EeokptkklGGm/geX0PZDq1hP0w1MpzHm7pA5LLQfZKka6t/MaqZ1p7q4UGMvArkRBMC+IWnTpvC4EMeEzI+bD9NWoZpk1nzt1Yu0cXB44js27qMlY+pE0fAzqfjPtXxHCPcOFZdr0tuIlWOvfyXnnBWmTQjh1MNQtynSBVaynhFnROOFgZP6y84lbl/YSPmBPackAeBVOHc8vP8MuVgnvHWtGQdacO66ygT2jDw/eKLwUADDIkDYmNePIU/1fqWR626V3I8HZMT+eBYHCw3AHSEoSEjKzA0rzLuNcmGs1np+MnY5jDNJcxgL3NBRztWwwsuLdAy1PBbGQ+uRpclCJOwiEvEXINTaBPMAr66hFSieSPL9hErRVyLc7sfKsnL+CmMBwtzZ2K9EcsmvBLL2jpZiP4rvhh+vyrj9ylbqU8RPVzFPKBX3e6I3Bwi7uriE8O3yNu2MbuCuB/hZiBuwV/Lv4RATsxto/YZ79eZwsQnJt51LG/7061s5QGiBzlT8qGL+3MresC/MruV6HP2108PsjHZ4+532UhzifX4cUTl9PBX7xI95coTQbhjhBk/Bzqi20fGSm4UwJ4ALzUPLHqVQcaBY6lb+QfYgkYHDTI69JwsPs+GXgMyvoHLpWsF8/dqxullaUw9uumBSuyIhrMcScerdsayUE0OrEcrW/2z/IaW+uJw9v2/jqrYJz65MODh0o0UoZl+YhXYDoctlS/xpzw/OQuSwG0QtnsFUM4h/g7N3P1qhf4+zbIKXZFlXZIwV716Tih2wax4YlkeopF+HXAmByLm3foqlM9fofZDdXTb6H/9AfLolSVu2L9YdSMFizxSHObQ65X7AAycKH4O3fAPE/sK2tDo8mnc+g2LN/HoObjbb6r2jXq/pbZcX8Zjf5emyMT3WaeXqEFjR7rG88wbEGZNZ57ZFsjn3TXbUgF1XB6ukwo/JLziRwUlyrxyI5RHGch6rSjMXnjyYkcn3FalicjOVoknLrbq+cM+W7+MJVGN65hw+S/RSoo4WfbiMGuONdOap+3nU7pYJfWrUvFOeM4a2olKfwG0D/ejXm0qGQ/upkcaj0HuxmwfDehFCT2HdHnGO/E1tukhJx6Em9FgTctOEz4cmtM8t+BOkwn485TCPk6Er+Nk+n7yTRm72ffMvtr1U/uTpxS8AAAAASUVORK5CYII="
+                ></img>
+                教学团队
+              </div>
+            </div>
+            <div className="right_buttom"></div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/pages/shijiankecheng/path2/shengqing.js

@@ -0,0 +1,7 @@
+import React, { Component } from "react";
+
+export default class Shengqing extends Component {
+  render() {
+    return <div></div>;
+  }
+}

src/pages/shijiankecheng/path2/zhangjie.js

@@ -0,0 +1,54 @@
+import React, { Component } from "react";
+import "../shijiankecheng.css";
+import Kecheng from "./kecheng";
+import Paihang from "./paihang";
+import Shengqing from "./shengqing";
+
+export default class Zhangjie extends Component {
+  state = {
+    list: [
+      {
+        id: 0,
+        name: "课程章节",
+      },
+      {
+        id: 1,
+        name: "排行榜",
+      },
+      {
+        id: 2,
+        name: "证书申请",
+      },
+    ],
+    current: 0,
+  };
+  handleClick(index) {
+    this.setState({
+      current: index,
+    });
+  }
+  render() {
+    return (
+      <div>
+        <div className="left_two">
+          {this.state.list.map((item, index) => (
+            <div
+              className={
+                this.state.current === index
+                  ? "left_two_box_active"
+                  : "left_two_box"
+              }
+              key={item.id}
+              onClick={() => this.handleClick(index)}
+            >
+              {item.name}
+            </div>
+          ))}
+        </div>
+        {this.state.current === 0 && <Kecheng id={this.props.id}></Kecheng>}
+        {this.state.current === 1 && <Paihang id={this.props.id}></Paihang>}
+        {this.state.current === 2 && <Shengqing id={this.props.id}></Shengqing>}
+      </div>
+    );
+  }
+}

src/pages/shijiankecheng/shijiankecheng.css

@@ -0,0 +1,510 @@
+*{
+    
+}
+.kc_main{
+    width: 100%;
+    height: auto;
+    min-width: 1200px;
+    min-height: 80vh;
+    float: left;
+    background: #fafafa;
+}
+.kc_main_box1{
+    height: 160px;
+    position: relative;
+    overflow: hidden;
+}
+.kc_main_box1 img{
+    height: 100%;
+    width: 101%;
+    position: absolute;
+    z-index: 1;
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+}
+.kc_main_box1_main{
+    position: absolute;
+    z-index: 2;
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+    width: 1200px;
+    display: flex;
+    justify-content: space-between;
+}
+.kc_main_box1_main_box1{
+    margin-top: 40px;
+    display: flex;
+    align-items: center;
+}
+.kc_main_box1_main_box1 span:first-child{
+    width: 140px;
+    height: 30px;
+    font-size: 30px;
+    font-weight: 600;
+    color: #fff;
+    line-height: 30px;
+    letter-spacing: 4px;
+}
+.kc_main_box1_main_box1 span:last-child{
+    height: 16px;
+    font-size: 16px;
+    color: #fff;
+    line-height: 16px;
+    letter-spacing: 4px;
+    margin-left: 16px;
+}
+.kc_main_box1_main_box2{
+    display: inline-block;
+    width: 104px;
+    height: 30px;
+    line-height: 28px;
+    text-align: center;
+    border-radius: 4px;
+    border: 1px solid #666;
+    margin-right: 30px;
+    margin-top: 30px;
+    color: #fff;
+    cursor: pointer;
+}
+.kc_main_box1_main_box2 i{
+    font-size: 14px;
+    display: inline-block;
+    margin-right: 10px;
+    transform: translateY(1px);
+}
+.kc_main_box1_main_box3{
+    width: 450px;
+    margin-top: 40px;
+    display: inline-block;
+    text-align: start;
+    vertical-align: top;
+}
+.kc_main_box1_main_box3 span{
+    border-radius: 4px;
+    overflow: hidden;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: rgba(0,0,0,.85);
+    font-size: 12px;
+    font-variant: tabular-nums;
+    line-height: 1.66667;
+    list-style: none;
+    position: relative;
+    display: table;
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+}
+.kc_main_box1_main_box3 span input{
+    height: 46px;
+    padding-left: 14px;
+    float: left;
+    width: 100%;
+    margin-bottom: 0;
+    text-align: inherit;
+}
+.kc_main_box1_main_box3_box{
+    width: 52px;
+    height: 46px;
+    right: 0;
+    position: absolute;
+    
+}
+.kc_main_box1_main_box3_box button{
+    width: 100%;
+    height: 100%;
+    list-style: none;
+    color: #fff;
+    background: #1890ff;
+    border: 0;
+    font-size: 14px;
+}
+.kc_main_box2{
+    background: #fff;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,.04);
+}
+.kc_main_box2_contain{
+    width: 1200px;
+    font-size: 14px;
+    margin-left: auto;
+    margin-right: auto;
+}
+.kc_main_box2_contain ul{
+    padding: 30px 0 0;
+    position: relative;
+    z-index: 2;
+    margin-bottom: 30px;
+}
+.kc_main_box2_contain ul li{
+    display: inline-block;
+    position: relative;
+    margin-right: 10px;
+    margin-bottom: 12px;
+    font-size: 15px;
+    padding: 8px 22px;
+    border-radius: 40px;
+    cursor: pointer;
+    font-weight: 400;
+}
+.kc_main_box2_contain ul li:hover{
+    background: #ddecf9 !important;
+    color: #4cacff !important;
+}
+.kc_active{
+    background: #ddecf9 !important;
+    color: #4cacff !important;
+}
+.kc_main_box2_contain_li{
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 30px;
+    width: 500px;
+    padding: 10px;
+    background: #fff;
+    max-height: 400px;
+    overflow: auto;
+    z-index: 8;
+    box-shadow: 0 2px 8px rgba(0,0,0,.15);
+}
+.kc_main_box2_contain_li_ul{
+    padding-left: 0;
+}
+.kc_main_box2_contain_li_ul_li{
+    cursor: pointer;
+    display: inline-block;
+    height: 30px;
+    line-height: 30px;
+    margin-right: 20px;
+    color: #333;
+    font-size: 14px;
+}
+.kc_main_box2_contain ul li:hover .kc_main_box2_contain_li{
+    display: block;
+}
+
+.kc_main_box3{
+    width: 1200px;
+    height: 52px;
+    padding-bottom: 20px;
+    font-size: 14px;
+    margin-left: auto;
+    margin-right: auto;
+}
+.kc_main_box3_box1{
+    padding: 3px 11px;
+    border: 1px;
+    margin-right: 20px;
+    border-radius: 40px;
+    font-size: 14px;
+    float: left;
+    background: #1890ff;
+    color: white;
+}
+.kc_main_box3_box2{
+    padding: 3px 11px;
+    border: 1px;
+    margin-right: 20px;
+    border-radius: 40px;
+    font-size: 14px;
+    float: left;
+    color: #999;
+    background: #eee;
+}
+
+
+
+.kc_main_box4{
+    width: 1200px;
+    font-size: 14px;
+    margin-left: auto;
+    margin-right: auto;
+}
+.kc_main_box4_box:hover{
+    box-shadow: 0 0 12px 10px rgba(0,0,0,.1);
+}
+.kc_main_box4_box:hover .kc_main_box4_box_shang img{
+    transform: scale(1.2);
+}
+.kc_main_box4_box{
+    width: 280px;
+    box-shadow: 0 0 12px rgba(0,0,0,.1);
+    margin-bottom: 35px;
+    display: inline-block;
+    transition: all .5s;
+    border-radius: 8px;
+    overflow: hidden;
+    cursor: pointer;
+    justify-content: space-between;
+    margin-right: 26px;
+}
+.kc_main_box4_box_shang{
+    height: 175px;
+    width: 100%;
+    overflow: hidden;
+}
+.kc_main_box4_box_shang img{
+    width: 100%;
+    border-radius: 8px 8px 0 0;
+    transition: all .5s;
+}
+.kc_main_box4_box_xia{
+    padding-bottom: 11px;
+    padding-top: 31px;
+    padding-left: 15px;
+    padding-right: 15px;
+}
+.kc_main_box4_box_xia_box1{
+    max-width: 248px;
+    overflow: hidden;
+    display: inline-block;
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 4px;
+    text-overflow: ellipsis;
+    white-space: nowrap; 
+}
+.kc_main_box4_box_xia_box2{
+    font-size: 12px;
+}
+.kc_main_box4_box_xia_box2_box{
+    padding: 5px 10px;
+    height: auto;
+    width: auto;
+    float: left;
+}
+.kc_main_box5{
+    text-align: center;
+    margin-bottom: 50px;
+    height: auto;
+}
+.kc_main_box5 button{
+    border-color: #d9d9d9;
+    text-shadow: none;
+    box-shadow: none;
+    border: 1px;
+    padding: 3px 11px;
+    font-size: 14px;
+}
+.button_color_no{
+    
+    cursor:no-drop;
+    color: rgba(0, 0, 0, 0.25);
+    background: #f5f5f5;
+    border-color: #d9d9d9;
+}
+.button_color_yes{
+    color: rgba(0, 0, 0, 0.85);
+    background: #fff;
+    border-color: #d9d9d9;
+}
+.path{
+    height: auto;
+    width: 100%;
+}
+.path_box{
+    height: auto;
+    width: 100%;
+}
+.path_body{
+    width: 1200px;
+    margin: 0 auto;
+}
+.path_top{
+    width: 1200px;
+    margin: 0 auto;
+    padding-top: 35px;
+    height: 225px;
+}
+.path_top_box{
+    font-size: 28px;
+    color: #fff;
+    margin-right: 8px;
+    font-weight: 700;
+}
+.path_top_box2{
+    display: flex;
+    color: #ebebeb;
+    text-align: center;
+    font-size: 14px;
+}
+.path_top_box2_box{
+    margin-right: 30px;
+
+}
+
+.left{
+    width: 66.7%;
+}
+.left_one{
+    padding: 40px 20px;
+    background-color: #fff;
+    width: 100%;
+}
+.left_one_box1{
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: bold;
+}
+.left_one_box2{
+
+}
+.left_two{
+    height: 76px;
+    width: 100%;
+    margin: 0;
+    display: flex;
+}
+.left_two_box{
+    padding: 8px 0;
+    align-items: center;
+    font-size: 16px;
+    margin-right: 50px;
+    line-height: 60px;
+}
+.left_two_box:hover{
+    color: #1890ff;
+}
+.left_two_box_active{
+    position: relative;
+    padding: 8px 0;
+    align-items: center;
+    font-size: 16px;
+    margin-right: 50px;
+    line-height: 60px;
+    color: #1890ff;
+}
+.left_two_box_active::after{
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 1px;
+    background-color: #1890ff;
+}
+.left_three{
+    width: 100%;
+}
+.left_three_box{
+    margin-top: 22px;
+    display: flex;
+    font-size: 14px;
+}
+.left_three_box_box:hover{
+    color: #1890ff;
+}
+.left_three_box_box{
+    margin-right: 14px;
+    background: white;
+    color: #333;
+    border-radius: 15px;
+    cursor: pointer;
+    padding: 1px 6px;
+}
+.left_three_box_box_active{
+    margin-right: 14px;
+    background: #d8ecff;
+    color: #1890ff;
+    border-radius: 15px;
+    cursor: pointer;
+    padding: 1px 6px;
+}
+.zhangjie{
+    margin-top: 20px;
+    padding-top: 30px;
+    padding-bottom: 20px;
+    height: auto;
+    width: 100%;
+}
+.zhangjie_wenzi{
+    width: 100%;
+    padding: 10px 2.5px;
+    font-size: 18px;
+    color: #333;
+    text-align:left;
+    padding-left: 20px;
+}
+.zhangjie_wenzi_box{
+    width: 100%;
+    padding: 10px 2.5px;
+    font-size: 18px;
+    
+}
+.right{
+    width: 400px;
+    top: 180px;
+    margin-left: 15px;
+    
+}
+.right_top{
+    top: -70px;
+    padding: 20px 25px;
+    background-color: #ffffff;
+    margin-bottom: 10px;
+    border-radius: 15px;
+    position: relative;
+    box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.05);
+}
+.right_top_box1{
+    margin-top: 15px;
+    margin-bottom: 30px;
+    display: flex;
+    align-items: center;
+    font-size: 16px
+}
+.right_top_box2{
+    font-size: 16px;
+    line-height: 1.6;
+    font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", "Monaco", monospace, Tahoma, STXihei, "华文细黑", STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, "宋体", Heiti, "黑体", sans-serif;
+}
+.paihang{
+    background: rgb(255, 255, 255);
+    padding: 0px 20px;
+    font-size: 14px;
+}
+.paihang_shang{
+    align-items: center;
+    margin: 0 0 8px 0;
+    list-style: none;
+    height: 39px;
+    border-bottom: 1px solid #f0f0f0;
+    position: relative;
+}
+.paihang_shang li {
+    height: 100%;
+    line-height: 22px;
+    align-items: center;
+    margin-left: 32px;
+    width: auto;
+    float: left;
+    padding: 8px;   
+    cursor: pointer;
+}
+.li_active{
+    color: #1890ff;
+    border-bottom: 1px solid #1890ff;
+}
+.paihang_style{
+    height: 42px;
+    background: rgb(250, 250, 250);
+    display: flex;
+    padding: 0px 5px;
+    align-items: center;
+}
+.tongguan_xia{
+    text-align: center;
+    margin: 20px 0px;
+    width: 100%;
+
+}
+.tongguan_xia button{
+    min-width: 28px;
+    height: 28px;
+    margin-right: 10px;
+}

src/pages/shijiankecheng/shijiankecheng.js

@@ -0,0 +1,21 @@
+import React, { Component } from "react";
+import { Route, Redirect, Switch } from "react-router-dom";
+import Path1 from "./Path1";
+import Path2 from "./Path2";
+
+export default class Shijiankecheng extends Component {
+  render() {
+    return (
+      <div className="kc_main">
+        <Switch>
+          <Route path="/shijiankecheng/path1" component={Path1}></Route>
+          <Route path="/shijiankecheng/path2/:id" component={Path2} />
+          <Redirect
+            from="/shijiankecheng"
+            to="/shijiankecheng/path1"
+          ></Redirect>
+        </Switch>
+      </div>
+    );
+  }
+}

src/pages/shouye/component/tg_dibu/center6.js

@@ -0,0 +1,336 @@
+import React, { Component } from "react";
+
+export default class Center6 extends Component {
+  render() {
+    return (
+      <div className="center6">
+        <div className="center6_main">
+          <div className="center6_main_box">
+            <div className="title">热门课程</div>
+            <a href="" target={"_blank"}>
+              Python入门
+            </a>
+            <a href="" target={"_blank"}>
+              C/C++程序设计
+            </a>
+            <a href="" target={"_blank"}>
+              Java程序设计{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              数据结构
+            </a>
+            <a href="" target={"_blank"}>
+              离散数学
+            </a>
+            <a href="" target={"_blank"}>
+              大学计算机基础
+            </a>
+            <a href="" target={"_blank"}>
+              大学计算
+            </a>
+            <a href="" target={"_blank"}>
+              计算机组成原理
+            </a>
+            <a href="" target={"_blank"}>
+              数字逻辑与电路
+            </a>
+            <a href="" target={"_blank"}>
+              信号与系统{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              操作系统
+            </a>
+            <a href="" target={"_blank"}>
+              计算机网络
+            </a>
+            <a href="" target={"_blank"}>
+              机器人原理与应用
+            </a>
+            <a href="" target={"_blank"}>
+              人工智能
+            </a>
+            <a href="" target={"_blank"}>
+              机器学习
+            </a>
+            <a href="" target={"_blank"}>
+              区块链
+            </a>
+          </div>
+          <div className="center6_main_box">
+            <div className="title">热门案例</div>
+            <a href="" target={"_blank"}>
+              新冠案例
+            </a>
+            <a href="" target={"_blank"}>
+              3D智能无人车{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              人脸识别案例{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              语音识别{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              军用大数据{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              博客系统{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              CPU设计
+            </a>
+            <a href="" target={"_blank"}>
+              Matlab设计{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              汇编设计{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              品高数据库{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              华为MindSpore
+            </a>
+            <a href="" target={"_blank"}>
+              计算机拆装
+            </a>
+            <a href="" target={"_blank"}>
+              Office实战训练
+            </a>
+            <a href="" target={"_blank"}>
+              Git开发训练
+            </a>
+            <a href="" target={"_blank"}>
+              Photoshop实战
+            </a>
+            <a href="" target={"_blank"}>
+              数据中心仿真案例{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              雷达导航仿真案例{" "}
+            </a>
+          </div>
+          <div className="center6_main_box">
+            <div className="title">快捷入口</div>
+            <a href="" target={"_blank"}>
+              一流线上课程案例{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              一流线上线下课程案例{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              一流虚拟仿真项目案例{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              新建课堂{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              {" "}
+              加入示例课堂{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              {" "}
+              浏览实践项目{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              新建实践项目{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              {" "}
+              浏览实践课程{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              新建实践课程{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              创建竞赛{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              参加竞赛{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              教学案例大赛{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              2021开源创新大赛
+            </a>
+          </div>
+          <div className="center6_main_box">
+            <div className="title">企业版</div>
+            <a href="" target={"_blank"}>
+              实践教学一体化平台简介{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              智能化实践案例开发平台{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              智能化考试平台{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              课堂教学管理平台{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              {" "}
+              毕业设计平台{" "}
+            </a>
+          </div>
+          <div className="center6_main_box">
+            <div className="title">企业版</div>
+            <a href="" target={"_blank"}>
+              实践教学一体化平台简介{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              智能化实践案例开发平台{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              智能化考试平台{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              课堂教学管理平台{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              {" "}
+              毕业设计平台{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              大学计算机基础实践教学平台{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              计算机系统能力实践教学平台{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              云计算实践教学平台{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              计算机网络实践教学平台{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              {" "}
+              毕业设计平台{" "}
+            </a>
+          </div>
+          <div className="center6_main_box">
+            <div className="title">官方合作</div>
+            <a href="" target={"_blank"}>
+              中国计算机学会{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              中国软件行业协会{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              绿色计算产业联盟{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              CMOOC联盟{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              {" "}
+              国家示范性软件学院联盟{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              中国开源软件推进联盟{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              信息技术新工科产学研联盟{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              人工智能产业技术创新战略联盟{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              大数据工程创新实践基地{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              {" "}
+              高等教育出版社{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              清华大学出版社{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              人民邮电出版社{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              机械工业出版社{" "}
+            </a>
+            <a href="" target={"_blank"}>
+              {" "}
+              电子工业出版社{" "}
+            </a>
+          </div>
+          <div className="center6_main_box2">
+            <img
+              src="https://ali-cdn.educoder.net/api/attachments/1547373"
+              alt=""
+              width="72px"
+              height="44px"
+            ></img>
+            <p>
+              EduCoder，中文名“头歌”，全称“EduCoder在线实践教学平台”，是国内高校广泛使用的在线实践教学服务平台与创新环境，为高校和企业的实践与创新能力提升赋能。
+            </p>
+            <ul>
+              <li>
+                <img
+                  src="https://ali-cdn.educoder.net/api/attachments/1853815"
+                  alt=""
+                  width="90px"
+                  height="90px"
+                ></img>
+                <span>头歌公众号</span>
+              </li>
+              <li>
+                <img
+                  src="https://ali-cdn.educoder.net/api/attachments/1853713"
+                  alt=""
+                  width="90px"
+                  height="90px"
+                ></img>
+                <span>头歌教师交流社区</span>
+              </li>
+            </ul>
+            <ol>
+              <li>
+                <a href="" target={"_blank"}>
+                  关于我们
+                </a>
+                <a href="" target={"_blank"}>
+                  <img
+                    src="https://ali-cdn.educoder.net/api/attachments/1547376"
+                    alt=""
+                    width="35px"
+                    height="30px"
+                  ></img>
+                </a>
+              </li>
+              <li>
+                <a href="" target={"_blank"}>
+                  加入我们
+                </a>
+                <a href="" target={"_blank"}>
+                  <img
+                    src="https://ali-cdn.educoder.net/api/attachments/1547377"
+                    alt=""
+                    width="52px"
+                    height="30px"
+                  ></img>
+                </a>
+              </li>
+              <li>
+                <a href="" target={"_blank"}>
+                  联系我们
+                </a>
+                <a href="" target={"_blank"}>
+                  <img
+                    src="https://ali-cdn.educoder.net/api/attachments/1547378"
+                    alt=""
+                    width="45px"
+                    height="30px"
+                  ></img>
+                </a>
+              </li>
+            </ol>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/pages/shouye/component/tg_jiaoxuegongju/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/shouye/component/tg_kechengfangxiang/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/shouye/component/tg_shangbiao/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/shouye/component/tg_yemiandonghua/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/shouye/component/tg_yemiandonghua/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/shouye/component/tg_yunxinghuanjing/center2.js

@@ -0,0 +1,73 @@
+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 event={this.videoEvent}></Page1>}
+        {this.state.current === 1 && <Page2 event={this.videoEvent}></Page2>}
+        {this.state.current === 2 && <Page3 event={this.videoEvent}></Page3>}
+        {this.state.current === 3 && <Page4 event={this.videoEvent}></Page4>}
+        {this.state.current === 4 && <Page5 event={this.videoEvent}></Page5>}
+      </div>
+    );
+  }
+  videoEvent = () => {
+    this.setState({
+      current: (this.state.current + 1) % 5,
+    });
+  };
+  handleClick(index) {
+    console.log(index);
+    this.setState({
+      current: index,
+    });
+  }
+}

src/pages/shouye/component/tg_yunxinghuanjing/component/page1.js

@@ -0,0 +1,68 @@
+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"
+            id="video"
+            onLoadStart={() => this.handlevideo()}
+          ></video>
+        </div>
+      </div>
+    );
+  }
+  handlevideo() {
+    var v = document.getElementById("video");
+
+    v.addEventListener("ended", this.handlev.bind(this));
+  }
+  handlev() {
+    this.props.event();
+  }
+}

src/pages/shouye/component/tg_yunxinghuanjing/component/page2.js

@@ -0,0 +1,72 @@
+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"
+            id="video"
+            onLoadStart={() => this.handlevideo()}
+          ></video>
+        </div>
+      </div>
+    );
+  }
+  handlevideo() {
+    var v = document.getElementById("video");
+
+    v.addEventListener("ended", this.handlev.bind(this));
+  }
+  handlev() {
+    this.props.event();
+  }
+}

src/pages/shouye/component/tg_yunxinghuanjing/component/page3.js

@@ -0,0 +1,68 @@
+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"
+            id="video"
+            onLoadStart={() => this.handlevideo()}
+          ></video>
+        </div>
+      </div>
+    );
+  }
+  handlevideo() {
+    var v = document.getElementById("video");
+
+    v.addEventListener("ended", this.handlev.bind(this));
+  }
+  handlev() {
+    this.props.event();
+  }
+}

src/pages/shouye/component/tg_yunxinghuanjing/component/page4.js

@@ -0,0 +1,68 @@
+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"
+            id="video"
+            onLoadStart={() => this.handlevideo()}
+          ></video>
+        </div>
+      </div>
+    );
+  }
+  handlevideo() {
+    var v = document.getElementById("video");
+
+    v.addEventListener("ended", this.handlev.bind(this));
+  }
+  handlev() {
+    this.props.event();
+  }
+}

src/pages/shouye/component/tg_yunxinghuanjing/component/page5.js

@@ -0,0 +1,68 @@
+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"
+            id="video"
+            onLoadStart={() => this.handlevideo()}
+          ></video>
+        </div>
+      </div>
+    );
+  }
+  handlevideo() {
+    var v = document.getElementById("video");
+
+    v.addEventListener("ended", this.handlev.bind(this));
+  }
+  handlev() {
+    this.props.event();
+  }
+}

src/pages/shouye/shouye.js

@@ -0,0 +1,22 @@
+import React, { Component } from "react";
+import Center1 from "./component/tg_yemiandonghua/center1.js";
+import Center2 from "./component/tg_yunxinghuanjing/center2";
+import Center3 from "./component/tg_kechengfangxiang/center3";
+import Center4 from "./component/tg_jiaoxuegongju/center4";
+import Center5 from "./component/tg_shangbiao/center5";
+import Center6 from "./component/tg_dibu/center6";
+
+export default class Shouye extends Component {
+  render() {
+    return (
+      <div>
+        <Center1></Center1>
+        <Center2></Center2>
+        <Center3></Center3>
+        <Center4></Center4>
+        <Center5></Center5>
+        <Center6></Center6>
+      </div>
+    );
+  }
+}