educoder/public/react/src/modules/competitions/Competitioncommon/CompetitionContentsChart.js

import React, { Component } from 'react';
import {Button,Layout,Tabs,Icon, Card, Avatar, Row, Col ,Table} from 'antd';
import axios from 'axios';
import {markdownToHTML,getImageUrl} from 'educoder';
import NoneData from "../../courses/shixunHomework/shixunHomework";

const { Header, Footer, Sider, Content } = Layout;
const { TabPane } = Tabs;
const { Meta } = Card;

class CompetitionContents extends Component{
	constructor(props) {
		super(props)
		this.state={

		}
	}

	componentDidMount(){
		window.document.title = '竞赛';

	}



	render() {
		const operations = <Icon type="form" />;
		const columns = [
			{
				title: 'Name',
				dataIndex: 'name',
				key: 'name',
				render: text => <a>{text}</a>,
			},
			{
				title: 'Age',
				dataIndex: 'age',
				key: 'age',
			},
			{
				title: 'Address',
				dataIndex: 'address',
				key: 'address',
			},
			{
				title: 'Tags',
				key: 'tags',
				dataIndex: 'tags',
				render: tags => (
					<span>
      123123
      </span>
				),
			},
			{
				title: 'Action',
				key: 'action',
				render: (text, record) => (
					<span>
        <a>Invite {record.name}</a>
        <a>Delete</a>
      </span>
				),
			},
			{
				title: 'Values',
				key: 'values',
				dataIndex: 'values',
				render: tags => (
					<span>
      123123
      </span>
				),
			},
		];

		const data = [
			{
				key: '1',
				name: 'John Brown',
				age: 32,
				address: 'New York No. 1 Lake Park',
				tags: ['nice', 'developer'],
				values:123
			},
			{
				key: '2',
				name: 'Jim Green',
				age: 42,
				address: 'London No. 1 Lake Park',
				tags: ['loser'],
				values:123
			},
			{
				key: '3',
				name: 'Joe Black',
				age: 32,
				address: 'Sidney No. 1 Lake Park',
				tags: ['cool', 'teacher'],
				values:123
			},
		];


		return (
			<div>
				<Tabs tabBarExtraContent={operations}>
					<TabPane tab="总排行榜" key="1">
						<Content className={"markdown-body"} dangerouslySetInnerHTML={{__html: markdownToHTML("Content of tab 1").replace(/▁/g, "▁▁▁")}}>
						</Content>
					</TabPane>
					<TabPane tab="决赛排行榜" key="2">
						<Content className={"markdown-body"} dangerouslySetInnerHTML={{__html: markdownToHTML("Content of tab 2").replace(/▁/g, "▁▁▁")}}>
						</Content>
					</TabPane>
					<TabPane tab="预赛排行榜" key="3">
						<Content className={"markdown-body"} dangerouslySetInnerHTML={{__html: markdownToHTML("Content of tab 3").replace(/▁/g, "▁▁▁")}}>
						</Content>
					</TabPane>
				</Tabs>


				<Col className="gutter-row Competitioncharts mt30 mb30">
					总排名
				</Col>

				<Row calssName={"Competition399"}>
					<Col className="mt40" xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
						<Card
							className={"Competitionthird"}
							cover={
								<img
									alt="example"
									src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
								/>
							}
						>
							<Meta
								title="Card title"
								description="This is the description"
							/>
						</Card>
					</Col>
					<Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 1 }}>
						<Card
							className={"Competitionfirst"}
							cover={
								<img
									alt="example"
									src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
								/>
							}
						>
							<Meta
								title="Card title"
								description="This is the description"
							/>
						</Card>

					</Col>
					<Col className="mt30" xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 1 }}>
						<Card
							className={"Competitionsecondary"}
							cover={
								<img
									alt="example"
									src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
								/>
							}
						>
							<Meta
								title="Card title"
								description="This is the description"
							/>
						</Card>
					</Col>
				</Row>

				<Row className={"mt80 mb80"}>
					<Table className="Competitiontransparent" columns={columns} dataSource={data} showHeader={false} pagination={false}/>
				</Row>


			</div>

		)
	}
}
export default CompetitionContents;