Skip to content

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

feat:调整首页的样式

parent ed837ed7
Showing with 312 additions and 286 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">学习人数与时长
......
src/modules/home/Home.less
...@@ -9,282 +9,304 @@ ...@@ -9,282 +9,304 @@
.home-title { .home-title {
height: 44px; height: 44px;
line-height: 44px; line-height: 44px;
color: #999; color: #333;
padding-left:28px;
font-size:16px;
font-weight:bold;
position: relative;
&::before{
width:4px;
height:12px;
content:'';
background-image: linear-gradient(#2966FF 83.5%, #0ACCA4 16.5%);
display:inline-block;
position: absolute;
left:16px;
top:16px;
}
} }
@font-face { @font-face {
font-family: 'number'; font-family: 'number';
src: url('https://image.xiaomaiketang.com/xm/n2sADd2jY6.TTF'); src: url('https://image.xiaomaiketang.com/xm/n2sADd2jY6.TTF');
} }
.data-box { .data-wrap{
display: flex; background: #FFF;
justify-content: space-between; .data-box {
.data-item { display: flex;
position: relative; justify-content: space-between;
height: 156px; .data-item {
background: #fff; position: relative;
width: ~'calc(16.67% - 8px)'; height: 156px;
padding: 16px; background: #fff;
&.course-data { width: ~'calc(16.67% - 8px)';
width: ~'calc(50% - 24px)'; padding: 16px;
} &.course-data {
.header { width: ~'calc(50% - 24px)';
display: flex;
.header-icon {
width: 18px;
height: 18px;
margin-right: 4px;
}
.header-word {
display: inline-block;
font-size: 12px;
line-height: 18px;
color: #999;
}
}
.data-number {
font-family: 'number';
font-size: 28px;
color: #333;
margin-top: 24px;
}
.data-footer {
margin-top: 12px;
.footer-word {
font-size: 12px;
color: #999;
margin-right: 8px;
} }
.iconfont { .header {
font-size: 12px; display: flex;
margin-right: 4px; .header-icon {
color: #EC4B35; width: 18px;
height: 18px;
margin-right: 4px;
}
.header-word {
display: inline-block;
font-size: 12px;
line-height: 18px;
color: #999;
}
} }
.footer-number { .data-number {
font-size: 12px; font-family: 'number';
color: #999; font-size: 28px;
color: #333;
margin-top: 24px;
} }
} .data-footer {
.course-box { margin-top: 12px;
border-radius: 4px; .footer-word {
background: #FAFAFA;
height: 124px;
width: 66%;
position: absolute;
right: 16px;
top: 16px;
padding: 8px 24px 0;
.course-item {
display: inline-block;
width: 50%;
padding: 4px 0 12px;
.course-title {
font-size: 12px; font-size: 12px;
color: #999; color: #999;
margin-right: 8px;
} }
.data { .iconfont {
display: flex; font-size: 12px;
align-items: flex-end; margin-right: 4px;
.course-number { color: #EC4B35;
font-size: 16px; }
font-family: 'number'; .footer-number {
margin-right: 16px; font-size: 12px;
} color: #999;
.course-word { }
}
.course-box {
border-radius: 4px;
background: #FAFAFA;
height: 124px;
width: 66%;
position: absolute;
right: 16px;
top: 16px;
padding: 8px 24px 0;
.course-item {
display: inline-block;
width: 50%;
padding: 4px 0 12px;
.course-title {
font-size: 12px; font-size: 12px;
color: #999; color: #999;
margin-right: 8px;
}
.iconfont {
font-size: 12px;
margin-right: 4px;
color: #EC4B35;
} }
.add-number { .data {
font-size: 12px; display: flex;
color: #999; align-items: flex-end;
.course-number {
font-size: 16px;
font-family: 'number';
margin-right: 16px;
}
.course-word {
font-size: 12px;
color: #999;
margin-right: 8px;
}
.iconfont {
font-size: 12px;
margin-right: 4px;
color: #EC4B35;
}
.add-number {
font-size: 12px;
color: #999;
}
} }
} }
} }
} }
} }
} }
.study-box { .study-wrap{
display: flex; background: #FFF;
justify-content: space-between; margin-top:16px;
.study-item { .study-box {
position: relative; display: flex;
height: 414px; justify-content: space-between;
background: #fff; .study-item {
width: ~'calc(50% - 8px)'; position: relative;
padding: 16px; height: 414px;
.study-title { background: #fff;
font-size: 16px; width: ~'calc(50% - 8px)';
color: #333; padding: 16px;
font-weight: 500; .study-title {
line-height: 22px; font-size: 16px;
margin-bottom: 12px; color: #333;
.iconfont { font-weight: 500;
font-size: 14px; line-height: 22px;
color: #BFBFBF; margin-bottom: 12px;
margin-left: 4px; .iconfont {
} font-size: 14px;
.tip { color: #BFBFBF;
font-size: 14px; margin-left: 4px;
color: #999999; }
margin-left: 8px; .tip {
font-weight: 400; font-size: 14px;
color: #999999;
margin-left: 8px;
font-weight: 400;
}
} }
} .study-header {
.study-header { display: flex;
display: flex; justify-content: space-between;
justify-content: space-between; margin-bottom: 16px;
margin-bottom: 16px; .study-tab {
.study-tab { .tab {
.tab { position: relative;
position: relative; padding-right: 24px;
padding-right: 24px; color: #666;
color: #666; cursor: pointer;
cursor: pointer; &.selected {
&.selected { color: #2966FF;
color: #2966FF; &::after {
&::after { position: absolute;
position: absolute; width: 24px;
width: 24px; height: 2px;
height: 2px; content: '';
content: ''; background: #2966FF;
background: #2966FF; border-radius: 1px;
border-radius: 1px; left: 9px;
left: 9px; bottom: -4px;
bottom: -4px; }
} }
} }
} }
.study-select {
.select-word {
color: #999;
margin-right: 8px;
}
}
} }
.study-select { .table-item {
.select-word { width: 100%;
height: 60px;
display: flex;
align-items: center;
&.odd {
background: #FAFAFA;
}
.table-image {
width: 24px;
height: 24px;
}
.table-number {
width: 15%;
color: #999; color: #999;
margin-right: 8px; padding: 0 16px;
text-align: center;
} }
} .table-data {
} width: 55%;
.table-item { padding: 0 16px;
width: 100%; .table-name {
height: 60px; color: #333;
display: flex; line-height: 20px;
align-items: center; margin-bottom: 2px;
&.odd { white-space: nowrap;
background: #FAFAFA; text-overflow: ellipsis;
} overflow: hidden;
.table-image { }
width: 24px; .table-tag {
height: 24px; line-height: 17px;
} color: #999;
.table-number { font-size: 12px;
width: 15%; }
color: #999;
padding: 0 16px;
text-align: center;
}
.table-data {
width: 55%;
padding: 0 16px;
.table-name {
color: #333;
line-height: 20px;
margin-bottom: 2px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
} }
.table-tag { .table-study {
line-height: 17px; width: 30%;
color: #999; color: #999;
font-size: 12px; padding: 0 16px;
} }
} }
.table-study { .study-empty {
width: 30%; margin-top: 102px;
color: #999; img {
padding: 0 16px; display: block;
} width: 100px;
} height: 100px;
.study-empty { margin: 0 auto 8px;
margin-top: 102px; }
img { div {
display: block; text-align: center;
width: 100px; color: #333;
height: 100px; }
margin: 0 auto 8px;
}
div {
text-align: center;
color: #333;
} }
} .circle-box {
.circle-box { width: 70%;
width: 70%; height: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.big-circle {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 204px; .big-circle {
height: 204px;
border-radius: 102px;
background: #F1F3F6;
margin-top: -20px;
.small-circle {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 124px; width: 204px;
height: 124px; height: 204px;
border-radius: 62px; border-radius: 102px;
background: #fff; background: #F1F3F6;
.tip-box { margin-top: -20px;
text-align: center; .small-circle {
display: flex;
align-items: center;
justify-content: center;
width: 124px;
height: 124px;
border-radius: 62px;
background: #fff;
.tip-box {
text-align: center;
}
} }
} }
} }
} .circle-tip {
.circle-tip { position: absolute;
position: absolute; left: 70%;
left: 70%; padding-left: 16px;
padding-left: 16px; &.unfinished {
&.unfinished { top: 152px;
top: 152px; .spot {
.spot { background: #2966FF;
background: #2966FF; }
}
&.finished {
top: 232px;
.spot {
background: #FFBB54;
}
} }
}
&.finished {
top: 232px;
.spot { .spot {
background: #FFBB54; position: absolute;
width: 8px;
height: 8px;
border-radius: 4px;
top: 20px;
left: 0;
}
.number {
color: #333;
font-size: 16px;
margin-bottom: 2px;
}
.word {
color: #999;
} }
}
.spot {
position: absolute;
width: 8px;
height: 8px;
border-radius: 4px;
top: 20px;
left: 0;
}
.number {
color: #333;
font-size: 16px;
margin-bottom: 2px;
}
.word {
color: #999;
} }
} }
} }
} }
.study-chart { .study-chart {
width: 100%; width: 100%;
height: 432px; height: 432px;
......
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