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

Tab栏切换

Browse Source
dev_dp
邓鹏 4 years ago
parent ff7b6ab56a 44651f8129
commit e86e28d178
2 changed files with 120 additions and 12 deletions
Show Stats Download Patch File Download Diff File

5
src/pages/tg-head/src/index.css
Unescape View File

@ -144,4 +144,7 @@ video{
}
.box4One{
float: left;
}
}
.box4Two{
float: right;
}

127
src/pages/tg-head/src/index.js
Unescape View File

@ -3,7 +3,14 @@ import ReactDOM from 'react-dom';
import './index.css';
import './iconfont/iconfont.css';
import { Carousel } from 'antd';
import 'antd/dist/antd.css'
import 'antd/dist/antd.css';
import { Tabs } from 'antd';
import { Button } from 'antd';
const { TabPane } = Tabs;
function callback(key) {
console.log(key);
};
let head = (
<div className='app'>
<header>
@ -72,15 +79,10 @@ let head = (
<p className='box2Two'>异质架构实践运行环境</p>
<p className='box2One'>Heterogeneous Architecture Practice Runtime Environments</p>
</div>
<div className='box3'>
<span className='box3One'>云端编程环境</span>
<span className='box3One'>远程桌面</span>
<span className='box3One'>远程命令行</span>
<span className='box3One'>虚拟仿真</span>
<span className='box3One'>交互式笔记</span>
</div>
<div className='box4'>
<div className='box4One'>
<Tabs defaultActiveKey="1" centered>
<TabPane tab="云端编程环境" key="1" className='box3One'>
<div className='box4One'>
<h2>云端编程环境特点</h2>
<ul>
<li>图文、视频、Latex</li>
@ -93,8 +95,8 @@ let head = (
<h2>可定制运行环境</h2>
<p>CentOS、Ubuntu、Python、Matplotlib</p>
<p>Pandas、Numpy、Scrapy … …</p>
<button>社区支持</button>
<button>立即体验</button>
<Button type="primary">社区支持</Button>
<Button type="primary">立即体验</Button>
</div>
<div className='box4Two'>
<div className='box4Two2'>
@ -103,6 +105,109 @@ let head = (
</video>
</div>
</div>
</TabPane>
<TabPane tab="远程桌面" key="2" className='box3One'>
<div className='box4One'>
<h2>远程桌面特点</h2>
<ul>
<li>图形化操作系统</li>
<li>可配置应用软件和模拟器</li>
<li>可定制测试集</li>
<li>自动化部署、测试、反馈</li>
<li>大规模并发实验</li>
<li>支持一流课程建设</li>
</ul>
<h2>可定制运行环境</h2>
<p>CentOS、Ubuntu、 Windows、 Kylin OS</p>
<p>Wireshark、Vscode、GN3 … …</p>
<Button type="primary">社区支持</Button>
<Button type="primary">立即体验</Button>
</div>
<div className='box4Two'>
<div className='box4Two2'>
<video controls='controls' autoplay='autopaly' loop='loop' muted='muted'>
<source src='https://video.educoder.net/sv/28357c10-1775907ad78/28357c10-1775907ad78.mp4' type='video/mp4'></source>
</video>
</div>
</div>
</TabPane>
<TabPane tab="远程命令行" key="3" className='box3One'>
<div className='box4One'>
<h2>远程命令行环境</h2>
<ul>
<li>标准Linux Shell命令</li>
<li>命令操作全程记录</li>
<li>可配置命令行应用程序</li>
<li>可配置命令行模拟器</li>
<li>自动化部署、测试、反馈</li>
<li>支持一流课程建设</li>
</ul>
<h2>可定制运行环境</h2>
<p>CentOS、Ubuntu、Python、Vim、Docker</p>
<p>SSH、Git、Hadoop、Hive … …</p>
<Button type="primary">社区支持</Button>
<Button type="primary">立即体验</Button>
</div>
<div className='box4Two'>
<div className='box4Two2'>
<video controls='controls' autoplay='autopaly' loop='loop' muted='muted'>
<source src='https://video.educoder.net/sv/4fdca3e8-17752499adf/4fdca3e8-17752499adf.mp4' type='video/mp4'></source>
</video>
</div>
</div>
</TabPane>
<TabPane tab="虚拟仿真" key="4" className='box3One'>
<div className='box4One'>
<h2>虚拟仿真项目特点</h2>
<ul>
<li>三维动画教学</li>
<li>可编程驱动动画行为</li>
<li>构件化、可组装虚拟场景</li>
<li>自动化评测、反馈</li>
<li>大规模并发仿真实验</li>
<li>支持虚拟仿真项目建设</li>
</ul>
<h2>可定制运行环境</h2>
<p>Ubuntu、CentOS、WebGL、Python</p>
<p>Java、C#、ThreeJS、Unity … …</p>
<Button type="primary">社区支持</Button>
<Button type="primary">立即体验</Button>
</div>
<div className='box4Two'>
<div className='box4Two2'>
<video controls='controls' autoplay='autopaly' loop='loop' muted='muted'>
<source src='https://video.educoder.net/sv/5490aa0d-17759081e1d/5490aa0d-17759081e1d.mp4' type='video/mp4'></source>
</video>
</div>
</div>
</TabPane>
<TabPane tab="交互式笔记" key="5" className='box3One'>
<div className='box4One'>
<h2>Jupyter NoteBook环境</h2>
<ul>
<li>代码编辑与结果展示同步</li>
<li>富媒体展示计算结果</li>
<li>模块化执行</li>
<li>支持Latex、Markdown</li>
<li>200种可选运行环境</li>
<li>自动化部署、测试、反馈</li>
</ul>
<h2>可定制运行环境</h2>
<p>CentOS、openEuler、TensorFlow、Python</p>
<p>MindSpore、Spark、Ubuntu … …</p>
<Button type="primary">社区支持</Button>
<span></span>
<Button type="primary">立即体验</Button>
</div>
<div className='box4Two'>
<div className='box4Two2'>
<video controls='controls' autoplay='autopaly' loop='loop' muted='muted'>
<source src='https://video.educoder.net/sv/3fcef362-17759076bd9/3fcef362-17759076bd9.mp4' type='video/mp4'></source>
</video>
</div>
</div>
</TabPane>
</Tabs>
</div>
</div>
)

Write Preview
Loading…
Cancel
Save