底部

src/pages/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/component/tg_yunxinghuanjing/center2.js

@@ -32,6 +32,7 @@ export default class Center2 extends Component {
     current: 0,
     availTime: 0,
   };
+
   render() {
     return (
       <div className="center2">
@@ -50,14 +51,19 @@ export default class Center2 extends Component {
             </li>
           ))}
         </ul>
-        {this.state.current === 0 && <Page1></Page1>}
-        {this.state.current === 1 && <Page2></Page2>}
-        {this.state.current === 2 && <Page3></Page3>}
-        {this.state.current === 3 && <Page4></Page4>}
-        {this.state.current === 4 && <Page5></Page5>}
+        {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.current + 1) % 5,
+    });
+  };
   handleClick(index) {
     console.log(index);
     this.setState({

src/pages/index.css

@@ -2,6 +2,9 @@
     margin: 0px;
     padding: 0px;
 }
+body{
+    background: #f5f5f5;
+}
 .menu{
     width: 100%;
     height: 64px;
@@ -30,6 +33,18 @@
 .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;
+}
 
 
 
@@ -424,4 +439,83 @@
     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.tsx

@@ -1,12 +1,13 @@
 import styles from "./index.less";
 import { Carousel } from "antd";
 import "./index.css";
-import Caidan from "./component/component1/menu.js";
-import Center1 from "./component/component2/center1.js";
-import Center2 from "./component/component3/center2.js";
-import Center3 from "./component/component4/center3.js";
-import Center4 from "./component/component5/center4.js";
-import Center5 from "./component/component6/center5.js";
+import Caidan from "./component/tg_menu/menu.js";
+import Center1 from "./component/tg_yemiandonghua/center1.js";
+import Center2 from "./component/tg_yunxinghuanjing/center2.js";
+import Center3 from "./component/tg_kechengfangxiang/center3.js";
+import Center4 from "./component/tg_jiaoxuegongju/center4.js";
+import Center5 from "./component/tg_shangbiao/center5.js";
+import Center6 from "./component/tg_dibu/center6.js";
 
 export default function IndexPage() {
   return (
@@ -17,6 +18,7 @@ export default function IndexPage() {
       {<Center3></Center3>}
       {<Center4></Center4>}
       {<Center5></Center5>}
+      {<Center6></Center6>}
     </div>
   );
 }