多幢页面样式调整

 <template>
-    <div class="dz content-form">
+    <div class="dz content-form"  ref="mainBox">
         <el-form ref="form" :model="form" label-width="160px">
             <Qlr ref="qlrxxModule" :bsm="bsm"></Qlr>
             <table border="1" width="100%" cellspacing="0" cellpadding="0" class="dzTable">
@@ -189,8 +189,8 @@
                 </tbody>
             </table>
         </el-form>
-        <div style="min-height: 40px;text-align: center;margin-top: 10px">
-            <el-button type="success" @click="onSave">保存</el-button>
+        <div class="header-button" :style="{width:mainBoxWidth+'px'}">
+            <el-button type="primary" class="saveBtn" @click="onSave">保存</el-button>
             <el-button type="primary" @click="onSubmit">提交</el-button>
             <el-button type="primary" @click="registerCall">登记调用</el-button>
         </div>
@@ -281,8 +281,29 @@
                 }],
                 value: '',
                 ytTitleRowspan:1,  //用途的单元格垂直合并数量
+                mainBoxWidth: 0,
             }
         },
+        created() {
+            if(this.source===1){
+                this.bsm=this.$route.query.bsm;
+                this.form.dzbsm=this.$route.query.bsm;
+                this.getZddm(this.$store.state.zdbsm);
+            }else {
+                this.bsm=this.$route.query.bsm;
+                this.form.dzbsm=this.$route.query.bsm;
+            }
+            if(this.source!==1){
+                this.bsm=this.$route.query.bsm;
+                this.form.dzbsm=this.$route.query.bsm;
+                this.getDzDetailByBsm(this.$route.query.bsm)
+            }
+        },
+        mounted(){
+            this.$nextTick(() => {
+                this.mainBoxWidth = this.$refs.mainBox.clientWidth;
+            })
+        },
         methods: {
             registerCall(){
                 let data={
@@ -480,21 +501,6 @@
                     })
             },
         },
-        created() {
-            if(this.source===1){
-                this.bsm=this.$route.query.bsm;
-                this.form.dzbsm=this.$route.query.bsm;
-                this.getZddm(this.$store.state.zdbsm);
-            }else {
-                this.bsm=this.$route.query.bsm;
-                this.form.dzbsm=this.$route.query.bsm;
-            }
-            if(this.source!==1){
-                this.bsm=this.$route.query.bsm;
-                this.form.dzbsm=this.$route.query.bsm;
-                this.getDzDetailByBsm(this.$route.query.bsm)
-            }
-        },
         computed: {
             dzbsm() {
                 return this.$route.query.bsm;
@@ -525,6 +531,7 @@
         box-sizing: border-box;
         padding: 18px;
         padding-bottom: 0;
+        margin-bottom: 50px;
         .iconfont{
             cursor: pointer;
         }
@@ -578,5 +585,26 @@
                 text-align: center;
             }
         }
+        .header-button {
+            z-index: 3;
+            height: 50px;
+            position: fixed;
+            bottom: 0;
+            right: 0;
+            text-align: center;
+            background-color: #ffffff;
+            .el-button {
+                padding: 10px 30px;
+                margin-top: 8px;
+            }
+            .saveBtn {
+                background-color: #00CACD;
+                border-color: #00CACD;
+            }
+            .saveBtn:hover {
+                background-color: rgba(0, 202, 205, .8);
+                border-color: rgba(0, 202, 205, .8);
+            }
+        }
     }
 </style>

 <template>
     <div class="content_box">
-        <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick">
+        <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick"  type="border-card" >
             <el-tab-pane label="多幢基本信息" name="dzxx"><dzxx v-if="dzJbxxVisble"></dzxx></el-tab-pane>
             <el-tab-pane label="附件材料" name="fjcl"><fjcl v-if="fjclVisible"></fjcl></el-tab-pane>
         </el-tabs>
@@ -43,4 +43,22 @@
         watch: {},
     };
 </script>
-<style scoped lang="less"></style>
+<style scoped lang="less">
+	.el-tabs{
+		height: calc(100% - 50px);
+		/deep/.el-tabs__content{
+			//height: 100%;
+			 /deep/.el-tab-pane{
+			 	height: 100%;
+			 }
+			background: #eaedf5;
+			padding: 0;
+		}
+		/deep/ .el-tabs__item {
+			height: 48px;
+		}
+		/deep/ .el-tabs__header{
+			background-color: #ffffff;
+		}
+	}
+</style>