feat: 修改贡献榜和刷题榜
This commit is contained in:
秋水浮尘
@@ -1,21 +1,16 @@
|
||||
import React, { Fragment, Component } from 'react';
|
||||
// import { withRouter } from 'react-router-dom';
|
||||
import req from '@utils/request';
|
||||
import RankingBox from '../ranking-box';
|
||||
import { imgObject, apiName, RankingType } from '../../constant';
|
||||
import { apiName, RankingType } from '../../constant';
|
||||
import { mockRankingModuleList } from '../../mock';
|
||||
|
||||
const rankingBackImg = {
|
||||
0: imgObject.ranking1Img,
|
||||
1: imgObject.ranking2Img,
|
||||
2: imgObject.ranking3Img,
|
||||
};
|
||||
|
||||
class ContributionList extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
contributionList: mockRankingModuleList[1].rankingList || [],
|
||||
contributeType: 1,
|
||||
contributeType: 0,
|
||||
isLoading: false,
|
||||
};
|
||||
}
|
||||
@@ -28,13 +23,9 @@ class ContributionList extends Component {
|
||||
* 获得贡献榜
|
||||
*/
|
||||
getContributeList() {
|
||||
const { contributeType } = this.state;
|
||||
let params = {
|
||||
contributeType: contributeType,
|
||||
};
|
||||
req({
|
||||
method: 'post',
|
||||
data: params,
|
||||
data: {},
|
||||
url: apiName.getContributeList,
|
||||
})
|
||||
.then((res) => {
|
||||
@@ -55,19 +46,15 @@ class ContributionList extends Component {
|
||||
|
||||
/**
|
||||
* 切换排行榜
|
||||
* @param {*} type
|
||||
* @param {*} index
|
||||
* @returns
|
||||
*/
|
||||
onChangeRanking = (type) => {
|
||||
this.setState(
|
||||
{
|
||||
contributeType: type,
|
||||
isLoading: true,
|
||||
},
|
||||
() => {
|
||||
this.getContributeList();
|
||||
}
|
||||
);
|
||||
onChangeRanking = (index) => {
|
||||
console.log(index, 'contribute index')
|
||||
|
||||
this.setState({
|
||||
contributeType: index,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -84,7 +71,7 @@ class ContributionList extends Component {
|
||||
{contributionList?.length > 0 && (
|
||||
<RankingBox
|
||||
isLoading={isLoading}
|
||||
rankingList={contributionList}
|
||||
contributionList={contributionList}
|
||||
currentActive={contributeType}
|
||||
rankingType={RankingType.contribution}
|
||||
onHandleRanking={this.onChangeRanking}
|
||||
|
||||
@@ -1,151 +0,0 @@
|
||||
.ranking-list-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
padding: 0px 16px 0px;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
|
||||
.ranking-list-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
border-bottom: 1px solid #f3f3f6;
|
||||
.ranking-list-title {
|
||||
}
|
||||
|
||||
.ranking-list-btns {
|
||||
display: flex;
|
||||
.ranking-list-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 4px;
|
||||
width: 48px;
|
||||
height: 30px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s;
|
||||
&:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
&:hover {
|
||||
@include font-color();
|
||||
}
|
||||
}
|
||||
.ranking-list-btn-active {
|
||||
font-weight: 600;
|
||||
@include font-color();
|
||||
border-bottom: 1px solid rgba(60, 110, 238, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ranking-list {
|
||||
// height: 326px;
|
||||
// overflow-y: scroll;
|
||||
font-size: 14px;
|
||||
.ranking-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 12px 10px 6px;
|
||||
color: #999999;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
.ranking-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.ranking-icon {
|
||||
margin-right: 10px;
|
||||
// margin-top: 14px;
|
||||
width: 20px;
|
||||
height: 26px;
|
||||
line-height: 17px;
|
||||
text-align: center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.ranking-head-img {
|
||||
margin-right: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
|
||||
.ranking-head-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.ranking-info {
|
||||
.ranking-name {
|
||||
margin-bottom: 2px;
|
||||
color: #666666;
|
||||
}
|
||||
.ranking-department {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ranking-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #c3c3c6;
|
||||
}
|
||||
&:hover {
|
||||
@include box-backgroundColor(0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ranking-btn-go {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
width: 230px;
|
||||
height: 36px;
|
||||
border-radius: 30px;
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
|
||||
@include box-backgroundColor(0.9);
|
||||
.ranking-btn-go-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-size: 100% 100%;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.ranking-btn-text {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
&:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
}
|
||||
.tooltip-info {
|
||||
font-size: 12px;
|
||||
}
|
||||
.popover-img {
|
||||
margin-left: 4px;
|
||||
cursor: pointer;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
84
src/views/question-bank/components/practice-list/index.jsx
Normal file
84
src/views/question-bank/components/practice-list/index.jsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import React, { Fragment, Component } from 'react';
|
||||
import req from '@utils/request';
|
||||
import RankingBox from '../ranking-box';
|
||||
import { apiName, RankingType } from '../../constant';
|
||||
import { mockRankingModuleList } from '../../mock';
|
||||
|
||||
class PracticeList extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
contributionList: mockRankingModuleList[0].rankingList,
|
||||
contributeType: 0,
|
||||
isLoading: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
// this.getPracticeRankList();
|
||||
}
|
||||
|
||||
/**
|
||||
* 获得练习榜
|
||||
*/
|
||||
getPracticeRankList() {
|
||||
req({
|
||||
method: 'post',
|
||||
data: {},
|
||||
url: apiName.getPracticeRankList,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data && res.data.length > 0) {
|
||||
this.setState({
|
||||
contributionList: res.data,
|
||||
isLoading: false,
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
contributionList: [],
|
||||
isLoading: false,
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => console.log(err));
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换排行榜
|
||||
* @param {*} index
|
||||
* @returns
|
||||
*/
|
||||
onChangeRanking = (index) => {
|
||||
console.log(index, 'practice index')
|
||||
this.setState({
|
||||
contributeType: index,
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 去练题
|
||||
*/
|
||||
onChangeJump = () => {
|
||||
this.props.history.push('/practice-questions');
|
||||
};
|
||||
|
||||
render() {
|
||||
const { contributionList, isLoading, contributeType } = this.state;
|
||||
return (
|
||||
<Fragment>
|
||||
{contributionList?.length > 0 && (
|
||||
<RankingBox
|
||||
isLoading={isLoading}
|
||||
contributionList={contributionList}
|
||||
currentActive={contributeType}
|
||||
rankingType={RankingType.practice}
|
||||
onHandleRanking={this.onChangeRanking}
|
||||
onHandleJump={this.onChangeJump}
|
||||
/>
|
||||
)}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default PracticeList;
|
||||
@@ -1,99 +1,108 @@
|
||||
import React from 'react';
|
||||
import { Popover, Spin } from 'antd';
|
||||
import { debounce } from '@utils';
|
||||
import { imgObject, RankingTypeText, RankingTypeBtnText } from '../../constant';
|
||||
import './index.less';
|
||||
import { message } from 'antd';
|
||||
import React from 'react'
|
||||
import { Popover, Spin } from 'antd'
|
||||
import { debounce } from '@utils'
|
||||
import { imgObject, RankingTypeText, RankingTypeBtnText } from '../../constant'
|
||||
import './index.less'
|
||||
|
||||
const rankingBackImg = {
|
||||
0: imgObject.ranking1Img,
|
||||
1: imgObject.ranking2Img,
|
||||
2: imgObject.ranking3Img,
|
||||
};
|
||||
0: imgObject.ranking1Img,
|
||||
1: imgObject.ranking2Img,
|
||||
2: imgObject.ranking3Img,
|
||||
}
|
||||
|
||||
export default function RankingBox(props) {
|
||||
const { isLoading, currentActive, rankingList, rankingType } = props;
|
||||
const onChangeRanking = (type) =>
|
||||
debounce(() => {
|
||||
props.onHandleRanking && props.onHandleRanking(type);
|
||||
});
|
||||
const onJump = debounce(() => {
|
||||
message.destroy()
|
||||
return message.info('敬请期待')
|
||||
props.onHandleJump && props.onHandleJump();
|
||||
});
|
||||
return (
|
||||
<div className="ranking-list-box">
|
||||
<div className="ranking-list-header">
|
||||
<div className="ranking-list-title">{RankingTypeText[rankingType]}</div>
|
||||
<div className="ranking-list-btns">
|
||||
<div
|
||||
onClick={onChangeRanking(1)}
|
||||
className={`ranking-list-btn ${currentActive === undefined || currentActive === 1
|
||||
? 'ranking-list-btn-active'
|
||||
: ''
|
||||
}`}>
|
||||
本月排行
|
||||
</div>
|
||||
<div
|
||||
onClick={onChangeRanking(2)}
|
||||
className={`ranking-list-btn ${currentActive === 2 ? 'ranking-list-btn-active' : ''
|
||||
}`}>
|
||||
总排行
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Spin spinning={isLoading}>
|
||||
<div className="ranking-list">
|
||||
{rankingList?.length > 0 &&
|
||||
rankingList.map((item, index) => {
|
||||
return (
|
||||
<div className="ranking-item" key={item.id}>
|
||||
<div className="ranking-left">
|
||||
<div
|
||||
className="ranking-icon"
|
||||
style={{
|
||||
backgroundImage: `url(${rankingBackImg[index]})`,
|
||||
}}>
|
||||
{index + 1}
|
||||
</div>
|
||||
<div className="ranking-head-img">
|
||||
<img src={item.headImg} className="ranking-head-icon" />
|
||||
</div>
|
||||
<Popover
|
||||
title={
|
||||
<div>
|
||||
{item.name}
|
||||
</div>
|
||||
}
|
||||
content={
|
||||
<div className="tooltip-info">
|
||||
<div>{item.erp}</div>
|
||||
<div>{item.organizationFullName}</div>
|
||||
</div>
|
||||
}>
|
||||
<div className="ranking-info">
|
||||
<div className="ranking-name">{item.name}</div>
|
||||
<div className="ranking-department">
|
||||
{item.organizationName}
|
||||
</div>
|
||||
</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div className="ranking-right">🔥 {item.count}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Spin>
|
||||
<div className="ranking-btn-go" onClick={onJump}>
|
||||
const { isLoading = false, currentActive, rankingType, contributionList } = props
|
||||
const onChangeRanking = (index) =>
|
||||
debounce(() => {
|
||||
props.onHandleRanking && props.onHandleRanking(index)
|
||||
})
|
||||
const onJump = debounce(() => {
|
||||
props.onHandleJump && props.onHandleJump()
|
||||
})
|
||||
const tabList = [
|
||||
{
|
||||
tab: '本月排行',
|
||||
key: 'month'
|
||||
},
|
||||
{
|
||||
tab: '总榜',
|
||||
key: 'total'
|
||||
}
|
||||
]
|
||||
// 获得当前下标的数据
|
||||
let rankingList = contributionList || []
|
||||
|
||||
return (
|
||||
<div className="ranking-list-box">
|
||||
<div className="ranking-list-header">
|
||||
<div className="ranking-list-title">{RankingTypeText[rankingType]}</div>
|
||||
<div className="ranking-list-btns">
|
||||
{tabList.length > 0 &&
|
||||
tabList.map((item, index) => {
|
||||
return (
|
||||
<div
|
||||
className="ranking-btn-go-icon"
|
||||
style={{
|
||||
backgroundImage: `url(${imgObject.clickImg})`,
|
||||
}}></div>
|
||||
<div className="ranking-btn-text">{RankingTypeBtnText[rankingType]}</div>
|
||||
</div>
|
||||
key={`${rankingType}_${item.key}`}
|
||||
onClick={onChangeRanking(index)}
|
||||
className={`ranking-list-btn ${currentActive === index ? 'ranking-list-btn-active' : ''}`}
|
||||
>
|
||||
{item.tab}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
<Spin spinning={isLoading}>
|
||||
<div className="ranking-list">
|
||||
{rankingList?.length > 0 &&
|
||||
rankingList.map((item, index) => {
|
||||
return (
|
||||
<div className="ranking-item" key={item.id}>
|
||||
<div className="ranking-left">
|
||||
<div
|
||||
className="ranking-icon"
|
||||
style={{
|
||||
backgroundImage: `url(${index <= 2 ? rankingBackImg[index] : imgObject.rankingImg})`,
|
||||
}}
|
||||
>
|
||||
{index > 2 && index + 1}
|
||||
</div>
|
||||
<div className="ranking-head-img">
|
||||
<img src={item.headImg} className="ranking-head-icon" />
|
||||
</div>
|
||||
<Popover
|
||||
title={
|
||||
<div>
|
||||
{item.name}
|
||||
</div>
|
||||
}
|
||||
content={
|
||||
<div className="tooltip-info">
|
||||
<div>{item.name}</div>
|
||||
{/* <div>{item.organizationFullName}</div> */}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="ranking-info">
|
||||
<div className="ranking-name">{item.name}</div>
|
||||
{/* <div className="ranking-department">{item.organizationName}</div> */}
|
||||
</div>
|
||||
</Popover>
|
||||
</div>
|
||||
<div className="ranking-right">🔥 {item.count}</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Spin>
|
||||
<div className="ranking-btn-go" onClick={onJump}>
|
||||
<div
|
||||
className="ranking-btn-go-icon"
|
||||
style={{
|
||||
backgroundImage: `url(${imgObject.clickImg})`,
|
||||
}}
|
||||
></div>
|
||||
<div className="ranking-btn-text">{RankingTypeBtnText[rankingType]}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,150 +1,155 @@
|
||||
// @import '@assets/style/mixin.scss';
|
||||
.ranking-list-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: 0 0 20px 16px;
|
||||
padding: 0px 16px 0px;
|
||||
width: 310px;
|
||||
max-height: 416px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
|
||||
.ranking-list-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
padding: 0px 16px 0px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
|
||||
.ranking-list-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
border-bottom: 1px solid #f3f3f6;
|
||||
|
||||
.ranking-list-btns {
|
||||
display: flex;
|
||||
.ranking-list-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 4px;
|
||||
padding: 0 8px;
|
||||
// width: 48px;
|
||||
height: 30px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s;
|
||||
&:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
&:hover {
|
||||
// @include font-color();
|
||||
}
|
||||
}
|
||||
.ranking-list-btn-active {
|
||||
font-weight: 600;
|
||||
// @include font-color();
|
||||
border-bottom: 1px solid rgba(60, 110, 238, 1);
|
||||
}
|
||||
}
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
border-bottom: 1px solid #f3f3f6;
|
||||
.ranking-list-title {
|
||||
}
|
||||
.ranking-list {
|
||||
// height: 326px;
|
||||
// overflow-y: scroll;
|
||||
font-size: 14px;
|
||||
.ranking-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 12px 10px 6px;
|
||||
color: #999999;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
.ranking-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.ranking-icon {
|
||||
margin-right: 10px;
|
||||
// margin-top: 14px;
|
||||
width: 20px;
|
||||
height: 26px;
|
||||
line-height: 17px;
|
||||
text-align: center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.ranking-head-img {
|
||||
margin-right: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
|
||||
.ranking-head-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.ranking-info {
|
||||
.ranking-name {
|
||||
margin-bottom: 2px;
|
||||
color: #666666;
|
||||
}
|
||||
.ranking-department {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ranking-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #c3c3c6;
|
||||
}
|
||||
&:hover {
|
||||
@include box-backgroundColor(0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ranking-btn-go {
|
||||
.ranking-list-btns {
|
||||
display: flex;
|
||||
.ranking-list-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
align-items: center;
|
||||
margin-right: 4px;
|
||||
// width: 48px;
|
||||
padding: 0 10px;
|
||||
height: 30px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
width: 230px;
|
||||
height: 36px;
|
||||
border-radius: 30px;
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
|
||||
background-color: rgba(60, 110, 238, 0.9);
|
||||
.ranking-btn-go-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-size: 100% 100%;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.ranking-btn-text {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
transition: all 0.5s;
|
||||
&:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
&:hover {
|
||||
font-weight: bold;
|
||||
// @include font-color();
|
||||
}
|
||||
}
|
||||
.ranking-list-btn-active {
|
||||
font-weight: 600;
|
||||
// @include font-color();
|
||||
border-bottom: 1px solid rgba(60, 110, 238, 1);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ranking-list {
|
||||
font-size: 14px;
|
||||
.ranking-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 12px 10px 6px;
|
||||
color: #999999;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
.ranking-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.ranking-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 8px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.ranking-head-img {
|
||||
margin-right: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
|
||||
.ranking-head-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.ranking-info {
|
||||
.ranking-name {
|
||||
margin-bottom: 2px;
|
||||
color: #666666;
|
||||
}
|
||||
.ranking-department {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ranking-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #c3c3c6;
|
||||
}
|
||||
&:hover {
|
||||
// @include box-backgroundColor(0.05);
|
||||
background-color: rgba(60, 110, 238, 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ranking-btn-go {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
width: 230px;
|
||||
height: 36px;
|
||||
border-radius: 30px;
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
|
||||
background-color: rgba(60, 110, 238, 0.9);
|
||||
// @include box-backgroundColor(0.9);
|
||||
.ranking-btn-go-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-size: 100% 100%;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.ranking-btn-text {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
&:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
}
|
||||
.tooltip-info {
|
||||
font-size: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.popover-img {
|
||||
margin-left: 4px;
|
||||
cursor: pointer;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 4px;
|
||||
cursor: pointer;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
@@ -1,109 +0,0 @@
|
||||
import React, { Fragment, Component } from 'react';
|
||||
|
||||
import req from '@utils/request';
|
||||
import { mockRankingModuleList } from '../../mock';
|
||||
import { imgObject, apiName, RankingType } from '../../constant';
|
||||
import RankingBox from '../ranking-box';
|
||||
|
||||
const rankingBackImg = {
|
||||
0: imgObject.ranking1Img,
|
||||
1: imgObject.ranking2Img,
|
||||
2: imgObject.ranking3Img,
|
||||
};
|
||||
class RankingList extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
moduleList: [],
|
||||
contributeType: 2,
|
||||
isLoading: true,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.getContributeList();
|
||||
}
|
||||
|
||||
/**
|
||||
* 获得贡献榜
|
||||
*/
|
||||
getContributeList() {
|
||||
// let params = {
|
||||
// contributeType: this.contributeType,
|
||||
// };
|
||||
// req({
|
||||
// method: 'post',
|
||||
// data: params,
|
||||
// url: apiName.getContributeList,
|
||||
// })
|
||||
// .then((res) => {
|
||||
// if (res.data && res.data.length > 0) {
|
||||
// this.setState(
|
||||
// {
|
||||
// firstCategoryList: res.data,
|
||||
// isShowSpin: false,
|
||||
// },
|
||||
// () => {
|
||||
// this.getInterviewSubjectList();
|
||||
// }
|
||||
// );
|
||||
// } else {
|
||||
// this.primaryCategoryId = '';
|
||||
// this.setState({
|
||||
// isShowSpin: false,
|
||||
// });
|
||||
// }
|
||||
// })
|
||||
// .catch((err) => console.log(err));
|
||||
|
||||
this.setState({
|
||||
moduleList: mockRankingModuleList[0].rankingList,
|
||||
isLoading: false,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换排行榜
|
||||
* @param {*} type
|
||||
* @returns
|
||||
*/
|
||||
onChangeRanking = (type, index) => () => {
|
||||
let { moduleList } = this.state;
|
||||
moduleList[index].currentActive = type;
|
||||
this.setState(
|
||||
{
|
||||
moduleList,
|
||||
isLoading: true,
|
||||
},
|
||||
() => {
|
||||
this.getData();
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
onJump = (e) => () => {
|
||||
if (e === 2) {
|
||||
this.props.history.push('/upload-questions');
|
||||
} else {
|
||||
this.props.history.push('/practice-questions');
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { moduleList, isLoading, contributeType } = this.state;
|
||||
return (
|
||||
<Fragment>
|
||||
<RankingBox
|
||||
isLoading={isLoading}
|
||||
rankingList={moduleList}
|
||||
currentActive={contributeType}
|
||||
rankingType={RankingType.practice}
|
||||
onHandleRanking={this.onChangeRanking}
|
||||
onHandleJump={this.onChangeJump}
|
||||
/>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default RankingList;
|
||||
@@ -1,151 +0,0 @@
|
||||
.ranking-list-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
padding: 0px 16px 0px;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
|
||||
.ranking-list-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
border-bottom: 1px solid #f3f3f6;
|
||||
.ranking-list-title {
|
||||
}
|
||||
|
||||
.ranking-list-btns {
|
||||
display: flex;
|
||||
.ranking-list-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 4px;
|
||||
width: 48px;
|
||||
height: 30px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s;
|
||||
&:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
&:hover {
|
||||
@include font-color();
|
||||
}
|
||||
}
|
||||
.ranking-list-btn-active {
|
||||
font-weight: 600;
|
||||
@include font-color();
|
||||
border-bottom: 1px solid rgba(60, 110, 238, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ranking-list {
|
||||
// height: 326px;
|
||||
// overflow-y: scroll;
|
||||
font-size: 14px;
|
||||
.ranking-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 12px 10px 6px;
|
||||
color: #999999;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
.ranking-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.ranking-icon {
|
||||
margin-right: 10px;
|
||||
// margin-top: 14px;
|
||||
width: 20px;
|
||||
height: 26px;
|
||||
line-height: 17px;
|
||||
text-align: center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.ranking-head-img {
|
||||
margin-right: 4px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
|
||||
.ranking-head-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.ranking-info {
|
||||
.ranking-name {
|
||||
margin-bottom: 2px;
|
||||
color: #666666;
|
||||
}
|
||||
.ranking-department {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ranking-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #c3c3c6;
|
||||
}
|
||||
&:hover {
|
||||
@include box-backgroundColor(0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ranking-btn-go {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
width: 230px;
|
||||
height: 36px;
|
||||
border-radius: 30px;
|
||||
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
|
||||
@include box-backgroundColor(0.9);
|
||||
.ranking-btn-go-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-size: 100% 100%;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.ranking-btn-text {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
&:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
}
|
||||
.tooltip-info {
|
||||
font-size: 12px;
|
||||
}
|
||||
.popover-img {
|
||||
margin-left: 4px;
|
||||
cursor: pointer;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
@@ -75,11 +75,13 @@ export const imgObject = {
|
||||
clickImg:
|
||||
'https://img13.360buyimg.com/imagetools/jfs/t1/222669/25/807/6590/617f4f06Eb2094586/64c39ce3769b8a16.png',
|
||||
ranking1Img:
|
||||
'https://img14.360buyimg.com/imagetools/jfs/t1/206730/39/7751/986/617f4fbaE4e23097a/aa94ca31a9c132b2.png',
|
||||
'https://img12.360buyimg.com/imagetools/jfs/t1/110906/3/22471/3750/6214a3bfE392596cf/122c9e4b30948682.png',
|
||||
ranking2Img:
|
||||
'https://img10.360buyimg.com/imagetools/jfs/t1/156125/21/27968/948/617f4fbaEcf1da9a9/722ad0917497697a.png',
|
||||
'https://img13.360buyimg.com/imagetools/jfs/t1/211695/8/12987/4360/6214a3bfEd4679fde/4f3c55783bb9119c.png',
|
||||
ranking3Img:
|
||||
'https://img12.360buyimg.com/imagetools/jfs/t1/213197/17/2682/958/617f4fbbE06c277a9/03ef4c389c52ab8d.png',
|
||||
'https://img10.360buyimg.com/imagetools/jfs/t1/175261/19/28428/4566/6214a3bfE476e1b0f/ea59084c55001c06.png',
|
||||
rankingImg:
|
||||
'https://img11.360buyimg.com/imagetools/jfs/t1/167264/35/27633/603/6214a3bfEf8feff1d/8d833235e6bc468d.png',
|
||||
timeline:
|
||||
'https://img13.360buyimg.com/imagetools/jfs/t1/210387/35/7564/555/617f4fbbE0cb305c1/728913d21e650794.png',
|
||||
backAllImg:
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useSearchParams } from 'react-router-dom'
|
||||
import QuestionList from '@components/question-list';
|
||||
import CategoryList from '@components/category-list';
|
||||
import ContributionList from './components/contribution-list';
|
||||
import RankingList from './components/ranking-list'
|
||||
import RankingList from './components/practice-list'
|
||||
import { apiName } from './constant';
|
||||
import req from '@utils/request';
|
||||
import { Spin } from 'antd';
|
||||
|
||||
Reference in New Issue
Block a user