上下换页，最新最热替换

src/pages/index.css

@@ -7,6 +7,7 @@ body{
     background: #f5f5f5;
 }
 .menu{
+    
     width: 100%;
     height: 64px;
     padding: 0 50px;

src/pages/shijiankecheng/box4.js

@@ -5,13 +5,19 @@ export default class Box4 extends Component {
     super();
     this.state = {
       map: [],
+      current: 1,
+      button: "new",
+      color: 0,
     };
     fetch(
-      "https://test-data.educoder.net/api/paths.json?sort=desc&order=new&page=1&limit=16&keyword=&discipline_id=&sub_discipline_id="
+      "https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
+        this.state.button +
+        "&page=" +
+        1 +
+        "&limit=16&keyword=&discipline_id=&sub_discipline_id="
     )
       .then((res) => res.json())
       .then((data) => {
-        console.log(data.subjects);
         this.setState({
           map: data.subjects,
         });
@@ -19,24 +25,141 @@ export default class Box4 extends Component {
   }
   render() {
     return (
-      <div className="kc_main_box4">
-        {this.state.map.map((item, index) => (
+      <div>
+        {console.log()}
+        <div className="kc_main_box3">
           <div
-            key={item.id}
-            className="kc_main_box4_box"
-            style={{ marginRight: index % 4 == 3 ? "0" : "" }}
+            className={
+              this.state.color === 0 ? "kc_main_box3_box1" : "kc_main_box3_box2"
+            }
+            onClick={this.handleClick_zuixin}
           >
-            <div className="kc_main_box4_box_shang">
-              <img
-                src={"https://testali-cdn.educoder.net/" + item.image_url}
-              ></img>
-            </div>
-            <div className="kc_main_box4_box_xia">
-              <div className="kc_main_box4_box_xia_box1">{item.name}</div>
-            </div>
+            最新
+          </div>
+          <div
+            className={
+              this.state.color === 1 ? "kc_main_box3_box1" : "kc_main_box3_box2"
+            }
+            onClick={this.handleClick_zuire}
+          >
+            最热
           </div>
-        ))}
+        </div>
+        <div className="kc_main_box4">
+          {this.state.map.map((item, index) => (
+            <div
+              key={item.id}
+              className="kc_main_box4_box"
+              style={{ marginRight: index % 4 == 3 ? "0" : "" }}
+            >
+              <div className="kc_main_box4_box_shang">
+                <img
+                  src={"https://testali-cdn.educoder.net/" + item.image_url}
+                ></img>
+              </div>
+              <div className="kc_main_box4_box_xia">
+                <div className="kc_main_box4_box_xia_box1">{item.name}</div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="kc_main_box5">
+          <button onClick={() => this.handleClick_shang(this.state.current)}>
+            上一页
+          </button>
+          <button
+            style={{ marginLeft: "8px" }}
+            onClick={() => this.handleClick_xia(this.state.current)}
+          >
+            下一页
+          </button>
+        </div>
       </div>
     );
   }
+  handleClick_zuixin = () => {
+    this.setState({
+      color: 0,
+      button: "new",
+      map: [],
+    });
+    var v = this.state.current;
+    var b = "new";
+    fetch(
+      "https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
+        b +
+        "&page=" +
+        v +
+        "&limit=16&keyword=&discipline_id=&sub_discipline_id="
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        this.setState({
+          map: data.subjects,
+        });
+      });
+  };
+  handleClick_zuire = () => {
+    this.setState({
+      color: 1,
+      button: "",
+      map: [],
+    });
+    var v = this.state.current;
+    var b = "";
+    fetch(
+      "https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
+        b +
+        "&page=" +
+        v +
+        "&limit=16&keyword=&discipline_id=&sub_discipline_id="
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        this.setState({
+          map: data.subjects,
+        });
+      });
+  };
+  handleClick_xia(v) {
+    this.setState({
+      current: this.state.current + 1,
+      map: [],
+    });
+    var b = this.state.button;
+    fetch(
+      "https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
+        b +
+        "&page=" +
+        (v + 1) +
+        "&limit=16&keyword=&discipline_id=&sub_discipline_id="
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        this.setState({
+          map: data.subjects,
+        });
+      });
+  }
+  handleClick_shang(v) {
+    this.setState({
+      current: this.state.current - 1,
+      map: [],
+    });
+    var b = this.state.button;
+    fetch(
+      "https://test-data.educoder.net/api/paths.json?sort=desc&order=" +
+        b +
+        "&page=" +
+        (v - 1) +
+        "&limit=16&keyword=&discipline_id=&sub_discipline_id="
+    )
+      .then((res) => res.json())
+      .then((data) => {
+        this.setState({
+          map: data.subjects,
+        });
+      });
+  }
 }

src/pages/shijiankecheng/shijiankecheng.css

@@ -187,7 +187,7 @@
     margin-left: auto;
     margin-right: auto;
 }
-.kc_main_box3_box{
+.kc_main_box3_box1{
     padding: 3px 11px;
     border: 1px;
     margin-right: 20px;
@@ -197,8 +197,15 @@
     background: #1890ff;
     color: white;
 }
-.kc_main_box3_right{
-
+.kc_main_box3_box2{
+    padding: 3px 11px;
+    border: 1px;
+    margin-right: 20px;
+    border-radius: 40px;
+    font-size: 14px;
+    float: left;
+    color: #999;
+    background: #eee;
 }
 
 
@@ -256,7 +263,7 @@
 .kc_main_box5{
     text-align: center;
     margin-bottom: 50px;
-    height: 100px;
+    height: auto;
 }
 .kc_main_box5 button{
     border-color: #d9d9d9;

src/pages/shijiankecheng/shijiankecheng.js

@@ -38,15 +38,8 @@ export default class Shijiankecheng extends Component {
           </div>
         </div>
         <Box2></Box2>
-        <div className="kc_main_box3">
-          <div className="kc_main_box3_box">最新</div>
-          <div className="kc_main_box3_box">最热</div>
-        </div>
+
         <Box4></Box4>
-        <div className="kc_main_box5">
-          <button>上一页</button>
-          <button style={{ marginLeft: "8px" }}>下一页</button>
-        </div>
         <Center6></Center6>
       </div>
     );

src/pages/shouye/component/tg_yunxinghuanjing/center2.js

@@ -34,7 +34,6 @@ export default class Center2 extends Component {
   };
 
   render() {
-    console.log("执行");
     return (
       <div className="center2">
         <h2 className="center2_box1">异质架构实践运行环境</h2>