表单提交界面美化

TODO:图片上传

src/Entry.js

@@ -1,28 +1,48 @@
 import React from 'react';
 import Sheet from './components/Sheet';
-import { Upload, Button, Icon, BackTop } from 'antd';
+import { Upload,Icon,BackTop,Layout,Button,Avatar} from 'antd';
+import Background from './background2.jpg';
 
-function Entry() {
-  return (
-    <div>
-      <h2 class="ant-typography" style={{ textAlign: 'center' }}>
-        浙江大学学生E志者协会2020年纳新报名表
-  </h2>
-      <center>
-        <Upload>
-          <Button style={{ marginBlockEnd: 20 }}>
-            <Icon type="upload" />
-            上传照片
+
+class Entry extends React.Component {
+  state = {
+    loading: false,
+    OSSData: {},
+  };
+
+
+
+  render() {
+    const uploadButton = (
+      <Button>
+      <Icon type="upload" /> 上传照片
       </Button>
-        </Upload>
-      </center>
-      <Sheet />
-      <BackTop visibilityHeight={200} />
-      <p style={{ textAlign: 'center' }}>
-        浙江大学学生E志者协会©2020 Created by EVATech
-  </p>
-    </ div>
-  )
+    );
+    const { imageUrl } = this.state;
+    return (
+      <Layout style={{backgroundImage: `url(${Background})`}}>
+        <div style={{background:'#fff',borderRadius:20,
+        paddingTop:48, paddingLeft:24, paddingRight:24, marginTop: 24, marginLeft: 24, marginRight: 24,marginBottom:24,opacity:0.75 }} >
+          <h2 class="ant-typography" style={{ textAlign: 'center' }}>
+            浙江大学学生E志者协会2020年纳新报名表
+          </h2>
+          <center>
+          <Upload
+          name="avatar"
+          onChange={this.handleChange}
+          style={{display:"inline-block",textAlign:"center"}}
+          >
+            {imageUrl ?<Avatar shape="square" size={80} icon="user" src= {imageUrl} /> : uploadButton}
+          </Upload>
+          </center>
+          <Sheet />
+          <BackTop visibilityHeight={200} />
+          <p style={{textAlign: 'center'}}>
+            浙江大学学生E志者协会©2020 Created by EVATech
+          </p>
+        </ div>
+      </Layout>
+    );
+  }
 }
-
-export default Entry;
+export default Entry;