Merge branch 'dev' of gitlab.corp.qunar.com:mfe/yapi into dev

client/containers/AddInterface/AddInterface.js

@@ -5,7 +5,7 @@ import axios from 'axios'
 import Mock from 'mockjs'
 import { connect } from 'react-redux'
 import { autobind } from 'core-decorators'
-import { Button, Tabs, message } from 'antd'
+import { Button, Tabs, message, Affix } from 'antd'
 import ReqMethod from './ReqMethod/ReqMethod.js'
 import ReqHeader from './ReqHeader/ReqHeader.js'
 import ReqParams from './ReqParams/ReqParams.js'
@@ -264,6 +264,7 @@ class AddInterface extends Component {
     }
     return (
       <section className="add-interface-box">
+
         <div className="content">
           <Tabs type="card">
             <TabPane tab={tagName} key="1">
@@ -275,11 +276,13 @@ class AddInterface extends Component {
               <h3 className="req-title">返回部分</h3>
               <ResParams />
               <Result isSave={isSave} mockJson={mockJson} />
-              <Button type="primary" className="save" onClick={this.saveForms}>保存</Button>
             </TabPane>
             {Pane}
           </Tabs>
         </div>
+        <Affix offsetBottom={0} className="save-button" onChange={affixed => console.log(affixed)}>
+          <Button type="primary" onClick={this.saveForms}>保存</Button>
+        </Affix>
         <div className={`loading ${isLoading}`}></div>
       </section>
     )

client/containers/AddInterface/AddInterface.scss

@@ -14,7 +14,7 @@
     border-radius: 4px;
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
     background: #FFF;
-    padding: 10px 20px 50px 20px;
+    padding: 10px 20px 0 20px;
     margin: 0 auto;
     
     .ant-tabs {
@@ -44,12 +44,6 @@
       font-weight: normal;
     }
 
-    .save {
-      position: absolute;
-      bottom: 0;
-      left: 550px;
-    }
-
     .mock {
       float: right;
       margin: 0 15px 0 0;
@@ -64,7 +58,7 @@
       }
 
       td {
-        padding: 10px 0;
+        padding: 11px 0;
       }
 
       .select {
@@ -96,8 +90,7 @@
     .req-header {
       display: -webkit-box;
       line-height: 32px;
-      margin: 10px 0 0 58px;
-      padding: 15px 0 0 0;
+      margin: 12px 0 0 58px;
 
       .req-h3 {
         line-height: 32px;
@@ -110,7 +103,7 @@
 
         li {
           display: -webkit-box;
-          margin: 0 0 10px 0;
+          margin: 0 0 16px 0;
         }
 
         .title {
@@ -125,14 +118,13 @@
     }
 
     .req-save, .res-save {
-      margin: 5px 0 0 167px;
+      margin: 0 0 0 167px;
     }
 
     /* .req-params.css */
     .req-params {
       display: -webkit-box;
-      padding: 20px 0 0 0;
-      margin: 20px 0 0 92px;
+      margin: 22px 0 0 92px;
       width: 562px;
       height: 200px;
       .req-h3 {
@@ -202,6 +194,10 @@
       .ant-tabs {
         -webkit-box-flex: 1;
       }
+
+      .ant-card-head {
+        cursor: not-allowed;
+      }
     }
 
     .dynamic-delete-button {
@@ -210,11 +206,20 @@
     }
   }
 
+  .ant-affix, .save-button {
+    padding: 20px 0;
+    background: #F6F6F6;
+    button {
+      margin: 0 auto;
+      display: block;
+    }
+  }
+
   /* .mock-url-box.css */
   .mock-url-box {
     clear: both;
     padding: 10px 0 0 0;
-    margin: 10px 0 0 96px;
+    margin: 14px 0 0 96px;
     zoom: 1;
     overflow: hidden;
     display: none;