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