Skip to content

M
mr-julyedu
Commit 05c71f51 by zhanghaozhe
Options

学习页面

parent 4cf28a36
Showing with 159 additions and 128 deletions
package-lock.json
......@@ -8894,9 +8894,9 @@
}
},
"lodash": {
"version": "4.17.11",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
"integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
"version": "4.17.15",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
},
"lodash-es": {
"version": "4.17.11",
......
package.json
......@@ -43,7 +43,7 @@
"js-cookie": "^2.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"lodash": "^4.17.11",
"lodash": "^4.17.15",
"mini-css-extract-plugin": "0.5.0",
"node-sass": "^4.11.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
......
src/common/v-list-base/index.scss
.v-list-base-item {
height: 130px;
padding: 10px 10px 0;
position: relative;
.content {
display: flex;
......
src/components/study/myCourses/index.js
......@@ -114,22 +114,35 @@ class MyCourses extends PureComponent {
const Info = (
<div className="info">
<div className='title'>{item.course_title}</div>
<div className='contact'>QQ群：{item.course_qq}</div>
{/*<div className="process-status">
<div className="process-wrapper">
<div className="process-bar" style={{width: '50%'}}/>
{
item.is_aist
? <div className='contact'>助教微信：{item.assist_weixin}</div>
: <div className='contact'>QQ群：{item.course_qq}</div>
}
{
item.is_aist && item.aist_schedule &&
<div className="process-status">
<div className="process-wrapper">
<div className="process-bar"
style={{width: `${parseFloat(item.aist_schedule)}%`}}/>
</div>
<div className="process-text">{item.aist_schedule}</div>
</div>
<div className="process-text">50%</div>
</div>*/}
}
<Bottom item={item}/>
</div>
)
const status = (
item.is_aist && <span className='status'>返现</span>
)
return (
<VList img={item.image_name}
handleClick={this.handleClick}
{...item}
key={index}
info={Info}
status={status}
id={item['course_id']}
/>
)
......
src/components/study/myCourses/my-courses.scss
.info {
display: flex;
flex-wrap: wrap;
width: 55%;
.title {
font-size: 15px;
font-weight: 400;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.contact {
font-size: 13px;
color: $active;
flex: 0 1 auto;
width: 100%;
}
.process{
&-status{
display: flex;
justify-content: space-between;
align-items: center;
#study {
.info {
display: flex;
flex-wrap: wrap;
width: 55%;
.title {
font-size: 15px;
font-weight: 400;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&-wrapper{
position: relative;
width: 147px;
height: 6px;
background: #E5E5E5;
border-radius: 4px;
margin-right: 14px;
}
&-bar{
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: $active;
border-radius: 4px;
}
&-text{
.contact {
font-size: 13px;
color: $active;
font-size: 12px;
line-height: 15px;
flex: 0 1 auto;
width: 100%;
}
.process {
&-status {
display: flex;
justify-content: space-between;
align-items: center;
}
&-wrapper {
position: relative;
width: 147px;
height: 6px;
background: #E5E5E5;
border-radius: 4px;
margin-right: 14px;
}
&-bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: $active;
border-radius: 4px;
}
&-text {
color: $active;
font-size: 12px;
line-height: 15px;
}
}
}
.des {
color: $color_999;
font-size: 11px;
align-self: flex-end;
line-height: 1;
.des {
color: $color_999;
font-size: 11px;
align-self: flex-end;
line-height: 1;
.time {
margin-right: 10px;
.time {
margin-right: 10px;
}
}
}
.start-learn {
display: block;
box-sizing: border-box;
align-self: flex-end;
width: 78px;
height: 22px;
padding: 5px 14px;
-webkit-appearance: none;
outline: 0;
border: none;
background: $bg_active;
color: $white;
border-radius: 3px;
.start-learn {
display: block;
box-sizing: border-box;
align-self: flex-end;
width: 78px;
height: 22px;
padding: 5px 14px;
-webkit-appearance: none;
outline: 0;
border: none;
background: $bg_active;
color: $white;
border-radius: 3px;
}
}
}
.add-course {
padding: 10px 12px;
.add-course {
padding: 10px 12px;
button.add {
width: 150px;
height: 108px;
button.add {
width: 150px;
height: 108px;
font-size: 15px;
font-family: HiraginoSansGB-W3;
font-weight: normal;
color: $active;
font-size: 15px;
font-family: HiraginoSansGB-W3;
font-weight: normal;
color: $active;
border: 1px dashed $active;
background: transparent;
border: 1px dashed $active;
background: transparent;
}
}
}
.my-course-uid {
width: 375px;
height: 30px;
background: $bg_FFF4CE;
line-height: 30px;
text-align: center;
font-size: 12px;
color: $color_333;
}
.empty {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 140px;
background: $bg_f5f5f5;
.iconfish {
width: 20px;
height: 20px;
color: #1a4263;
.my-course-uid {
width: 375px;
height: 30px;
background: $bg_FFF4CE;
line-height: 30px;
text-align: center;
font-size: 12px;
color: $color_333;
}
.empty-prompt {
margin-bottom: 30px;
font-size: $font_12;
color: $color_666;
.empty {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 140px;
background: $bg_f5f5f5;
.iconfish {
width: 20px;
height: 20px;
color: #1a4263;
}
.empty-prompt {
margin-bottom: 30px;
font-size: $font_12;
color: $color_666;
}
.select-course {
display: block;
width: 131px;
height: 30px;
border: 1px solid $active;
border-radius: 15px;
background: transparent;
color: $active;
font-size: $font_16;
text-align: center;
line-height: 30px;
}
}
.select-course {
display: block;
width: 131px;
height: 30px;
border: 1px solid $active;
border-radius: 15px;
background: transparent;
color: $active;
font-size: $font_16;
text-align: center;
line-height: 30px;
.status {
position: absolute;
top: 0;
right: 0;
padding: 2px 6px;
border-radius: 11px 0 0 11px;
font-size: 14px;
color: #fff;
background: linear-gradient(to bottom, #FF4000, #FD7700);
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment