From bbcd701863368068af97eaefa7a697c61dca192b Mon Sep 17 00:00:00 2001 From: Jzx201211 <1595536662@qq.com> Date: Thu, 10 Mar 2022 18:48:25 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AB=A0=E8=8A=82=E8=AF=A6=E6=83=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/shijiankecheng/box4.js | 10 +- .../shijiankecheng/kecheng xiangqing/path.js | 94 +++++++++++++++++++ .../kecheng xiangqing/zhangjie.js | 38 ++++++++ src/pages/shijiankecheng/shijiankecheng.css | 82 ++++++++++++++++ src/pages/shijiankecheng/shijiankecheng.js | 73 ++++++++------ 5 files changed, 267 insertions(+), 30 deletions(-) create mode 100644 src/pages/shijiankecheng/kecheng xiangqing/path.js create mode 100644 src/pages/shijiankecheng/kecheng xiangqing/zhangjie.js diff --git a/src/pages/shijiankecheng/box4.js b/src/pages/shijiankecheng/box4.js index 1e8a9495..a5d84517 100644 --- a/src/pages/shijiankecheng/box4.js +++ b/src/pages/shijiankecheng/box4.js @@ -21,6 +21,7 @@ export default class Box4 extends Component { ) .then((res) => res.json()) .then((data) => { + console.log(data.subjects); this.setState({ map: data.subjects, }); @@ -54,10 +55,13 @@ export default class Box4 extends Component {
{this.state.map.map((item, index) => ( -
{ + this.props.event(item.identifier); + }} key={item.id} className="kc_main_box4_box" - style={{ marginRight: index % 4 == 3 ? "0" : "" }} + style={{ color: "black", marginRight: index % 4 == 3 ? "0" : "" }} >
- + ))} { diff --git a/src/pages/shijiankecheng/kecheng xiangqing/path.js b/src/pages/shijiankecheng/kecheng xiangqing/path.js new file mode 100644 index 00000000..92df07bd --- /dev/null +++ b/src/pages/shijiankecheng/kecheng xiangqing/path.js @@ -0,0 +1,94 @@ +import React, { Component } from "react"; +import Zhangjie from "./zhangjie"; + +export default class Path extends Component { + state = { + list: [], + list2: [], + url: "", + }; + componentDidMount() { + fetch( + "https://test-data.educoder.net/api/paths/" + + this.props.id + + ".json?identifier=" + + this.props.id + ) + .then((res) => res.json()) + .then((data) => { + console.log(data); + this.setState({ + list: data, + }); + }); + + fetch( + "https://test-data.educoder.net/api/paths/" + + this.props.id + + ".json?identifier=" + + this.props.id + ) + .then((res) => res.json()) + .then((data) => { + console.log(data.attachments); + this.setState({ + list2: data.attachments, + }); + }); + } + render() { + return ( +
+
+
{this.state.list.name}
+
+
+ 章节 +

{this.state.list.stages_count}

+
+
+ 实训 +

{this.state.list.shixuns_count}

+
+
+ 选择题关卡 +

{this.state.list.challenge_choose_count}

+
+
+ 实践关卡 +

{this.state.list.challenges_count}

+
+
+ 视频 +

{this.state.list.videos_count}

+
+
+ 参与人数 +

{this.state.list.member_count}

+
+
+
+
+
+
+ + 课程介绍 +
+
{this.state.list.description}
+
+
+
课程章节
+
排行榜
+
证书申请
+
+
+ +
+
+
+ ); + } +} diff --git a/src/pages/shijiankecheng/kecheng xiangqing/zhangjie.js b/src/pages/shijiankecheng/kecheng xiangqing/zhangjie.js new file mode 100644 index 00000000..a83e8657 --- /dev/null +++ b/src/pages/shijiankecheng/kecheng xiangqing/zhangjie.js @@ -0,0 +1,38 @@ +import React, { Component } from "react"; +import "../shijiankecheng.css"; + +export default class Zhangjie 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 ( +
+ {this.state.list.map((item) => ( +
+
+
{item.stage_name}
+
{item.stage_description}
+ + {/* {item.stage_name} + {item.stage_description} */} +
+
+ ))} +
+ ); + } +} diff --git a/src/pages/shijiankecheng/shijiankecheng.css b/src/pages/shijiankecheng/shijiankecheng.css index f6b2f14d..6448afcd 100644 --- a/src/pages/shijiankecheng/shijiankecheng.css +++ b/src/pages/shijiankecheng/shijiankecheng.css @@ -1,3 +1,6 @@ +*{ + +} .kc_main{ width: 100%; height: auto; @@ -297,4 +300,83 @@ color: rgba(0, 0, 0, 0.85); background: #fff; border-color: #d9d9d9; +} +.path{ + width: 1200px; + height: auto; + margin: 0 auto; +} +.path_top{ + padding-top: 35px; + height: 225px; +} +.path_top_box{ + font-size: 28px; +} +.path_top_box2{ + display: flex; + + text-align: center; + font-size: 14px; +} +.path_top_box2_box{ + margin-right: 30px; + +} + +.left{ + width: 66.7%; +} +.left_one{ + padding: 40px 20px; + background-color: #fff; + width: 100%; +} +.left_one_box1{ + margin-bottom: 20px; + display: flex; + align-items: center; + font-size: 16px; + font-weight: bold; +} +.left_one_box2{ + +} +.left_two{ + height: 76px; + width: 100%; + margin: 0; + display: flex; +} +.left_two_box{ + padding: 8px 0; + align-items: center; + font-size: 16px; + margin-right: 50px; + line-height: 60px; +} +.left_three{ + width: 100%; + +} +.zhangjie{ + margin-top: 20px; + padding-top: 30px; + padding-bottom: 20px; + height: auto; + width: 100%; +} +.zhangjie_wenzi{ + width: 100%; + padding: 10px 2.5px; + font-size: 18px; + color: #333; + text-align:left; + padding-left: 20px; +} +.zhangjie_wenzi_box{ + width: 100%; + padding: 10px 2.5px; + font-size: 18px; + } \ No newline at end of file diff --git a/src/pages/shijiankecheng/shijiankecheng.js b/src/pages/shijiankecheng/shijiankecheng.js index 96ae68df..ba47f86e 100644 --- a/src/pages/shijiankecheng/shijiankecheng.js +++ b/src/pages/shijiankecheng/shijiankecheng.js @@ -3,42 +3,61 @@ import "./shijiankecheng.css"; import Center6 from "../shouye/component/tg_dibu/center6"; import Box4 from "./box4"; +import Path from "./kecheng xiangqing/path"; export default class Shijiankecheng extends Component { + state = { + scan: true, + id: "", + }; + handleevent(evt) { + this.setState({ + scan: false, + id: evt, + }); + } render() { return (
-
- -
-
-
- 实践课程 - 实践型MOOC，让您的在线课程更专业 -
-
- - 新建课程 + {this.state.scan && ( +
+ +
+
+
+ 实践课程 + 实践型MOOC，让您的在线课程更专业 +
+
+ + 新建课程 +
+
+ + 新手指引 +
-
- - 新手指引 -
-
-
-
- - -
- -
- +
+
+ + +
+ +
+ +
-
- - + )} + {this.state.scan && ( + { + this.handleevent(evt); + }} + > + )} + {!this.state.scan && }
);