变更页面修改,楼盘表页面结构调整
Showing
5 changed files
with
111 additions
and
33 deletions
... | @@ -89,6 +89,10 @@ ol, ul { list-style:none; } | ... | @@ -89,6 +89,10 @@ ol, ul { list-style:none; } |
89 | } | 89 | } |
90 | //二级菜单样式 | 90 | //二级菜单样式 |
91 | .tabs{ | 91 | .tabs{ |
92 | >.el-tabs__content{ | ||
93 | position: unset; | ||
94 | margin-top: 50px; | ||
95 | } | ||
92 | >.is-top{ | 96 | >.is-top{ |
93 | position: -webkit-fixed; | 97 | position: -webkit-fixed; |
94 | position: fixed; | 98 | position: fixed; |
... | @@ -129,10 +133,6 @@ ol, ul { list-style:none; } | ... | @@ -129,10 +133,6 @@ ol, ul { list-style:none; } |
129 | -webkit-box-shadow: 0px 4px 28px 0px rgba(0, 0, 0, 0.4); | 133 | -webkit-box-shadow: 0px 4px 28px 0px rgba(0, 0, 0, 0.4); |
130 | box-shadow: 0px 4px 28px 0px rgba(0, 0, 0, 0.4); | 134 | box-shadow: 0px 4px 28px 0px rgba(0, 0, 0, 0.4); |
131 | } | 135 | } |
132 | .el-tabs__content{ | ||
133 | position: unset; | ||
134 | margin-top: 50px; | ||
135 | } | ||
136 | // 自定义右键菜单样式 | 136 | // 自定义右键菜单样式 |
137 | .contextmenu { | 137 | .contextmenu { |
138 | margin: 0; | 138 | margin: 0; | ... | ... |
... | @@ -10,7 +10,7 @@ | ... | @@ -10,7 +10,7 @@ |
10 | /> | 10 | /> |
11 | <span class="logo-text" v-show="!textLogo">不动产权籍调查系统</span> | 11 | <span class="logo-text" v-show="!textLogo">不动产权籍调查系统</span> |
12 | </div> | 12 | </div> |
13 | <div class="treeModule"> | 13 | <div class="treeModule" :style="{height:treeHeight+'px'}"> |
14 | <LineTree :pd="pd" @itemClick="itemClick"></LineTree> | 14 | <LineTree :pd="pd" @itemClick="itemClick"></LineTree> |
15 | </div> | 15 | </div> |
16 | </el-aside> | 16 | </el-aside> |
... | @@ -123,6 +123,7 @@ export default { | ... | @@ -123,6 +123,7 @@ export default { |
123 | }, | 123 | }, |
124 | pd: [], | 124 | pd: [], |
125 | dialogVisible: false, | 125 | dialogVisible: false, |
126 | treeHeight:0, //树结构区域高度 | ||
126 | }; | 127 | }; |
127 | }, | 128 | }, |
128 | computed: { | 129 | computed: { |
... | @@ -193,6 +194,9 @@ export default { | ... | @@ -193,6 +194,9 @@ export default { |
193 | // } | 194 | // } |
194 | this.getDic(); | 195 | this.getDic(); |
195 | this.getTreeList(); | 196 | this.getTreeList(); |
197 | this.$nextTick(()=>{ | ||
198 | this.treeHeight = this.$el.clientHeight - 120; | ||
199 | }); | ||
196 | }, | 200 | }, |
197 | methods: { | 201 | methods: { |
198 | //请求字典数据 | 202 | //请求字典数据 | ... | ... |
1 | <template> | 1 | <template> |
2 | <div> | 2 | <div class="fg" ref="fgBox"> |
3 | <el-tabs v-model="tabName"> | 3 | <el-tabs v-model="tabName" type="card" class="menu"> |
4 | <el-tab-pane label="宗地分割" name="zd"> | 4 | <el-tab-pane label="宗地分割" name="zd"> |
5 | <div class="main"> | 5 | <div class="fg-tabs"> |
6 | <div class="button"> | 6 | <el-button type="primary" class="addBtn" @click="newAdd">新增</el-button> |
7 | <el-button type="primary" @click="newAdd">新增</el-button> | ||
8 | </div> | ||
9 | <div class="table"> | 7 | <div class="table"> |
8 | <span class="tips">分割前宗地信息</span> | ||
10 | <table border="1"> | 9 | <table border="1"> |
11 | <tr> | 10 | <tr> |
12 | <td>序号</td> | 11 | <td>序号</td> |
... | @@ -39,7 +38,7 @@ | ... | @@ -39,7 +38,7 @@ |
39 | </table> | 38 | </table> |
40 | </div> | 39 | </div> |
41 | <div class="fgh"> | 40 | <div class="fgh"> |
42 | <span>分割后宗地:</span> | 41 | <span class="tips">分割后宗地信息</span> |
43 | <table border="1"> | 42 | <table border="1"> |
44 | <tr> | 43 | <tr> |
45 | <td>操作</td> | 44 | <td>操作</td> |
... | @@ -167,17 +166,16 @@ | ... | @@ -167,17 +166,16 @@ |
167 | 166 | ||
168 | <query-data @getData="getData" :centerDialogVisible.sync="centerDialogVisible" | 167 | <query-data @getData="getData" :centerDialogVisible.sync="centerDialogVisible" |
169 | @close="close"></query-data> | 168 | @close="close"></query-data> |
170 | <div class="header-button"> | 169 | <div class="header-button" :style="{width:fgBoxWidth+'px'}"> |
171 | <el-button type="primary" @click="save">保存</el-button> | 170 | <el-button type="primary" @click="save">保存</el-button> |
172 | </div> | 171 | </div> |
173 | </div> | 172 | </div> |
174 | </el-tab-pane> | 173 | </el-tab-pane> |
175 | <el-tab-pane label="多幢分割" name="dz"> | 174 | <el-tab-pane label="多幢分割" name="dz"> |
176 | <div class="main"> | 175 | <div class="fg-tabs"> |
177 | <div class="button"> | 176 | <el-button type="primary" class="addBtn" @click="newAdd">新增</el-button> |
178 | <el-button type="primary" @click="newAdd">新增</el-button> | ||
179 | </div> | ||
180 | <div class="table"> | 177 | <div class="table"> |
178 | <span class="tips">分割前宗地信息</span> | ||
181 | <table border="1"> | 179 | <table border="1"> |
182 | <tr> | 180 | <tr> |
183 | <td>序号</td> | 181 | <td>序号</td> |
... | @@ -210,7 +208,7 @@ | ... | @@ -210,7 +208,7 @@ |
210 | </table> | 208 | </table> |
211 | </div> | 209 | </div> |
212 | <div class="fgh"> | 210 | <div class="fgh"> |
213 | <span>分割后宗地:</span> | 211 | <span class="tips">分割后宗地信息</span> |
214 | <table border="1"> | 212 | <table border="1"> |
215 | <tr> | 213 | <tr> |
216 | <td>操作</td> | 214 | <td>操作</td> |
... | @@ -337,17 +335,16 @@ | ... | @@ -337,17 +335,16 @@ |
337 | 335 | ||
338 | <query-data @getData="getData" :centerDialogVisible.sync="centerDialogVisible" :dylxs="['dz']" | 336 | <query-data @getData="getData" :centerDialogVisible.sync="centerDialogVisible" :dylxs="['dz']" |
339 | @close="close"></query-data> | 337 | @close="close"></query-data> |
340 | <div class="header-button"> | 338 | <div class="header-button" :style="{width:fgBoxWidth+'px'}"> |
341 | <el-button type="primary" @click="save">保存</el-button> | 339 | <el-button type="primary" @click="save">保存</el-button> |
342 | </div> | 340 | </div> |
343 | </div> | 341 | </div> |
344 | </el-tab-pane> | 342 | </el-tab-pane> |
345 | <el-tab-pane label="户分割" name="h"> | 343 | <el-tab-pane label="户分割" name="h"> |
346 | <div class="main"> | 344 | <div class="fg-tabs"> |
347 | <div class="button"> | 345 | <el-button type="primary" class="addBtn" @click="newAdd">新增</el-button> |
348 | <el-button type="primary" @click="newAdd">新增</el-button> | ||
349 | </div> | ||
350 | <div class="table"> | 346 | <div class="table"> |
347 | <span class="tips">分割前宗地信息</span> | ||
351 | <table border="1"> | 348 | <table border="1"> |
352 | <tr> | 349 | <tr> |
353 | <td>序号</td> | 350 | <td>序号</td> |
... | @@ -380,7 +377,7 @@ | ... | @@ -380,7 +377,7 @@ |
380 | </table> | 377 | </table> |
381 | </div> | 378 | </div> |
382 | <div class="fgh"> | 379 | <div class="fgh"> |
383 | <span>分割后宗地:</span> | 380 | <span class="tips">分割后宗地信息</span> |
384 | <table border="1"> | 381 | <table border="1"> |
385 | <tr> | 382 | <tr> |
386 | <td>操作</td> | 383 | <td>操作</td> |
... | @@ -507,13 +504,26 @@ | ... | @@ -507,13 +504,26 @@ |
507 | 504 | ||
508 | <query-data @getData="getData" :centerDialogVisible.sync="centerDialogVisible" :dylxs="['h']" | 505 | <query-data @getData="getData" :centerDialogVisible.sync="centerDialogVisible" :dylxs="['h']" |
509 | @close="close"></query-data> | 506 | @close="close"></query-data> |
510 | <div class="header-button"> | 507 | <div class="header-button" :style="{width:fgBoxWidth+'px'}"> |
511 | <el-button type="primary" @click="save">保存</el-button> | 508 | <el-button type="primary" @click="save">保存</el-button> |
512 | </div> | 509 | </div> |
513 | </div> | 510 | </div> |
514 | </el-tab-pane> | 511 | </el-tab-pane> |
515 | </el-tabs> | 512 | </el-tabs> |
516 | </div> | 513 | </div> |
514 | <!-- <div class="lpb"> | ||
515 | <el-tabs v-model="activeName" type="card" @tab-click="handleClick"> | ||
516 | <el-tab-pane label="编辑楼盘" name="edit"> | ||
517 | <bjlp></bjlp> | ||
518 | </el-tab-pane> | ||
519 | <el-tab-pane label="预览楼盘" name="preview"> | ||
520 | <yllp></yllp> | ||
521 | </el-tab-pane> | ||
522 | <el-tab-pane label="详细信息" name="detail"> | ||
523 | <xxxx></xxxx> | ||
524 | </el-tab-pane> | ||
525 | </el-tabs> | ||
526 | </div> --> | ||
517 | </template> | 527 | </template> |
518 | 528 | ||
519 | <script> | 529 | <script> |
... | @@ -619,7 +629,7 @@ | ... | @@ -619,7 +629,7 @@ |
619 | oldZdbsm: "", | 629 | oldZdbsm: "", |
620 | newZdlist: [] | 630 | newZdlist: [] |
621 | }, | 631 | }, |
622 | 632 | fgBoxWidth:0, | |
623 | } | 633 | } |
624 | }, | 634 | }, |
625 | created() { | 635 | created() { |
... | @@ -627,6 +637,9 @@ | ... | @@ -627,6 +637,9 @@ |
627 | mounted() { | 637 | mounted() { |
628 | this.getXzqList(); | 638 | this.getXzqList(); |
629 | this.getzdtzm(); | 639 | this.getzdtzm(); |
640 | this.$nextTick(()=>{ | ||
641 | this.fgBoxWidth = this.$refs.fgBox.clientWidth; | ||
642 | }) | ||
630 | }, | 643 | }, |
631 | methods: { | 644 | methods: { |
632 | handleNodeClick(node) { | 645 | handleNodeClick(node) { |
... | @@ -789,15 +802,65 @@ | ... | @@ -789,15 +802,65 @@ |
789 | } | 802 | } |
790 | </script> | 803 | </script> |
791 | <style scoped lang="less"> | 804 | <style scoped lang="less"> |
805 | .fg{ | ||
806 | .menu{ | ||
807 | /deep/.el-tabs__content{ | ||
808 | position: unset; | ||
809 | margin-top: 62px; | ||
810 | overflow: visible; | ||
811 | } | ||
812 | /deep/.el-tabs__header{ | ||
813 | position: -webkit-fixed; | ||
814 | position: fixed; | ||
815 | top: 120px; | ||
816 | z-index: 999; | ||
817 | width: 100%; | ||
818 | margin-bottom: 0; | ||
819 | border: 0; | ||
820 | /deep/.el-tabs__nav-scroll{ | ||
821 | height: 50px; | ||
822 | box-sizing: border-box; | ||
823 | padding-left: 20px; | ||
824 | .el-tabs__active-bar{ | ||
825 | display: none; | ||
826 | } | ||
827 | >.el-tabs__nav{ | ||
828 | border: 0; | ||
829 | >.el-tabs__item{ | ||
830 | border: 1px solid #DEDEDE; | ||
831 | height: 36px; | ||
832 | line-height: 36px; | ||
833 | padding: 0 20px; | ||
834 | margin: 9px 10px 9px 0; | ||
835 | background-color: #ffffff; | ||
836 | } | ||
837 | .is-active{ | ||
838 | color: #006CFF; | ||
839 | border: 1px solid #006CFF; | ||
840 | } | ||
841 | } | ||
842 | } | ||
843 | } | ||
844 | } | ||
845 | } | ||
792 | .v-model { | 846 | .v-model { |
793 | z-index: 99 !important; | 847 | z-index: 99 !important; |
794 | } | 848 | } |
795 | 849 | ||
796 | .main { | 850 | .fg-tabs { |
851 | height: auto; | ||
852 | width: 100%; | ||
853 | position: relative; | ||
854 | .table{ | ||
855 | margin-top: 12px; | ||
797 | box-sizing: border-box; | 856 | box-sizing: border-box; |
798 | padding: 18px; | 857 | padding: 18px; |
799 | height: auto; | 858 | } |
800 | width: 80%; | 859 | .addBtn{ |
860 | position: absolute; | ||
861 | right: 30px; | ||
862 | top: -46px; | ||
863 | } | ||
801 | table { | 864 | table { |
802 | margin-top: 10px; | 865 | margin-top: 10px; |
803 | background-color: #fff; | 866 | background-color: #fff; |
... | @@ -833,11 +896,19 @@ | ... | @@ -833,11 +896,19 @@ |
833 | color: #b2b2b2; | 896 | color: #b2b2b2; |
834 | } | 897 | } |
835 | .fgh { | 898 | .fgh { |
836 | margin-top: 20px; | 899 | box-sizing: border-box; |
900 | padding: 0 18px; | ||
901 | margin-top: 10px; | ||
837 | } | 902 | } |
838 | .header-button { | 903 | .header-button { |
839 | margin-top: 20px; | 904 | height: 50px; |
905 | position: fixed; | ||
906 | bottom: 0; | ||
840 | text-align: center; | 907 | text-align: center; |
908 | background-color: #ffffff; | ||
909 | /deep/ .el-button{ | ||
910 | margin-top: 5px; | ||
911 | } | ||
841 | } | 912 | } |
842 | .xz-container { | 913 | .xz-container { |
843 | border: 1px solid #000; | 914 | border: 1px solid #000; |
... | @@ -845,5 +916,8 @@ | ... | @@ -845,5 +916,8 @@ |
845 | grid-template-columns: 70% 30%; | 916 | grid-template-columns: 70% 30%; |
846 | grid-template-rows: 1fr; | 917 | grid-template-rows: 1fr; |
847 | } | 918 | } |
919 | .tips{ | ||
920 | color: #9B9B9B; | ||
921 | } | ||
848 | } | 922 | } |
849 | </style> | 923 | </style> | ... | ... |
1 | <template> | 1 | <template> |
2 | <div class="content_box"> | 2 | <div class="content_box"> |
3 | <el-tabs v-model="activeName" @tab-click="handleClick"> | 3 | <el-tabs v-model="activeName" class="tabs" @tab-click="handleClick"> |
4 | <el-tab-pane label="分割" name="fg"><fg></fg></el-tab-pane> | 4 | <el-tab-pane label="分割" name="fg"><fg></fg></el-tab-pane> |
5 | <el-tab-pane label="合并" name="hb"><hb></hb></el-tab-pane> | 5 | <el-tab-pane label="合并" name="hb"><hb></hb></el-tab-pane> |
6 | <el-tab-pane label="范围属性变更" name="fwsxbg"><fwsxbg></fwsxbg></el-tab-pane> | 6 | <el-tab-pane label="范围属性变更" name="fwsxbg"><fwsxbg></fwsxbg></el-tab-pane> | ... | ... |
... | @@ -43,7 +43,7 @@ export default { | ... | @@ -43,7 +43,7 @@ export default { |
43 | width: 100%; | 43 | width: 100%; |
44 | height: 100%; | 44 | height: 100%; |
45 | box-sizing: border-box; | 45 | box-sizing: border-box; |
46 | padding: 0 18px !important; | 46 | padding:18px; |
47 | -webkit-user-select:none; | 47 | -webkit-user-select:none; |
48 | -moz-user-select:none; | 48 | -moz-user-select:none; |
49 | -ms-user-select:none; | 49 | -ms-user-select:none; | ... | ... |
-
Please register or sign in to post a comment