业主共有页面样式修改
Showing
2 changed files
with
89 additions
and
63 deletions
| ... | @@ -2,7 +2,7 @@ | ... | @@ -2,7 +2,7 @@ |
| 2 | <div ref="lpb" class="content_box"> | 2 | <div ref="lpb" class="content_box"> |
| 3 | <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick"> | 3 | <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick"> |
| 4 | <el-tab-pane label="自然幢信息" name="zrzxx"><zrzxx></zrzxx></el-tab-pane> | 4 | <el-tab-pane label="自然幢信息" name="zrzxx"><zrzxx></zrzxx></el-tab-pane> |
| 5 | <el-tab-pane label="业主共有" name="yzgy"><yzgy></yzgy></el-tab-pane> | 5 | <el-tab-pane label="业主共有" name="yzgy"><yzgy v-if="yzgyLoad"></yzgy></el-tab-pane> |
| 6 | <el-tab-pane label="登记簿" name="djb"><djb></djb></el-tab-pane> | 6 | <el-tab-pane label="登记簿" name="djb"><djb></djb></el-tab-pane> |
| 7 | <el-tab-pane label="楼盘表" name="lpb"><lpb v-if="lpbLoad"></lpb></el-tab-pane> | 7 | <el-tab-pane label="楼盘表" name="lpb"><lpb v-if="lpbLoad"></lpb></el-tab-pane> |
| 8 | <el-tab-pane label="历史回溯" name="lshs"><lshs></lshs></el-tab-pane> | 8 | <el-tab-pane label="历史回溯" name="lshs"><lshs></lshs></el-tab-pane> |
| ... | @@ -28,6 +28,7 @@ export default { | ... | @@ -28,6 +28,7 @@ export default { |
| 28 | return { | 28 | return { |
| 29 | activeName: "zrzxx", | 29 | activeName: "zrzxx", |
| 30 | lpbLoad:false, //默认不加载楼盘表组件 | 30 | lpbLoad:false, //默认不加载楼盘表组件 |
| 31 | yzgyLoad:false, | ||
| 31 | }; | 32 | }; |
| 32 | }, | 33 | }, |
| 33 | methods: { | 34 | methods: { |
| ... | @@ -35,6 +36,9 @@ export default { | ... | @@ -35,6 +36,9 @@ export default { |
| 35 | if(!this.lpbLoad){ | 36 | if(!this.lpbLoad){ |
| 36 | this.lpbLoad = tab.name == 'lpb' ? true : false | 37 | this.lpbLoad = tab.name == 'lpb' ? true : false |
| 37 | } | 38 | } |
| 39 | if(!this.yzgyLoad){ | ||
| 40 | this.yzgyLoad = tab.name == 'yzgy' ? true : false | ||
| 41 | } | ||
| 38 | }, | 42 | }, |
| 39 | }, | 43 | }, |
| 40 | created() {}, | 44 | created() {}, | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <div class=""> | 2 | <div class="main" ref="mainBox"> |
| 3 | <div class="main"> | 3 | <table border="1"> |
| 4 | <table border="1"> | 4 | <tr> |
| 5 | <tr> | 5 | <td colspan="3">宗地代码</td> |
| 6 | <td colspan="3">宗地代码</td> | 6 | <td colspan="4"><input type="text" class="formInput" v-model="zddm " disabled/></td> |
| 7 | <td colspan="4"><input type="text" class="formInput" v-model="zddm " disabled/></td> | 7 | </tr> |
| 8 | </tr> | 8 | <tr> |
| 9 | <tr> | 9 | <td colspan="3">建筑物区分所有权业主共有部分权利人</td> |
| 10 | <td colspan="3">建筑物区分所有权业主共有部分权利人</td> | 10 | <td colspan="4"><input type="text" class="formInput" v-model="Data.qlr" disabled/></td> |
| 11 | <td colspan="4"><input type="text" class="formInput" v-model="Data.qlr" disabled/></td> | 11 | </tr> |
| 12 | </tr> | 12 | </table> |
| 13 | </table> | 13 | <table border="1"> |
| 14 | <table border="1"> | 14 | <tr> |
| 15 | <tr> | 15 | <td> |
| 16 | <td> | 16 | <el-button |
| 17 | <el-button | 17 | type="primary" |
| 18 | type="primary" | 18 | class="changeBtn outAdd addMinus" |
| 19 | class="changeBtn outAdd addMinus" | 19 | @click="addRow" |
| 20 | @click="addRow" | 20 | >+</el-button |
| 21 | >+</el-button | 21 | > |
| 22 | > | 22 | </td> |
| 23 | </td> | 23 | <td>建(构)筑物编号</td> |
| 24 | <td>建(构)筑物编号</td> | 24 | <td>建(构)筑物数量</td> |
| 25 | <td>建(构)筑物数量</td> | 25 | <td>建(构)筑物面积(㎡)</td> |
| 26 | <td>建(构)筑物面积(㎡)</td> | 26 | <td>占地面积(㎡)</td> |
| 27 | <td>占地面积(㎡)</td> | 27 | <td>分摊土地面积(㎡)</td> |
| 28 | <td>分摊土地面积(㎡)</td> | 28 | <td>附记</td> |
| 29 | <td>附记</td> | 29 | </tr> |
| 30 | </tr> | 30 | <tr v-for="(item,i) in Data.list" :key="i"> |
| 31 | <tr v-for="(item,i) in Data.list" :key="i"> | 31 | <td> |
| 32 | <td> | 32 | <el-button |
| 33 | <el-button | 33 | type="primary" |
| 34 | type="primary" | 34 | class="changeBtn outMinus addMinus" |
| 35 | class="changeBtn outMinus addMinus" | 35 | @click="delRow(i)" |
| 36 | @click="delRow(i)" | 36 | >-</el-button |
| 37 | >-</el-button | 37 | > |
| 38 | > | 38 | </td> |
| 39 | </td> | 39 | <td><el-input v-model="item.jgzwbh" placeholder="请输入建(构)筑物编号"></el-input></td> |
| 40 | <td><el-input v-model="item.jgzwbh" placeholder="请输入建(构)筑物编号"></el-input></td> | 40 | <td><el-input v-model="item.jgzsl" oninput="value = (value.match(/^\d*/g)) || null" placeholder="请输入建(构)筑物数量"></el-input></td> |
| 41 | <td><el-input v-model="item.jgzsl" oninput="value = (value.match(/^\d*/g)) || null" placeholder="请输入建(构)筑物数量"></el-input></td> | 41 | <td><el-input v-model="item.jgzmj" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null" placeholder="请输入建(构)筑物面积(㎡)"></el-input></td> |
| 42 | <td><el-input v-model="item.jgzmj" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null" placeholder="请输入建(构)筑物面积(㎡)"></el-input></td> | 42 | <td><el-input v-model="item.zdmj" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null" placeholder="请输入占地面积(㎡)"></el-input></td> |
| 43 | <td><el-input v-model="item.zdmj" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null" placeholder="请输入占地面积(㎡)"></el-input></td> | 43 | <td><el-input v-model="item.fttdmj" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null" placeholder="请输入分摊土地面积(㎡)"></el-input></td> |
| 44 | <td><el-input v-model="item.fttdmj" oninput="value = (value.match(/^\d*(\.?\d{0,3})/g)[0]) || null" placeholder="请输入分摊土地面积(㎡)"></el-input></td> | 44 | <td><el-input v-model="item.fj" placeholder="请输入附记"></el-input></td> |
| 45 | <td><el-input v-model="item.fj" placeholder="请输入附记"></el-input></td> | 45 | </tr> |
| 46 | </tr> | 46 | <!-- <tr> |
| 47 | <!-- <tr> | 47 | <td>统计</td> |
| 48 | <td>统计</td> | 48 | <td>{{sumTdsyqsyqmj}}</td> |
| 49 | <td>{{sumTdsyqsyqmj}}</td> | 49 | <td>{{sumDydytdmj}}</td> |
| 50 | <td>{{sumDydytdmj}}</td> | 50 | <td>{{sumFttdmj}}</td> |
| 51 | <td>{{sumFttdmj}}</td> | 51 | <td>{{sumFttdmj}}</td> |
| 52 | <td>{{sumFttdmj}}</td> | 52 | <td>{{sumFttdmj}}</td> |
| 53 | <td>{{sumFttdmj}}</td> | 53 | <td>{{sumFttdmj}}</td> |
| 54 | <td>{{sumFttdmj}}</td> | 54 | </tr>--> |
| 55 | </tr>--> | 55 | </table> |
| 56 | </table> | 56 | <!-- <div class="pers"> |
| 57 | <div class="pers"> | 57 | <el-button @click="save" type="primary">保存</el-button> |
| 58 | <el-button @click="save" type="primary">保存</el-button> | 58 | </div> --> |
| 59 | </div> | 59 | <div class="header-button" :style="{width:mainBoxWidth+'px'}"> |
| 60 | <el-button type="primary" class="saveBtn" @click="save">保存</el-button> | ||
| 60 | </div> | 61 | </div> |
| 61 | </div> | 62 | </div> |
| 62 | </template> | 63 | </template> |
| ... | @@ -83,7 +84,8 @@ | ... | @@ -83,7 +84,8 @@ |
| 83 | fttdmj: '', //分摊土地面积 | 84 | fttdmj: '', //分摊土地面积 |
| 84 | fj: '' | 85 | fj: '' |
| 85 | }] | 86 | }] |
| 86 | } | 87 | }, |
| 88 | mainBoxWidth:0 | ||
| 87 | } | 89 | } |
| 88 | }, | 90 | }, |
| 89 | 91 | ||
| ... | @@ -127,10 +129,12 @@ | ... | @@ -127,10 +129,12 @@ |
| 127 | console.log("create init...") | 129 | console.log("create init...") |
| 128 | }, | 130 | }, |
| 129 | mounted() { | 131 | mounted() { |
| 130 | console.log("mounted init...") | 132 | // console.log(this.$refs.mainBox.clientWidth,"this.$refs.mainBox.clientWidth") |
| 131 | this.Data.glbsm = this.$store.state.zrzbsm | 133 | this.Data.glbsm = this.$store.state.zrzbsm |
| 132 | this.zddm = this.$store.state.zddm | 134 | this.zddm = this.$store.state.zddm |
| 133 | this.getData(this.Data.glbsm) | 135 | this.$nextTick(() => { |
| 136 | this.mainBoxWidth = this.$refs.mainBox.clientWidth; | ||
| 137 | }) | ||
| 134 | }, | 138 | }, |
| 135 | watch: { | 139 | watch: { |
| 136 | "$store.state.zdbsm": function (bsm) { | 140 | "$store.state.zdbsm": function (bsm) { |
| ... | @@ -147,7 +151,7 @@ | ... | @@ -147,7 +151,7 @@ |
| 147 | box-sizing: border-box; | 151 | box-sizing: border-box; |
| 148 | padding: 18px; | 152 | padding: 18px; |
| 149 | height: auto; | 153 | height: auto; |
| 150 | width: 80%; | 154 | width: 100%; |
| 151 | } | 155 | } |
| 152 | 156 | ||
| 153 | table { | 157 | table { |
| ... | @@ -186,4 +190,22 @@ | ... | @@ -186,4 +190,22 @@ |
| 186 | .dzwsl { | 190 | .dzwsl { |
| 187 | width: 200px; | 191 | width: 200px; |
| 188 | } | 192 | } |
| 193 | .header-button { | ||
| 194 | height: 50px; | ||
| 195 | position: fixed; | ||
| 196 | bottom: 0; | ||
| 197 | right: 0; | ||
| 198 | text-align: center; | ||
| 199 | background-color: #ffffff; | ||
| 200 | .saveBtn { | ||
| 201 | background-color: #00CACD; | ||
| 202 | border-color: #00CACD; | ||
| 203 | padding: 10px 30px; | ||
| 204 | margin-top: 8px; | ||
| 205 | } | ||
| 206 | .saveBtn:hover { | ||
| 207 | background-color: rgba(0, 202, 205, .8); | ||
| 208 | border-color: rgba(0, 202, 205, .8); | ||
| 209 | } | ||
| 210 | } | ||
| 189 | </style> | 211 | </style> | ... | ... |
-
Please register or sign in to post a comment