psfieukgp
/
InternshipProject
forked from pu428f3pz/InternshipProject
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

轮播

Browse Source
dev_jzx
Jzx201211 4 years ago
parent d03e6a1d0b
commit 15b931d884
5 changed files with 310 additions and 15 deletions
Show Stats Download Patch File Download Diff File

134
src/pages/center1.js
Unescape View File

@ -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>
);
}
}

85
src/pages/index.css
Unescape View File

@ -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;
}

13
src/pages/index.less
Unescape View File

@ -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;
}
}

20
src/pages/index.tsx
Unescape View File

@ -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>
);
}

73
src/pages/menu.js
Unescape View File

@ -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,
});
}
}
Write Preview
Loading…
Cancel
Save