antd#Col JavaScript Examples

extra = (
  <Row>
    <Col xs={24} sm={12}>
      <div className={styles.textSecondary}>状态</div>
      <div className={styles.heading}>待审批</div>
    </Col>
    <Col xs={24} sm={12}>
      <div className={styles.textSecondary}>订单金额</div>
      <div className={styles.heading}>¥ 568.08</div>
    </Col>
  </Row>
)

CardRow = ({ loading, visitData }) => (
  <Row gutter={24} type="flex">
    <Col {...topColResponsiveProps}>
      <InfoCard />
    </Col>
    <Col {...topColResponsiveProps}>
      <InfoCard />
    </Col>
    <Col {...topColResponsiveProps}>
      <InfoCard />
    </Col>
    <Col {...topColResponsiveProps}>
      <InfoCard />
    </Col>
  </Row>
)

UserProfileContent = () => {

	return (
		<>
			<div className="profile-main">
				<div className="container">
					<Row gutter={20}>
						<Col span={8}><ProfileAvatar /></Col>
						<Col span={16}><ProfileForm /></Col>
					</Row>
				</div>
			</div>
		</>
	)
}

render() {
        return (
            <Row className="container">
                <Col span={4} className="nav-left">
                        <NavLeft/>
                </Col>
                <Col span={20} className="main">
                    <Header/>
                    
                    <Row className="content" justify="center">
                        {this.props.children}
                    </Row>
                    
                    <Fonter/>
                </Col>
            </Row>
        );
    }

PageNotFound = () => {
  return (
    <Row style={{ marginTop: 60, textAlign: 'center', width: '100%' }}>
      <Col span={12} offset={6} >
        <h1 className='f48'> 404 </h1>
        <h2 className='f36'> PAGE NOT FOUND </h2>
        <h3 className='text-light-grey'> &quot; Not all those who wander are lost &quot; </h3>
        <Button type='primary'>
          <Link to="/"> Go to Homepage </Link>
        </Button>
      </Col>
    </Row>
  )
}

render() {
    let experiments = this.state.experiments;
    let data = experiments.map((experiment, i) => {
      return {
        key: i,
        experiment: experiment.name,
        author: 'Admin',
        runs: experiment.runs,
        createdAt: experiment.created_at,
      }
    })

    return (
      <div>
        <Row>
          <Col span={this.state.run ? 12 : 24}>
            <div style={{ margin: "0 20px" }}>
              <Table
                className="components-table-demo-nested"
                columns={experimentsColumns}
                expandable={{ expandedRowRender: this.expandedRowRender.bind(this) }}
                dataSource={data}
              />
            </div>
          </Col>
          <Col span={this.state.run ? 12 : 0}>
            <RunWidget run={this.state.run} />
          </Col>
        </Row>
      </div>
    )
  }

render() {
    let colSpan = 0;
    if (this.state.configs.length > 0) {
      colSpan = 24.0 / this.state.configs.length;
    }

    return (
      <Page>
        <Row
          gutter={{ xs: 8, sm: 16, md: 24 }}
          style={{
            marginTop: '0px',
            marginBottom: '20px',
          }}
        >
          {this.state.configs.map((config, index) => (
            <Col span={`${colSpan}`} key={index}>
              <LiquidityMiningDescription
                market={config.market}
                config={config}
              />
            </Col>
          ))}
        </Row>
        <Row gutter={{ xs: 8, sm: 16, md: 24 }}>
          {this.state.configs.map((config, index) => (
            <Col span={`${colSpan}`} key={index}>
              <LiquidityMiningSubpage market={config.market} config={config} />
            </Col>
          ))}
        </Row>
      </Page>
    );
  }

Clipboard = () => {
  return (
    <div className="app-container">
      <h1>点击下方的Copy按钮，可将以下文字复制到剪贴板</h1>
      <br />
      <Row>
        <Col span={12}>{text}</Col>
      </Row>
      <br />
      <Row>
        <Col span={2}>
          <Button
            type="primary"
            icon="copy"
            onClick={(e) => {
              handleCopy(text, e);
            }}
          >
            Copy
          </Button>
        </Col>
      </Row>
    </div>
  );
}

function creator() {
  return (
    <div id="creator" className="block featureBlock bgGray">
      <div className="container-fluid">
        <div className="titleHolder">
          <h2>Our Team!</h2>
          <p></p>
        </div>
        <Row gutter={[16, 16]}>
          <Col xs={{ span: 24 }} sm={{ span: 12 }} md={{ span: 8 }}>
            <Card
              hoverable
              cover={<img alt="Modern Design" src={image1} />}
            >
              <Meta title="Akshay Murari" />
            </Card>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 12 }} md={{ span: 8 }}>
            <Card
              hoverable
              cover={<img alt="Test" src={image2} />}
            >
              <Meta title="Deepesh Dragoneel" />
            </Card>
          </Col>
          <Col xs={{ span: 24 }} sm={{ span: 12 }} md={{ span: 8 }}>
            <Card
              hoverable
              cover={<img alt="Test" src={image3} />}
            >
              <Meta title="Kranthi Kumar" />
            </Card>
          </Col>
          
        </Row>
      </div>
    </div>
  );
}

renderForm() {
    const {
      form: { getFieldDecorator },
    } = this.props;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <FormItem label="验证状态">
              {getFieldDecorator('status')(
                <Select placeholder="请选择" style={{ width: '100%' }}>
                  <Option value="FAIL">失败</Option>
                  <Option value="PASS">成功</Option>
                  <Option value="MISS">未命中</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                重置
              </Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

components = {
  GridPanel,
  Header: ({ title, ...others }) => (<h3 {...others}>{title || ''}</h3>),
  Container: ({ children, ...other }) => (
    <div {...other}>
      {children}
    </div>
  ),
  Input,
  TextArea,
  Button: ({ label, title, ...other }) => (
    <AButton {...other}>{label || title}</AButton>
  ),
  Row,
  Col,
  Select
}

ExchangeList = () => {
  const { exchanges } = useSelector((state) => state.settings);
  const statusList = useGetStatusExchanges(exchanges);

  if (exchanges === undefined || exchanges === null || exchanges.length < 0)
    return null;

  return (
    <div>
      {exchanges.length > 0 && (
        <Title style={{ marginTop: 50, marginBottom: 20 }} level={2}>
          List of exchanges
        </Title>
      )}

      {Object.keys(statusList).length > 0 ? (
        <Row>
          <Col span="24">
            {exchanges.map((e, i) => (
              <ExchangeItem
                parametrs={e}
                key={"exchange-item-" + i}
                status={statusList[e.id]}
              />
            ))}
          </Col>
        </Row>
      ) : (
        <Row justify="center">
          {exchanges.length > 0 && (
            <Spin size="large" style={{ padding: 10 }} />
          )}
        </Row>
      )}
    </div>
  );
}

VoterInput = ({ index, voters, setVoters, mainnetProvider }) => {
  return (
    <>
      <Form.Item label={`Voter ${index + 1}`} name={`address[${index}]`} style={{ marginBottom: "16px" }}>
        <Row gutter={8} align="middle">
          <Col span={16}>
            <AddressInput
              autoFocus
              ensProvider={mainnetProvider}
              placeholder="Enter address"
              value={voters[index]}
              onChange={address => {
                setVoters(prevVoters => {
                  const nextVoters = [...prevVoters];
                  nextVoters[index] = address;
                  return nextVoters;
                });
              }}
            />
          </Col>
          <Col span={8}>
            <DeleteOutlined
              style={{ cursor: "pointer", color: "#ff6666" }}
              onClick={event => {
                setVoters(prevVoters => {
                  const nextVoters = [...prevVoters];
                  return nextVoters.filter((_, i) => i !== index);
                });
              }}
            />
          </Col>
        </Row>
      </Form.Item>
    </>
  );
}

export function Header({ onCancel = () => {} }) {
    return (
        <Row
            style={{
                height: 60,
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                padding: '0 12px',
            }}
        >
            <Col
                style={{
                    display: 'flex',
                    justifyContent: 'flex-start',
                }}
            >
                <Button
                    style={{ border: 0 }}
                    type="ghost"
                    icon={<LeftOutlined style={{ color: PRIMARY_COLOR }} />}
                    size="large"
                    onClick={onCancel}
                />
            </Col>
        </Row>
    )
}

Help = (props) => {
  return (
    <Row className={style.help}>
      <Col span={4}>
        <Button>
          <a href="https://github.com/douyu/juno/wsd/penaten/juno-go/issues/new" target={'_blank'}>
            使用问题点这里提issue{' '}
          </a>
        </Button>
      </Col>
    </Row>
  );
}

Dashboard = () => (
	<>
		<div className="dashboard-section">
			<PageTitle title="Dashboard" bgColor="#0F9D58" />

			<div className="sub-components">
				<Row gutter={[16, 16]}>
					<Col xs={24} sm={24} xl={16} lg={16} md={12}>
						<DashCards />
					</Col>
					<Col
						xs={24}
						sm={24}
						lg={8}
						xl={8}
						md={12}
						gutter={[16, 16]}
					>
						<Todos />
						<SpamDays />
					</Col>
				</Row>
			</div>
		</div>
	</>
)

render() {
        let storage = this.state.storage;
        let contentClassName = isAdmin() ? 'page-content' : 'page-content-user';
        return (
            <div>
                <Content key='page-content' className={["site-layout-background", contentClassName]}>
                    <div style={{marginBottom: 20}}>
                        <Row justify="space-around" align="middle" gutter={24}>
                            <Col span={16} key={1}>
                                <Title level={3}>我的文件</Title>
                            </Col>
                            <Col span={8} key={2} style={{textAlign: 'right'}}>
                                <Descriptions title="" column={2}>
                                    <Descriptions.Item label={<div><FireOutlined/> 大小限制</div>}>
                                        <strong>{storage['limitSize'] < 0 ? '无限制' : renderSize(storage['limitSize'])}</strong>
                                    </Descriptions.Item>
                                    <Descriptions.Item label={<div><HeartOutlined/> 已用大小</div>}>
                                        <strong>{renderSize(storage['usedSize'])}</strong>
                                    </Descriptions.Item>
                                </Descriptions>
                            </Col>
                        </Row>
                    </div>
                    <FileSystem storageId={getCurrentUser()['id']}
                                storageType={'storages'}
                                callback={this.getDefaultStorage}
                                upload={true}
                                download={true}
                                delete={true}
                                rename={true}
                                edit={true}
                                minHeight={window.innerHeight - 203}/>
                </Content>
            </div>
        );
    }

TradeListCell = props => {
  const { item, admin, buyClick, sellClick, editClick, closeClick } = props;
  return (
    <div className={styles.tradeListCell}>
      <Row>
        <Col span={12}>{`账户地址：${item.address}`}</Col>
        <Col span={8}>{`交易时间：${item.latest}`}</Col>
        <Col span={4}>{`成交额：${item.total}`}</Col>
      </Row>
      <br/>
      <Row>
        <Col span={2} style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
          <img alt="logo" width="100px" src={item.logo} />
        </Col>
        <Col span={4}>
          <div className={styles.listContent}>
            <div className={styles.listContentItem}>
              <span>{item.name}</span>
              <p>{`类型: ${item.type}`}</p>
              <span>{`邮编: ${item.code}`}</span>
              <p>{`线损: ${item.loss}`}</p>
            </div>
          </div>
        </Col>
        <Col span={4}>
          <div className={styles.listContent}>
            <div className={styles.listContentItem}>
              <span>{`可销售度数: ${item.canSell}`}</span>
              <p>{`售价: ${item.sellPrice}`}</p>
            </div>
          </div>
        </Col>
        <Col span={4}>
          <div className={styles.listContent}>
            <div className={styles.listContentItem}>
              <span>{`需购买度数: ${item.needBuy}`}</span>
              <p>{`售价: ${item.buyPrice}`}</p>
            </div>
          </div>
        </Col>
        <Col span={5}>
          <div className={styles.listContent}>
            <div className={styles.listContentItem}>
              <span>{item.status}</span>
            </div>
          </div>
        </Col>
        <Col span={5}>
          <>
            <Button type="primary" size="default" onClick={buyClick}>购买</Button>
            <Divider orientation="center" type="vertical"/>
            <Button type="primary" danger size="default" onClick={sellClick}>出售</Button>
          </>
          {
            admin ?
              <div style={{marginTop: 10, hidden: true}}>
                <Button type="primary" size="default" onClick={editClick}>编辑</Button>
                <Divider orientation="center" type="vertical"/>
                <Button type="primary" danger size="default" onClick={() => closeClick(item.status === '歇业' ? "开业" : "歇业")}>{item.status === '歇业' ? "开业" : "歇业"}</Button>
              </div>
              :
              null
          }
        </Col>
      </Row>
      <Divider type="horizontal"/>
    </div>
  );
}

CartHeader = ({
	logoPath,
	badgeCount = 0,
	currency = '',
	totalDue = 0,
	displayBack,
	displayTotal,
	top = false
}) => {
	const dispatch = useDispatch();
	const cartContents = useSelector((state) => state.cart);
	const storeDetails = useSelector((state) => state.user.user);

	const sign = useCurrency(storeDetails.currency);
	const totalPrice = (arr) => {
		return arr.reduce((sum, item) => {
			return sum + item.price * item.quantity;
		}, 0);
	};
	const totalQuantity = (arr) => {
		return arr.reduce((sum, item) => {
			return sum + item.quantity;
		}, 0);
	};
	const change = (e) => {
		dispatch(creators.setString(e.target.value));
	};
	return (
		<Row className={top ? 'color cart-header' : 'cart-header'} type="flex" justify="space-between" align="middle">
			<Col span={6} className="logo">
				{displayBack ? (
					<Icon onClick={history.goBack} type="left-circle" />
				) : (
					<img src={logoPath || NoLogo} alt="Store Logo" />
				)}
			</Col>
			<Col span={12} className="total">
				{displayTotal ? (
					`Total: ${sign}${totalPrice(cartContents).toFixed(2)}`
				) : (
					<Input onChange={change} placeholder="Search..." />
				)}
			</Col>
			<NavLink to="/review">
				<Col span={6} className="icon">
					<Badge style={{ backgroundColor: 'gold', color: 'black' }} count={totalQuantity(cartContents)}>
						<Icon type="shopping-cart" style={{ color: 'black' }} />
					</Badge>
				</Col>
			</NavLink>
		</Row>
	);
}

ChangePassword = (props) => {
	const { handleSubmit, isUpdatingUserData, onCancel } = props;
	const [passwordChanges, setPasswordChanges] = useState({});

	const handleChange = (e) => {
		setPasswordChanges({ ...passwordChanges, [e.target.name]: e.target.value });
	};

	const cancel = () => {
		onCancel();
		setPasswordChanges({});
	}

	return (
		< Form id="change-password" onSubmit={(e) => { setPasswordChanges({}); handleSubmit(e, formSchema, passwordChanges) }} >
			<Row gutter={24}>
				<Col span={24}>
					<Form.Item label="Current Password">
						<Input
							type="password"
							name="currentPassword"
							onChange={handleChange}
							value={passwordChanges.currentPassword}
							placeholder="Current Password"
							autoComplete="off"
							required
						/>
					</Form.Item>
					<Form.Item label="New Password">
						<Input
							type="password"
							name="newPassword"
							onChange={handleChange}
							value={passwordChanges.newPassword}
							placeholder="New Password"
							autoComplete="off"
							required
						/>
					</Form.Item>
					<Form.Item label="Confirm Password">
						<Input
							type="password"
							name="confirmPassword"
							onChange={handleChange}
							value={passwordChanges.confirmPassword}
							placeholder="Confirm Password"
							autoComplete="off"
							required
						/>
					</Form.Item>
				</Col>
				<Col span={24} className="button-wrapper">
					<Button className="outlined-btn" size="large" onClick={cancel}>Cancel</Button>
					<Button type="primary" htmlType="submit" className="full-btn" size="large" loading={isUpdatingUserData}>Save</Button>
				</Col>
			</Row>
		</Form >
	);
}

render() {
        const imgs = [
            ['1.png','2.png','3.png','4.png','5.png'],
            ['6.png','7.png','8.png','9.png','10.png'],
            ['11.png','12.png','13.png','14.png','15.png'],
            ['16.png','17.png','18.png','19.png','20.png'],
            ['21.png','22.png','23.png','24.png','25.png'],
        ];
        const imgList = imgs.map((list)=>list.map((item)=>
            <Card style={{marginBottom:10}} cover={<img src={'/gallery/'+item} onClick={()=>this.openGallery(item)}/>}>
                <Card.Meta title="React Admin" description="Antd">

                </Card.Meta>
            </Card>
        ));

        return (
            <Card className="card-wrap"> 
            <div >
                <Row gutter={10}>
                    <Col md={5}>
                        {imgList[0]}
                    </Col>
                    <Col md={5}>
                        {imgList[1]}
                    </Col>
                    <Col md={5}>
                        {imgList[2]}
                    </Col>
                    <Col md={5}>
                        {imgList[3]}
                    </Col>
                    <Col md={4}>
                        {imgList[4]}
                    </Col>
                </Row>

                <Modal width={300} height={500} visible={this.state.visible} title="图片画廊" onCancel={()=>{
                    this.setState({
                        visible:false
                    })
                }} footer={null}>
                    {<img src={this.state.currentImg} alt="/" style={{width:'100%'}}/>}
                </Modal>
            </div>
            </Card>
        );
    }

Landing = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getAllStates())
  }, [dispatch])
  const registration = useSelector((state) => state.base.registration)
  const isSmall = isSmallDevice();
  return (
    <Row className={`${isSmall ? '' : 'margin-double--left'} padding--sides width-100 height-100`}>
      <Col md={10} sm={24} push={isSmall ? 0 : 14}>
        {
          isSmall ?
          <div>
            <div className={'margin-double--top title-style center'}>VaccinePost</div>
            <div className={'subtitle-style center'}>A Cowin Vaccination Notification System</div>
          </div> :
          null
        }
        <RegistrationForm
          onChangeRegistrationField={(changedField) => dispatch(onChangeRegistrationField(changedField))}
          onChangeSubscriptionField={(changedField, index) => dispatch(onChangeSubscriptionField(changedField, index))}
          onAddSubscription={() => dispatch(onAddSubscription())}
          onRemoveSubscription={(index) => dispatch(onRemoveSubscription(index))}
          fetchDistricts={(stateId, index) => dispatch(fetchDistricts(stateId, index))}
          registration={registration}
          registerSubscription={() => {
            const validationParams = validateRegistrationPayload(registration)
            if(validationParams.isValid) {
              dispatch(registerSubscription(registration))
            }
            else {
              dispatch(updateRegistrationFormErrors(validationParams.errors))
            }
          }}
          resetRegisterForm={() => dispatch(resetRegisterForm())}
        />
      </Col>
      <Col md={14} sm={24} pull={isSmall ? 0 : 10}>
      {
        !isSmall ?
        <Layout className={'web-content background-white'}>
          <div>
            <div className={'margin-double--top title-style'}>VaccinePost</div>
            <div className={'subtitle-style'}>A Co-WIN Vaccination Notification System</div>
          </div>
        </Layout>
        :
        null
      }
      <Col className={`${isSmall ? "no-background" : "no-background web-steps"}`} md={14} sm={24} >
        <Row className='margin--bottom'>
        {
          landingPageSteps.map((step, index) => {
            return (
              <RegistrationStep
                key={index} 
                {...step}
              />
            )
          })
        }
        </Row>
      </Col>
      </Col>
    </Row>
  )
}

export function HomePage({ dispatch, user, loggedIn, loading }) {
  useInjectReducer({ key, reducer });
  useInjectSaga({ key, saga });

  const loginForm = loggedIn ? '' : <Login />;

  return (
    <div>
      <Helmet>
        <title>Home</title>
      </Helmet>
      <Row gutter={[16, 16]}>
        <Col span={18}>
          <Card title="Greetings!" style={{ margin: '20px 0' }}>
            <p>
              Welcome to alpha version of QiskitFlow! Platform for tracking,
              sharing and running quantum experiments in a clean and
              understandable for developers, researchers and students manner.
              Thank you for taking time and reviewing our efforts in making
              quantum computing more transparent for everybody!
            </p>
            <p>
              If you have any questions or suggestions feel free to drop an
              email [email protected] or open{' '}
              <a href="https://github.com/IceKhan13/QiskitFlow/issues" target="_blank">
                Github issue
              </a>
            </p>
          </Card>
          <Divider />
          <h2>Public experiments</h2>
          <SharedRunsList />
        </Col>
        <Col span={6}>
          <Card title="QiskitFlow info" style={{ margin: '20px 0' }}>
            <b>Build</b>: 0.0.10-alpha
            <br />
            <b>Github</b>:{' '}
            <a href="https://github.com/IceKhan13/QiskitFlow" target="_blank">
              https://github.com/IceKhan13/QiskitFlow
            </a>
            <br />
            <b>PyPi</b>:{' '}
            <a href="https://pypi.org/project/qiskitflow/" target="_black">
              https://pypi.org/project/qiskitflow/
            </a>
          </Card>
          {loginForm}
          <img
            src="https://media.giphy.com/media/rmIGBIsDle8dEPubrG/giphy.gif"
            alt="QiskitFlow 3d"
            width="100%"
          />
          <Card title="Roadmap" style={{ margin: '20px 0' }}>
            <Steps direction="vertical" current={1}>
              <Step
                title="Alpha release"
                description="Alpha release for closed testing"
              />
              <Step title="Testing" description="Testing is in progress" />
              <Step
                title="General public release"
                description="Release for general public with open registration"
              />
              <Step
                title="Experiments compiler"
                description="Compiler backend for building executable images of executed experiments"
              />
            </Steps>
          </Card>
        </Col>
      </Row>
    </div>
  );
}

AssetDropdown = ({
  options,
  selected,
  size,
  paddingLeft,
  paddingRight,
  borderRadius,
}) => {
  const theme = useContext(ThemeContext);
  return (
    <Dropdown trigger={['click']} overlay={<AssetMenu>{options}</AssetMenu>}>
      <AssetDropdownButton
        style={{
          paddingLeft: paddingLeft ? paddingLeft : '8px',
          paddingRight: paddingRight ? paddingRight : '8px',
          borderRadius: borderRadius ? borderRadius : '4px',
        }}
        size={size}
      >
        <Row
          gutter={16}
          style={{
            paddingBottom: '1px',
            height: '100%',
          }}
        >
          <Col
            span={16}
            style={{
              textAlign: 'left',
              color: theme.textWhite,
              marginTop: 'auto',
              marginBottom: 'auto',
            }}
          >
            {selected}
          </Col>
          <Col
            span={8}
            style={{
              textAlign: 'right',
              color: theme.primary,
              marginTop: 'auto',
              marginBottom: 'auto',
            }}
          >
            <FontAwesomeIcon
              style={{
                color: theme.primary,
                fontSize: '18px',
              }}
              icon={faCaretDown}
            />
          </Col>
        </Row>
      </AssetDropdownButton>
    </Dropdown>
  );
}

RichTextEditor = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  const onEditorStateChange = (editorState) => setEditorState(editorState);

  return (
    <div>
      <Card bordered={false}>
        <Editor
          editorState={editorState}
          onEditorStateChange={onEditorStateChange}
          wrapperClassName="wrapper-class"
          editorClassName="editor-class"
          toolbarClassName="toolbar-class"
          localization={{ locale: "zh" }}
        />
      </Card>
      <br />
      <Row gutter={10}>
        <Col span={12}>
          <Card
            title="同步转换HTML"
            bordered={false}
            style={{ minHeight: 200 }}
          >
            {editorState &&
              draftToHtml(convertToRaw(editorState.getCurrentContent()))}
          </Card>
        </Col>
        <Col span={12}>
          <Card
            title="同步转换MarkDown"
            bordered={false}
            style={{ minHeight: 200 }}
          >
            {editorState &&
              draftToMarkdown(convertToRaw(editorState.getCurrentContent()))}
          </Card>
        </Col>
      </Row>
    </div>
  );
}

function AppAbout() {
    return (
        <div id="about" className="block aboutBlock">
            <div className="container-fluid">
                <div className="titleHolder">
                    <h2
                        style={{
                            marginBottom: "1rem",
                        }}
                    >
                        About Us
                    </h2>
                    <p>
                        We are a small team of Passionate Devolopers, working
                        our level best to fulfill your needs. Our goal is to
                        make portfolio building process a lot easier for all our
                        fellow mates! People who want to build their portfolyo`s
                        which look attractive without any Web Devolopement
                        knowledge can take the most benifit from our website.
                        You can edit the templated provided by us and contomize
                        them to your taste. We have even attached a video below
                        for you walk you through the process of website creation
                        (refer that for addtional info!)We are always open to
                        discussions and suggestions, feel free to contact us at
                        any time!
                    </p>
                </div>
                <div className="contentHolder">
                    <p>
                        Our app is easy to use and easy for creating and
                        managing multiple portfolyo`s with different
                        customizations. The services provided in these app is
                        absolutly free of cost.
                    </p>
                </div>
                <Row gutter={[16, 16]}>
                    {items.map((item) => {
                        return (
                            <Col md={{ span: 8 }} key={item.key}>
                                <div className="content">
                                    <div className="icon">{item.icon}</div>
                                    <h3>
                                        <b>{item.title}</b>
                                    </h3>
                                    <p>{item.content}</p>
                                </div>
                            </Col>
                        );
                    })}
                </Row>
            </div>
        </div>
    );
}

render() {
    const { data } = this.props.loginData
    const { getFieldDecorator } = this.props.form
    const { chooseMethod, defaultName } = this.state
    return (
      <div className="login-container">
        <div className="login-bg" />
        <div className="login-content">
          <div className="login-title">登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录</div>
          <Form
            {...layout}
            name="basic"
          >
            {
              (chooseMethod === 'local' || chooseMethod === 'ldap') && (<div>
                <Form.Item label="用户名">
                  {getFieldDecorator('username', {
                    initialValue: defaultName,
                    rules: [{ required: true, message: 'Please input your name!' }],
                  })(<Input
                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    placeholder="Username"
                  />)}
                </Form.Item>
                <Form.Item label="密码">
                  {getFieldDecorator('password', {
                    rules: [{ required: true, message: 'Please input your Password!' }],
                  })(<Input
                    prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                    type="password"
                    placeholder="Password"
                  />)}
                </Form.Item>
                <div style={{ height: '20px' }} />
              </div>)
            }
            <Form.Item
              wrapperCol={{ offset: 2, span: 20 }}
            >
              {chooseMethod === 'none' && <p className="choose-text">请选择登录方式 ：</p>}
              {
                (data && chooseMethod === 'none') && (<Button type="primary" block onClick={() => this.onFinish()} style={{ marginBottom: '15px' }}>
                  已有账号，直接登录<Icon type="right" />
                </Button>)
              }
              <Row type="flex" justify="space-between" style={{ color: 'white' }}>
                <Col span={chooseMethod === 'none' ? 6 : 24} className={(chooseMethod !== 'none' && chooseMethod !== 'local') ? 'hide' : ''}>
                  <Button type="primary" block onClick={() => this.onFinish('local')} className="login-form-button">
                    本地
                  </Button>
                </Col>
                <Col span={chooseMethod === 'none' ? 6 : 24} className={chooseMethod !== 'none' && chooseMethod !== 'ldap' ? 'hide' : ''}>
                  <Button type="primary" block onClick={() => this.onFinish('ldap')} className="login-form-button">
                    LDAP
                  </Button>
                </Col>
                <Col span={chooseMethod === 'none' ? 6 : 24} className={chooseMethod !== 'none' && chooseMethod !== 'oauth' ? 'hide' : ''}>
                  <Button type="primary" block onClick={() => this.onFinish('oauth')} className="login-form-button">
                    OAuth
                  </Button>
                </Col>
              </Row>
            </Form.Item>
          </Form>
        </div>
      </div>
    )
  }

Home = ({ history }) => {

  const [list, setList] = useState([]);

  const [currentPageIndex, setCurrentPageIndex] = useState(1);

  const [total, setTotal] = useState(0);

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    async function loadData() {
      try {
        await setLoading(true);
        const data = await getListByPage(currentPageIndex);
        setList(data.list);
        setTotal(data.count);
        message.success('加载成功!');
      } catch (error) {
        message.error('加载失败!');
      } finally {
        await setLoading(false);
      }
    }

    loadData()
  }, [currentPageIndex]);

  const onHandlePageChange = (page, size) => {
    setCurrentPageIndex(page);
  }


  const renderCardList = useMemo(() => {

    const onHandleDetail = item => {
      history.push({ pathname: '/workspace', state: { id: item.id } });
    };
  
    return list.map(item => <Col style={{ margin: '10px 0px' }} key={item.id} span={6}>
      <Card
        loading={loading}
        hoverable
        title={item.name}
        bordered={false}
        cover={<Spin spinning={loading}><div onClick={() => onHandleDetail(item)} style={{ height: 200, padding: 10, textAlign: 'center' }}><img alt="cover" style={{ height: '100%', width: '100%' }} src={`http://topology.le5le.com${item.image}`} /></div></Spin>}
        extra={[
          <div key="like" style={{ display: 'inline', }}><Icon type="like" /><b style={{ fontSize: 15, marginLeft: 5 }}>{item.star}</b></div>,
          <div key="heart" style={{ display: 'inline', marginLeft: 10 }}><Icon type="heart" /><b style={{ fontSize: 15, marginLeft: 5 }}>{item.recommend}</b></div>
        ]}
      >
        <Meta
          title={item.username}
          avatar={<Avatar style={{ backgroundColor: colorList[Math.ceil(Math.random() * 4)], verticalAlign: 'middle' }} size="large">{item.username.slice(0, 1)}</Avatar>}
          description={item.desc || '暂无描述'}
          style={{ height: 80, overflow: 'hidden' }}
        />
      </Card>
    </Col>)
  }, [list, loading, history])


  return (
    <div style={{ background: '#ECECEC', padding: '30px 200px', height: '100vh', overflow: 'auto' }}>
      <Row gutter={16}>
        {
          renderCardList
        }
      </Row>
      <Pagination style={{ textAlign: 'center', marginTop: 30 }} current={currentPageIndex} total={total} onChange={onHandlePageChange} />
    </div>
  );
}

DisplayVariable = ({ contractFunction, functionInfo, refreshRequired, triggerRefresh }) => {
  const [variable, setVariable] = useState("");

  const refresh = useCallback(async () => {
    try {
      const funcResponse = await contractFunction();
      setVariable(funcResponse);
      triggerRefresh(false);
    } catch (e) {
      console.log(e);
    }
  }, [setVariable, contractFunction, triggerRefresh]);

  useEffect(() => {
    refresh();
  }, [refresh, refreshRequired, contractFunction]);

  return (
    <div>
      <Row>
        <Col
          span={8}
          style={{
            textAlign: "right",
            opacity: 0.333,
            paddingRight: 6,
            fontSize: 24,
          }}
        >
          {functionInfo.name}
        </Col>
        <Col span={14}>
          <h2>{tryToDisplay(variable)}</h2>
        </Col>
        <Col span={2}>
          <h2>
            <a href="#" onClick={refresh}>
              ?
            </a>
          </h2>
        </Col>
      </Row>
      <Divider />
    </div>
  );
}