改

src/pages/shijiankecheng/kecheng xiangqing/kecheng.js

@@ -0,0 +1,44 @@
+import React, { Component } from "react";
+
+export default class Kecheng 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 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>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+}

src/pages/shijiankecheng/kecheng xiangqing/path.js

@@ -53,7 +53,7 @@ export default class Path extends Component {
           className="path_box"
           style={{
             backgroundImage: `url(${this.state.url})`,
-            paddingBottom: "70px",
+            backgroundSize: "100%",
           }}
         >
           <div className="path_top">

src/pages/shijiankecheng/kecheng xiangqing/zhangjie.js

@@ -1,48 +1,49 @@
 import React, { Component } from "react";
 import "../shijiankecheng.css";
+import Kecheng from "./kecheng";
 
 export default class Zhangjie extends Component {
   state = {
-    list: [],
+    list: [
+      {
+        id: 0,
+        name: "课程章节",
+      },
+      {
+        id: 1,
+        name: "排行榜",
+      },
+      {
+        id: 2,
+        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(index) {
+    this.setState({
+      current: index,
+    });
   }
   render() {
     return (
       <div>
         <div className="left_two">
-          <div className="left_two_box">课程章节</div>
-          <div className="left_two_box">排行榜</div>
-          <div className="left_two_box">证书申请</div>
-        </div>
-        <div className="left_three">
-          {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>
+          {this.state.list.map((item, index) => (
+            <div
+              className={
+                this.state.current === index
+                  ? "left_two_box_active"
+                  : "left_two_box"
+              }
+              key={item.id}
+              onClick={() => this.handleClick(index)}
+            >
+              {item.name}
             </div>
           ))}
         </div>
+        <Kecheng id={this.props.id}></Kecheng>
       </div>
     );
   }

src/pages/shijiankecheng/shijiankecheng.css

@@ -321,10 +321,13 @@
 }
 .path_top_box{
     font-size: 28px;
+    color: #fff;
+    margin-right: 8px;
+    font-weight: 700;
 }
 .path_top_box2{
     display: flex;
-    
+    color: #ebebeb;
     text-align: center;
     font-size: 14px;
 }
@@ -364,9 +367,42 @@
     margin-right: 50px;
     line-height: 60px;
 }
+.left_two_box:hover{
+    color: #1890ff;
+}
+.left_two_box_active{
+    position: relative;
+    padding: 8px 0;
+    align-items: center;
+    font-size: 16px;
+    margin-right: 50px;
+    line-height: 60px;
+    color: #1890ff;
+}
+.left_two_box_active::after{
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 1px;
+    background-color: #1890ff;
+}
 .left_three{
     width: 100%;
-
+}
+.left_three_box{
+    margin-top: 22px;
+    display: flex;
+    font-size: 14px;
+}
+.left_three_box_box_active{
+    margin-right: 14px;
+    background: #d8ecff;
+    color: #1890ff;
+    border-radius: 15px;
+    cursor: pointer;
+    padding: 1px 6px;
 }
 .zhangjie{
     margin-top: 20px;