diff --git a/client/containers/Project/Interface/InterfaceList/Run.js b/client/containers/Project/Interface/InterfaceList/Run.js
index 0274b313..b51614a0 100644
--- a/client/containers/Project/Interface/InterfaceList/Run.js
+++ b/client/containers/Project/Interface/InterfaceList/Run.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { Button, Input, Select, Card, Alert, Spin, Icon, message } from 'antd'
+import { Button, Input, Select, Card, Alert, Spin, Icon, message, Collapse } from 'antd'
 import { autobind } from 'core-decorators';
 import crossRequest from 'cross-request';
 import { withRouter } from 'react-router';
@@ -16,6 +16,7 @@ import './Run.scss'
 const { TextArea } = Input;
 const InputGroup = Input.Group;
 const Option = Select.Option;
+const Panel = Collapse.Panel;
 
 @connect(
   state => ({
@@ -380,16 +381,16 @@ export default class Run extends Component {
         <Card title="请求部分" noHovering className="req-part">
           <div className="url">
             <InputGroup compact style={{display: 'flex'}}>
-              <Select value={method} style={{flexBasis: '80'}} onChange={this.changeMethod} >
+              <Select value={method} style={{flexBasis: 60}} onChange={this.changeMethod} >
                 <Option value="GET">GET</Option>
                 <Option value="POST">POST</Option>
               </Select>
-              <Select value={currDomain} mode="combobox" filterOption={() => true} style={{flexBasis: '180', flexGrow: 1}} onChange={this.changeDomain} onSelect={this.selectDomain}>
+              <Select value={currDomain} mode="combobox" filterOption={() => true} style={{flexBasis: 180, flexGrow: 1}} onChange={this.changeDomain} onSelect={this.selectDomain}>
                 {
                   Object.keys(domains).map((key, index) => (<Option value={domains[key]} key={index}>{key + '：' + domains[key]}</Option>))
                 }
               </Select>
-              <Input value={pathname + search} onChange={this.changePath} spellCheck="false" style={{flexBasis: '180', flexGrow: 1}} />
+              <Input value={pathname + search} onChange={this.changePath} spellCheck="false" style={{flexBasis: 180, flexGrow: 1}} />
             </InputGroup>
             <Button
               onClick={this.requestInterface}
@@ -399,45 +400,51 @@ export default class Run extends Component {
             >发送</Button>
           </div>
 
-          <Card title="QUERY PARAMETERS" noHovering style={{marginTop: 10}}>
-            {
-              query.map((item, index) => {
-                return (
-                  <div key={index}>
-                    <Input value={item.key} onChange={e => this.changeQuery(e, index, true)} style={{display: 'inline-block', width: 200, margin: 10}} />{' = '}
-                    <Input value={item.value} onChange={e => this.changeQuery(e, index)} style={{display: 'inline-block', width: 200, margin: 10}} />
-                    <Icon type="delete" className="icon-btn" onClick={() => this.deleteQuery(index)} />
-                  </div>
-                )
-              })
-            }
-            <Button type="primary" icon="plus" onClick={this.addQuery} style={{margin: 10}}>Add query parameter</Button>
-          </Card>
-          <Card title="HEADERS" noHovering style={{marginTop: 10}} >
-            <div className="req-row headers">
+          <Collapse defaultActiveKey={['1', '2', '3']} bordered={true}>
+            <Panel header="QUERY PARAMETERS" key="1">
+              {
+                query.map((item, index) => {
+                  return (
+                    <div key={index} className="key-value-wrap">
+                      <Input value={item.key} onChange={e => this.changeQuery(e, index, true)} className="key" />
+                      <span className="eq-symbol">=</span>
+                      <Input value={item.value} onChange={e => this.changeQuery(e, index)} className="value" />
+                      <Icon type="delete" className="icon-btn" onClick={() => this.deleteQuery(index)} />
+                    </div>
+                  )
+                })
+              }
+              <Button type="primary" icon="plus" onClick={this.addQuery}>Add query parameter</Button>
+            </Panel>
+            <Panel header="HEADERS" key="2" >
               {
                 headers.map((item, index) => {
                   return (
-                    <div key={index}>
-                      <Input value={item.name} onChange={e => this.changeHeader(e, index, true)} style={{display: 'inline-block', width: 200, margin: 10}} />{' = '}
-                      <Input value={item.value} onChange={e => this.changeHeader(e, index)} style={{display: 'inline-block', width: 200, margin: 10}} />
+                    <div key={index} className="key-value-wrap">
+                      <Input value={item.name} onChange={e => this.changeHeader(e, index, true)} className="key" />{' = '}
+                      <Input value={item.value} onChange={e => this.changeHeader(e, index)} className="value" />
                       <Icon type="delete" className="icon-btn" onClick={() => this.deleteHeader(index)} />
                     </div>
                   )
                 })
               }
-              <Button type="primary" icon="plus" onClick={this.addHeader} style={{margin: 10}}>Add header</Button>
-            </div>
-          </Card>
-          <Card title="BODY" noHovering style={{marginTop: 10}}>
-            <div className="req-row params">
-              <div>
-                <Select style={{margin: 10, float: 'right'}} defaultValue={paramsType} onChange={this.changeParamsType} className={method === 'POST' ? 'floatfix' : 'floatfix hidden'}>
-                  <Option value="text">Text</Option>
-                  <Option value="file">File</Option>
-                  <Option value="form">Form</Option>
-                </Select>
-              </div>
+              <Button type="primary" icon="plus" onClick={this.addHeader}>Add header</Button>
+            </Panel>
+            <Panel
+              header={
+                <div style={{display: 'flex', justifyContent: 'space-between'}}>
+                  <div>BODY</div>
+                  <div onClick={e => e.stopPropagation()} style={{marginRight: 5}}>
+                    <Select defaultValue={paramsType} onChange={this.changeParamsType} className={method === 'POST' ? '' : 'hidden'}>
+                      <Option value="text">Text</Option>
+                      <Option value="file">File</Option>
+                      <Option value="form">Form</Option>
+                    </Select>
+                  </div>
+                </div>
+              }
+              key="3"
+            >
               { method === 'POST' && paramsType !== 'form' && paramsType !== 'file' &&
                 <div>
                   <TextArea
@@ -468,7 +475,7 @@ export default class Run extends Component {
                         )
                       })
                     }
-                    <Button type="primary" icon="plus" onClick={this.addParams} style={{margin: 10}}>Add form parameter</Button>
+                    <Button type="primary" icon="plus" onClick={this.addParams}>Add form parameter</Button>
                   </div>
                 )
               }
@@ -484,8 +491,8 @@ export default class Run extends Component {
                   <div style={{margin: 10}}>GET 请求没有 Body。</div>
                 )
               }
-            </div>
-          </Card>
+            </Panel>
+          </Collapse>
         </Card>
 
         <Card title="返回结果" noHovering className="resp-part">
diff --git a/client/containers/Project/Interface/InterfaceList/Run.scss b/client/containers/Project/Interface/InterfaceList/Run.scss
index 2e67ae01..c2668768 100644
--- a/client/containers/Project/Interface/InterfaceList/Run.scss
+++ b/client/containers/Project/Interface/InterfaceList/Run.scss
@@ -2,12 +2,23 @@
   .has-plugin, .req-part, .resp-part {
     margin: 8px;
   }
-  // .interface-name {
-  //   font-size: 24px;
-  //   margin-bottom: 24px;
-  // }
   .url {
     display: flex;
+    margin-bottom: 24px;
+  }
+  .key-value-wrap {
+    display: flex;
+    align-items: center;
+    margin: 0 0 5px 0;
+    .key {
+      flex-basis: 220px;
+    }
+    .value {
+      flex-grow: 1;
+    }
+    .eq-symbol {
+      margin: 0 5px;
+    }
   }
   .icon-btn {
     cursor: pointer;
@@ -17,8 +28,3 @@
     color: #108ee9;
   }
 }
-.floatfix:after{
-    content:"";
-    display:table;
-    clear:both;
-}