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 ( +
+
+ + + C/C++程序设计 + Java程序设计 + Python程序设计 + PHP程序设计 + Go语言程序设计 + C#程序设计 + Matlab程序设计 + 面向对象程序设计 + 其他语言 + R语言程序设计 + + + 离散数学 + 大学计算机基础 + 计算思维 + 图形图像 + 数理统计 + + + 计算机组成原理 + 操作系统 + 编译原理 + 计算机系统 + 信号与系统 + 汇编语言程序设计 + Linux编程设计 + Verilog程序设计 + 机器人 + + + 数据科学 + 数据采集 + 数据存储管理 + 数据分析处理 + 数据可视化 + 大数据应用案例 + 虚拟化 + 集群管理 + 云计算基础 + + + Option 9 + Option 10 + Option 11 + Option 12 + + + Option 9 + Option 10 + Option 11 + Option 12 + + + Option 9 + Option 10 + Option 11 + Option 12 + + + Option 9 + Option 10 + Option 11 + Option 12 + + + +
+ +
+

1

+
+
+

2

+
+
+

3

+
+
+

4

+
+ +
+
+
+ ); + } +} 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 (
-

Page index

- -
-

1

-
-
-

2

-
-
-

3

-
-
-

4

-
- + {} + {}
); } 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 ( +
+ +
+ ); + } + handlemove(index) { + console.log(index); + } + handleClick(index) { + console.log(index); + + this.setState({ + current: index, + }); + } +}