|
|
|
@ -0,0 +1,76 @@
|
|
|
|
|
import { PlusOutlined } from '@ant-design/icons';
|
|
|
|
|
import { Button, Card, List, Progress, Typography, Image } from 'antd';
|
|
|
|
|
import { PageContainer } from '@ant-design/pro-layout';
|
|
|
|
|
import { useRequest } from 'umi';
|
|
|
|
|
import { querySubjectList } from './service';
|
|
|
|
|
import type { SubjectListItemDataType } from './data.d';
|
|
|
|
|
import styles from './style.less';
|
|
|
|
|
import NumberInfo from './components/NumberInfo';
|
|
|
|
|
|
|
|
|
|
const { Paragraph } = Typography;
|
|
|
|
|
|
|
|
|
|
const SubjectList = () => {
|
|
|
|
|
/** 获取主题列表数据 */
|
|
|
|
|
const { data, loading } = useRequest(() => {
|
|
|
|
|
|
|
|
|
|
return querySubjectList({
|
|
|
|
|
count: 10,
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const list = data?.list || [];
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<PageContainer content={false} extraContent={false}>
|
|
|
|
|
<div className={styles.cardList}>
|
|
|
|
|
<List
|
|
|
|
|
rowKey="id"
|
|
|
|
|
loading={loading}
|
|
|
|
|
grid={{
|
|
|
|
|
gutter: 16,
|
|
|
|
|
xs: 1,
|
|
|
|
|
sm: 1,
|
|
|
|
|
md: 1,
|
|
|
|
|
lg: 1,
|
|
|
|
|
xl: 1,
|
|
|
|
|
xxl: 1,
|
|
|
|
|
}}
|
|
|
|
|
dataSource={list}
|
|
|
|
|
renderItem={(item: SubjectListItemDataType) => {
|
|
|
|
|
if (item && item.subject_id) {
|
|
|
|
|
return (
|
|
|
|
|
<List.Item key={item?.subject_id}>
|
|
|
|
|
<Card
|
|
|
|
|
title={<a>{item?.subject_name}</a>}
|
|
|
|
|
hoverable
|
|
|
|
|
className={styles.card}
|
|
|
|
|
actions={[]}
|
|
|
|
|
extra={<><span style={{padding:10}}>开始学习时间: ---</span><span style={{padding:10}}>距离结束时间:---天</span><span style={{padding:10}}>考核学时:{item?.total_course_hours}</span></>}
|
|
|
|
|
>
|
|
|
|
|
<Card.Meta
|
|
|
|
|
avatar={<Image preview={false} width={200} height={150} src={`${item.attachment_json.url}`} fallback="../fallback.svg" />}
|
|
|
|
|
title={false}
|
|
|
|
|
description={
|
|
|
|
|
<>
|
|
|
|
|
<Card.Grid hoverable={false} style={{width:'50%',padding:0}}>
|
|
|
|
|
<Paragraph className={styles.item} ellipsis={{ rows: 4 }}>
|
|
|
|
|
{item.subject_describe}
|
|
|
|
|
</Paragraph>
|
|
|
|
|
</Card.Grid>
|
|
|
|
|
<Card.Grid hoverable={false} style={{width:'30%',textAlign:'center'}}><Progress type="circle" percent={75} /></Card.Grid>
|
|
|
|
|
<Card.Grid hoverable={false} style={{width:'20%',textAlign:'center'}}><Button type="primary">去学习</Button></Card.Grid>
|
|
|
|
|
</>
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
</Card>
|
|
|
|
|
</List.Item>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</PageContainer>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default SubjectList;
|