Skip to content

X
xiaomai-cloud-class-web
Commit 67f9a138 by zhangleyuan
Options

feat:调整首页的样式

parent ed837ed7
Showing with 62 additions and 58 deletions
src/modules/home/Home.jsx
...@@ -261,8 +261,9 @@ class Home extends React.Component { ...@@ -261,8 +261,9 @@ class Home extends React.Component {
}; };
return ( return (
<div className="home-page"> <div className="home-page">
<div className="home-title">数据概况</div> <div className="data-wrap">
<div className="data-box"> <div className="home-title">数据概况</div>
<div className="data-box">
<div className="data-item"> <div className="data-item">
<div className="header"> <div className="header">
<img className="header-icon" src="https://image.xiaomaiketang.com/xm/wAaFtjeRsM.png" /> <img className="header-icon" src="https://image.xiaomaiketang.com/xm/wAaFtjeRsM.png" />
...@@ -360,65 +361,67 @@ class Home extends React.Component { ...@@ -360,65 +361,67 @@ class Home extends React.Component {
</div> </div>
</div> </div>
</div> </div>
<div className="home-title">学习概况</div> </div>
<div className="study-box"> <div className="study-wrap">
<div className="study-item"> <div className="home-title">学习概况</div>
<div className="study-title">课程学习排行榜</div> <div className="study-box">
<div className="study-header"> <div className="study-item">
<div className="study-tab"> <div className="study-title">课程学习排行榜</div>
<span <div className="study-header">
className={`tab${scheduleType === 'LIVE' ? ' selected' : ''}`} <div className="study-tab">
onClick={() => this.setState({ scheduleType: 'LIVE' }, () => this.getHotCourse())} <span
>直播课</span> className={`tab${scheduleType === 'LIVE' ? ' selected' : ''}`}
<span onClick={() => this.setState({ scheduleType: 'LIVE' }, () => this.getHotCourse())}
className={`tab${scheduleType === 'VOICE' ? ' selected' : ''}`} >直播课</span>
onClick={() => this.setState({ scheduleType: 'VOICE' }, () => this.getHotCourse())} <span
>视频课</span> className={`tab${scheduleType === 'VOICE' ? ' selected' : ''}`}
<span onClick={() => this.setState({ scheduleType: 'VOICE' }, () => this.getHotCourse())}
className={`tab${scheduleType === 'PICTURE' ? ' selected' : ''}`} >视频课</span>
onClick={() => this.setState({ scheduleType: 'PICTURE' }, () => this.getHotCourse())} <span
>图文课</span> className={`tab${scheduleType === 'PICTURE' ? ' selected' : ''}`}
</div> onClick={() => this.setState({ scheduleType: 'PICTURE' }, () => this.getHotCourse())}
<div className="study-select"> >图文课</span>
<span className="select-word">（{moment().subtract(timeRange - 1, 'day').format('MM.DD')} ~ {moment().format('MM.DD')}）</span> </div>
<Select <div className="study-select">
style={{ width: 88 }} <span className="select-word">（{moment().subtract(timeRange - 1, 'day').format('MM.DD')} ~ {moment().format('MM.DD')}）</span>
value={timeRange} <Select
onChange={(value) => { style={{ width: 88 }}
this.setState({ timeRange: value }, () => this.getHotCourse()); value={timeRange}
}} onChange={(value) => {
> this.setState({ timeRange: value }, () => this.getHotCourse());
<Option value="7">近7天</Option> }}
<Option value="15">近15天</Option> >
<Option value="30">近30天</Option> <Option value="7">近7天</Option>
</Select> <Option value="15">近15天</Option>
</div> <Option value="30">近30天</Option>
</div> </Select>
{_.isEmpty(list) ? </div>
<div className="study-empty">
<img src="https://image.xiaomaiketang.com/xm/52dmait5Bx.png" />
<div>暂无课程上榜</div>
</div> </div>
: list.map((item, index) => ( {_.isEmpty(list) ?
<div className={`table-item${index % 2 ? '' : ' odd'}`} key={item.id}> <div className="study-empty">
{index < 3 ? <img src="https://image.xiaomaiketang.com/xm/52dmait5Bx.png" />
<span className="table-number"><img src={this.showNumber(index)} className="table-image" /></span> <div>暂无课程上榜</div>
: <span className="table-number">{index + 1}</span> </div>
} : list.map((item, index) => (
<div className="table-data"> <div className={`table-item${index % 2 ? '' : ' odd'}`} key={item.id}>
<div className="table-name"> {index < 3 ?
<Tooltip title={item.courseName}> <span className="table-number"><img src={this.showNumber(index)} className="table-image" /></span>
{item.courseName} : <span className="table-number">{index + 1}</span>
</Tooltip> }
<div className="table-data">
<div className="table-name">
<Tooltip title={item.courseName}>
{item.courseName}
</Tooltip>
</div>
<div className="table-tag">{item.categoryName}</div>
</div> </div>
<div className="table-tag">{item.categoryName}</div> <span className="table-study">{item.studyNum || 0}人已学习</span>
</div> </div>
<span className="table-study">{item.studyNum || 0}人已学习</span> ))
</div> }
)) </div>
} <div className="study-item">
</div>
<div className="study-item">
<div className="study-title">培训计划完成情况 <div className="study-title">培训计划完成情况
<Tooltip overlayClassName="data-plan-tooltip" title="若某人加入多个培训计划，则需完成所有已加入的培训计划后，才视为已完成培训"> <Tooltip overlayClassName="data-plan-tooltip" title="若某人加入多个培训计划，则需完成所有已加入的培训计划后，才视为已完成培训">
<span className="iconfont icon">&#xe61d;</span> <span className="iconfont icon">&#xe61d;</span>
...@@ -500,6 +503,7 @@ class Home extends React.Component { ...@@ -500,6 +503,7 @@ class Home extends React.Component {
<div className="word">完成培训</div> <div className="word">完成培训</div>
</div> </div>
</div> </div>
</div>
</div> </div>
<div className="study-chart"> <div className="study-chart">
<div className="study-title">学习人数与时长 <div className="study-title">学习人数与时长
......
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