From dee8c115d7db63514df786e609bdf97a89618898 Mon Sep 17 00:00:00 2001
From: Jzx201211 <1595536662@qq.com>
Date: Fri, 11 Mar 2022 16:00:55 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shijiankecheng/kecheng xiangqing/path.js  | 127 ++++++++++++------
 .../kecheng xiangqing/zhangjie.js             |  28 +++-
 src/pages/shijiankecheng/shijiankecheng.css   |  40 +++++-
 3 files changed, 144 insertions(+), 51 deletions(-)

diff --git a/src/pages/shijiankecheng/kecheng xiangqing/path.js b/src/pages/shijiankecheng/kecheng xiangqing/path.js
index 92df07bd..4fd581e4 100644
--- a/src/pages/shijiankecheng/kecheng xiangqing/path.js	
+++ b/src/pages/shijiankecheng/kecheng xiangqing/path.js	
@@ -1,6 +1,11 @@
 import React, { Component } from "react";
 import Zhangjie from "./zhangjie";
 
+const bgImg = {
+  bg: {
+    backgroundImage: 'url("")',
+  },
+};
 export default class Path extends Component {
   state = {
     list: [],
@@ -34,59 +39,97 @@ export default class Path extends Component {
         this.setState({
           list2: data.attachments,
         });
+        this.setState({
+          url: "https://test-data.educoder.net" + this.state.list2[0].url,
+        });
+        console.log(this.state.url);
       });
   }
+  // style={{backgroundImage:this.state.list2!=[]?`url("https://test-data.educoder.net"${this.state.list2[0].url})`:''}}
   render() {
     return (
       <div className="path">
-        <div className="path_top">
-          <div className="path_top_box">{this.state.list.name}</div>
-          <div className="path_top_box2">
-            <div className="path_top_box2_box">
-              <span>章节</span>
-              <p>{this.state.list.stages_count}</p>
-            </div>
-            <div className="path_top_box2_box">
-              <span>实训</span>
-              <p>{this.state.list.shixuns_count}</p>
-            </div>
-            <div className="path_top_box2_box">
-              <span>选择题关卡</span>
-              <p>{this.state.list.challenge_choose_count}</p>
-            </div>
-            <div className="path_top_box2_box">
-              <span>实践关卡</span>
-              <p>{this.state.list.challenges_count}</p>
-            </div>
-            <div className="path_top_box2_box">
-              <span>视频</span>
-              <p>{this.state.list.videos_count}</p>
-            </div>
-            <div className="path_top_box2_box">
-              <span>参与人数</span>
-              <p>{this.state.list.member_count}</p>
+        <div
+          className="path_box"
+          style={{
+            backgroundImage: `url(${this.state.url})`,
+            paddingBottom: "70px",
+          }}
+        >
+          <div className="path_top">
+            <div className="path_top_box">{this.state.list.name}</div>
+            <div className="path_top_box2">
+              <div className="path_top_box2_box">
+                <span>章节</span>
+                <p>{this.state.list.stages_count}</p>
+              </div>
+              <div className="path_top_box2_box">
+                <span>实训</span>
+                <p>{this.state.list.shixuns_count}</p>
+              </div>
+              <div className="path_top_box2_box">
+                <span>选择题关卡</span>
+                <p>{this.state.list.challenge_choose_count}</p>
+              </div>
+              <div className="path_top_box2_box">
+                <span>实践关卡</span>
+                <p>{this.state.list.challenges_count}</p>
+              </div>
+              <div className="path_top_box2_box">
+                <span>视频</span>
+                <p>{this.state.list.videos_count}</p>
+              </div>
+              <div className="path_top_box2_box">
+                <span>参与人数</span>
+                <p>{this.state.list.member_count}</p>
+              </div>
             </div>
           </div>
         </div>
-        <div className="left">
-          <div className="left_one">
-            <div className="left_one_box1">
-              <img
-                style={{ marginRight: "10px" }}
-                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAO9JREFUOBFj3H//P8ePj//a/jMyRDH8/y/uZcDCyAAEoZP//QfRxAHG54yMDIv+izHUsYANY/hfyECCdkxL/kv+/89QzviKkYGFgZEhGpdhEvwMDJNiwQ6Gm5G3+D/Di49wLgoDaGgc0///QIdSDfyXZKKaWVCDiDLwxUeQN4kLZBZ8LgSGCcP2i/8Zlh6HqIq2/A9MCPh0MAAjBQ94+YmBYf5hhAJkNkIUlUWUl1G14OeNGog/fIiRHQ1DYkIJvxomRgbG5/iVkCLL+BxoIMMiUrTgUwsqtVlkWZnqHv/+Bypj44BZXxKfBtxyiCoAAHADSWb7p5YAAAAAAElFTkSuQmCC"
-              ></img>
-              课程介绍
+        <div className="path_body" style={{ display: "flex" }}>
+          <div className="left">
+            <div className="left_one">
+              <div className="left_one_box1">
+                <img
+                  style={{ marginRight: "10px" }}
+                  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAO9JREFUOBFj3H//P8ePj//a/jMyRDH8/y/uZcDCyAAEoZP//QfRxAHG54yMDIv+izHUsYANY/hfyECCdkxL/kv+/89QzviKkYGFgZEhGpdhEvwMDJNiwQ6Gm5G3+D/Di49wLgoDaGgc0///QIdSDfyXZKKaWVCDiDLwxUeQN4kLZBZ8LgSGCcP2i/8Zlh6HqIq2/A9MCPh0MAAjBQ94+YmBYf5hhAJkNkIUlUWUl1G14OeNGog/fIiRHQ1DYkIJvxomRgbG5/iVkCLL+BxoIMMiUrTgUwsqtVlkWZnqHv/+Bypj44BZXxKfBtxyiCoAAHADSWb7p5YAAAAAAElFTkSuQmCC"
+                ></img>
+                课程介绍
+              </div>
+              <div className="left_one_box2">{this.state.list.description}</div>
             </div>
-            <div className="left_one_box2">{this.state.list.description}</div>
-          </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">
             <Zhangjie id={this.props.id}></Zhangjie>
           </div>
+          <div className="right">
+            <div className="right_top">
+              <div className="right_top_box1">
+                <img
+                  style={{ marginRight: "10px" }}
+                  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAAv9JREFUSA2dVV1IVEEU/s7sqkuiUAahgREkQVjmS0FEBRWELz1Yj5ZSJBEaVm8RBOFbQSZIQUU9hFT4EqRuBdIP0oOia5lIZBRZoBWYy+a6O3M6s3DxXrurez1wOeee+b7zzZ05dwYIaD0x3dk9rNsD0hAOSgBjDwHTQXmBhZgwB7A8wcwjFI1xYYiw7sA2mshWJqRUHSkkso3b/LMPXJHOw9eaCko6OOUE1muY1pQx490xPuLOO3HZLV7b8BJz9X1QNnbybt8zok/plBlHwlxw5z1CIajbIMwQm87no1xugZeZVVkbN5S28YD5i2mTxmDmkdjm1t/geoux2O5hrpY9vCnhJOWrBzbnmOyr12T5Kg3M8UixunSyF8WJeXQxY7cX5X0jwmvZu9rH+5CeZXMxn1TH4uX/T8gpsfkOF83E0S8zrHRyS3rCu5Iwdo2eobgfzrN0bsCfWVzLWcQSGVt/p4WTxXy/aEM7b0wafBRyKAvPP03QBQoVX5ro82JA+MUYl+h5bKIwkge3IEZELCK1gUVsZZlYhgtcZWmQ6Ai2y5fk6VUYU6mkeaVZv02n9FDviD5m8TJYbf1KzOFGY6bFsB60tSmhn4SJ1HnA7JTZJCMR9TRTnFGyEhE315B6KHUjIhxWpPrCh6qoVwD2WTDCLxFemVmuWE0VfRPX6hTx7TrRGHIAQX02rq+QdE6XbJQOKmI5Ga4P0VfIticx7vrgl0xZjl9rW5KvkB1Yk4dzMsP3Ns7JBFtcBGksf8sqZI+Swnzsl3PsjT91IWsxFjt+gmYXst4oq5CFfTpNU43N2BtSaJBig16q/G+Ss2MWY7GLx93v0ua5W+YOSiFzfUAutu+N9DNXdk5C5R28Op1GnRQtcBc2QFwV4L4ILnnjWo7nKncXccc6jcPGoM2dc2Kex4TEUec9m8/pi44+4lD/FHbInxVxF9KM+I+zGLAHsTvvF+ck5BBLr3OL3KRNcjyxNMGVyWa654wt53NaOqeIzColcVL+L1nJTOwMLev/AaJkF76u7DFoAAAAAElFTkSuQmCC"
+                ></img>
+                课程须知
+              </div>
+              <div className="right_top_box2">
+                {this.state.list.learning_notes}
+              </div>
+            </div>
+            <div className="right_top">
+              <div
+                style={{
+                  fontSsize: "16px",
+                  display: "flex",
+                  alignItems: "center",
+                }}
+              >
+                <img
+                  style={{ marginRight: "10px" }}
+                  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAWCAYAAADTlvzyAAAAAXNSR0IArs4c6QAAA+JJREFUSA2dVltslEUUPmf+f7cXt+oKRKzVtCoICbARtVEJIA+mQiMaI00UXuCBRCT2AZPGaCJvWjUmQowPSBpN+kK8RKVNCIZLorIEVEqFmABVgxsuspi2wHZ3Z+f4za7/9r9sSe0k7Zz55pzzzZzL7M80zdHaJ7fnx+g9EeokptkklGGm/geX0PZDq1hP0w1MpzHm7pA5LLQfZKka6t/MaqZ1p7q4UGMvArkRBMC+IWnTpvC4EMeEzI+bD9NWoZpk1nzt1Yu0cXB44js27qMlY+pE0fAzqfjPtXxHCPcOFZdr0tuIlWOvfyXnnBWmTQjh1MNQtynSBVaynhFnROOFgZP6y84lbl/YSPmBPackAeBVOHc8vP8MuVgnvHWtGQdacO66ygT2jDw/eKLwUADDIkDYmNePIU/1fqWR626V3I8HZMT+eBYHCw3AHSEoSEjKzA0rzLuNcmGs1np+MnY5jDNJcxgL3NBRztWwwsuLdAy1PBbGQ+uRpclCJOwiEvEXINTaBPMAr66hFSieSPL9hErRVyLc7sfKsnL+CmMBwtzZ2K9EcsmvBLL2jpZiP4rvhh+vyrj9ylbqU8RPVzFPKBX3e6I3Bwi7uriE8O3yNu2MbuCuB/hZiBuwV/Lv4RATsxto/YZ79eZwsQnJt51LG/7061s5QGiBzlT8qGL+3MresC/MruV6HP2108PsjHZ4+532UhzifX4cUTl9PBX7xI95coTQbhjhBk/Bzqi20fGSm4UwJ4ALzUPLHqVQcaBY6lb+QfYgkYHDTI69JwsPs+GXgMyvoHLpWsF8/dqxullaUw9uumBSuyIhrMcScerdsayUE0OrEcrW/2z/IaW+uJw9v2/jqrYJz65MODh0o0UoZl+YhXYDoctlS/xpzw/OQuSwG0QtnsFUM4h/g7N3P1qhf4+zbIKXZFlXZIwV716Tih2wax4YlkeopF+HXAmByLm3foqlM9fofZDdXTb6H/9AfLolSVu2L9YdSMFizxSHObQ65X7AAycKH4O3fAPE/sK2tDo8mnc+g2LN/HoObjbb6r2jXq/pbZcX8Zjf5emyMT3WaeXqEFjR7rG88wbEGZNZ57ZFsjn3TXbUgF1XB6ukwo/JLziRwUlyrxyI5RHGch6rSjMXnjyYkcn3FalicjOVoknLrbq+cM+W7+MJVGN65hw+S/RSoo4WfbiMGuONdOap+3nU7pYJfWrUvFOeM4a2olKfwG0D/ejXm0qGQ/upkcaj0HuxmwfDehFCT2HdHnGO/E1tukhJx6Em9FgTctOEz4cmtM8t+BOkwn485TCPk6Er+Nk+n7yTRm72ffMvtr1U/uTpxS8AAAAASUVORK5CYII="
+                ></img>
+                教学团队
+              </div>
+            </div>
+            <div className="right_buttom"></div>
+          </div>
         </div>
       </div>
     );
diff --git a/src/pages/shijiankecheng/kecheng xiangqing/zhangjie.js b/src/pages/shijiankecheng/kecheng xiangqing/zhangjie.js
index 1c26bb90..4082dbc8 100644
--- a/src/pages/shijiankecheng/kecheng xiangqing/zhangjie.js	
+++ b/src/pages/shijiankecheng/kecheng xiangqing/zhangjie.js	
@@ -21,14 +21,28 @@ export default class Zhangjie extends Component {
   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>
+        <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>
             </div>
-          </div>
-        ))}
+          ))}
+        </div>
       </div>
     );
   }
diff --git a/src/pages/shijiankecheng/shijiankecheng.css b/src/pages/shijiankecheng/shijiankecheng.css
index 6448afcd..a3972527 100644
--- a/src/pages/shijiankecheng/shijiankecheng.css
+++ b/src/pages/shijiankecheng/shijiankecheng.css
@@ -302,11 +302,20 @@
     border-color: #d9d9d9;
 }
 .path{
-    width: 1200px;
     height: auto;
+    width: 100%;
+}
+.path_box{
+    height: auto;
+    width: 100%;
+}
+.path_body{
+    width: 1200px;
     margin: 0 auto;
 }
 .path_top{
+    width: 1200px;
+    margin: 0 auto;
     padding-top: 35px;
     height: 225px;
 }
@@ -379,4 +388,31 @@
     padding: 10px 2.5px;
     font-size: 18px;
     
-}
\ No newline at end of file
+}
+.right{
+    width: 400px;
+    top: 180px;
+    margin-left: 15px;
+    
+}
+.right_top{
+    top: -70px;
+    padding: 20px 25px;
+    background-color: #ffffff;
+    margin-bottom: 10px;
+    border-radius: 15px;
+    position: relative;
+    box-shadow: 0px 2px 30px 0px rgba(0, 0, 0, 0.05);
+}
+.right_top_box1{
+    margin-top: 15px;
+    margin-bottom: 30px;
+    display: flex;
+    align-items: center;
+    font-size: 16px
+}
+.right_top_box2{
+    font-size: 16px;
+    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;
+}