feat: 刷题页面
This commit is contained in:
秋水浮尘
96
src/views/question-bank/components/ranking-box/index.jsx
Normal file
96
src/views/question-bank/components/ranking-box/index.jsx
Normal file
@@ -0,0 +1,96 @@
|
||||
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,
|
||||
};
|
||||
|
||||
export default function RankingBox(props) {
|
||||
const { isLoading, currentActive, rankingList, rankingType } = props;
|
||||
const onChangeRanking = (type) =>
|
||||
debounce(() => {
|
||||
props.onHandleRanking && props.onHandleRanking(type);
|
||||
});
|
||||
const onJump = debounce(() => {
|
||||
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}>
|
||||
<div
|
||||
className="ranking-btn-go-icon"
|
||||
style={{
|
||||
backgroundImage: `url(${imgObject.clickImg})`,
|
||||
}}></div>
|
||||
<div className="ranking-btn-text">{RankingTypeBtnText[rankingType]}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
149
src/views/question-bank/components/ranking-box/index.less
Normal file
149
src/views/question-bank/components/ranking-box/index.less
Normal file
@@ -0,0 +1,149 @@
|
||||
.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-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);
|
||||
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;
|
||||
}
|
||||
&: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;
|
||||
}
|
||||
Reference in New Issue
Block a user