Commit 44da469c by FE

ai course

parent e7c69717
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -137,6 +137,10 @@ ...@@ -137,6 +137,10 @@
transform: skewX(-20deg); transform: skewX(-20deg);
z-index: -1; z-index: -1;
} }
.tag[data-color="green"]:before {
background-color: #357345;
}
} }
.price { .price {
...@@ -146,6 +150,10 @@ ...@@ -146,6 +150,10 @@
color: #FF0002; color: #FF0002;
font-size: 12px; font-size: 12px;
&.price-group {
height: 30px;
}
.new-price { .new-price {
font-size: 18px; font-size: 18px;
} }
...@@ -157,11 +165,47 @@ ...@@ -157,11 +165,47 @@
} }
} }
.price-label {
position: relative;
width: 49px;
height: 14px;
margin: 5px 0 0 19px;
line-height: 14px;
background-color: #357345;
span {
font-size: 12px;
color: #fff;
}
&::before {
content: '';
position: absolute;
top: 0;
left: -14px;
border: 7px solid;
border-color: transparent #357345 #357345 transparent;
}
&::after {
content: '';
position: absolute;
top: 0;
right: -14px;
border: 7px solid;
border-color: #357345 transparent transparent #357345;
}
}
.status { .status {
text-align: left;
padding-left: 5px;
position: absolute; position: absolute;
left: 0;
bottom: 10px; bottom: 10px;
right: 0;
padding: 0 5px;
text-align: left;
.status-btn { .status-btn {
display: inline-block; display: inline-block;
...@@ -178,6 +222,30 @@ ...@@ -178,6 +222,30 @@
background-color: #FF8080; background-color: #FF8080;
} }
.to-group {
display: block;
width: 100%;
height: 22px;
border-radius: 11px;
box-sizing: border-box;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 22px;
background: linear-gradient(-90deg,rgba(235,22,18,1) 0%,rgba(255,0,2,1) 100%);
&[data-status="study"] {
background: #0099FF;
}
&[data-status="done"] {
border: 1px solid #090F08;
font-size: 12px;
color: #090F08;
background: #FEE41D;
}
}
.add-wish, .add-wish-success { .add-wish, .add-wish-success {
width: 88px; width: 88px;
margin-left: 5px; margin-left: 5px;
...@@ -214,6 +282,41 @@ ...@@ -214,6 +282,41 @@
.groupcourse .course-container { .groupcourse .course-container {
height: 195px; height: 195px;
} }
.groupcourse[data-stage="2"] .course-container {
height: 215px;
}
.progree-and-sale {
display: flex;
align-items: center;
justify-content: center;
padding-left: 5px;
}
.progress {
width: 90px;
height: 8px;
border-radius: 4px;
background-color: #E6E6E6;
}
.progress_bar {
display: block;
width: 10%;
height: 100%;
border-radius: 4px 0 0 4px;
background-color: #FF0002;
}
.sale-sum {
flex: 1;
margin: 0;
font-size: 12px;
color: #333;
text-align: center;
line-height: 1;
}
.ai-course__subtitle { .ai-course__subtitle {
width: 73px; width: 73px;
......
...@@ -24,7 +24,7 @@ export default class index extends Component { ...@@ -24,7 +24,7 @@ export default class index extends Component {
removable: 0, // 未拆宝箱的数量 removable: 0, // 未拆宝箱的数量
currentOpenId: 0, // 当前要拆的宝箱的队伍的ID currentOpenId: 0, // 当前要拆的宝箱的队伍的ID
treasure_stage: 0, // 宝箱的活动阶段 treasure_stage: 0, // 宝箱的活动阶段
active_stage: 0, // 整个活动的阶段 activity_stage: 0, // 整个活动的阶段
userInfoList: [], userInfoList: [],
userInfo: {}, userInfo: {},
isAppUpdate: false, isAppUpdate: false,
...@@ -112,6 +112,7 @@ export default class index extends Component { ...@@ -112,6 +112,7 @@ export default class index extends Component {
if (code === 200) { if (code === 200) {
// treasure_stage,宝箱阶段,0-不在活动时间,1-活动时间内 // treasure_stage,宝箱阶段,0-不在活动时间,1-活动时间内
this.setState({ this.setState({
activity_stage: data.activity_stage,
treasure_stage: data.treasure_stage treasure_stage: data.treasure_stage
}) })
} else { } else {
...@@ -121,7 +122,11 @@ export default class index extends Component { ...@@ -121,7 +122,11 @@ export default class index extends Component {
} }
render() { render() {
const {banner, removable, treasure_stage, currentOpenId} = this.state const {
banner,
activity_stage,
treasure_stage,
} = this.state
return ( return (
<div className={'year-index'}> <div className={'year-index'}>
<div className="banner-treasure"> <div className="banner-treasure">
...@@ -142,7 +147,7 @@ export default class index extends Component { ...@@ -142,7 +147,7 @@ export default class index extends Component {
} }
{/*课程*/} {/*课程*/}
<YearCourse currentOpenId={currentOpenId} removable={removable} isAppUpdate={this.state.isAppUpdate} /> <YearCourse stage={activity_stage} isAppUpdate={this.state.isAppUpdate} />
{/*好友加入队伍提醒;获得宝箱提醒;开售提醒弹窗,需要自取,注意修改文案*/} {/*好友加入队伍提醒;获得宝箱提醒;开售提醒弹窗,需要自取,注意修改文案*/}
{ {
......
...@@ -2,11 +2,42 @@ import React, { Component } from 'react'; ...@@ -2,11 +2,42 @@ import React, { Component } from 'react';
import './index.scss'; import './index.scss';
class CourseItem extends Component { class CourseItem extends Component {
constructor(props) {
super(props);
this.state = {
countdown: ''
}
}
componentDidMount() {
const { time } = this.props;
if(time) {
let date = time * 1000,
hours = 0,
minutes = 0,
seconds = 0;
setInterval(() => {
date -= 1000
hours = `${parseInt(date / (60 * 60 * 1000))}`.padStart(2, 0);
minutes = `${parseInt((date - hours * 3600000) / 60000)}`.padStart(2, 0);
seconds = `${parseInt((date - hours * 3600000 - minutes * 60000) / 1000)}`.padStart(2, 0);
this.setState({
countdown: `${hours}${minutes}${seconds}秒后结束`
});
}, 1000);
}
}
render() { render() {
const { image,toCourse,id} = this.props; const { image, toCourse, id} = this.props;
const { countdown } = this.state;
return ( return (
<div className="course-container"> <div className="course-container">
<div className="course__cover"> <div className="course__cover">
{
countdown &&
<p className="course__time">{countdown}</p>
}
<img src={image} alt="cover" onClick={() => toCourse(id)}/> <img src={image} alt="cover" onClick={() => toCourse(id)}/>
</div> </div>
{this.props.children} {this.props.children}
......
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
} }
.course__cover { .course__cover {
position: relative;
height: 108px; height: 108px;
padding: 4px 4px 0; padding: 4px 4px 0;
overflow: hidden; overflow: hidden;
...@@ -17,4 +18,18 @@ ...@@ -17,4 +18,18 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
}
.course__time {
position: absolute;
left: 4px;
top: 10px;
margin: 0;
height: 18px;
padding: 0 8px;
border-radius: 0 9px 9px 0;
font-size: 12px;
color: #fff;
line-height: 18px;
background-color: #F01D0E;
} }
\ 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