feat: 修改贡献榜和刷题榜

src/views/question-bank/components/contribution-list/index.jsx

@@ -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) => {
+    onChangeRanking = (index) => {
-        this.setState(
+        console.log(index, 'contribute index')
-            {
+
-                contributeType: type,
+        this.setState({
-                isLoading: true,
+            contributeType: index,
-            },
+        });
-            () => {
-                this.getContributeList();
-            }
-        );
     };
 
     /**
@@ -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}

src/views/question-bank/components/contribution-list/index.less

@@ -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;
-}

src/views/question-bank/components/practice-list/index.jsx

@@ -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;

src/views/question-bank/components/ranking-box/index.jsx

@@ -1,99 +1,108 @@
-import React from 'react';
+import React from 'react'
-import { Popover, Spin } from 'antd';
+import { Popover, Spin } from 'antd'
-import { debounce } from '@utils';
+import { debounce } from '@utils'
-import { imgObject, RankingTypeText, RankingTypeBtnText } from '../../constant';
+import { imgObject, RankingTypeText, RankingTypeBtnText } from '../../constant'
-import './index.less';
+import './index.less'
-import { message } from 'antd';
 
 const rankingBackImg = {
-    0: imgObject.ranking1Img,
+  0: imgObject.ranking1Img,
-    1: imgObject.ranking2Img,
+  1: imgObject.ranking2Img,
-    2: imgObject.ranking3Img,
+  2: imgObject.ranking3Img,
-};
+}
 
 export default function RankingBox(props) {
-    const { isLoading, currentActive, rankingList, rankingType } = props;
+  const { isLoading = false, currentActive, rankingType, contributionList } = props
-    const onChangeRanking = (type) =>
+  const onChangeRanking = (index) =>
-        debounce(() => {
+    debounce(() => {
-            props.onHandleRanking && props.onHandleRanking(type);
+      props.onHandleRanking && props.onHandleRanking(index)
-        });
+    })
-    const onJump = debounce(() => {
+  const onJump = debounce(() => {
-        message.destroy()
+    props.onHandleJump && props.onHandleJump()
-        return message.info('敬请期待')
+  })
-        props.onHandleJump && props.onHandleJump();
+  const tabList = [
-    });
+    {
-    return (
+      tab: '本月排行',
-        <div className="ranking-list-box">
+      key: 'month'
-            <div className="ranking-list-header">
+    },
-                <div className="ranking-list-title">{RankingTypeText[rankingType]}</div>
+    {
-                <div className="ranking-list-btns">
+      tab: '总榜',
-                    <div
+      key: 'total'
-                        onClick={onChangeRanking(1)}
+    }
-                        className={`ranking-list-btn ${currentActive === undefined || currentActive === 1
+  ]
-                            ? 'ranking-list-btn-active'
+  // 获得当前下标的数据
-                            : ''
+  let rankingList = contributionList || []
-                            }`}>
+
-                        本月排行
+  return (
-                    </div>
+    <div className="ranking-list-box">
-                    <div
+      <div className="ranking-list-header">
-                        onClick={onChangeRanking(2)}
+        <div className="ranking-list-title">{RankingTypeText[rankingType]}</div>
-                        className={`ranking-list-btn ${currentActive === 2 ? 'ranking-list-btn-active' : ''
+        <div className="ranking-list-btns">
-                            }`}>
+          {tabList.length > 0 &&
-                        总排行
+            tabList.map((item, index) => {
-                    </div>
+              return (
-                </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"
+                  key={`${rankingType}_${item.key}`}
-                    style={{
+                  onClick={onChangeRanking(index)}
-                        backgroundImage: `url(${imgObject.clickImg})`,
+                  className={`ranking-list-btn ${currentActive === index ? 'ranking-list-btn-active' : ''}`}
-                    }}></div>
+                >
-                <div className="ranking-btn-text">{RankingTypeBtnText[rankingType]}</div>
+                  {item.tab}
-            </div>
+                </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>
+  )
 }

src/views/question-bank/components/ranking-box/index.less

@@ -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: space-between;
-    justify-content: center;
+    align-items: center;
-    margin-bottom: 20px;
-    padding: 0px 16px 0px;
     width: 100%;
-    background-color: #ffffff;
+    height: 50px;
-    border-radius: 8px;
+    font-size: 16px;
-    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
+    color: rgba(0, 0, 0, 0.85);
-    .ranking-list-header {
+    border-bottom: 1px solid #f3f3f6;
-        display: flex;
+    .ranking-list-title {
-        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);
-            }
-        }
     }
-    .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-list-btns {
-                    .ranking-name {
+      display: flex;
-                        margin-bottom: 2px;
+      .ranking-list-btn {
-                        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;
+        align-items: center;
-        margin-top: 12px;
+        margin-right: 4px;
-        margin-bottom: 12px;
+        // width: 48px;
+        padding: 0 10px;
+        height: 30px;
+        font-size: 12px;
         cursor: pointer;
-        width: 230px;
+        transition: all 0.5s;
-        height: 36px;
+        &:last-child {
-        border-radius: 30px;
+          margin-right: 0px;
-        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;
+          // @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;
+  width: 0;
-    height: 0;
+  height: 0;
-    color: transparent;
+  color: transparent;
 }
 .tooltip-info {
-    font-size: 12px;
+  font-size: 12px;
 }
 .popover-img {
-    margin-left: 4px;
+  margin-left: 4px;
-    cursor: pointer;
+  cursor: pointer;
-    width: 16px;
+  width: 16px;
-    height: 16px;
+  height: 16px;
 }

src/views/question-bank/components/ranking-list/index.jsx

@@ -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;

src/views/question-bank/components/ranking-list/index.less

@@ -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;
-}

src/views/question-bank/constant.ts

@@ -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:

src/views/question-bank/index.tsx

@@ -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';