update 房屋基本信息挪动到页签上面

Web/src/assets/style/lib/form-page.less

@@ -5,7 +5,7 @@
 
   height: 100%;
 
-  >.yo-tab-external-mount {
+  .yo-tab-external-mount {
     display: flex;
     flex-direction: column;
 
@@ -17,6 +17,7 @@
 
         background-color: @white;
 
+        &.ant-tabs-card-bar {
           .ant-tabs-nav-container {
             height: @tabs-card-height + @padding-xs;
             padding: (@tabs-card-height + @padding-xs - @btn-height-base) / 2 @padding-md;
@@ -27,9 +28,10 @@
           }
 
           .ant-tabs-tab {
-          .ant-btn();
             transition: none;
 
+            .ant-btn();
+
             &:hover {
               border-color: @btn-default-border;
             }
@@ -56,6 +58,7 @@
           }
         }
       }
+    }
 
     >.yo-tab-external-mount-content {
       position: relative;
@@ -100,7 +103,7 @@
         width: 100%;
       }
 
-      +.yo-tab-external-mount {
+      ~.yo-tab-external-mount {
         >.yo-tab-external-mount-content {
           >.yo-tab-external-tabpane {
             padding-bottom: @padding-xs * 2 + @btn-height-base + @border-width-base * 2;
@@ -145,4 +148,21 @@
       }
     }
   }
+
+  &-layout {
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+
+    &--horizontal {
+      flex-direction: row;
+    }
+  }
+
+  &--header {
+    padding: @padding-md 0;
+
+    background-color: @white;
+  }
 }

Web/src/pages/business/house/houseInfo/form/base/building.vue

@@ -14,37 +14,6 @@
   >
     <a-spin :spinning="loading">
       <a-icon slot="indicator" spin type="loading" />
-      <a-row :gutter="16" type="flex">
-        <a-col :span="12">
-          <a-form-model-item class="ant-row-flex" label="区县（市）">
-            <span>测试区</span>
-          </a-form-model-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-model-item class="ant-row-flex" label="街道（乡镇）">
-            <span>测试街道</span>
-          </a-form-model-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-model-item class="ant-row-flex" label="社区">
-            <span>欧阳社区</span>
-          </a-form-model-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-model-item class="ant-row-flex" label="片区">
-            <span>片区一22（明湖片区）</span>
-          </a-form-model-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-model-item class="ant-row-flex" label="编号">
-            <span>宁波市-测试区-测试街道-欧阳社区-项目十二(项目十二)-001</span>
-          </a-form-model-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-model-item class="ant-row-flex" label="编码">
-            <span>330266066001012001</span>
-          </a-form-model-item>
-        </a-col>
         <a-col :span="12">
           <a-form-model-item class="ant-row-flex" label="项目名称" prop="projectName">
             <a-input placeholder="请输入项目名称" v-model="form.projectName" />

Web/src/pages/business/house/houseInfo/form/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="yo-form-page">
+    <div class="yo-form-page-layout">
       <!-- 底部工具栏(需放在前面) -->
       <div class="yo-form-page--bar yo-form-page--bar--with-tab">
         <container>
@@ -16,6 +17,19 @@
         </container>
       </div>
 
+      <div :style="{ paddingBottom: 0 }" class="yo-form-page--header">
+        <container>
+          <a-descriptions :column="4" title>
+            <a-descriptions-item label="区县（市）">测试区</a-descriptions-item>
+            <a-descriptions-item label="街道（乡镇）">测试街道</a-descriptions-item>
+            <a-descriptions-item label="社区">欧阳社区</a-descriptions-item>
+            <a-descriptions-item label="片区">片区一22（明湖片区）</a-descriptions-item>
+            <a-descriptions-item :span="2" label="编号">宁波市-测试区-测试街道-欧阳社区-项目十二(项目十二)-001</a-descriptions-item>
+            <a-descriptions-item :span="2" label="编码">330266066001012001</a-descriptions-item>
+          </a-descriptions>
+        </container>
+      </div>
+
       <!-- 表单主体 -->
       <!-- 
       挂载了一个content到tab后面
@@ -23,23 +37,10 @@
       现在只使用其tab卡片,重写了一个tab内容
       -->
       <div class="yo-tab-external-mount">
-      <a-tabs @change="onTabChange" type="card">
+        <a-tabs @change="onTabChange">
           <template v-for="(tab, index) in tabs">
             <a-tab-pane :force-render="true" :key="index" :tab="tab.title" v-if="tab.show"></a-tab-pane>
           </template>
-        <a-popover placement="bottomRight" slot="tabBarExtraContent">
-          <template slot="content">
-            <p>Content</p>
-            <p>Content</p>
-          </template>
-          <template slot="title">
-            <span>Title</span>
-          </template>
-          <a-button class="block">
-            房屋基本情况
-            <a-icon type="down" />
-          </a-button>
-        </a-popover>
         </a-tabs>
         <div class="yo-tab-external-mount-content">
           <template v-for="(tab, index) in tabs">
@@ -61,6 +62,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 <script>
 export default {