业主共有页面样式修改
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