业主共有页面样式修改

@@ -2,7 +2,7 @@
 	<div ref="lpb" class="content_box">
 		<el-tabs v-model="activeName" class="tabs" @tab-click="handleClick">
 			<el-tab-pane label="自然幢信息" name="zrzxx"><zrzxx></zrzxx></el-tab-pane>
-			<el-tab-pane label="业主共有" name="yzgy"><yzgy></yzgy></el-tab-pane>
+			<el-tab-pane label="业主共有" name="yzgy"><yzgy v-if="yzgyLoad"></yzgy></el-tab-pane>
 			<el-tab-pane label="登记簿" name="djb"><djb></djb></el-tab-pane>
 			<el-tab-pane label="楼盘表" name="lpb"><lpb v-if="lpbLoad"></lpb></el-tab-pane>
 			<el-tab-pane label="历史回溯" name="lshs"><lshs></lshs></el-tab-pane>
@@ -28,6 +28,7 @@ export default {
 		return {
 			activeName: "zrzxx",
 			lpbLoad:false, //默认不加载楼盘表组件
+			yzgyLoad:false,
 		};
 	},
 	methods: {
@@ -35,6 +36,9 @@ export default {
 			if(!this.lpbLoad){
 				this.lpbLoad = tab.name == 'lpb' ? true : false
 			}
+			if(!this.yzgyLoad){
+				this.yzgyLoad = tab.name == 'yzgy' ? true : false
+			}
 		},
 	},
 	created() {},

 <template>
-    <div class="">
-        <div class="main">
+    <div class="main"  ref="mainBox">
         <table border="1">
             <tr>
                 <td colspan="3">宗地代码</td>
@@ -54,9 +53,11 @@
                     <td>{{sumFttdmj}}</td>
                 </tr>-->
         </table>
-            <div class="pers">
+        <!-- <div class="pers">
             <el-button @click="save" type="primary">保存</el-button>
-            </div>
+        </div> -->
+        <div class="header-button" :style="{width:mainBoxWidth+'px'}">
+            <el-button type="primary" class="saveBtn"   @click="save">保存</el-button>
         </div>
     </div>
 </template>
@@ -83,7 +84,8 @@
                         fttdmj: '',      //分摊土地面积
                         fj: ''
                     }]
-                }
+                },
+                mainBoxWidth:0
             }
         },
 
@@ -127,10 +129,12 @@
             console.log("create init...")
         },
         mounted() {
-            console.log("mounted init...")
+            // console.log(this.$refs.mainBox.clientWidth,"this.$refs.mainBox.clientWidth")
             this.Data.glbsm = this.$store.state.zrzbsm
             this.zddm = this.$store.state.zddm
-            this.getData(this.Data.glbsm)
+            this.$nextTick(() => {
+                this.mainBoxWidth = this.$refs.mainBox.clientWidth;
+            })
         },
         watch: {
             "$store.state.zdbsm": function (bsm) {
@@ -147,7 +151,7 @@
         box-sizing: border-box;
         padding: 18px;
         height: auto;
-        width: 80%;
+        width: 100%;
     }
 
     table {
@@ -186,4 +190,22 @@
     .dzwsl {
         width: 200px;
     }
+    .header-button {
+        height: 50px;
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        text-align: center;
+        background-color: #ffffff;
+        .saveBtn {
+            background-color: #00CACD;
+            border-color: #00CACD;
+            padding: 10px 30px;
+            margin-top: 8px;
+        }
+        .saveBtn:hover {
+            background-color: rgba(0, 202, 205, .8);
+            border-color: rgba(0, 202, 205, .8);
+        }
+    }
 </style>