22

config/defaultSettings.js

@@ -9,7 +9,7 @@ const proSettings = {
   colorWeak: false,
   title: '产品',
   pwa: false,
-  iconfontUrl: '//at.alicdn.com/t/font_2276974_d1zkby7ek9c.js',
-  "splitMenus": true
-};
-export default proSettings;
+  iconfontUrl: '//at.alicdn.com/t/font_2276974_cbxec9p4wcq.js',
+  splitMenus: true,
+}
+export default proSettings

src/assets/css/common.less

@@ -7,8 +7,21 @@
 .pl-4{
   padding-left: 1.5rem;
 }
-.sheet-left-panel,.sheet-right-panel{
+.sheet-left-panel{
   height: 834px;
   overflow-x: hidden;
   overflow-y: auto;
 }
+.sheet-right-panel{
+  height: 385px;;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.sheet-btns{
+  height: 24px;
+}
+.sheet-panel-record{
+  height: 300px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}

src/components/PopContactForm/index.jsx

@@ -1,4 +1,4 @@
-import { Button, Drawer, Form, Input,Row, Col, Tabs, Cascader, Select, Tag } from 'antd'
+import { Button, Drawer, Form, Input,Row, Col, Tabs, Cascader, Select, Tag, List, Typography, Icon } from 'antd'
 import React, { useState, useEffect } from 'react'
 import styles from './index.less'
 
@@ -53,6 +53,13 @@ const Popcontactform = props => {
       ],
     },
   ];
+  const listdata = [
+    'Racing car sprays burning fuel into crowd.',
+    'Japanese princess to wed commoner.',
+    'Australian walks 100km after outback crash.',
+    'Man charged over missing wedding girl.',
+    'Los Angeles battles huge wildfires.',
+  ];
   return (
     <div>
       <div className="sheet-box">
@@ -73,39 +80,27 @@ const Popcontactform = props => {
                 <Col span={12} className={["text-right",styles.textMuted]}>陈特 创建于 2019年5月6日 14:55</Col>
               </Row>
               <Form layout="vertical" form={form}>
-                <Row gutter={16}>
-                  <Col span={24}>
-                    <Form.Item
-                    label="姓名"
-                    name="clientname"
-                    rules={[{ required: false, message: '姓名' }]}
-                    >
-                    <Input value="刘泽富" />
-                    </Form.Item>
-                  </Col>
-                </Row>
-                <Row gutter={16}>
-                  <Col span={24}>
-                    <Form.Item
-                    label="联系人地区"
-                    name="local"
-                    rules={[{ required: false, message: '地区' }]}
-                    >
-                    <Cascader options={residences} />
-                    </Form.Item>
-                  </Col>
-                </Row>
-                <Row gutter={16}>
-                  <Col span={24}>
-                    <Form.Item
-                    label="客户名称"
-                    name="companyname"
-                    rules={[{ required: false, message: '客户名称' }]}
-                    >
-                    <Input value="刘泽富" />
-                    </Form.Item>
-                  </Col>
-                </Row>
+                <Form.Item
+                  label="姓名"
+                  name="clientname"
+                  rules={[{ required: false, message: '姓名' }]}
+                  >
+                  <Input value="刘泽富" />
+                </Form.Item>
+                <Form.Item
+                  label="联系人地区"
+                  name="local"
+                  rules={[{ required: false, message: '地区' }]}
+                  >
+                  <Cascader options={residences} />
+                </Form.Item>
+                <Form.Item
+                  label="客户名称"
+                  name="companyname"
+                  rules={[{ required: false, message: '客户名称' }]}
+                  >
+                  <Input value="刘泽富" />
+                </Form.Item>
                 <Row gutter={16}>
                   <Col span={12}>
                     <Form.Item
@@ -179,8 +174,7 @@ const Popcontactform = props => {
                     <Input value="" />
                     </Form.Item>
                   </Col>
-                  <Col span={12}>Q
-                  </Col>
+                  <Col span={12}/>
                 </Row>
                 <Row gutter={16}>
                   <Col span={12}>
@@ -202,86 +196,54 @@ const Popcontactform = props => {
                     </Form.Item>
                   </Col>
                 </Row>
-                <Row gutter={16}>
-                  <Col span={24}>
-                    <Form.Item
-                    label="办公室"
-                    name=""
-                    rules={[{ required: false, message: '办公室' }]}
-                    >
-                    <Input value="" />
-                    </Form.Item>
-                  </Col>
-                </Row>
-                <Row gutter={16}>
-                  <Col span={24}>
-                    <Form.Item
-                    label="联系人地址"
-                    name=""
-                    rules={[{ required: false, message: '联系人地址' }]}
-                    >
-                    <Input value="" />
-                    </Form.Item>
-                  </Col>
-                </Row>
-                <Row gutter={16}>
-                  <Col span={24}>
-                    <Form.Item
-                    label="联系人乘车"
-                    name=""
-                    rules={[{ required: false, message: '联系人乘车' }]}
-                    >
-                    <Input value="" />
-                    </Form.Item>
-                  </Col>
-                </Row>
-                <Row gutter={16}>
-                  <Col span={24}>
-                    <Form.Item
-                    label="联系人地标"
-                    name=""
-                    rules={[{ required: false, message: '联系人地标' }]}
-                    >
-                    <Input value="" />
-                    </Form.Item>
-                  </Col>
-                </Row>
-                <Row gutter={16}>
-                  <Col span={24}>
-                    <Form.Item
-                    label="联系人住宿"
-                    name=""
-                    rules={[{ required: false, message: '联系人住宿' }]}
-                    >
-                    <Input value="" />
-                    </Form.Item>
-                  </Col>
-                </Row>
-                <Row gutter={16}>
-                  <Col span={24}>
-                    <Form.Item
-                    label="备注"
-                    name=""
-                    rules={[{ required: false, message: '备注' }]}
-                    >
-                    <Input value="" />
-                    </Form.Item>
-                  </Col>
-                </Row>
-                <Row gutter={16}>
-                  <Col span={24}>
-                    <Form.Item label="个人标签">
-                      <span className="ant-form-text"><Tag color="#16A085">标签</Tag><Tag color="#2980B9">特别关注</Tag></span>
-                    </Form.Item>
-                  </Col>
-                </Row>
-                <Row gutter={16}>
-                  <Col span={24}>
-                  <Form.Item label="协作标签">
-                      <span className="ant-form-text"><Tag color="#F8AC59">协作标签1</Tag><Tag color="#FF69B4">协作标签2</Tag></span>
-                    </Form.Item>
-                  </Col>
-                </Row>
+                <Form.Item
+                  label="办公室"
+                  name=""
+                  rules={[{ required: false, message: '办公室' }]}
+                  >
+                  <Input value="" />
+                </Form.Item>
+                <Form.Item
+                  label="联系人地址"
+                  name=""
+                  rules={[{ required: false, message: '联系人地址' }]}
+                  >
+                  <Input value="" />
+                </Form.Item>
+                <Form.Item
+                  label="联系人乘车"
+                  name=""
+                  rules={[{ required: false, message: '联系人乘车' }]}
+                  >
+                  <Input value="" />
+                </Form.Item>
+                <Form.Item
+                  label="联系人地标"
+                  name=""
+                  rules={[{ required: false, message: '联系人地标' }]}
+                  >
+                  <Input value="" />
+                </Form.Item>
+                <Form.Item
+                  label="联系人住宿"
+                  name=""
+                  rules={[{ required: false, message: '联系人住宿' }]}
+                  >
+                  <Input value="" />
+                </Form.Item>
+                <Form.Item
+                  label="备注"
+                  name=""
+                  rules={[{ required: false, message: '备注' }]}
+                  >
+                  <Input value="" />
+                </Form.Item>
+                <Form.Item label="个人标签">
+                  <span className="ant-form-text"><Tag color="#16A085">标签</Tag><Tag color="#2980B9">特别关注</Tag></span>
+                </Form.Item>
+                <Form.Item label="协作标签">
+                  <span className="ant-form-text"><Tag color="#F8AC59">协作标签1</Tag><Tag color="#FF69B4">协作标签2</Tag></span>
+                </Form.Item>
               </Form>
               <Button
                 type="primary"
@@ -303,17 +265,33 @@ const Popcontactform = props => {
             <Col span={12}>
               <div className="sheet-right-panel pl-4">
                 <Tabs onChange={callback} type="card">
-                  <TabPane tab="Tab 1" key="1">
+                  <TabPane tab="养护云造价" key="1">
                     Content of Tab Pane 1
                   </TabPane>
-                  <TabPane tab="Tab 2" key="2">
+                  <TabPane tab="大司空云计价" key="2">
                     Content of Tab Pane 2
                   </TabPane>
-                  <TabPane tab="Tab 3" key="3">
+                  <TabPane tab="软件锁" key="3">
+                    Content of Tab Pane 3
+                  </TabPane>
+                  <TabPane tab="通行账号" key="4">
                     Content of Tab Pane 3
                   </TabPane>
                 </Tabs>
               </div>
+              <div className="sheet-btns">
+                <a><Icon type="icon-plus1" /> 绑定加密锁</a>
+              </div>
+              <div className="sheet-panel-record">
+                <List
+                dataSource={listdata}
+                  renderItem={item => (
+                    <List.Item>
+                      <Typography.Text mark>[ITEM]</Typography.Text> {item}
+                    </List.Item>
+                  )}
+                />
+              </div>
             </Col>
           </Row>
         </Drawer>