antd#BackTop JavaScript Examples

storiesOf('antd/back-top', module).add('custom', () => 
  <div style={{ height: '600vh', padding: 8 }}>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <div>Scroll to bottom</div>
    <BackTop>
      <div style={style}>UP</div>
    </BackTop>
  </div>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>You can customize the style of the button, just note the size limit: no more than <code>40px * 40px</code>.</p></>) } });

render() {
    return (
      <div className="height-700">
        <BackTop>
          <div className="ant-back-top-inner">UP</div>
        </BackTop>
        Scroll down to see the bottom-right
        <strong style={{ color: '#1088e9' }}> blue </strong>
        button.
        <style>
          {`
            .ant-back-top {
              bottom: 100px;
              z-index: 10000;
            }
            .ant-back-top-inner {
              height: 40px;
              width: 40px;
              line-height: 40px;
              border-radius: 4px;
              background-color: #1088e9;
              color: #fff;
              text-align: center;
              font-size: 20px;
            }
          `}
        </style>
      </div>
    )
  }

storiesOf('antd/back-top', module).add('basic', () => 
  <>
    <BackTop />
    Scroll down to see the bottom-right
    <strong className="site-back-top-basic"> gray </strong>
    button.
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>The most basic usage.</p></>) } });

BackTopCompent = memo(function BackTopCompent({ element, ...props }) {
  return (
    <BackTop {...props} target={() => document.querySelector(element)} style={{ right: '30px', bottom: '30px' }}>
      <div className={style.backTop}>
        <VerticalAlignTopOutlined />
      </div>
    </BackTop>
  )
})

render() {
  const formItemLayout = {
    labelCol: {
      xs: {span: 24},
      sm: {span: 4},
    },
    wrapperCol: {
      xs: {span: 24},
      sm: {span: 12},
    },
  };
  const tailFormItemLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 12,
        offset: 4,
      },
    },
  }
  return (
    <div>
      <CustomBreadcrumb arr={['酒店账单打印']}/>
      <Card bordered={false} title='账单信息' style={{marginBottom: 10}} id='basicUsage'>
           <p>
            <Button>一天内</Button>&emsp;
            <Button>一周内</Button>&emsp;
            <Button>一个月内</Button>
          </p>
        <Table dataSource={data1} columns={columns1} style={styles.tableStyle}/>
      </Card>
      <BackTop visibilityHeight={200} style={{right: 50}}/>
    </div>
  )
}

render() {
    return (
      <div>
        <CustomBreadcrumb arr={['从控机', '信息显示']} />
        <Card
          bordered={false}
          title="空调信息"
          style={{ marginBottom: 10 }}
          id="basicUsage"
        >
          <Table
            dataSource={this.state.data}
            columns={columns1}
            style={styles.tableStyle}
          />
        </Card>
        <BackTop visibilityHeight={200} style={{ right: 50 }} />
      </div>
    );
  }

render() {
    return (
      <div>
        <CustomBreadcrumb arr={['主控机', '信息显示']} />
        <Card
          bordered={false}
          title="空调信息"
          style={{ marginBottom: 10 }}
          id="basicUsage"
        >
          <Table
            dataSource={data1}
            columns={columns1}
            style={styles.tableStyle}
          />
        </Card>
        <BackTop visibilityHeight={200} style={{ right: 50 }} />
      </div>
    );
  }

function AppFooter() {
  return (
    <div className="container-fluid">
      <div className="footer">
        <div className="logo">
        
          <a href="#"><b>Portfolyo</b></a>
        </div>
        <ul className="socials">
          <li><a href="https://www.facebook.com/Portfolyo-107113391726117"><i className="fab fa-facebook-f"></i></a></li>
          <li><a href="https://www.twitter.com/akshaymurari2"><i className="fab fa-twitter"></i></a></li>
          <li><a href="https://www.linkedin.com/"><i className="fab fa-linkedin-in"></i></a></li>
          <li><a href="https://www.pinterest.com/"><i className="fab fa-pinterest-p"></i></a></li>
          <li><a href="https://www.instagram.com/portfolyo_builder/"><i className="fab fa-instagram"></i></a></li>
        </ul>
        <div className="copyright">Copyright &copy; 2021 Portfolyo</div>
        <BackTop>
          <div className="goTop"><i className="fas fa-arrow-circle-up"></i></div>
        </BackTop>
      </div>
    </div>
  );
}

render() {
    return (
      <div>
        <CustomBreadcrumb arr={['房间信息', '信息显示']} />
        <Card
          bordered={false}
          title="入住状态"
          style={{ marginBottom: 10 }}
          id="basicUsage"
        >
          <Table
            dataSource={this.state.data}
            columns={columns1}
            style={styles.tableStyle}
          />
        </Card>
        <BackTop visibilityHeight={200} style={{ right: 50 }} />
      </div>
    );
  }

render() {
    const {getFieldDecorator} = this.props.form
    const formItemLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 4},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 12},
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 12,
          offset: 4,
        },
      },
    }
    
    return (
      <div>
        <CustomBreadcrumb arr={['房间信息', '查找房间号']}/>
        <Card bordered={false} title='查找房间号'>
          <Form layout='horizontal' style={{width: '70%', margin: '0 auto'}} onSubmit={this.handleSubmit}>
            <FormItem label='住户名' {...formItemLayout}>
              {
                getFieldDecorator('temperature', {
                  rules: [
                    {
                      required: true,
                      message: '请输入正确的名称'
                    }
                  ]
                })(
                  <Input/>
                )
              }
            </FormItem>
            <FormItem style={{textAlign: 'center'}} {...tailFormItemLayout}>
              <Button type="primary" htmlType="submit" disabled={false}>提交</Button>
            </FormItem>
          </Form>
        </Card>
        <BackTop visibilityHeight={200} style={{right: 50}}/>
      </div>
    )
  }

render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 12,
          offset: 4,
        },
      },
    };
    return (
      <div>
        <CustomBreadcrumb arr={['账单详单打印']} />
        <Card
          bordered={false}
          title="账单详单打印"
          style={{ marginBottom: 10 }}
          id="basicUsage"
        >
          <Form onSubmit={this.handleSubmit}>
            <FormItem label="用户名" {...formItemLayout}>
              {getFieldDecorator('username', {
                rules: [
                  {
                    required: true,
                    message: '请输入正确的客户名',
                  },
                ],
              })(<Input />)}
            </FormItem>
            <FormItem style={{ textAlign: 'center' }} {...tailFormItemLayout}>
              <Button type="primary" htmlType="submit" disabled={false}>
                确定
              </Button>
            </FormItem>
          </Form>

          <Title>账单</Title>
          <Row style={{ marginBottom: 10 }}>
            <Col span={6}>
              <Card>
                <Statistic
                  title="当前账单费用"
                  value={this.state.fee}
                  precision={2}
                  prefix={<Icon type="pay-circle" />}
                  suffix="元"
                />
              </Card>
            </Col>
          </Row>

          <Title>详单</Title>
          <Table
            dataSource={this.state.logs}
            columns={columns1}
            style={styles.tableStyle}
          />
        </Card>
        <BackTop visibilityHeight={200} style={{ right: 50 }} />
      </div>
    );
  }

render() {
    const {getFieldDecorator} = this.props.form
    const formItemLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 4},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 12},
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 12,
          offset: 4,
        },
      },
    }
    
    return (
      <div>
        <CustomBreadcrumb arr={['住户管理', '查找住户名']}/>
        <Card bordered={false} title='查找住户名'>
          <Form layout='horizontal' style={{width: '70%', margin: '0 auto'}} onSubmit={this.handleSubmit}>
            <FormItem label='房间号' {...formItemLayout}>
              {
                getFieldDecorator('costhigh', {
                  rules: [
                    {
                      pattern: /^[0-9][0-9][0-9]$/,
                      required: true,
                      message: '请输入正确的房间号'
                    }
                  ]
                })(
                  <Input/>
                )
              }
              </FormItem>
            <FormItem style={{textAlign: 'center'}} {...tailFormItemLayout}>
              <Button type="primary" htmlType="submit" disabled={false}>退房</Button>
            </FormItem>
          </Form>
        </Card>
        <BackTop visibilityHeight={200} style={{right: 50}}/>
      </div>
    )
  }

render() {
    const {getFieldDecorator, getFieldValue} = this.props.form
    const formItemLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 4},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 12},
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 12,
          offset: 4,
        },
      },
    }
    return (
      <div>
        <CustomBreadcrumb arr={['客户界面', '空调使用', '风速调整']}/>
        <Card bordered={false} title='风速调整'>
          <Form layout='horizontal' style={{width: '70%', margin: '0 auto'}} onSubmit={this.handleSubmit}>
            <FormItem label='风速' {...formItemLayout} required>
              {
                getFieldDecorator('residence', {
                  rules: [
                    {
                      type: 'array',
                      required: true,
                      message: '请选择风速'
                    }
                  ]
                })(
                  <Cascader options={options} expandTrigger="hover" placeholder=''/>
                )
              }
            </FormItem>
            <FormItem style={{textAlign: 'center'}} {...tailFormItemLayout}>
              <Button type="primary" htmlType="submit" disabled={false}>确定</Button>
            </FormItem>
          </Form>
        </Card>
        <BackTop visibilityHeight={200} style={{right: 50}}/>
      </div>
    )
  }

render() {
    const {getFieldDecorator, getFieldValue} = this.props.form
    const formItemLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 4},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 12},
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 12,
          offset: 4,
        },
      },
    }
    return (
      <div>
        <CustomBreadcrumb arr={['客户界面', '空调使用', '温度调整']}/>
        <Card bordered={false} title='温度调整'>
          <Form layout='horizontal' style={{width: '70%', margin: '0 auto'}} onSubmit={this.handleSubmit}>
          <FormItem label='温度' {...formItemLayout}>
              {
                getFieldDecorator('temperature', {
                  rules: [
                    {
                      len: 11,
                      pattern: /^[0-9][0-9]$/,
                      required: true,
                      message: '请输入正确的温度'
                    }
                  ]
                })(
                  <Input/>
                )
              }
            </FormItem>
            <FormItem style={{textAlign: 'center'}} {...tailFormItemLayout}>
              <Button type="primary" htmlType="submit" disabled={false}>确定</Button>
            </FormItem>
          </Form>
        </Card>
        <BackTop visibilityHeight={200} style={{right: 50}}/>
      </div>
    )
  }

render(){
    const cardContent = `<ul class='card-ul'}>
      <li>快速 - 在初始化，排序或过滤器上只有一个强制同步布局（又称回流</li>
      <li>回应（尝试调整窗口大小！）</li>
      <li>按组过滤项目</li>
      <li>项目可以有多个组，大小不同</li>
      <li>排序项目</li>
      <li>高级过滤（如搜索）</li>
    </ul>`
    return (
      <div>
        <CustomBreadcrumb arr={['其它','画廊']}/>
        <TypingCard title='shufflejs插件' source={cardContent} height={290}/>
        <Card bordered={false}>
          <Button style={{marginRight:20}} onClick={()=>this.shuffle.filter()}>全部</Button>
          <Button style={{marginRight:20}} onClick={()=>this.shuffle.filter('scenery')}>风景</Button>
          <Button style={{marginRight:20}} onClick={()=>this.shuffle.filter('nature')}>自然</Button>
          <Button style={{marginRight:20}} onClick={()=>this.shuffle.filter('other')}>其他</Button>
        </Card>
        <div style={{padding: '20px 32px',minHeight:500}}>
          <div ref={(div)=>this.shuffleDemo=div}>
            {
              this.state.photos.map((item,index)=>(
                <div
                  className='photo-item'
                  data-groups={JSON.stringify(item.groups)}
                  onClick={()=>this.showImg(item.src)}
                  style={styles[item.style]} key={item.src}>
                  <div className={'aspect aspect--'+item.size}>
                    <div className='aspect__inner'>
                      <img src={item.src} alt="" width='100%' height='100%'/>
                    </div>
                  </div>
                </div>
              ))
            }
            <div style={{width:'8.33333%'}}  ref={(div)=>this.sizer = div}/>
          </div>
        </div>
        <Modal
          footer={null} closable={false}
          visible={this.state.visible}
          wrapClassName="vertical-center-modal"
          onCancel={()=>this.setState({visible:false})}>
          <img src={this.state.image} alt="" width='100%'/>
        </Modal>
        <BackTop visibilityHeight={200} style={{right: 50}}/>
      </div>
    )
  }

render(){
    const cardContent = `此页面用到的富文本编辑是<a href="https://github.com/jpuri/react-draft-wysiwyg">react-draft-wysiwyg@^1.12.13</a>`
    const { editorState,contentState } = this.state;
    return (
      <div>
        <CustomBreadcrumb arr={['其它','富文本编辑器']}/>
        <TypingCard title='富文本编辑器' source={cardContent}/>
        <Card bordered={false} className='card-item'>
          <Editor
            editorState={editorState}
            onEditorStateChange={this.onEditorStateChange}
            onContentStateChange={this.onContentStateChange}
            wrapperClassName="wrapper-class"
            editorClassName="editor-class"
            toolbarClassName="toolbar-class"
            localization={{ locale: 'zh'}}
            toolbar={{
              image: { uploadCallback: this.uploadImageCallBack, alt: { present: true, mandatory: true }},
            }}
          />
        </Card>
        <Row gutter={10}>
          <Col span={8}>
            <Card title='同步转换HTML' bordered={false} style={{minHeight:200}}>
              {editorState && draftToHtml(convertToRaw(editorState.getCurrentContent()))}
            </Card>
          </Col>
          <Col span={8}>
            <Card title='同步转换MarkDown' bordered={false} style={{minHeight:200}}>
              {editorState && draftToMarkdown(convertToRaw(editorState.getCurrentContent()))}
            </Card>
          </Col>
          <Col span={8}>
            <Card title='同步转换JSON' bordered={false} style={{minHeight:200}}>
              {JSON.stringify(contentState, null, 4)}
            </Card>
          </Col>
        </Row>
        <BackTop visibilityHeight={200} style={{right: 50}}/>
      </div>
    )
  }

render(){
    return (
      <div>
        <CustomBreadcrumb arr={['其它','动画']}/>
        <TypingCard source='当需要动态效果，如过渡、鼠标悬浮等。本页面用到了animation.css库和shufflejs库'/>
        <Card bordered={false}>
          <p>
            <Button type='primary' style={{margin:'5px 10px'}} onClick={()=>this.shuffle.filter()}>All</Button>
            <Button type='primary' style={{margin:'5px 10px'}} onClick={()=>this.shuffle.filter('Entrances')}>Entrances</Button>
            <Button type='primary' style={{margin:'5px 10px'}} onClick={()=>this.shuffle.filter('Exits')}>Exits</Button><br/>
            {
              animations.map(item=>(
                <Button
                  key={item.groups}
                  onClick={()=>this.shuffle.filter(item.groups[0].replace(/\s/g,''))}
                  style={{margin:'5px 10px'}}>{item.groups}
                </Button>
                ))
            }
          </p>
        </Card>
        <div style={styles.box}>
          <div ref={(div)=>this.shuffleDemo=div}>
            {
              //移入移除函数最好绑定在父元素上，因为父元素不会因为动画效果而移动，如果绑定在h3上，鼠标没有移动，但是h3移动了，鼠标就不在h3中，会触发onMouseLeave事件
              animations.map(item=>{
                return item.list.map(i=>{
                  return <div
                    className='shuffle-item'
                    style={styles.item}
                    onMouseEnter={(e)=>this[i].classList.add(i,'infinite')}
                    onMouseLeave={(e)=>this[i].classList.remove(i,'infinite')}
                    data-groups={JSON.stringify(getGroups(item.groups))}
                    key={i}>
                    <h3 style={styles.title}
                        className='animated'
                        ref={(el)=>this[i]=el}
                    >{i}</h3>
                  </div>
                })
              })
            }
            {/*下面的div是为了间隔宽度*/}
            <div style={{width:'8.33333%'}}  ref={(div)=>this.sizer = div}/>
          </div>
        </div>
        <BackTop visibilityHeight={200} style={{right: 50}}/>
      </div>
    )
  }

render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 12,
          offset: 4,
        },
      },
    };

    return (
      <div>
        <CustomBreadcrumb arr={['住户管理', '入住']} />
        <Card bordered={false} title="住户入住">
          <Form
            layout="horizontal"
            style={{ width: '70%', margin: '0 auto' }}
            onSubmit={this.handleSubmit}
          >
            <FormItem label="住户名" {...formItemLayout}>
              {getFieldDecorator('username', {
                rules: [
                  {
                    required: true,
                    message: '请输入正确的名称',
                  },
                ],
              })(<Input />)}
            </FormItem>
            <FormItem label="房间号" {...formItemLayout}>
              {getFieldDecorator('roomId', {
                rules: [
                  {
                    pattern: /^[0-9][0-9][0-9]$/,
                    required: true,
                    message: '请输入正确的房间号',
                  },
                ],
              })(<Input />)}
            </FormItem>
            <FormItem style={{ textAlign: 'center' }} {...tailFormItemLayout}>
              <Button type="primary" htmlType="submit" disabled={false}>
                提交
              </Button>
            </FormItem>
          </Form>
        </Card>
        <BackTop visibilityHeight={200} style={{ right: 50 }} />
      </div>
    );
  }

render() {
    const cardContent = '使用Icon标签声明组件，指定图标对应的 type 属性。'
    const cardContent2 = `我们为每个图标赋予了语义化的命名，命名规则如下:
          <ul class="card-ul">
            <li>实心和描线图标保持同名，用 -o 来区分，比如 question-circle（实心） 和 question-circle-o（描线）；</li>
            <li>命名顺序：[图标名]-[形状?]-[描线?]-[方向?]。</li>
          </ul>`
    return (
      <div>
        <CustomBreadcrumb arr={['基本','图标']}/>
        <TypingCard title='如何使用' source={cardContent} id='howUse'/>
        <TypingCard title='图标的命名规范' id='standard' source={cardContent2} height={206}/>
        {
          icons.map(item => {
            return (
              <Card title={item.title} bordered={false} className='card-item' key={item.title} id={item.anchor}>
                {
                  item.list.map(icon => {
                    return (
                      <Card.Grid style={styles.gridItem} key={icon}>
                        <Icon type={icon} style={styles.icon}/><span>{icon}</span>
                      </Card.Grid>
                    )
                  })
                }
              </Card>
            )
          })
        }
        <BackTop visibilityHeight={200} style={{right: 50}}/>
        <Affix style={styles.affixBox}>
          <Anchor offsetTop={50} affix={false}>
            <Anchor.Link href='#howUse' title='如何使用'/>
            <Anchor.Link href='#standard' title='图标的命名规范'/>
            <Anchor.Link href='#direction' title='方向性图标'/>
            <Anchor.Link href='#suggestion' title='提示建议性图标'/>
            <Anchor.Link href='#logo' title='网站通用图标'/>
            <Anchor.Link href='#other' title='品牌和标识'/>
          </Anchor>
        </Affix>
      </div>
    )
  }

render() {
    const uploadButton = (
      <div>
        <Icon type="plus"/>
        <div className="ant-upload-text">Upload</div>
      </div>
    );
    const cardContent = `上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。
          <ul class="card-ul">
            <li>当需要上传一个或一些文件时</li>
            <li>当需要展现上传的进度时</li>
            <li>当需要使用拖拽交互时</li>
          </ul>`
    return (
      <div>
        <CustomBreadcrumb arr={['输入', '上传']}/>
        <TypingCard source={cardContent} height={234}/>
        <Row gutter={16}>
          <Col span={12}>
            <Card bordered={false} className='card-item' title='基本用法'>
              <Upload {...props}>
                <Button><Icon type="upload"/>Upload</Button>
              </Upload>
            </Card>
            <Card bordered={false} style={{...styles.colItem, minHeight: 255}} title='照片墙'>
              <Upload
                action="//jsonplaceholder.typicode.com/posts/"
                listType="picture-card"
                fileList={this.state.fileList}
                onPreview={this.handlePreview}
                onChange={({fileList}) => this.setState({fileList})}
              >
                {this.state.fileList.length >= 3 ? null : uploadButton}
              </Upload>
              <Modal visible={this.state.previewVisible} onCancel={() => this.setState({previewVisible: false})}>
                <img alt="example" style={{width: '100%'}} src={this.state.previewImage}/>
              </Modal>
            </Card>
          </Col>
          <Col span={12}>
            <Card bordered={false} className='card-item' title='用户头像上传'>
              <Row type='flex' align='middle'>
                <Col span={8}>
                  <Upload
                    name="avatar"
                    showUploadList={false}
                    action='/upload'
                    beforeUpload={this.beforeUpload}
                    onChange={this.handleChange}
                    listType="picture-card">
                    <div>
                      <Icon type={this.state.loading ? 'loading' : 'plus'}/>
                      <div className="ant-upload-text">Upload</div>
                    </div>
                  </Upload>
                </Col>
                <Col span={16}>
                  点击上传用户头像，并使用 beforeUpload 限制用户上传的图片格式和大小
                </Col>
              </Row>
            </Card>
            <Card bordered={false} className='card-item' title='拖拽上传'>
              <Dragger {...props2}>
                <p className="ant-upload-drag-icon">
                  <Icon type="inbox"/>
                </p>
                <p className="ant-upload-text">点击或拖拽到此处完成上传</p>
                <p className="ant-upload-hint">支持单个或批量上传。严禁上传公司数据或其他带文件</p>
              </Dragger>
            </Card>
          </Col>
        </Row>
        <BackTop visibilityHeight={200} style={{right: 50}}/>
      </div>
    )
  }

render(){
    const {getFieldDecorator} = this.props.form
    return (
      <div>
        <Form className='stepForm' hideRequiredMark>
          <Form.Item {...formItemLayout} label="付款账户">
            {getFieldDecorator('payAccount', {
              initialValue: '[email protected]',
              rules: [{ required: true, message: '请选择付款账户' }],
            })(
              <Select placeholder="[email protected]">
                <Option value="[email protected]">[email protected]</Option>
              </Select>
            )}
          </Form.Item>
          <Form.Item {...formItemLayout} label="收款账户">
            <Input.Group compact>
              <Select defaultValue='alipay' style={{width:100}}>
                <Option value="alipay">支付宝</Option>
                <Option value="bank">银行账户</Option>
              </Select>
              {getFieldDecorator('receiverAccount',{
                  initialValue: '[email protected]',
                  rules: [
                    { required: true, message: '请输入收款人账户' },
                    { type: 'email', message: '账户名应为邮箱格式' },
                  ],
                })(
                  <Input style={{ width: 'calc(100% - 100px)' }}/>
                )}
            </Input.Group>
          </Form.Item>
          <Form.Item {...formItemLayout} label="收款人姓名">
            {getFieldDecorator('receiverName', {
              initialValue: 'Alex',
              rules: [{ required: true, message: '请输入收款人姓名' }],
            })(<Input placeholder="请输入收款人姓名" />)}
          </Form.Item>
          <Form.Item {...formItemLayout} label="转账金额">
            {getFieldDecorator('amount', {
              initialValue: 500,
              rules: [
                { required: true, message: '请输入转账金额' },
                {
                  pattern: /^(\d+)((?:\.\d+)?)$/,
                  message: '请输入合法金额数字',
                },
              ],
            })(<Input prefix="￥" placeholder="请输入金额" />)}
          </Form.Item>
          <Form.Item {...tailFormItemLayout}>
            <Button type='primary' onClick={this.nextStep}>下一步</Button>
          </Form.Item>
        </Form>
        <Divider/>
        <div className='desc'>
          <h3>说明</h3>
          <h4>转账到支付宝账户</h4>
          <p>
            如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
          </p>
          <h4>转账到银行卡</h4>
          <p>
            如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。
          </p>
        </div>
        <BackTop visibilityHeight={200} style={{right: 50}}/>
      </div>
    )
  }

render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 12,
          offset: 4,
        },
      },
    };

    return (
      <div>
        <CustomBreadcrumb arr={['住户管理', '退房']} />
        <Card bordered={false} title="住户退房">
          <Form
            layout="horizontal"
            style={{ width: '70%', margin: '0 auto' }}
            onSubmit={this.handleSubmit}
          >
            <FormItem label="住户名" {...formItemLayout}>
              {getFieldDecorator('username', {
                rules: [
                  {
                    required: true,
                    message: '请输入正确的名称',
                  },
                ],
              })(<Input />)}
            </FormItem>
            <FormItem style={{ textAlign: 'center' }} {...tailFormItemLayout}>
              <Button type="primary" htmlType="submit" disabled={false}>
                退房
              </Button>
            </FormItem>
          </Form>
        </Card>
        <BackTop visibilityHeight={200} style={{ right: 50 }} />
      </div>
    );
  }

render() {
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 12,
          offset: 4,
        },
      },
    };
    return (
      <div>
        <CustomBreadcrumb arr={['报表打印']} />
        <Card
          bordered={false}
          title="报表信息"
          style={{ marginBottom: 10 }}
          id="basicUsage"
        >
          <p>
            <Button>日报表</Button>&emsp;
            <Button>周报表</Button>&emsp;
            <Button>月报表</Button>
          </p>
          <Table
            dataSource={this.state.report}
            columns={columns1}
            style={styles.tableStyle}
          />
          <FormItem style={{ textAlign: 'center' }} {...tailFormItemLayout}>
            <Button
              type="primary"
              htmlType="submit"
              disabled={false}
              onClick={window.print}
            >
              打印
            </Button>
          </FormItem>
        </Card>
        <BackTop visibilityHeight={200} style={{ right: 50 }} />
      </div>
    );
  }

render(){
    const cardContent = ` <ul class="card-ul">
            <li>对复杂区域进行分组和隐藏，保持页面的整洁</li>
            <li>手风琴 是一种特殊的折叠面板，只允许单个内容区域展开</li>
          </ul>`
    return (
      <div>
        <CustomBreadcrumb arr={['显示','折叠面板']}/>
        <TypingCard source={cardContent} height={178}/>
        <Row gutter={16}>
          <Col span={12}>
            <Card bordered={false} className='card-item' title='基本用法'>
              <Collapse defaultActiveKey={['1']}>
                <Panel header="This is panel header 1" key="1"><p>{text}</p></Panel>
                <Panel header="This is panel header 2" key="2"><p>{text}</p></Panel>
                <Panel header="This is panel header 3" key="3"><p>{text}</p></Panel>
              </Collapse>
            </Card>
            <Card bordered={false} className='card-item' title='简洁风格-无边框'>
              <Collapse defaultActiveKey={['1']} bordered={false}>
                <Panel header="This is panel header 1" key="1">{text2}</Panel>
                <Panel header="This is panel header 2" key="2">{text2}</Panel>
                <Panel header="This is panel header 3" key="3">{text2}</Panel>
              </Collapse>
            </Card>
          </Col>
          <Col span={12}>
            <Card bordered={false} className='card-item' title='手风琴-每次只打开一个tab'>
              <Collapse defaultActiveKey={['2']} accordion>
                <Panel header="This is panel header 1" key="1"><p>{text}</p></Panel>
                <Panel header="This is panel header 2" key="2"><p>{text}</p></Panel>
                <Panel header="This is panel header 3" key="3"><p>{text}</p></Panel>
              </Collapse>
            </Card>
            <Card bordered={false} className='card-item' title='自定义面板'>
              <Collapse defaultActiveKey={['1']} bordered={false}>
                <Panel header="This is panel header 1" key="1" style={styles.customPanelStyle}><p>{text}</p></Panel>
                <Panel header="This is panel header 2" key="2" style={styles.customPanelStyle}><p>{text}</p></Panel>
                <Panel header="This is panel header 3" key="3" style={styles.customPanelStyle}><p>{text}</p></Panel>
              </Collapse>
            </Card>
          </Col>
        </Row>
        <BackTop visibilityHeight={200} style={{right: 50}}/>
      </div>
    )
  }

render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 12,
          offset: 4,
        },
      },
    };

    return (
      <div>
        <CustomBreadcrumb arr={['主控机', '主控机操作']} />
        <Card bordered={false} title="主控机操作">
          <Form
            layout="horizontal"
            style={{ width: '70%', margin: '0 auto' }}
            onSubmit={this.handleSubmit}
          >
            <FormItem label="温控模式" {...formItemLayout} required>
              {getFieldDecorator('residence', {
                rules: [
                  {
                    type: 'array',
                    required: true,
                    message: '请选择温控模式',
                  },
                ],
              })(
                <Cascader
                  options={options}
                  expandTrigger="hover"
                  placeholder=""
                />
              )}
            </FormItem>
            <FormItem label="缺省温度" {...formItemLayout}>
              {getFieldDecorator('temperature', {
                rules: [
                  {
                    len: 11,
                    pattern: /^[0-9][0-9]$/,
                    required: true,
                    message: '请输入正确的温度',
                  },
                ],
              })(<Input />)}
            </FormItem>
            <FormItem label="高风费率" {...formItemLayout}>
              {getFieldDecorator('costhigh', {
                rules: [
                  {
                    len: 11,
                    pattern: /^[0-9]$/,
                    required: true,
                    message: '请输入正确的费率',
                  },
                ],
              })(<Input />)}
            </FormItem>
            <FormItem label="中风费率" {...formItemLayout}>
              {getFieldDecorator('costmid', {
                rules: [
                  {
                    len: 11,
                    pattern: /^[0-9]$/,
                    required: true,
                    message: '请输入正确的费率',
                  },
                ],
              })(<Input />)}
            </FormItem>
            <FormItem label="低风费率" {...formItemLayout}>
              {getFieldDecorator('costlow', {
                rules: [
                  {
                    len: 11,
                    pattern: /^[0-9]$/,
                    required: true,
                    message: '请输入正确的费率',
                  },
                ],
              })(<Input />)}
            </FormItem>
            <FormItem label="服务对象个数" {...formItemLayout} required>
              {getFieldDecorator('service', {
                rules: [
                  {
                    type: 'array',
                    required: true,
                    message: '请选择温控模式',
                  },
                ],
              })(
                <Cascader
                  options={options1}
                  expandTrigger="hover"
                  placeholder=""
                />
              )}
            </FormItem>
            <FormItem style={{ textAlign: 'center' }} {...tailFormItemLayout}>
              <Button type="primary" htmlType="submit" disabled={false}>
                提交
              </Button>
            </FormItem>
          </Form>
        </Card>
        <BackTop visibilityHeight={200} style={{ right: 50 }} />
      </div>
    );
  }

render() {
    const { targetTemp, roomStatus } = this.state;
    return (
      <div>
        <CustomBreadcrumb arr={['用户界面', '信息显示']} />
        <Row gutter={16} style={{ marginBottom: 10 }}>
          <Col span={6}>
            <Card>
              <Statistic title="用户名" value={isAuthenticated()} />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic title="房间号" value={this.state.roomId} />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="当前温度"
                value={roomStatus.curTemp}
                precision={2}
                valueStyle={{
                  color: this.state.rising ? red.primary : blue.primary,
                }}
                prefix={
                  <Icon type={this.state.rising ? 'arrow-up' : 'arrow-down'} />
                }
                suffix="℃"
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="当前账单费用"
                value={this.state.fee}
                precision={2}
                prefix={<Icon type="pay-circle" />}
                suffix="元"
              />
            </Card>
          </Col>
        </Row>
        <Row gutter={16} style={{ marginBottom: 10 }}>
          <Col span={6}>
            <Card>
              <Statistic
                title="当前状态"
                value={this.getStatusString(roomStatus.status)}
                valueStyle={{ color: red.primary }}
                prefix={<Icon type="poweroff" />}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="当前模式"
                value={roomStatus.windMode === 'cooling' ? '制冷' : '制热'}
                valueStyle={{
                  color:
                    roomStatus.windMode === 'cooling'
                      ? blue.primary
                      : red.primary,
                }}
                prefix={<Icon type="fire" />}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="当前风速"
                value={this.getSpeedString(roomStatus.windSpeed)}
                valueStyle={{
                  color:
                    roomStatus.windMode === 'cooling'
                      ? blue.primary
                      : red.primary,
                }}
                prefix={<Icon type="loading" />}
              />
            </Card>
          </Col>
          <Col span={6}>
            <Card>
              <Statistic
                title="目标温度"
                value={roomStatus.targetTemp}
                valueStyle={{ color: red.primary }}
                suffix="℃"
              />
            </Card>
          </Col>
        </Row>
        <Row gutter={16} style={{ marginBottom: 10 }}>
          <Col span={12}>
            <Card title="操作面板">
              <div>
                开关机：
                <Switch
                  checkedChildren="开"
                  unCheckedChildren="关"
                  checked={this.state.checked}
                  onChange={async (checked, event) => {
                    await request.put(`/api/room/${this.state.roomId}/wind`, {
                      command: checked ? 'turnOn' : 'turnOff',
                    });
                  }}
                />
              </div>

              <div style={{ marginTop: 16 }}>
                模式：
                <Radio.Group
                  value={this.state.windMode}
                  onChange={this.onWindModeChange}
                  buttonStyle="solid"
                >
                  <Radio.Button value="cooling">制冷</Radio.Button>
                  <Radio.Button value="heating">制热</Radio.Button>
                </Radio.Group>
              </div>

              <div style={{ marginTop: 16 }}>
                风速：
                <Radio.Group
                  value={this.state.windSpeed}
                  onChange={this.onWindSpeedChange}
                  buttonStyle="solid"
                >
                  <Radio.Button value={0}>低风</Radio.Button>
                  <Radio.Button value={1}>中风</Radio.Button>
                  <Radio.Button value={2}>高风</Radio.Button>
                </Radio.Group>
              </div>
              <div style={{ marginTop: 16 }}>
                目标温度：
                <Row>
                  <Col span={12}>
                    <Slider
                      min={roomStatus.windMode === 'cooling' ? 18 : 25}
                      max={roomStatus.windMode === 'cooling' ? 25 : 30}
                      onChange={this.onTargetTempChange}
                      value={targetTemp}
                    />
                  </Col>
                  <Col span={4}>
                    <InputNumber
                      min={roomStatus.windMode === 'cooling' ? 18 : 25}
                      max={roomStatus.windMode === 'cooling' ? 25 : 30}
                      style={{ marginLeft: 16 }}
                      value={targetTemp}
                      onChange={this.onTargetTempChange}
                    />
                  </Col>
                </Row>
              </div>
            </Card>
          </Col>
        </Row>

        <BackTop visibilityHeight={200} style={{ right: 50 }} />
      </div>
    );
  }

render () {
    const cardContent = `此页面用到的图表插件是<a href="https://github.com/alibaba/BizCharts">bizcharts@^3.1.10</a>`
    return (
      <div>
        <CustomBreadcrumb arr={['其它', '图表']}/>
        <TypingCard title='图表' source={cardContent}/>
        <Row gutter={10}>
          <Col span={12}>
            <Card title='基础折线图' bordered={false} className='card-item'>
              <Chart height={400} data={data} scale={cols} forceFit>
                <Axis name="year"/>
                <Axis name="value"/>
                <Tooltip crosshairs={{type: 'y'}}/>
                <Geom type="line" position="year*value" size={2}/>
                <Geom type='point' position="year*value" size={4} shape={'circle'}
                      style={{stroke: '#fff', lineWidth: 1}}/>
              </Chart>
            </Card>
          </Col>
          <Col span={12}>
            <Card title='基础柱状图' bordered={false} className='card-item'>
              <Chart height={400} data={data2} scale={cols2} forceFit>
                <Axis name="year"/>
                <Axis name="sales"/>
                <Tooltip crosshairs={{type: 'y'}}/>
                <Geom type="interval" position="year*sales"/>
              </Chart>
            </Card>
          </Col>
        </Row>
        <Row gutter={10}>
          <Col span={12}>
            <Card title='基础饼图' bordered={false} className='card-item'>
              <Chart height={400} data={dv3} scale={cols3} padding={[80, 100, 80, 80]} forceFit>
                <Coord type='theta' radius={0.75}/>
                <Axis name="percent"/>
                {/*<Legend position='right' offsetY={-80} offsetX={-100}/>*/}
                <Legend position='right' offsetY={-80}/>
                <Tooltip
                  showTitle={false}
                  itemTpl='<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
                />
                <Geom
                  type="intervalStack"
                  position="percent"
                  color='item'
                  tooltip={['item*percent', (item, percent) => {
                    percent = percent * 100 + '%'
                    return {
                      name: item,
                      value: percent
                    }
                  }]}
                  style={{lineWidth: 1, stroke: '#fff'}}
                >
                  <Label content='percent' formatter={(val, item) => {
                    return item.point.item + ': ' + val
                  }}/>
                </Geom>
              </Chart>
            </Card>
          </Col>
          <Col span={12}>
            <Card title='气泡图' bordered={false} className='card-item'>
              <Chart height={400} data={data4} scale={cols4} forceFit>
                <Tooltip showTitle={false}/>
                <Axis name='GDP' label={{
                  formatter: (value) => {
                    return (value / 1000).toFixed(0) + 'k'
                  } // 格式化坐标轴的显示
                }}/>
                <Axis name='LifeExpectancy'/>
                <Legend reversed/>
                <Geom type='point' position="GDP*LifeExpectancy" color={['continent', val => {
                  return colorMap[val]
                }]} tooltip='Country*Population*GDP*LifeExpectancy' opacity={0.65} shape="circle"
                      size={['Population', [4, 65]]} style={['continent', {
                  lineWidth: 1,
                  strokeOpacity: 1,
                  fillOpacity: 0.3,
                  opacity: 0.65,
                  stroke: val => {
                    return colorMap[val]
                  }
                }]}/>
              </Chart>
            </Card>
          </Col>
        </Row>
        <BackTop visibilityHeight={200} style={{right: 50}}/>
      </div>
    )
  }

render() {
    const {size, current} = this.state
    const cardContent = '当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务，引导用户按照流程完成任务的导航条'
    return (
      <div>
        <CustomBreadcrumb arr={['导航', '步骤条']}/>
        <TypingCard source={cardContent}/>
        <Row gutter={16}>
          <Col span={12}>
            <Card bordered={false} className='card-item' title='基本使用'>
              <Steps current={2}>
                <Step title="Finished" description="This is a description."/>
                <Step title="In Progress" description="This is a description."/>
                <Step title="Waiting" description="This is a description."/>
              </Steps>
            </Card>
            <Card bordered={false} className='card-item' title='基本使用'>
              <Steps current={1}>
                <Step title="Finished" description="This is a description."/>
                <Step title="In Progress" description="This is a description."/>
                <Step title="Waiting" description="This is a description."/>
              </Steps>
            </Card>
            <Card bordered={false} className='card-item' title='步骤运行错误'>
              <Steps current={1} status="error">
                <Step title="Finished" description="This is a description"/>
                <Step title="In Process" description="This is a description"/>
                <Step title="Waiting" description="This is a description"/>
              </Steps>
            </Card>
            <Card bordered={false} className='card-item' title='步骤切换'>
              <Steps current={current}>
                {steps.map(item => <Step title={item.title}
                                         key={item.title}
                                         description={item.content}/>)}
              </Steps>
              <div style={styles.stepsContent}>{steps[current].content}</div>
              <div>
                {
                  current < steps.length - 1 ?
                    <Button type='primary'
                            onClick={() => this.setState({current: current + 1})}>下一步</Button> :
                    <Button
                      onClick={() => message.success('Processing complete!')}>已完成</Button>
                }
                <Button
                  style={current === 0 ? {display: 'none'} : {marginLeft: 15}}
                  onClick={() => this.prev()}>上一步</Button>
              </div>
            </Card>
          </Col>
          <Col span={12}>
            <Card bordered={false} className='card-item' title='大小'>
              <Radio.Group style={{marginBottom: '1em'}}
                           onChange={(e) => this.setState({size: e.target.value})}
                           value={size}>
                <Radio.Button value='small'>Small</Radio.Button>
                <Radio.Button value='default'>Default</Radio.Button>
              </Radio.Group>
              <Steps current={1} size={size}>
                <Step title="Finished" description="This is a description."/>
                <Step title="In Progress" description="This is a description."/>
                <Step title="Waiting" description="This is a description."/>
              </Steps>
            </Card>
            <Card bordered={false} className='card-item' title='带图标'>
              <Steps>
                <Step status="finish" title="Login" icon={<Icon type="user"/>}/>
                <Step status="finish" title="Verification"
                      icon={<Icon type="solution"/>}/>
                <Step status="process" title="Pay"
                      icon={<Icon type="loading"/>}/>
                <Step status="wait" title="Done" icon={<Icon type="smile-o"/>}/>
              </Steps>
            </Card>
            <Card bordered={false} className='card-item' title='点状步骤条'>
              <Steps progressDot current={2}>
                <Step title="Finished" description="This is a description."/>
                <Step title="In Progress" description="This is a description."/>
                <Step title="Waiting" description="This is a description."/>
              </Steps>
            </Card>
          </Col>
        </Row>
        <BackTop visibilityHeight={200} style={{right: 50}}/>
      </div>
    )
  }

render() {
    const {getFieldDecorator, getFieldValue} = this.props.form
    const formItemLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 4},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 12},
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 12,
          offset: 4,
        },
      },
    }
    const prefixSelector = getFieldDecorator('prefix', {
      initialValue: 86,
    })(
      <Select style={{width: 70}}>
        <Option value={86}>+86</Option>
        <Option value={87}>+87</Option>
      </Select>
    );
    const cardContent = '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景'
    return (
      <div>
        <CustomBreadcrumb arr={['输入', '表单', '基础表单']}/>
        <TypingCard source={cardContent}/>
        <Card bordered={false} title='基础表单'>
          <Form layout='horizontal' style={{width: '70%', margin: '0 auto'}} onSubmit={this.handleSubmit}>
            <FormItem label='邮箱' {...formItemLayout}>
              {
                getFieldDecorator('email', {
                  rules: [
                    {
                      type: 'email',
                      message: '请输入正确的邮箱地址'
                    },
                    {
                      required: true,
                      message: '请填写邮箱地址'
                    }
                  ]
                })(
                  <Input/>
                )
              }
            </FormItem>
            <FormItem label='密码' {...formItemLayout}>
              {
                getFieldDecorator('password', {
                  rules: [
                    {
                      required: true,
                      message: '请输入密码'
                    },
                    {
                      min: 6,
                      message: '密码至少为6个字符'
                    },
                    {
                      max: 16,
                      message: '密码最多为16个字符'
                    },
                    {
                      whitespace: true,
                      message: '密码中不能有空格'
                    }
                  ]
                })(
                  <Input type='password'/>
                )
              }
            </FormItem>
            <FormItem label='确认密码' {...formItemLayout} required>
              {
                getFieldDecorator('confirm', {
                  rules: [
                    {
                      validator: (rule, value, callback) => {
                        const {getFieldValue} = this.props.form
                        if (!getFieldValue('password')) {
                          callback('请先输入上面的密码！')
                        }
                        if (value && value !== getFieldValue('password')) {
                          callback('两次输入不一致！')
                        }
                        callback()
                      }
                    }
                  ]
                })(
                  <Input type='password'/>
                )
              }
            </FormItem>
            <FormItem {...formItemLayout} label={(
              <span>
                昵称&nbsp;
                <Tooltip title='请输入您的昵称'>
                  <Icon type='question-circle-o'/>
                </Tooltip>
              </span>
            )}>
              {
                getFieldDecorator('nickname', {
                  rules: []
                })(
                  <Input/>
                )
              }
            </FormItem>
            <FormItem label='居住地' {...formItemLayout} required>
              {
                getFieldDecorator('residence', {
                  rules: [
                    {
                      type: 'array',
                      required: true,
                      message: '请选择居住地'
                    }
                  ]
                })(
                  <Cascader options={options} expandTrigger="hover" placeholder=''/>
                )
              }
            </FormItem>
            <FormItem label='电话' {...formItemLayout}>
              {
                getFieldDecorator('phone', {
                  rules: [
                    {
                      len: 11,
                      pattern: /^[1][3,4,5,7,8][0-9]{9}$/,
                      required: true,
                      message: '请输入正确的11位手机号码'
                    }
                  ]
                })(
                  <Input addonBefore={prefixSelector}/>
                )
              }
            </FormItem>
            <FormItem label='个人站点' {...formItemLayout}>
              {
                getFieldDecorator('website', {
                  rules: [
                    {
                      pattern: /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~/])+$/,
                      message: '请输入正确的站点地址'
                    }
                  ]
                })(
                  <Input/>
                )
              }
            </FormItem>
            <FormItem{...formItemLayout} label="验证码">
              <Row gutter={8}>
                <Col span={12}>
                  {getFieldDecorator('captcha', {
                    rules: [{required: true, message: '请输入验证码！'}],
                  })(
                    <Input/>
                  )}
                </Col>
                <Col span={12}>
                  <Button disabled={this.state.disabled} onClick={(e) => this.countdown(e)}>{this.state.text}</Button>
                </Col>
              </Row>
            </FormItem>
            <FormItem {...tailFormItemLayout}>
              {getFieldDecorator('agreement', {
                valuePropName: 'checked',
              })(
                <Checkbox>我已阅读并同意<a>协议</a></Checkbox>
              )}
            </FormItem>
            <FormItem style={{textAlign: 'center'}} {...tailFormItemLayout}>
              <Button type="primary" htmlType="submit" disabled={!getFieldValue('agreement')}>提交</Button>
            </FormItem>
          </Form>
        </Card>
        <BackTop visibilityHeight={200} style={{right: 50}}/>
      </div>
    )
  }