diff --git a/src/pages/shijiankecheng/Path2.js b/src/pages/shijiankecheng/Path2.js
index 1a3e4fe6..abd57b02 100644
--- a/src/pages/shijiankecheng/Path2.js
+++ b/src/pages/shijiankecheng/Path2.js
@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import Path from "./path2/path";
+import Center6 from "../shouye/component/tg_dibu/center6";
 
 export default class Path2 extends Component {
   render() {
@@ -7,6 +8,7 @@ export default class Path2 extends Component {
     return (
       <div>
         <Path id={this.props.match.params.id}></Path>
+        <Center6></Center6>
       </div>
     );
   }
diff --git a/src/pages/shijiankecheng/path2/paihang.js b/src/pages/shijiankecheng/path2/paihang.js
new file mode 100644
index 00000000..5ff65a2e
--- /dev/null
+++ b/src/pages/shijiankecheng/path2/paihang.js
@@ -0,0 +1,61 @@
+import React, { Component } from "react";
+import Tongguan from "./paihangbang/tongguan";
+import Shipingxuexi from "./paihangbang/shipingxuexi";
+import Xiazaiziyuan from "./paihangbang/xiazaiziyuan";
+import Hudongtaolun from "./paihangbang/hudongtaolun";
+
+export default class Paihang extends Component {
+  state = {
+    list: [
+      {
+        id: 0,
+        name: "通关榜",
+      },
+      {
+        id: 1,
+        name: "视频学习榜",
+      },
+      {
+        id: 2,
+        name: "下载资源榜",
+      },
+      {
+        id: 3,
+        name: "互动讨论榜",
+      },
+    ],
+    current: 0,
+  };
+  handleClick(index) {
+    this.setState({
+      current: index,
+    });
+  }
+  render() {
+    return (
+      <div className="paihang">
+        <div className="paihang_shang">
+          {this.state.list.map((item, index) => (
+            <li
+              key={item.id}
+              onClick={() => this.handleClick(index)}
+              className={this.state.current === index ? "li_active" : ""}
+            >
+              {item.name}
+            </li>
+          ))}
+        </div>
+        {this.state.current === 0 && <Tongguan id={this.props.id}></Tongguan>}
+        {this.state.current === 1 && (
+          <Shipingxuexi id={this.props.id}></Shipingxuexi>
+        )}
+        {this.state.current === 2 && (
+          <Xiazaiziyuan id={this.props.id}></Xiazaiziyuan>
+        )}
+        {this.state.current === 3 && (
+          <Hudongtaolun id={this.props.id}></Hudongtaolun>
+        )}
+      </div>
+    );
+  }
+}
diff --git a/src/pages/shijiankecheng/path2/paihangbang/hudongtaolun.js b/src/pages/shijiankecheng/path2/paihangbang/hudongtaolun.js
new file mode 100644
index 00000000..90f8d134
--- /dev/null
+++ b/src/pages/shijiankecheng/path2/paihangbang/hudongtaolun.js
@@ -0,0 +1,105 @@
+import React, { Component } from "react";
+
+export default class Xiazaiziyuan extends Component {
+  state = {
+    number: 1,
+    list: [],
+  };
+  componentDidMount() {
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_discusses.json?page=" +
+        this.state.number
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  render() {
+    return (
+      <div>
+        <div className="paihang_style">
+          <div style={{ flex: " 1 1 0%" }}>排名</div>
+          <div style={{ flex: " 1 1 0%" }}>姓名</div>
+          <div style={{ flex: " 1 1 0%" }}>发帖数</div>
+        </div>
+        {this.state.list.map((item) => (
+          <div className="paihang_style" key={item.user_id}>
+            <div style={{ flex: " 1 1 0%" }}>{item.rank}</div>
+            <div style={{ flex: " 1 1 0%" }}>{item.user_real_name}</div>
+            <div style={{ flex: " 1 1 0%" }}> {item.num}</div>
+          </div>
+        ))}
+        <div className="tongguan_xia">
+          <button
+            onClick={() => {
+              this.handleClick_shang(this.state.number);
+            }}
+            className={
+              this.state.number === 1 ? "button_color_no" : "button_color_yes"
+            }
+            disabled={this.state.number === 1 ? "disabled" : ""}
+          >
+            上一页
+          </button>
+          <button
+            onClick={() => {
+              this.handleClick_xia(this.state.number);
+            }}
+            className={
+              this.state.list.length < 10
+                ? "button_color_no"
+                : "button_color_yes"
+            }
+            disabled={this.state.list.length < 10 ? "disabled" : ""}
+          >
+            下一页
+          </button>
+        </div>
+      </div>
+    );
+  }
+  handleClick_shang(number) {
+    this.setState({
+      number: this.state.number - 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_discusses.json?page=" +
+        (number - 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  handleClick_xia(number) {
+    this.setState({
+      number: this.state.number + 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_discusses.json?page=" +
+        (number + 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+}
diff --git a/src/pages/shijiankecheng/path2/paihangbang/shipingxuexi.js b/src/pages/shijiankecheng/path2/paihangbang/shipingxuexi.js
new file mode 100644
index 00000000..444b041e
--- /dev/null
+++ b/src/pages/shijiankecheng/path2/paihangbang/shipingxuexi.js
@@ -0,0 +1,105 @@
+import React, { Component } from "react";
+
+export default class Shipingxuexi extends Component {
+  state = {
+    number: 1,
+    list: [],
+  };
+  componentDidMount() {
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_videos.json?page=" +
+        this.state.number
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  render() {
+    return (
+      <div>
+        <div className="paihang_style">
+          <div style={{ flex: " 1 1 0%" }}>排名</div>
+          <div style={{ flex: " 1 1 0%" }}>姓名</div>
+          <div style={{ flex: " 1 1 0%" }}> 累计学习时长</div>
+        </div>
+        {this.state.list.map((item) => (
+          <div className="paihang_style" key={item.user_id}>
+            <div style={{ flex: " 1 1 0%" }}>{item.rank}</div>
+            <div style={{ flex: " 1 1 0%" }}>{item.user_real_name}</div>
+            <div style={{ flex: " 1 1 0%" }}> {item.num}</div>
+          </div>
+        ))}
+        <div className="tongguan_xia">
+          <button
+            onClick={() => {
+              this.handleClick_shang(this.state.number);
+            }}
+            className={
+              this.state.number === 1 ? "button_color_no" : "button_color_yes"
+            }
+            disabled={this.state.number === 1 ? "disabled" : ""}
+          >
+            上一页
+          </button>
+          <button
+            onClick={() => {
+              this.handleClick_xia(this.state.number);
+            }}
+            className={
+              this.state.list.length < 10
+                ? "button_color_no"
+                : "button_color_yes"
+            }
+            disabled={this.state.list.length < 10 ? "disabled" : ""}
+          >
+            下一页
+          </button>
+        </div>
+      </div>
+    );
+  }
+  handleClick_shang(number) {
+    this.setState({
+      number: this.state.number - 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_videos.json?page=" +
+        (number - 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  handleClick_xia(number) {
+    this.setState({
+      number: this.state.number + 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_videos.json?page=" +
+        (number + 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+}
diff --git a/src/pages/shijiankecheng/path2/paihangbang/tongguan.js b/src/pages/shijiankecheng/path2/paihangbang/tongguan.js
new file mode 100644
index 00000000..e836cf9b
--- /dev/null
+++ b/src/pages/shijiankecheng/path2/paihangbang/tongguan.js
@@ -0,0 +1,105 @@
+import React, { Component } from "react";
+
+export default class Tongguan extends Component {
+  state = {
+    number: 1,
+    list: [],
+  };
+  componentDidMount() {
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_shixuns_passed.json?page=" +
+        this.state.number
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  render() {
+    return (
+      <div>
+        <div className="paihang_style">
+          <div style={{ flex: " 1 1 0%" }}>排名</div>
+          <div style={{ flex: " 1 1 0%" }}>姓名</div>
+          <div style={{ flex: " 1 1 0%" }}> 通关关卡数</div>
+        </div>
+        {this.state.list.map((item) => (
+          <div className="paihang_style" key={item.user_id}>
+            <div style={{ flex: " 1 1 0%" }}>{item.rank}</div>
+            <div style={{ flex: " 1 1 0%" }}>{item.user_real_name}</div>
+            <div style={{ flex: " 1 1 0%" }}> {item.num}</div>
+          </div>
+        ))}
+        <div className="tongguan_xia">
+          <button
+            onClick={() => {
+              this.handleClick_shang(this.state.number);
+            }}
+            className={
+              this.state.number === 1 ? "button_color_no" : "button_color_yes"
+            }
+            disabled={this.state.number === 1 ? "disabled" : ""}
+          >
+            上一页
+          </button>
+          <button
+            onClick={() => {
+              this.handleClick_xia(this.state.number);
+            }}
+            className={
+              this.state.list.length < 10
+                ? "button_color_no"
+                : "button_color_yes"
+            }
+            disabled={this.state.list.length < 10 ? "disabled" : ""}
+          >
+            下一页
+          </button>
+        </div>
+      </div>
+    );
+  }
+  handleClick_shang(number) {
+    this.setState({
+      number: this.state.number - 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_shixuns_passed.json?page=" +
+        (number - 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  handleClick_xia(number) {
+    this.setState({
+      number: this.state.number + 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_shixuns_passed.json?page=" +
+        (number + 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+}
diff --git a/src/pages/shijiankecheng/path2/paihangbang/xiazaiziyuan.js b/src/pages/shijiankecheng/path2/paihangbang/xiazaiziyuan.js
new file mode 100644
index 00000000..b64d81e8
--- /dev/null
+++ b/src/pages/shijiankecheng/path2/paihangbang/xiazaiziyuan.js
@@ -0,0 +1,105 @@
+import React, { Component } from "react";
+
+export default class Xiazaiziyuan extends Component {
+  state = {
+    number: 1,
+    list: [],
+  };
+  componentDidMount() {
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_pdf_attachments.json?page=" +
+        this.state.number
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  render() {
+    return (
+      <div>
+        <div className="paihang_style">
+          <div style={{ flex: " 1 1 0%" }}>排名</div>
+          <div style={{ flex: " 1 1 0%" }}>姓名</div>
+          <div style={{ flex: " 1 1 0%" }}> 下载资源次数</div>
+        </div>
+        {this.state.list.map((item) => (
+          <div className="paihang_style" key={item.user_id}>
+            <div style={{ flex: " 1 1 0%" }}>{item.rank}</div>
+            <div style={{ flex: " 1 1 0%" }}>{item.user_real_name}</div>
+            <div style={{ flex: " 1 1 0%" }}> {item.num}</div>
+          </div>
+        ))}
+        <div className="tongguan_xia">
+          <button
+            onClick={() => {
+              this.handleClick_shang(this.state.number);
+            }}
+            className={
+              this.state.number === 1 ? "button_color_no" : "button_color_yes"
+            }
+            disabled={this.state.number === 1 ? "disabled" : ""}
+          >
+            上一页
+          </button>
+          <button
+            onClick={() => {
+              this.handleClick_xia(this.state.number);
+            }}
+            className={
+              this.state.list.length < 10
+                ? "button_color_no"
+                : "button_color_yes"
+            }
+            disabled={this.state.list.length < 10 ? "disabled" : ""}
+          >
+            下一页
+          </button>
+        </div>
+      </div>
+    );
+  }
+  handleClick_shang(number) {
+    this.setState({
+      number: this.state.number - 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_pdf_attachments.json?page=" +
+        (number - 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+  handleClick_xia(number) {
+    this.setState({
+      number: this.state.number + 1,
+      list: [],
+    });
+    fetch(
+      "https://test-data.educoder.net/api/paths/" +
+        this.props.id +
+        "/study_ranking_pdf_attachments.json?page=" +
+        (number + 1)
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.data);
+        this.setState({
+          list: data.data,
+        });
+      });
+  }
+}
diff --git a/src/pages/shijiankecheng/path2/shengqing.js b/src/pages/shijiankecheng/path2/shengqing.js
new file mode 100644
index 00000000..061d2f3c
--- /dev/null
+++ b/src/pages/shijiankecheng/path2/shengqing.js
@@ -0,0 +1,7 @@
+import React, { Component } from "react";
+
+export default class Shengqing extends Component {
+  render() {
+    return <div></div>;
+  }
+}
diff --git a/src/pages/shijiankecheng/path2/zhangjie.js b/src/pages/shijiankecheng/path2/zhangjie.js
index 4f550d92..cddcba6c 100644
--- a/src/pages/shijiankecheng/path2/zhangjie.js
+++ b/src/pages/shijiankecheng/path2/zhangjie.js
@@ -1,6 +1,8 @@
 import React, { Component } from "react";
 import "../shijiankecheng.css";
 import Kecheng from "./kecheng";
+import Paihang from "./paihang";
+import Shengqing from "./shengqing";
 
 export default class Zhangjie extends Component {
   state = {
@@ -43,7 +45,9 @@ export default class Zhangjie extends Component {
             </div>
           ))}
         </div>
-        <Kecheng id={this.props.id}></Kecheng>
+        {this.state.current === 0 && <Kecheng id={this.props.id}></Kecheng>}
+        {this.state.current === 1 && <Paihang id={this.props.id}></Paihang>}
+        {this.state.current === 2 && <Shengqing id={this.props.id}></Shengqing>}
       </div>
     );
   }
diff --git a/src/pages/shijiankecheng/shijiankecheng.css b/src/pages/shijiankecheng/shijiankecheng.css
index 3584d2fd..79e08a7a 100644
--- a/src/pages/shijiankecheng/shijiankecheng.css
+++ b/src/pages/shijiankecheng/shijiankecheng.css
@@ -452,3 +452,48 @@
     line-height: 1.6;
     font-family: "Microsoft YaHei", Helvetica, "Meiryo UI", "Malgun Gothic", "Segoe UI", "Trebuchet MS", "Monaco", monospace, Tahoma, STXihei, "华文细黑", STHeiti, "Helvetica Neue", "Droid Sans", "wenquanyi micro hei", FreeSans, Arimo, Arial, SimSun, "宋体", Heiti, "黑体", sans-serif;
 }
+.paihang{
+    background: rgb(255, 255, 255);
+    padding: 0px 20px;
+    font-size: 14px;
+}
+.paihang_shang{
+    align-items: center;
+    margin: 0 0 8px 0;
+    list-style: none;
+    height: 39px;
+    border-bottom: 1px solid #f0f0f0;
+    position: relative;
+}
+.paihang_shang li {
+    height: 100%;
+    line-height: 22px;
+    align-items: center;
+    margin-left: 32px;
+    width: auto;
+    float: left;
+    padding: 8px;   
+    cursor: pointer;
+}
+.li_active{
+    color: #1890ff;
+    border-bottom: 1px solid #1890ff;
+}
+.paihang_style{
+    height: 42px;
+    background: rgb(250, 250, 250);
+    display: flex;
+    padding: 0px 5px;
+    align-items: center;
+}
+.tongguan_xia{
+    text-align: center;
+    margin: 20px 0px;
+    width: 100%;
+
+}
+.tongguan_xia button{
+    min-width: 28px;
+    height: 28px;
+    margin-right: 10px;
+}
\ No newline at end of file