diff --git a/src/pages/center2.js b/src/pages/center2.js
index 152288fc..cf63cadf 100644
--- a/src/pages/center2.js
+++ b/src/pages/center2.js
@@ -1,4 +1,9 @@
 import React, { Component } from "react";
+import Page1 from "./page1";
+import Page2 from "./page2";
+import Page3 from "./page3";
+import Page4 from "./page4";
+import Page5 from "./page5";
 
 export default class Center2 extends Component {
   state = {
@@ -44,6 +49,11 @@ export default class Center2 extends Component {
             </li>
           ))}
         </ul>
+        {this.state.current === 0 && <Page1></Page1>}
+        {this.state.current === 1 && <Page2></Page2>}
+        {this.state.current === 2 && <Page3></Page3>}
+        {this.state.current === 3 && <Page4></Page4>}
+        {this.state.current === 4 && <Page5></Page5>}
       </div>
     );
   }
diff --git a/src/pages/index.css b/src/pages/index.css
index c2d4f804..12359279 100644
--- a/src/pages/index.css
+++ b/src/pages/index.css
@@ -98,7 +98,7 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
-    height: 500px;
+    height: 987px;
 }
 .center2_box1{
     font-size: 30px;
@@ -135,4 +135,73 @@
     color: #1890ff !important;
     border-color: #1890ff !important;
     border-radius: 50px;
-}   
\ No newline at end of file
+}   
+.center2_page{
+    width: 1300px;
+    height: 600px;
+}
+.center2_page1_left{
+    width: 384px;
+    flex-shrink: 0;
+    padding-top: 42px;
+    padding-left: 50px;
+    float: left;
+}
+.center2_page1_left h3{
+    font-size: 18px;
+    color: #34495e;
+    margin-bottom: 16px;
+}
+.center2_page1_left p{
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 12px;
+}
+.center2_page1_left p span{
+    font-size: 16px;
+    color: #667a8d;
+}
+.center2_page1_left_bottom{
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    margin-top: 34px;
+}
+.center2_page1_left_bottom_box1{
+    width: 137px;
+    height: 40px;
+    background: #377dff;
+    border-radius: 5px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #fff;
+    line-height: 40px;
+    text-align: center;
+    cursor: pointer;
+    margin-right: 20px;
+}
+.center2_page1_left_bottom_box2{
+    width: 137px;
+    height: 40px;
+    background: #dfe6ff;
+    border-radius: 5px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #377dff;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.center2_page1_left_bottom_box2 i{
+    font-size: 12px;
+    margin-left: 15px;
+}
+.center2_page1_right{
+    width: 915px;
+    position: relative;
+    margin-top: 41px;
+    height: 500px;
+    float: left;
+}
\ No newline at end of file
diff --git a/src/pages/page1.js b/src/pages/page1.js
new file mode 100644
index 00000000..2f9a2cda
--- /dev/null
+++ b/src/pages/page1.js
@@ -0,0 +1,46 @@
+import React, { Component } from "react";
+
+export default class Page1 extends Component {
+  render() {
+    return (
+      <div className="center2_page">
+        <div className="center2_page1_left">
+          <h3>云端编程环境特点</h3>
+          <p>
+            <span>图文、视频、Latex</span>
+          </p>
+          <p>
+            <span>VS Code编程环境</span>
+          </p>
+          <p>
+            <span>Online Judge（OJ）模式</span>
+          </p>
+          <p>
+            <span>代码自动推荐</span>
+          </p>
+          <p>
+            <span>可定制测试集</span>
+          </p>
+          <p>
+            <span>自动化部署、测试、反馈</span>
+          </p>
+          <h3 style={{ marginTop: "20px" }}>可定制运行环境</h3>
+          <p>
+            <span>CentOS、Ubuntu、Python、Matplotlib</span>
+          </p>
+          <p>
+            <span>Pandas、Numpy、Scrapy … …</span>
+          </p>
+          <div className="center2_page1_left_bottom">
+            <div className="center2_page1_left_bottom_box1">社区支持</div>
+            <div className="center2_page1_left_bottom_box2">
+              立即体验
+              <i className="center2_page1_left_bottom_box2_box"></i>
+            </div>
+          </div>
+        </div>
+        <div className="center2_page1_right"></div>
+      </div>
+    );
+  }
+}
diff --git a/src/pages/page2.js b/src/pages/page2.js
new file mode 100644
index 00000000..f5ba9f27
--- /dev/null
+++ b/src/pages/page2.js
@@ -0,0 +1,49 @@
+import React, { Component } from "react";
+
+export default class Page2 extends Component {
+  render() {
+    return (
+      <div className="center2_page">
+        <div className="center2_page1_left" style={{ float: "right" }}>
+          <h3>远程桌面特点</h3>
+          <p>
+            <span>图文、视频、Latex</span>
+          </p>
+          <p>
+            <span>图形化操作系统</span>
+          </p>
+          <p>
+            <span>可配置应用软件和模拟器</span>
+          </p>
+          <p>
+            <span>可定制测试集</span>
+          </p>
+          <p>
+            <span>自动化部署、测试、反馈</span>
+          </p>
+          <p>
+            <span>大规模并发实验</span>
+          </p>
+          <p>
+            <span>支持一流课程建设</span>
+          </p>
+          <h3 style={{ marginTop: "20px" }}>可定制运行环境</h3>
+          <p>
+            <span>CentOS、Ubuntu、 Windows、 Kylin OS</span>
+          </p>
+          <p>
+            <span>Wireshark、Vscode、GN3 … …</span>
+          </p>
+          <div className="center2_page1_left_bottom">
+            <div className="center2_page1_left_bottom_box1">社区支持</div>
+            <div className="center2_page1_left_bottom_box2">
+              立即体验
+              <i className="center2_page1_left_bottom_box2_box"></i>
+            </div>
+          </div>
+        </div>
+        <div className="center2_page1_right"></div>
+      </div>
+    );
+  }
+}
diff --git a/src/pages/page3.js b/src/pages/page3.js
new file mode 100644
index 00000000..ef399f78
--- /dev/null
+++ b/src/pages/page3.js
@@ -0,0 +1,46 @@
+import React, { Component } from "react";
+
+export default class Page3 extends Component {
+  render() {
+    return (
+      <div className="center2_page">
+        <div className="center2_page1_left">
+          <h3>远程命令行环境</h3>
+          <p>
+            <span>标准Linux Shell命令</span>
+          </p>
+          <p>
+            <span>命令操作全程记录</span>
+          </p>
+          <p>
+            <span>可配置命令行应用程序</span>
+          </p>
+          <p>
+            <span>可配置命令行模拟器</span>
+          </p>
+          <p>
+            <span>自动化部署、测试、反馈</span>
+          </p>
+          <p>
+            <span>支持一流课程建设</span>
+          </p>
+          <h3 style={{ marginTop: "20px" }}>可定制运行环境</h3>
+          <p>
+            <span>CentOS、Ubuntu、Python、Vim、Docker</span>
+          </p>
+          <p>
+            <span>SSH、Git、Hadoop、Hive … …</span>
+          </p>
+          <div className="center2_page1_left_bottom">
+            <div className="center2_page1_left_bottom_box1">社区支持</div>
+            <div className="center2_page1_left_bottom_box2">
+              立即体验
+              <i className="center2_page1_left_bottom_box2_box"></i>
+            </div>
+          </div>
+        </div>
+        <div className="center2_page1_right"></div>
+      </div>
+    );
+  }
+}
diff --git a/src/pages/page4.js b/src/pages/page4.js
new file mode 100644
index 00000000..901d7c3b
--- /dev/null
+++ b/src/pages/page4.js
@@ -0,0 +1,46 @@
+import React, { Component } from "react";
+
+export default class Page4 extends Component {
+  render() {
+    return (
+      <div className="center2_page">
+        <div className="center2_page1_left" style={{ float: "right" }}>
+          <h3>虚拟仿真项目特点</h3>
+          <p>
+            <span>三维动画教学</span>
+          </p>
+          <p>
+            <span>命令操作全程记录</span>
+          </p>
+          <p>
+            <span>构件化、可组装虚拟场景</span>
+          </p>
+          <p>
+            <span>自动化评测、反馈</span>
+          </p>
+          <p>
+            <span>大规模并发仿真实验</span>
+          </p>
+          <p>
+            <span>支持虚拟仿真项目建设</span>
+          </p>
+          <h3 style={{ marginTop: "20px" }}>可定制运行环境</h3>
+          <p>
+            <span>Ubuntu、CentOS、WebGL、Python</span>
+          </p>
+          <p>
+            <span>Java、C#、ThreeJS、Unity … …</span>
+          </p>
+          <div className="center2_page1_left_bottom">
+            <div className="center2_page1_left_bottom_box1">社区支持</div>
+            <div className="center2_page1_left_bottom_box2">
+              立即体验
+              <i className="center2_page1_left_bottom_box2_box"></i>
+            </div>
+          </div>
+        </div>
+        <div className="center2_page1_right"></div>
+      </div>
+    );
+  }
+}
diff --git a/src/pages/page5.js b/src/pages/page5.js
new file mode 100644
index 00000000..e97f9d70
--- /dev/null
+++ b/src/pages/page5.js
@@ -0,0 +1,46 @@
+import React, { Component } from "react";
+
+export default class Page5 extends Component {
+  render() {
+    return (
+      <div className="center2_page">
+        <div className="center2_page1_left">
+          <h3>Jupyter NoteBook环境</h3>
+          <p>
+            <span>代码编辑与结果展示同步</span>
+          </p>
+          <p>
+            <span>富媒体展示计算结果</span>
+          </p>
+          <p>
+            <span>模块化执行</span>
+          </p>
+          <p>
+            <span>支持Latex、Markdown</span>
+          </p>
+          <p>
+            <span>200种可选运行环境</span>
+          </p>
+          <p>
+            <span>自动化部署、测试、反馈</span>
+          </p>
+          <h3 style={{ marginTop: "20px" }}>可定制运行环境</h3>
+          <p>
+            <span>CentOS、openEuler、TensorFlow、Python</span>
+          </p>
+          <p>
+            <span>MindSpore、Spark、Ubuntu … …</span>
+          </p>
+          <div className="center2_page1_left_bottom">
+            <div className="center2_page1_left_bottom_box1">社区支持</div>
+            <div className="center2_page1_left_bottom_box2">
+              立即体验
+              <i className="center2_page1_left_bottom_box2_box"></i>
+            </div>
+          </div>
+        </div>
+        <div className="center2_page1_right"></div>
+      </div>
+    );
+  }
+}