parent
3cbca56431
commit
921f6be755
@ -0,0 +1,67 @@
|
||||
.height-60{
|
||||
line-height: 60px;
|
||||
height:60px;
|
||||
background:rgba(255,208,88,1);
|
||||
border-radius:4px 4px 0px 0px;
|
||||
}
|
||||
.height-40{
|
||||
line-height: 40px;
|
||||
height:40px;
|
||||
background:rgba(224,229,234,1);
|
||||
border-radius:4px 0px 0px 0px;
|
||||
}
|
||||
.height-20{
|
||||
line-height: 20px;
|
||||
height:20px;
|
||||
background:rgba(229,168,102,1);
|
||||
border-radius:0px 4px 0px 0px;
|
||||
}
|
||||
.Statisticscenter{
|
||||
text-align: center;
|
||||
}
|
||||
.Statisticscenter div:nth-child(1){
|
||||
margin-top: 5px;
|
||||
font-size:12px;
|
||||
color:rgba(51,51,51,1);
|
||||
}
|
||||
|
||||
.Statisticscenter div:nth-child(2){
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
color: rgba(153,153,153,1);
|
||||
}
|
||||
|
||||
.rankingss {
|
||||
text-align: center;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.rankingss a img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0px 0px 12px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.huangguans{
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
left: 72px;
|
||||
}
|
||||
|
||||
.relatives{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.statisticsTabs{
|
||||
padding: 30px;
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.statisticsTabs .ant-tabs-tab{
|
||||
height: 80px;
|
||||
text-align: center;
|
||||
line-height: 61px;
|
||||
font-size: 16px;
|
||||
color: rgba(80,145,255,1);
|
||||
}
|
||||
@ -0,0 +1,138 @@
|
||||
import React,{ Component } from "react";
|
||||
import {Table, Pagination,Tooltip,Spin, Row, Col ,Tabs} from "antd";
|
||||
import { WordsBtn,on, off, trigger } from 'educoder';
|
||||
import {BrowserRouter as Router,Route,Switch,Link} from 'react-router-dom';
|
||||
import axios from'axios';
|
||||
import './Statistics.css';
|
||||
const { TabPane } = Tabs;
|
||||
class Statistics extends Component{
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state={
|
||||
nd1:60,
|
||||
nd2:40,
|
||||
nd3:20
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.setState({
|
||||
isSpin:true,
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
callback=(key)=>{
|
||||
console.log(key);
|
||||
}
|
||||
|
||||
render(){
|
||||
let {nd1,nd2,nd3}=this.state;
|
||||
|
||||
return(
|
||||
<React.Fragment >
|
||||
<div>
|
||||
<div className="edu-back-white">
|
||||
<p className="clearfix padding30">
|
||||
<Row gutter={24}>
|
||||
<Col>
|
||||
明星学员
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row type="flex" justify="center" align="bottom">
|
||||
<Col span={3}>
|
||||
<li className="pr rankingss">
|
||||
<a href="https://test-newweb.educoder.net/users/cao_jl" className="color-dark">
|
||||
<img src="https://test-newweb.educoder.net/images/avatars/User/g"/>
|
||||
</a>
|
||||
</li>
|
||||
</Col>
|
||||
|
||||
<Col span={5}>
|
||||
<li className="pr rankingss">
|
||||
<a href="https://test-newweb.educoder.net/users/cao_jl" className="color-dark">
|
||||
<img src="https://test-newweb.educoder.net/images/avatars/User/g" className={"mb10"}/>
|
||||
</a>
|
||||
</li>
|
||||
<Col className={`height-${nd2}`}>
|
||||
|
||||
</Col>
|
||||
</Col>
|
||||
|
||||
<Col span={5} className={"relatives"}>
|
||||
<li className="pr rankingss">
|
||||
<img src="https://test-newweb.educoder.net/images/educoder/huangguan.png" className="huangguans mb5" />
|
||||
<a href="https://test-newweb.educoder.net/users/cao_jl" className="color-dark">
|
||||
<img src="https://test-newweb.educoder.net/images/avatars/User/g" className={"mb10"}/>
|
||||
</a>
|
||||
</li>
|
||||
<Col className={`height-${nd1}`}>
|
||||
|
||||
</Col>
|
||||
</Col>
|
||||
|
||||
<Col span={5}>
|
||||
<li className="pr rankingss">
|
||||
<a href="https://test-newweb.educoder.net/users/cao_jl" className="color-dark">
|
||||
<img src="https://test-newweb.educoder.net/images/avatars/User/g" className={"mb10"}/>
|
||||
</a>
|
||||
</li>
|
||||
<Col className={`height-${nd3}`}>
|
||||
|
||||
</Col>
|
||||
</Col>
|
||||
|
||||
<Col span={3}>
|
||||
<li className="pr rankingss">
|
||||
<a href="https://test-newweb.educoder.net/users/cao_jl" className="color-dark">
|
||||
<img src="https://test-newweb.educoder.net/images/avatars/User/g"/>
|
||||
</a>
|
||||
</li>
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
|
||||
|
||||
<Row className="mt10" type="flex" justify="center" align="bottom">
|
||||
<Col span={3} className={"Statisticscenter"}>
|
||||
<Col>威震江湖</Col>
|
||||
<Col>4th</Col>
|
||||
</Col>
|
||||
<Col span={5} className={"Statisticscenter"}>
|
||||
<Col>神魔遮天</Col>
|
||||
<Col>2th</Col>
|
||||
</Col>
|
||||
<Col span={5} className={"Statisticscenter"}>
|
||||
<Col>雄霸天下</Col>
|
||||
<Col>1th</Col>
|
||||
</Col>
|
||||
<Col span={5} className={"Statisticscenter"}>
|
||||
<Col>不灭战神</Col>
|
||||
<Col>3th</Col>
|
||||
</Col>
|
||||
<Col span={3} className={"Statisticscenter"}>
|
||||
<Col>霸气初现</Col>
|
||||
<Col>5th</Col>
|
||||
</Col>
|
||||
</Row>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt20 edu-back-white">
|
||||
<Tabs className="statisticsTabs" defaultActiveKey="1" onChange={this.callback}>
|
||||
<TabPane tab="学习成绩" key="1" className={"statisticsTabs1"}>
|
||||
Content of Tab Pane 1
|
||||
</TabPane>
|
||||
<TabPane tab="课堂活跃度" key="2">
|
||||
Content of Tab Pane 2
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default Statistics;
|
||||
Loading…
Reference in new issue