From 15b931d88418975af5ee9a4df86e4f92a99c06aa Mon Sep 17 00:00:00 2001
From: Jzx201211 <1595536662@qq.com>
Date: Thu, 24 Feb 2022 16:46:51 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=AE=E6=92=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/center1.js | 134 +++++++++++++++++++++++++++++++++++++++++++
 src/pages/index.css  |  85 +++++++++++++++++++++++++++
 src/pages/index.less |  13 +++++
 src/pages/index.tsx  |  20 ++-----
 src/pages/menu.js    |  73 +++++++++++++++++++++++
 5 files changed, 310 insertions(+), 15 deletions(-)
 create mode 100644 src/pages/center1.js
 create mode 100644 src/pages/index.css
 create mode 100644 src/pages/menu.js

diff --git a/src/pages/center1.js b/src/pages/center1.js
new file mode 100644
index 00000000..e01b997a
--- /dev/null
+++ b/src/pages/center1.js
@@ -0,0 +1,134 @@
+import React, { Component } from "react";
+import { Carousel } from "antd";
+import "./index.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">1</h3>
+              </div>
+              <div>
+                <h3 className="center1_picture">2</h3>
+              </div>
+              <div>
+                <h3 className="center1_picture">3</h3>
+              </div>
+              <div>
+                <h3 className="center1_picture">4</h3>
+              </div>
+            </Carousel>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/pages/index.css b/src/pages/index.css
new file mode 100644
index 00000000..6aa0a601
--- /dev/null
+++ b/src/pages/index.css
@@ -0,0 +1,85 @@
+*{
+    margin: 0px;
+    padding: 0px;
+}
+.menu{
+    width: 100%;
+    height: 64px;
+    padding: 0 50px;
+    line-height: 64px;
+    background: #001529;
+    float: left;
+}
+.menu ul{
+    list-style: none;
+    display: flex;
+    color: white;
+}
+.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;
+}
+
+
+.center1{
+    width: 100%;
+    float: left;
+    height: 345px;
+    margin-top: 30px;
+}
+.center1_main{
+    border-radius: 8px ;
+    height: 345px;
+    width: 1200px;
+    margin: 0 auto;
+}
+.center1_main_left{
+    list-style: none;
+    border-radius: 8px 0 0 8px;
+    height: 345px;
+    width: 160px;
+    padding: 10px 20px 0 20px;
+    float: left;
+    background: black;
+    margin-bottom: 0px;
+    border-right: 0px;
+}
+.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_picture{
+    height: 345px;
+    width: 1040px;
+    line-height: 345px;
+    text-align: center;
+    float: left;
+    background: blue;
+}
+
+.center_picture ant-carousel{
+    height: 345px;
+}
+
+    /deep/.ant-menu-submenu-title{
+        padding: 0 0 0 0;
+        margin:0 0 0 0;
+    }
diff --git a/src/pages/index.less b/src/pages/index.less
index 586302bf..ed0c34d2 100644
--- a/src/pages/index.less
+++ b/src/pages/index.less
@@ -1,3 +1,16 @@
 .title {
   background: rgb(121, 242, 157);
 }
+:global {
+  .ant-menu-vertical .ant-menu-item,
+  .ant-menu-vertical-left .ant-menu-item,
+  .ant-menu-vertical-right .ant-menu-item,
+  .ant-menu-inline .ant-menu-item,
+  .ant-menu-vertical .ant-menu-submenu-title,
+  .ant-menu-vertical-left .ant-menu-submenu-title,
+  .ant-menu-vertical-right .ant-menu-submenu-title,
+  .ant-menu-inline .ant-menu-submenu-title {
+    padding: 0;
+    margin: 0;
+  }
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index eae93138..d8b49741 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,5 +1,8 @@
 import styles from "./index.less";
 import { Carousel } from "antd";
+import "./index.css";
+import Menu from "./menu.js";
+import Center1 from "./center1.js";
 
 const contentStyle = {
   height: "160px",
@@ -12,21 +15,8 @@ const contentStyle = {
 export default function IndexPage() {
   return (
     <div>
-      <h1 className={styles.title}>Page index</h1>
-      <Carousel autoplay>
-        <div>
-          <h3 style={contentStyle}>1</h3>
-        </div>
-        <div>
-          <h3 style={contentStyle}>2</h3>
-        </div>
-        <div>
-          <h3 style={contentStyle}>3</h3>
-        </div>
-        <div>
-          <h3 style={contentStyle}>4</h3>
-        </div>
-      </Carousel>
+      {<Menu></Menu>}
+      {<Center1></Center1>}
     </div>
   );
 }
diff --git a/src/pages/menu.js b/src/pages/menu.js
new file mode 100644
index 00000000..a6c1b9e8
--- /dev/null
+++ b/src/pages/menu.js
@@ -0,0 +1,73 @@
+import React, { Component } from "react";
+import "./index.css";
+
+export default class Menu extends Component {
+  state = {
+    list: [
+      {
+        id: 1,
+        text: "首页",
+      },
+      {
+        id: 2,
+        text: "实践课程",
+      },
+      {
+        id: 3,
+        text: "实践项目",
+      },
+      {
+        id: 4,
+        text: "教学课堂",
+      },
+      {
+        id: 5,
+        text: "在线竞赛",
+      },
+      {
+        id: 6,
+        text: "教学案例",
+      },
+      {
+        id: 7,
+        text: "交流问答",
+      },
+      {
+        id: 8,
+        text: "大学开源",
+      },
+      {
+        id: 9,
+        text: "工程认证",
+      },
+    ],
+    current: 0,
+  };
+  render() {
+    return (
+      <div className="menu">
+        <ul>
+          {this.state.list.map((item, index) => (
+            <li
+              key={item.id}
+              className={this.state.current === index ? "active" : ""}
+              onClick={() => this.handleClick(index)}
+            >
+              {item.text}
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+  handlemove(index) {
+    console.log(index);
+  }
+  handleClick(index) {
+    console.log(index);
+
+    this.setState({
+      current: index,
+    });
+  }
+}