改

package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@ant-design/pro-layout": "^6.5.0",
+    "marked": "^4.0.12",
     "react": "17.x",
     "react-dom": "17.x",
     "umi": "^3.5.20"

src/pages/shijiankecheng/path2/kecheng.js

@@ -1,43 +1,71 @@
 import React, { Component } from "react";
+import Quanbu from "./kecheng/quanbu";
+import Shijianxiangmu from "./kecheng/shijianxiangmu";
+import Shipingxiangmu from "./kecheng/shipingxiangmu";
+import Jiaoxuekejian from "./kecheng/jiaoxuekejian";
+import Taolun from "./kecheng/taolun";
 
 export default class Kecheng extends Component {
   state = {
-    list: [],
+    list: [
+      {
+        id: 0,
+        name: "全部",
+      },
+      {
+        id: 1,
+        name: "实践项目",
+      },
+      {
+        id: 2,
+        name: "视频项目",
+      },
+      {
+        id: 3,
+        name: "教学课件",
+      },
+      {
+        id: 4,
+        name: "讨论",
+      },
+    ],
+    current: 0,
   };
-  componentDidMount() {
-    fetch(
-      "https://test-data.educoder.net/api/stages.json?subject_id=" +
-        this.props.id
-    )
-      .then((res) => res.json())
-      .then((data) => {
-        console.log(data.stages);
-        this.setState({
-          list: data.stages,
-        });
-      });
+
+  handleClick(value) {
+    this.setState({
+      current: value,
+    });
   }
   render() {
     return (
       <div className="left_three">
         <div className="left_three_box">
-          <div className="left_three_box_box_active">全部</div>
-          <div className="left_three_box_box_active">实践项目</div>
-          <div className="left_three_box_box_active">视频项目</div>
-        </div>
-        {this.state.list.map((item) => (
-          <div key={item.stage_id} className="zhangjie">
-            <div className="zhangjie_wenzi">
-              <div className="zhangjie_wenzi_box">{item.stage_name}</div>
-              <div className="zhangjie_wenzi_box">{item.stage_description}</div>
-              {item.items.map((item2) => (
-                <div className="zhangjie_wenzi_box" key={item2.id}>
-                  {item2.name}
-                </div>
-              ))}
+          {this.state.list.map((item, index) => (
+            <div
+              key={item.id}
+              className={
+                this.state.current === index
+                  ? "left_three_box_box_active"
+                  : "left_three_box_box"
+              }
+              onClick={() => this.handleClick(index)}
+            >
+              {item.name}
             </div>
-          </div>
-        ))}
+          ))}
+        </div>
+        {this.state.current === 0 && <Quanbu id={this.props.id}></Quanbu>}
+        {this.state.current === 1 && (
+          <Shijianxiangmu id={this.props.id}></Shijianxiangmu>
+        )}
+        {this.state.current === 2 && (
+          <Shipingxiangmu id={this.props.id}></Shipingxiangmu>
+        )}
+        {this.state.current === 3 && (
+          <Jiaoxuekejian id={this.props.id}></Jiaoxuekejian>
+        )}
+        {this.state.current === 4 && <Taolun id={this.props.id}></Taolun>}
       </div>
     );
   }

src/pages/shijiankecheng/path2/kecheng/jiaoxuekejian.js

@@ -0,0 +1,7 @@
+import React, { Component } from "react";
+
+export default class Jiaoxuekejian extends Component {
+  render() {
+    return <div></div>;
+  }
+}

src/pages/shijiankecheng/path2/kecheng/quanbu.js

@@ -0,0 +1,39 @@
+import React, { Component } from "react";
+
+export default class Quanbu extends Component {
+  state = {
+    list: [],
+  };
+  componentDidMount() {
+    fetch(
+      "https://test-data.educoder.net/api/stages.json?subject_id=" +
+        this.props.id
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data.stages);
+        this.setState({
+          list: data.stages,
+        });
+      });
+  }
+  render() {
+    return (
+      <div>
+        {this.state.list.map((item) => (
+          <div key={item.stage_id} className="zhangjie">
+            <div className="zhangjie_wenzi">
+              <div className="zhangjie_wenzi_box">{item.stage_name}</div>
+              <div className="zhangjie_wenzi_box">{item.stage_description}</div>
+              {item.items.map((item2) => (
+                <div className="zhangjie_wenzi_box" key={item2.id}>
+                  {item2.name}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+}

src/pages/shijiankecheng/path2/kecheng/shijianxiangmu.js

@@ -0,0 +1,7 @@
+import React, { Component } from "react";
+
+export default class Shijianxiangmu extends Component {
+  render() {
+    return <div></div>;
+  }
+}

src/pages/shijiankecheng/path2/kecheng/shipingxiangmu.js

@@ -0,0 +1,7 @@
+import React, { Component } from "react";
+
+export default class Shipingxiangmu extends Component {
+  render() {
+    return <div></div>;
+  }
+}

src/pages/shijiankecheng/path2/kecheng/taolun.js

@@ -0,0 +1,7 @@
+import React, { Component } from "react";
+
+export default class Taolun extends Component {
+  render() {
+    return <div></div>;
+  }
+}

src/pages/shijiankecheng/path2/paihangbang/hudongtaolun.js

@@ -5,6 +5,7 @@ export default class Xiazaiziyuan extends Component {
     number: 1,
     list: [],
   };
+
   componentDidMount() {
     fetch(
       "https://test-data.educoder.net/api/paths/" +

src/pages/shijiankecheng/path2/path.js

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import Zhangjie from "./zhangjie";
+import marked from "marked";
 
 const bgImg = {
   bg: {
@@ -26,7 +27,6 @@ export default class Path extends Component {
           list: data,
         });
       });
-
     fetch(
       "https://test-data.educoder.net/api/paths/" +
         this.props.id +
@@ -103,6 +103,7 @@ export default class Path extends Component {
                 ></img>
                 课程介绍
               </div>
+
               <div className="left_one_box2">{this.state.list.description}</div>
             </div>
             <Zhangjie id={this.props.id}></Zhangjie>

src/pages/shijiankecheng/shijiankecheng.css

@@ -396,6 +396,17 @@
     display: flex;
     font-size: 14px;
 }
+.left_three_box_box:hover{
+    color: #1890ff;
+}
+.left_three_box_box{
+    margin-right: 14px;
+    background: white;
+    color: #333;
+    border-radius: 15px;
+    cursor: pointer;
+    padding: 1px 6px;
+}
 .left_three_box_box_active{
     margin-right: 14px;
     background: #d8ecff;