样式

src/components/PopContactForm/index.jsx

@@ -1,13 +1,13 @@
-import { Button, Card, Drawer, Form, Input } from 'antd'
+import { Button, Card, Drawer, Form, Input,Row, Col } from 'antd'
 import React, { useState, useEffect } from 'react'
-import styles from './index.less'
+// import styles from './index.less'
 
 const Popcontactform = props => {
   // 浏览器实际宽度
-  const [clientWidth, setClientWidth] = useState(document.body.clientWidth * 0.8)
+  const [clientWidth, setClientWidth] = useState(document.body.clientWidth * 0.7)
   useEffect(() => {
     window.addEventListener('resize', () => {
-      setClientWidth(document.body.clientWidth * 0.8)
+      setClientWidth(document.body.clientWidth * 0.7)
     })
     return () => {
       window.removeEventListener('resize')
@@ -22,20 +22,24 @@ const Popcontactform = props => {
           title="联系人"
           placement="right"
           width={clientWidth}
-          closable={false}
+          closable
           onClose={onClose}
           visible={visible}
           // mask={false}
         >
           {/* className={styles.formTextmuted} */}
+          <Row>
+            <Col span={12}><h2>刘泽富</h2></Col>
+            <Col span={12} className={styles.textRight}>陈特 创建于 2019年5月6日 14:55</Col>
+          </Row>
           <Form layout="inline" form={form}>
             <Form.Item name="code" rules={[{ required: true, message: '请输入编号' }]}>
               <Input />
             </Form.Item>
           </Form>
-          <Card title="联系人" bordered={false} extra={<span>陈特 创建于 2019年5月6日 14:55</span>}>
+          {/* <Card title="联系人" bordered={false} extra={<span>陈特 创建于 2019年5月6日 14:55</span>}>
             <h3>张三</h3>
-          </Card>
+          </Card> */}
           <Button
             onClick={() => {
               form

src/components/PopContactForm/index.less

@@ -1,30 +1,4 @@
 @import '~antd/es/style/themes/default.less';
-
-.popDrawer{
-  @media (max-width: 992px) {
-    .modal-xl {
-      max-width: 912px; }}
-  @media (min-width: 992px) {
-    .modal-xl {
-      max-width: 912px; }}
-  
-  @media (min-width: 1023px) {
-    .modal-xl {
-      max-width: 1100px; } }
-  
-  @media (min-width: 1279px) {
-    .modal-xl {
-      max-width: 1200px; } }
-  
-  @media (min-width: 1365px) {
-    .modal-xl {
-      max-width: 1286px; } }
-  
-  @media (min-width: 1439px) {
-    .modal-xl {
-      max-width: 1360px; } }
-  
-  @media (min-width: 1680px) {
-    .modal-xl {
-      max-width: 1600px; } }
-}
+// .textRight{
+//   text-align: right;
+// }