feat: 修改刷题

src/views/brush-questions/constant.ts

@@ -0,0 +1,9 @@
+export const good = {
+    0:'未点赞',
+    1:'已点赞',
+}
+
+export const collection={
+    0:'未收藏',
+    1:'已收藏',
+}

src/views/brush-questions/index.less

@@ -0,0 +1,160 @@
+
+.brush-questions-box {
+    width: 1439px;
+    margin: 0 auto;
+    // display: flex;
+    background-color: #fff;
+    padding: 20px 50px;
+    border-radius: 5px;
+    flex-direction: column;
+    overflow: auto;
+    .brush-questions-box,
+    .question-box {
+        // display: flex;
+        // flex: 1;
+        flex-direction: column;
+        overflow-y: auto;
+        background-color: #fff;
+        border-radius: 8px;
+        // position: relative;
+        .question,
+        .question-content {
+            display: flex;
+            // flex: 1;
+            .question-type,
+            .question-number {
+                display: flex;
+                flex: 1;
+                align-items: center;
+            }
+        }
+    }
+}
+// .answer-box{
+
+// }
+.question-box {
+    margin-bottom: 10px;
+}
+.question {
+    margin-bottom: 20px;
+}
+.question-type {
+    // padding-left: 50px;
+    color: rgba(60, 110, 238, 1) !important;
+    font-size: 16px;
+}
+.question-number {
+    justify-content: right;
+    // padding-right: 50px;
+    color: rgba(60, 110, 238, 1) !important;
+    font-size: 16px;
+    font-weight: 600;
+    // padding:2px 10px;
+}
+.question-content {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    // padding: 20px 0 20px 30px;
+    // border-bottom:1px dashed #000
+    line-height: 35px;
+    margin-top: 50px;
+    margin-bottom: 10px;
+    .difficulty {
+        margin-right: 10px;
+        padding: 0 10px;
+        border-radius: 4px;
+        background-color: rgba(60, 110, 238, 0.3) !important;
+    }
+}
+.reference-answer {
+    color: rgba(60, 110, 238, 0.8) !important;
+    font-size: 14px;
+    padding: 20px 0 10px 0px;
+}
+.answer-content {
+    background-color: rgba(60, 110, 238, 0.2) !important;
+    padding: 15px;
+    font-size: 14px;
+    line-height: 35px;
+    border-radius: 6px;
+    margin-bottom: 5px;
+}
+.answer-box {
+    border-radius: 0px;
+    border-top: 1px dashed #e4e4e4;
+    border-bottom: 1px dashed #e4e4e4;
+}
+.change-question-box {
+    display: flex;
+}
+
+.right {
+    display: flex;
+    flex: 1;
+    margin: 10px 0 10px 700px;
+}
+
+// .question-number-box{
+//     position:absolute;right:0px;
+// }
+// .right{
+//     position:absolute;right:0px;
+// }
+.jump-question {
+    margin: 0 auto;
+    text-align: center;
+}
+// .answer-box,.question-box{
+//     display: flex;
+//     flex: 1;
+//     overflow-y: auto;
+//     border-radius: 8px;
+//     // position: relative;
+//     background-color: rgb(84, 169, 248);
+//     font-size: 20px;
+//     height: auto;
+//     min-height:200px;
+// }
+.last,
+.next {
+    // background-color: rgba(60, 110, 238,1) !important;
+    margin: 0px 15px 15px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    width: 110px;
+    height: 46px;
+    // color: white
+}
+// .question-type-box,.question-number-box {
+//     height: 200px;
+//     line-height: 200px;
+//     font-size: 30px;
+//     font-weight: bold;
+//     color: rgb(84, 169, 248);
+// }
+// .word{
+//     font-size: 20px;
+//     font-weight: bold;
+//     color: rgb(84, 169, 248);
+// }
+.last:active,
+.next:active {
+    background-color: rgba(60, 110, 238, 1) !important;
+}
+.number {
+    width: 35px;
+    height: 35px;
+    line-height: 35px;
+    border-radius: 50%;
+    background-color: rgba(60, 110, 238, 1) !important;
+    color: white;
+    text-align: center;
+}
+.all-number {
+    color: #34495e;
+}
+.type {
+    padding: 2px 10px;
+}

src/views/brush-questions/index.tsx

@@ -0,0 +1,191 @@
+import { Pagination, Button, Modal, Input, Radio, message } from 'antd'
+import React, { Component, Fragment } from 'react'
+import { queryParse } from '@utils'
+import GoodCollectionError from '@components/good-collection-error'
+import './index.less'
+import req from '@utils/request'
+
+export default class BrushQuestions extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      isGood: 0,
+      isCollection: 0,
+      index: 1,
+      question: [{
+        id: 1, labelNames: ["原理"], subjectName: 'JDK 和 JRE 有什么区别？', difficulty: 1,
+        subjectAnswer: `<p>JDK：Java Development Kit 的简称，Java 开发工具包，提供了 Java 的开发环境和运行环境。</p>
+          <p>JRE：Java Runtime Environment 的简称，Java 运行环境，为 Java 的运行提供了所需环境。</p>
+          <p>具体来说 JDK 其实包含了 JRE，同时还包含了编译 Java 源码的编译器 Javac，还包含了很多 Java 程序调试和分析的工具。</p>
+          <p>简单来说：如果你需要运行 Java 程序，只需安装 JRE 就可以了，如果你需要编写 Java 程序，需要安装 JDK。</p>` }],
+      // answer: '',
+      isModal: false, //是否显示纠错弹框
+      value: 1, //纠错类型对应值
+      inputValue: '', //纠错详情内容
+    }
+  }
+  pageIndex = 1
+  total = 0
+  assembleIds: string[] = [] // 选中的标签列表
+  difficulty = 0 //困难度（全部）
+  primaryCategoryId = '' //第一个大类id
+  grade: Record<string, string> = {
+    1: '初级',
+    2: '中级',
+    3: '高级',
+    4: '资深',
+    5: '专家',
+  }
+  goodCollectionError = GoodCollectionError | null
+  componentDidMount() {
+    // const urlParams = queryParse(this.props.location.search)
+    const urlParams = {
+      index: 1,
+      difficulty: 1,
+      primaryCategoryId: '1',
+      labelList: '1,2,3,4'
+    }
+    this.pageIndex = Number(urlParams.index)
+    this.difficulty = urlParams.difficulty //困难度（全部）
+    this.primaryCategoryId = urlParams.primaryCategoryId //第一个大类id
+    this.assembleIds = !!urlParams.labelList ? urlParams.labelList.split(',') : []
+    // this.getInterviewSubjectList()
+  }
+  async getInterviewSubjectList() {
+    let params = {
+      pageInfo: {
+        pageIndex: this.pageIndex,
+        pageSize: 1,
+      },
+      difficulty: this.difficulty,
+      primaryCategoryId: this.primaryCategoryId,
+      assembleIds: this.assembleIds,
+    }
+    return await req({
+      method: 'post',
+      data: params,
+      url: '/admin/question/subject/getSubjectList',
+    })
+      .then((res) => {
+        if (res.data && res.data?.pageList?.length > 0) {
+          this.total = res.data.pageInfo.total
+          this.setState(
+            {
+              question: res.data.pageList,
+            },
+            () => {
+              this.goodCollectionError.getDetail()
+            }
+          )
+        }
+      })
+      .catch((err) => console.log(err))
+  }
+
+  onChangePagination = async (pageIndex) => {
+    this.pageIndex = pageIndex
+    this.setState({ index: pageIndex })
+    // await this.getInterviewSubjectList()
+  }
+
+  handleNextQuestion = async (value) => {
+    let { index } = this.state
+    this.pageIndex += value
+    index += value
+    this.setState({
+      index: index,
+    })
+    // await this.getInterviewSubjectList()
+  }
+
+  render() {
+    const { index, question } = this.state
+    return (
+      <div className="brush-questions-box">
+        <div className="question-box">
+          <div className="question">
+            <div className="question-type">
+              <div className="number">{index}</div>
+              <div className="type">问答题</div>
+            </div>
+            {/* <div className="question-number">
+              <div className="now-number">{index}</div>
+              <div className="all-number">/{this.total}</div>
+            </div> */}
+          </div>
+        </div>
+        <Fragment>
+          {question.map((item, index) => {
+            return (
+              <div key={index}>
+                <div className="question-content">
+                  <div className="difficulty">
+                    {this.grade[item.difficulty]}-{item.labelNames.join('、')}
+                  </div>
+                  <div>{item.subjectName}</div>
+                </div>
+                <div className="answer-box">
+                  <div className="reference-answer">参考答案</div>
+                  <div
+                    className="answer-content wang-editor-style"
+                    dangerouslySetInnerHTML={{
+                      // __html: item.subjectAnswer,
+                      __html: item.subjectAnswer,
+                    }}
+                  ></div>
+                  <br />
+                </div>
+                <div className="change-question-box">
+                  <GoodCollectionError
+                    questionId={question[0].id}
+                    ref={(ref) => {
+                      this.goodCollectionError = ref
+                    }}
+                  />
+                  {/* <div className="right">
+                    <Button
+                      disabled={this.pageIndex <= 1 ? true : false}
+                      className="last"
+                      onClick={() => {
+                        this.handleNextQuestion(-1)
+                      }}
+                    >
+                      上一题
+                    </Button>
+
+                    <Button
+                      className="next"
+                      disabled={this.pageIndex >= this.total ? true : false}
+                      onClick={() => {
+                        this.handleNextQuestion(1)
+                      }}
+                    >
+                      下一题
+                    </Button>
+                  </div> */}
+                </div>
+              </div>
+            )
+          })}
+        </Fragment>
+
+        <div className="jump-question">
+          {this.total > 0 && (
+            <Pagination
+              style={{
+                padding: '24px 0',
+                textAlign: 'center',
+              }}
+              showQuickJumper
+              current={this.pageIndex}
+              defaultCurrent={this.pageIndex}
+              total={this.total}
+              defaultPageSize={1}
+              onChange={this.onChangePagination}
+            />
+          )}
+        </div>
+      </div>
+    )
+  }
+}

src/views/brush-questions/mock.js

@@ -0,0 +1,18 @@
+export const mockData = [
+    { id: 1, question: '我是问题1', answer: '我是答案1', isGood: 0, isCollection: 0, isComment: 0},
+    { id: 2, question: '我是问题2', answer: '我是答案2', isGood: 0, isCollection: 1, isComment: 0},
+    { id: 3, question: '我是问题3', answer: '我是答案3', isGood: 1, isCollection: 0, isComment: 0},
+    { id: 4, question: '我是问题4', answer: '我是答案4', isGood: 0, isCollection: 0, isComment: 1},
+    { id: 5, question: '我是问题5', answer: '我是答案5', isGood: 1, isCollection: 1, isComment: 0},
+    { id: 6, question: '我是问题6', answer: '我是答案6', isGood: 1, isCollection: 0, isComment: 1},
+    { id: 7, question: '我是问题7', answer: '我是答案7', isGood: 0, isCollection: 1, isComment: 1},
+    { id: 8, question: '我是问题8', answer: '我是答案8', isGood: 1, isCollection: 1, isComment: 1},
+    { id: 9, question: '我是问题9', answer: '我是答案9', isGood: 0, isCollection: 0, isComment: 0},
+    { id: 10, question: '我是问题10', answer: '我是答案10', isGood: 1, isCollection: 0, isComment: 0},
+    { id: 11, question: '我是问题11', answer: '我是答案11', isGood: 0, isCollection: 1, isComment: 0},
+    { id: 12, question: '我是问题12', answer: '我是答案12', isGood: 0, isCollection: 0, isComment: 1},
+    { id: 13, question: '我是问题13', answer: '我是答案13', isGood: 1, isCollection: 1, isComment: 0},
+    { id: 14, question: '我是问题14', answer: '我是答案14', isGood: 1, isCollection: 0, isComment: 1},
+    { id: 15, question: '我是问题15', answer: '我是答案15', isGood: 0, isCollection: 1, isComment: 1},
+    { id: 16, question: '我是问题16', answer: '我是答案16', isGood: 1, isCollection: 1, isComment: 1},
+]

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

@@ -3,6 +3,7 @@ import { Popover, Spin } from 'antd';
 import { debounce } from '@utils';
 import { imgObject, RankingTypeText, RankingTypeBtnText } from '../../constant';
 import './index.less';
+import { message } from 'antd';
 
 const rankingBackImg = {
     0: imgObject.ranking1Img,
@@ -17,6 +18,8 @@ export default function RankingBox(props) {
             props.onHandleRanking && props.onHandleRanking(type);
         });
     const onJump = debounce(() => {
+        message.destroy()
+        return message.info('敬请期待')
         props.onHandleJump && props.onHandleJump();
     });
     return (

src/views/question-bank/constant.ts

@@ -57,19 +57,15 @@ export const filterDifficulty = [
 
 export const apiName = {
     /**
-     * 获取一级分类
+     * 查询分类
      */
-    getPrimaryCategoryInfo: '/admin/question/category/getPrimaryCategoryInfo',
+    queryPrimaryCategory: '/category/queryPrimaryCategory',
 
     /**
-     * 获取题目列表
+     * 查询大类下分类
      */
-    getInterviewSubjectList: '/admin/question/subject/getSubjectList',
+    queryCategoryByPrimary: '/category/queryCategoryByPrimary',
 
-    /**
-     * 获得贡献榜
-     */
-    getContributeList: '/admin/question/subject/getContributeList',
 };
 
 export const imgObject = {

src/views/question-bank/index.tsx

@@ -1,4 +1,5 @@
-import { Component } from 'react';
+// import { Component } from 'react';
+import { useState, useEffect } from 'react'
 import QuestionList from '@components/question-list';
 import CategoryList from '@components/category-list';
 import ContributionList from './components/contribution-list';
@@ -6,172 +7,229 @@ import RankingList from './components/ranking-list'
 import { apiName } from './constant';
 import req from '@utils/request';
 import { Spin } from 'antd';
-import { mockTabList, mockDataList } from './mock'
+import { mockDataList } from './mock';
 import './index.less';
 
-export default class QuestionBank extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            firstCategoryList: mockTabList || [],
-            questionList: mockDataList || [],
-            isShowSpin: false,
-        };
-    }
-    labelList = []; // 选中的标签列表
-    difficulty = 0; //困难度（全部）
-    total = 0; // 总条数
-    pageIndex = 1;
-    primaryCategoryId = ''; //第一个大类id
+const QuestionBank = () => {
+
+
+    const [firstCategoryList, setFirstCategoryList] = useState([])
+    const [questionList, setQuestionList] = useState(mockDataList)
+    const [isShowSpin, setIsShowSpin] = useState(false)
+    const [labelList, setLabelList] = useState<string[]>([]); // 选中的标签列表
+    const [difficulty, setDiffculty] = useState(0); //困难度（全部）
+    const [total, setTotal] = useState(0); // 总条数
+    const [pageIndex, setPageIndex] = useState(1);
+    const [primaryCategoryId, setPromaryCategoryId] = useState(''); //第一个大类id
 
-    componentDidMount() {
-        // this.getPrimaryCategoryInfo();
-        // console.log(this.props.route);
-    }
 
     /**
      * 获取一级分类数据
      */
-    getPrimaryCategoryInfo() {
+    const getPrimaryCategoryInfo = () => {
+        setIsShowSpin(true)
         req({
             method: 'post',
-            data: { subjectTypeList: [4] },
-            url: apiName.getPrimaryCategoryInfo,
+            url: apiName.queryPrimaryCategory,
+            data: { categoryType: 1 }
         })
-            .then((res) => {
+            .then((res: Record<string, any>) => {
                 if (res.data && res.data.length > 0) {
-                    this.primaryCategoryId = res.data[0].primaryCategoryId;
-                    this.setState(
-                        {
-                            firstCategoryList: res.data,
-                            isShowSpin: false,
-                        },
-                        () => {
-                            this.getInterviewSubjectList();
-                        }
-                    );
+                    setPromaryCategoryId(res.data[0].primaryCategoryId);
+                    setFirstCategoryList(res.data)
+                    setIsShowSpin(false)
                 } else {
-                    this.primaryCategoryId = '';
-                    this.setState({
-                        isShowSpin: false,
-                    });
+                    setIsShowSpin(false)
                 }
             })
-            .catch((err) => console.log(err));
+            .catch((err: string) => console.log(err));
     }
 
     /**
-     * 获取题目列表
-     */
-    getInterviewSubjectList() {
-        let params = {
-            pageInfo: {
-                pageIndex: this.pageIndex,
-                pageSize: 10,
-            },
-            difficulty: this.difficulty,
-            primaryCategoryId: this.primaryCategoryId,
-            assembleIds: this.labelList,
-        };
-        req({
-            method: 'post',
-            data: params,
-            url: apiName.getInterviewSubjectList,
-        })
-            .then((res) => {
-                if (res.data && res.data?.pageList?.length > 0) {
-                    this.total = res.data.pageInfo.total;
-                    this.setState({
-                        questionList: res.data.pageList,
-                        isShowSpin: false,
-                    });
-                } else {
-                    this.total = 0;
-                    this.setState({
-                        questionList: [],
-                        isShowSpin: false,
-                    });
-                }
-            })
-            .catch((err) => console.log(err));
-    }
-
-    /**
-     * 选择标签时，请求列表数据
-     * @param {*} primaryCategoryId 一级分类id
-     * @param {*} assembleIds 三级标签 assembleIds
-     */
-    onChangeLabel = (primaryCategoryId, assembleIds) => {
-        this.labelList = assembleIds;
-        this.primaryCategoryId = primaryCategoryId;
-        this.pageIndex = 1;
-        this.getInterviewSubjectList();
+    * 切换一级分类
+    * @param {*} e
+    */
+    const onChangeCategory = (e: string) => {
+        setLabelList([])
+        setPromaryCategoryId(e)
+        setPageIndex(1)
     };
 
     /**
-     * 切换一级分类
-     * @param {*} e
-     */
-    onChangeCategory = (e) => {
-        this.labelList = [];
-        this.primaryCategoryId = e;
-        this.pageIndex = 1;
-        this.getInterviewSubjectList();
+    * 选择标签时，请求列表数据
+    * @param {*} primaryCategoryId 一级分类id
+    * @param {*} assembleIds 三级标签 assembleIds
+    */
+    const onChangeLabel = (primaryCategoryId: string, assembleIds: string[]) => {
+        setLabelList(assembleIds)
+        setPromaryCategoryId(primaryCategoryId)
+        setPageIndex(1)
+        // this.getInterviewSubjectList();
     };
 
-    /**
-     * 筛选列表数据
-     * @param {*} id
-     */
-    handleChangeSelect = (id) => {
-        this.difficulty = id;
-        this.pageIndex = 1;
-        this.getInterviewSubjectList();
-    };
+    useEffect(() => {
+        getPrimaryCategoryInfo()
+    }, [])
 
-    /**
-     * 分页功能
-     * @param {*} pageIndex 当前页码
-     */
-    onChangePagination = (pageIndex) => {
-        this.pageIndex = pageIndex;
-        this.getInterviewSubjectList();
-    };
-
-    render() {
-        const { firstCategoryList, questionList, isShowSpin } = this.state;
-        return (
-            <div className="question-bank-box">
-                <Spin spinning={isShowSpin}>
-                    <div className="question-box">
-                        <div className="category-list-box">
-                            {firstCategoryList?.length > 0 && (
-                                <CategoryList
-                                    onChangeCategory={this.onChangeCategory}
-                                    categoryList={firstCategoryList}
-                                    onChangeLabel={this.onChangeLabel}
-                                />
-                            )}
-                        </div>
-                        <div className="question-list-box">
-                            <QuestionList
-                                pageIndex={this.pageIndex}
-                                total={this.total}
-                                questionList={questionList}
-                                handleChangeSelect={this.handleChangeSelect}
-                                onChangePagination={this.onChangePagination}
-                                difficulty={this.difficulty}
-                                primaryCategoryId={this.primaryCategoryId}
-                                labelList={this.labelList}
+    return (
+        <div className="question-bank-box">
+            <Spin spinning={isShowSpin}>
+                <div className="question-box">
+                    <div className="category-list-box">
+                        {firstCategoryList?.length > 0 && (
+                            <CategoryList
+                                onChangeCategory={onChangeCategory}
+                                categoryList={firstCategoryList}
+                                onChangeLabel={onChangeLabel}
                             />
-                        </div>
+                        )}
+                    </div>
+                    <div className="question-list-box">
+                        <QuestionList
+                            pageIndex={pageIndex}
+                            total={total}
+                            questionList={questionList}
+                            // handleChangeSelect={this.handleChangeSelect}
+                            // onChangePagination={this.onChangePagination}
+                            difficulty={difficulty}
+                            // primaryCategoryId={this.primaryCategoryId}
+                            labelList={labelList}
+                        />
                     </div>
-                </Spin>
-                <div className="ranking-box">
-                    <ContributionList />
-                    <RankingList />
                 </div>
+            </Spin>
+            <div className="ranking-box">
+                <ContributionList />
+                <RankingList />
             </div>
-        );
-    }
+        </div>
+    );
 }
+export default QuestionBank
+// class QuestionBank extends Component {
+//     constructor(props) {
+//         super(props);
+//         this.state = {
+//             firstCategoryList: [],
+//             questionList: [],
+//             isShowSpin: false,
+//         };
+//     }
+//     labelList = []; // 选中的标签列表
+//     difficulty = 0; //困难度（全部）
+//     total = 0; // 总条数
+//     pageIndex = 1;
+//     primaryCategoryId = ''; //第一个大类id
+
+//     componentDidMount() {
+//         // this.getPrimaryCategoryInfo();
+//         // console.log(this.props.route);
+//     }
+
+
+
+//     /**
+//      * 获取题目列表
+//      */
+//     getInterviewSubjectList() {
+//         let params = {
+//             pageInfo: {
+//                 pageIndex: this.pageIndex,
+//                 pageSize: 10,
+//             },
+//             difficulty: this.difficulty,
+//             primaryCategoryId: this.primaryCategoryId,
+//             assembleIds: this.labelList,
+//         };
+//         req({
+//             method: 'post',
+//             data: params,
+//             url: apiName.getInterviewSubjectList,
+//         })
+//             .then((res) => {
+//                 if (res.data && res.data?.pageList?.length > 0) {
+//                     this.total = res.data.pageInfo.total;
+//                     this.setState({
+//                         questionList: res.data.pageList,
+//                         isShowSpin: false,
+//                     });
+//                 } else {
+//                     this.total = 0;
+//                     this.setState({
+//                         questionList: [],
+//                         isShowSpin: false,
+//                     });
+//                 }
+//             })
+//             .catch((err) => console.log(err));
+//     }
+
+
+
+//     /**
+//      * 切换一级分类
+//      * @param {*} e
+//      */
+//     onChangeCategory = (e) => {
+//         this.labelList = [];
+//         this.primaryCategoryId = e;
+//         this.pageIndex = 1;
+//         this.getInterviewSubjectList();
+//     };
+
+//     /**
+//      * 筛选列表数据
+//      * @param {*} id
+//      */
+//     handleChangeSelect = (id) => {
+//         this.difficulty = id;
+//         this.pageIndex = 1;
+//         this.getInterviewSubjectList();
+//     };
+
+//     /**
+//      * 分页功能
+//      * @param {*} pageIndex 当前页码
+//      */
+//     onChangePagination = (pageIndex) => {
+//         this.pageIndex = pageIndex;
+//         this.getInterviewSubjectList();
+//     };
+
+//     render() {
+//         const { firstCategoryList, questionList, isShowSpin } = this.state;
+//         return (
+//             <div className="question-bank-box">
+//                 <Spin spinning={isShowSpin}>
+//                     <div className="question-box">
+//                         <div className="category-list-box">
+//                             {firstCategoryList?.length > 0 && (
+//                                 <CategoryList
+//                                     onChangeCategory={this.onChangeCategory}
+//                                     categoryList={firstCategoryList}
+//                                     onChangeLabel={this.onChangeLabel}
+//                                 />
+//                             )}
+//                         </div>
+//                         <div className="question-list-box">
+//                             <QuestionList
+//                                 pageIndex={this.pageIndex}
+//                                 total={this.total}
+//                                 questionList={questionList}
+//                                 handleChangeSelect={this.handleChangeSelect}
+//                                 onChangePagination={this.onChangePagination}
+//                                 difficulty={this.difficulty}
+//                                 primaryCategoryId={this.primaryCategoryId}
+//                                 labelList={this.labelList}
+//                             />
+//                         </div>
+//                     </div>
+//                 </Spin>
+//                 <div className="ranking-box">
+//                     <ContributionList />
+//                     <RankingList />
+//                 </div>
+//             </div>
+//         );
+//     }
+// }