异质架构实践运行环境 菜单栏

src/pages/center2.js

@@ -0,0 +1,56 @@
+import React, { Component } from "react";
+
+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,
+  };
+  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>
+      </div>
+    );
+  }
+  handleClick(index) {
+    console.log(index);
+    this.setState({
+      current: index,
+    });
+  }
+}

src/pages/index.css

@@ -14,6 +14,7 @@
     list-style: none;
     display: flex;
     color: white;
+    margin-bottom: 0;
 }
 .menu ul li{
     margin-right: 30px;
@@ -66,6 +67,14 @@
     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: 1040px;
@@ -73,13 +82,57 @@
     text-align: center;
     float: left;
     background: blue;
+    margin-bottom: 0px;
 }
 
-.center_picture ant-carousel{
+.center1_picture .ant-carousel .slick-list .slick-track{
     height: 345px;
 }
 
-    /deep/.ant-menu-submenu-title{
-        padding: 0 0 0 0;
-        margin:0 0 0 0;
-    }
+.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: 500px;
+}
+.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;
+}   

src/pages/index.less

@@ -1,16 +1,3 @@
 .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;
-  }
-}

src/pages/index.tsx

@@ -3,20 +3,14 @@ import { Carousel } from "antd";
 import "./index.css";
 import Menu from "./menu.js";
 import Center1 from "./center1.js";
-
-const contentStyle = {
-  height: "160px",
-  color: "#fff",
-  lineHeight: "160px",
-  textAlign: "center",
-  background: "#364d79",
-};
+import Center2 from "./center2.js";
 
 export default function IndexPage() {
   return (
     <div>
       {<Menu></Menu>}
       {<Center1></Center1>}
+      {<Center2></Center2>}
     </div>
   );
 }