feat: 增加练题

src/views/practise/practice-details/components/practice-paging/index.jsx

@@ -0,0 +1,50 @@
+import { AppstoreOutlined } from '@ant-design/icons'
+import { debounce } from '@utils'
+import React, { Fragment } from 'react'
+import './index.less'
+
+export default function PracticePaging(props) {
+  const { subjectList, singleLength, multipleLength, judgeLength } = props
+  const onChangePaging = index =>
+    debounce(() => {
+      props.onHandlePaging && props.onHandlePaging(index)
+    })
+  return (
+    <Fragment>
+      {subjectList?.length > 0 && (
+        <div className='practice-paging-box'>
+          <div className='practice-paging-tips'>
+            <div>答题卡</div>
+            <div className='practice-paging-tip'>
+              <AppstoreOutlined style={{ marginRight: 4 }} />
+              单选题{singleLength}道 ｜ 多选题{multipleLength}道 ｜ 判断题
+              {judgeLength}道
+            </div>
+          </div>
+          <div className='practice-paging-list'>
+            {subjectList.map((item, index) => {
+              return (
+                <div
+                  key={`paging_${item.subjectId}`}
+                  className={`practice-paging-item
+                                            ${
+                                              item?.isMark == 1 ? 'practice-paging-item-mark' : ''
+                                            } ${
+                                              item?.active
+                                                ? 'practice-paging-item-active'
+                                                : item?.activeList?.length > 0
+                                                ? 'practice-paging-item-answer'
+                                                : 'practice-paging-item-unactive'
+                                            } `}
+                  onClick={onChangePaging(index)}
+                >
+                  {index + 1}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
+    </Fragment>
+  )
+}

src/views/practise/practice-details/components/practice-paging/index.less

@@ -0,0 +1,70 @@
+.practice-paging-box {
+    padding: 20px;
+    border-top: 1px dashed #ddd;
+    .practice-paging-tips {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 10px;
+        font-size: 16px;
+        color: #666;
+        .practice-paging-tip {
+            padding: 5px 10px;
+            font-size: 14px;
+            background: #f2f2f2;
+        }
+    }
+
+    .practice-paging-list {
+        display: flex;
+        flex-wrap: wrap;
+        .practice-paging-item {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-right: 10px;
+            width: 40px;
+            height: 40px;
+            font-size: 16px;
+            cursor: pointer;
+            &:hover {
+                color: white;
+                background-color: rgba(60, 110, 238, 1);
+            }
+        }
+        // 未选中
+        .practice-paging-item-unactive {
+            color: #dce4ec;
+            &:after {
+                background: #aaa;
+            }
+        }
+        // 选中
+        .practice-paging-item-active {
+            color: white;
+            background-color: rgba(60, 110, 238, 1);
+            &:after {
+                background: #fff;
+            }
+        }
+        // 有答案
+        .practice-paging-item-answer {
+            color: rgba(60, 110, 238, 1);
+            &:after {
+                background: rgba(60, 110, 238, 1);
+            }
+        }
+        // 被标记
+        .practice-paging-item-mark {
+            position: relative;
+            &:after {
+                content: '';
+                position: absolute;
+                right: 3px;
+                top: 3px;
+                width: 4px;
+                height: 4px;
+                border-radius: 50%;
+            }
+        }
+    }
+}