feat:构建

src/css/home.css

+p{
+    margin:0;
+    padding:0;
+}
 .flex{
     display: flex;
-    justify-content: space-between;
     align-items: center;
 }
+.spaceBetween{
+    justify-content: space-between;
+}
 .more{
     width:30px;
     height:30px;
+}
+.custom{
+    background: #FFFFFF;
+    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05);
+    border-radius: 4px;
+    border: 1px solid #E1E1E2;
+}
+.mg20{
+    margin: 20px;
+}
+.customitem{
+    height: 44px;
+    background: #F9F9F9;
+    border-radius: 4px 4px 0px 0px;
+    border: 1px solid #E1E1E2;
+    padding:0 20px;
+}
+.word{
+    font-size: 14px;
+    margin:0;
+    color:#3B3B50;
+}
+.wordKb{
+    font-size: 18px;
+    font-weight: 500;
+    color: #3B3B50;
+    line-height: 25px;
+    margin-left:10px;
+}
+.radio-text-w{
+    color:#EB3B7E
+}
+.radio-text-m{
+    color:#0171c2
+}
+.grad{
+    width: 88px;
+    height: 25px;
+    background: #FFF7E6;
+    border-radius: 4px;
+    border: 1px solid rgba(247, 181, 0, 0.4);
+    font-size: 12px;
+    font-weight: 500;
+    color: #F7B500;
+    line-height: 25px;
+    text-align: center;
+}
+.ant-form-item-label > label{
+    color:#A5ADB3 !important;
+}
+.ant-form-item-label{
+    text-align: left !important;
+}
+.inner{
+    padding:21px;
+}
+.mgl20{
+    margin-left:30px;
+}
+.greyWord{
+    color:#A5ADB3
+}
+.showt{
+    margin-bottom: 24px;
 }
\ No newline at end of file

src/pages/Home.tsx

 import React, {FC, useEffect, useState} from "react";
 import Cookies from "js-cookie";
 import {fetchUser} from "../api";
-import {Spin,Button} from "antd";
+import {Spin,Form, Input, Button, Select,Radio,} from "antd";
 import { SearchOutlined } from '@ant-design/icons';
 import './../css/home.css'
-import jt from '../assets/images/jt.png'
+import jt from './../assets/images/jt.png'
+
+
 const Home: FC = () => {
   const [loading, setLoading] = useState<boolean>(false);
   const [user, setUser] = useState<UserResponse>();
+  const [customInfoEdit,setCustomInfoEdit] = useState<boolean>(false);
+  const [customInfo,setCustomInfo] = useState<any>({
+    realName:'whh',
+    account_level :'一级',
+    sexy:1,
+    idType:'1',
+    idNumber:'1233',
+    mobileNumber: '333',
+    point: '112',
+    corp: '1',
+    position: '2',
+    lastTime: '333',
+    note: '33',
+    area: '3',
+    addr: '3',
+    email: '3',
+    gyId: '2',
+    keywords: '2',
+
+  });
+  const [idTypeOpt] = useState<any>([
+    {
+      value: '0',
+      label: '身份证',
+    },
+    {
+      value: '1',
+      label: '护照',
+    },
+    {
+      value: '2',
+      label: '港澳回乡证',
+    },
+    {
+      value: '3',
+      label: '台胞证',
+    },
+    {
+      value: '4',
+      label: '其它',
+    },
+  ])
+  const { Option } = Select;
+
+const layout = {
+  labelCol: { span: 8 },
+  wrapperCol: { span: 16 },
+};
+const tailLayout = {
+  wrapperCol: { offset: 8, span: 16 },
+};
+  const [form] = Form.useForm();
+  const onGenderChange = (value: string) => {
+    switch (value) {
+      case 'male':
+        form.setFieldsValue({ note: 'Hi, man!' });
+        return;
+      case 'female':
+        form.setFieldsValue({ note: 'Hi, lady!' });
+        return;
+      case 'other':
+        form.setFieldsValue({ note: 'Hi there!' });
+    }
+  };
+
+  const onFinish = (values: any) => {
+    console.log(values);
+  };
 
+  const onReset = () => {
+    form.resetFields();
+  };
+
+  const onFill = () => {
+    console.log(customInfo)
+    debugger
+  };
+  const testClick=(): void=>{
+    console.log('aaaa')
+    setCustomInfoEdit(!customInfoEdit)
+  }
   // 获取当前外部联系人信息
   const getUserInfo = async () => {
     // setLoading(true);
@@ -23,21 +105,120 @@ const Home: FC = () => {
   useEffect(() => {
     getUserInfo().then()
   }, [])
+  // const { getFieldsValue,getFieldDecorator } = this.props.form;
 
   return (
     <Spin spinning={loading}>
       <div>
         <h1>欢迎回来，{user ? user.name: ''}</h1>
       </div>
-      <div className="flex">
-        <span>用户看板</span>
+      <div className="flex spaceBetween mg20">
+        <span className='wordKb'>用户看板</span>
         <Button type="primary" icon={<SearchOutlined />}>查找客户</Button>
       </div>
-      <div className="custom">
-        <div className="flex">
-          <p>客户信息</p>
-          {/* <img src="./jt.png" className="more" alt="" /> */}
-          <img src={require('../assets/images/jt.png')} alt="" />
+      <div className="custom mg20">
+        <div className="flex spaceBetween customitem">
+          <p className='word'>客户信息</p>
+          <img src={jt} alt="" className="more" onClick={testClick}/>
+        </div>
+        {/* <div className="flex">
+          <span>{customInfo.realName || '-' }</span>
+          <div>{ customInfo.account_level }</div>
+        </div> */}
+        <div className="flex spaceBetween">
+          <div className="inner">
+            <Form {...layout} name="control-hooks" onFinish={onFinish} initialValues={customInfo}>
+            <div className="flex spaceBetween showt">
+              <span>{customInfo.realName || '-' }</span>
+              <div className='grad'>{ customInfo.account_level }</div>
+            </div>
+            {customInfoEdit?(<Form.Item name="realName" label="客户名称" >
+              <Input  placeholder="请输入客户名称" value={customInfo.realName}/>
+              </Form.Item>): ('')}
+              
+              {!customInfoEdit?(<div className="flex showt">
+                  <div className="flex">
+                      <span className='greyWord'>性别：</span>
+                      {customInfo.sexy===1?(<div><span className="radio-wight radio-text radio-text-m"> ♂</span> <span className="radio-text radio-text-m"> 男</span></div>)
+                      :(
+                      <div><span className="radio-wight radio-text radio-text-w"> ♂</span> <span className="radio-text radio-text-w"> 女</span></div>
+                      )}
+                  </div>
+                  <div className="flex mgl20">
+                      <span className='greyWord'>手机号：</span>
+                      <span>{customInfo.mobileNumber}</span>
+                  </div>
+                  <div className="flex mgl20">
+                      <span className='greyWord'>积分：</span>
+                      <span>{customInfo.point}</span>
+                  </div>
+                </div>):('')}
+
+                {customInfoEdit?( <Form.Item name="sexy" label="性别" >
+              <Radio.Group value={customInfo.sexy}>
+                  <Radio value={1}><span className="radio-wight radio-text radio-text-m"> ♂</span> <span className="radio-text radio-text-m"> 男</span></Radio>
+                  <Radio value={2}><span className="radio-wight radio-text radio-text-w"> ♀</span> <span className="radio-text radio-text-w"> 女</span></Radio>
+                </Radio.Group>
+              </Form.Item>)
+              :('')}
+              {customInfoEdit?(<Form.Item name="idType" label="证件类型" >
+                <Select
+                  placeholder="请选择证件类型"
+                  value={customInfo.idType}
+                  allowClear
+                >
+                  {idTypeOpt.map((item:any) =>  <Option value={item.value}>{item.label}</Option>)}
+                </Select>
+              </Form.Item>):('')}
+              {customInfoEdit?(<Form.Item name="idNumber" label="证件号" >
+              <Input  placeholder="请输入证件号" value={customInfo.idNumber}/>
+              </Form.Item>):('')}
+              {customInfoEdit?(<Form.Item name="mobileNumber" label="手机号" >
+                {customInfo.mobileNumber}
+              </Form.Item>):('')}
+              {customInfoEdit?(<Form.Item name="point" label="积分" >
+                {customInfo.point}
+              </Form.Item>):('')}
+              <Form.Item name="corp" label="公司" >
+                {customInfo.corp}
+              </Form.Item>
+              <Form.Item name="position" label="职务" >
+                {customInfo.position}
+              </Form.Item>
+              <Form.Item name="realName" label="最后跟进" >
+                {customInfo.position}
+              </Form.Item>
+              <Form.Item name="keywords" label="备注" >
+                {customInfo.keywords}
+              </Form.Item>
+              <Form.Item name="area" label="地区" >
+                {customInfo.area}
+              </Form.Item>
+              <Form.Item name="addr" label="收货地址" >
+                {customInfo.addr}
+              </Form.Item>
+              <Form.Item name="email" label="Email" >
+                {customInfo.email}
+              </Form.Item>
+              <Form.Item name="gyId" label="戈友ID" >
+                {customInfo.gyId}
+              </Form.Item>
+              {!customInfoEdit?(<Form.Item name="idType" label="证件类型" >{customInfo.idType}</Form.Item>):('')}
+              {!customInfoEdit?(<Form.Item name="idNumber" label="证件号">{customInfo.idNumber}</Form.Item>):('')}
+              
+              <Form.Item {...tailLayout}>
+                <Button type="primary" htmlType="submit">
+                  Submit
+                </Button>
+                <Button htmlType="button" onClick={onReset}>
+                  Reset
+                </Button>
+                <Button type="link" htmlType="button" onClick={onFill}>
+                  Fill form
+                </Button>
+              </Form.Item>
+            </Form>
+          </div>
         </div>
       </div>
     </Spin>