pu428f3pz
/
InternshipProject
1
0
Fork 2
Code Issues Pull Requests Releases Wiki Activity

改

Browse Source
dev_jzx
Jzx201211 4 years ago
parent a2ca28a0f0
commit dee8c115d7
3 changed files with 144 additions and 51 deletions
Show Stats Download Patch File Download Diff File

127
src/pages/shijiankecheng/kecheng xiangqing/path.js
Unescape View File

@ -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>
);

28
src/pages/shijiankecheng/kecheng xiangqing/zhangjie.js
Unescape View File

@ -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>
);
}

40
src/pages/shijiankecheng/shijiankecheng.css
Unescape View File

@ -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;
}
}
.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;
}

Write Preview
Loading…
Cancel
Save