Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
3b98d722 by jiaozeping@pashanhoo.com
Options

样式修改

1 parent defbf4de
Inline Side-by-side
Showing 4 changed files with 215 additions and 274 deletions
1 .tableDivCss {
2 width: 100%;
3 height: 100%;
4 background-color: #f5f5f5;
5 padding: 5px;
6 }
7
8 .tableCss {
9 overflow-x: auto;
10 overflow-y: scroll;
11 width: 100%;
12 // height: 95%;
13 background: #fff;
14 text-align: center;
15 // padding: 4px;
16 border-collapse: collapse;
17 color: #333;
18
19 th {
20 border: 1px solid #e8e8e8;
21 line-height: 42px;
22 padding: 0 4px;
23 font-size: 14px;
24 }
25
26 td {
27 border: 1px solid #e8e8e8;
28 line-height: 42px;
29 padding: 0 4px;
30 font-size: 14px;
31 }
32
33 .title {
34 line-height: 68px;
35 font-size: 22px !important;
36 }
37
38
39 }
...\ No newline at end of file ...\ No newline at end of file
1 .zdxx {
2 width: 100%;
3 height: 100%;
4 background-color: #f5f5f5;
5 padding: 5px;
6 }
7 .tablebox {
8 overflow-x: auto;
9 width: 100%;
10 height: 95%;
11 background: #fff;
12 text-align: center;
13 padding: 4px;
14 overflow-y: scroll;
15 padding-top: 20px;
16 padding: 20px 40px;
17
18 .Table {
19 border-collapse: collapse;
20 width: 100%;
21 color: #333;
22 tr {
23 td:nth-child(1) {
24 width: 140px;
25 text-align: right;
26 padding-right: 15px;
27 background-color: #f8f8fa;
28 color: #6b6b6b;
29 }
30 td:nth-child(3) {
31 width: 140px;
32 padding-right: 15px;
33 text-align: right;
34 background-color: #f8f8fa;
35 color: #6b6b6b;
36 }
37 td:nth-child(2) {
38 text-align: left;
39 padding-left: 15px;
40 color: #4a4a4a;
41 }
42 td:nth-child(4) {
43 text-align: left;
44 padding-left: 15px;
45 color: #4a4a4a;
46 }
47 }
48
49 td {
50 border: 1px solid #e8e8e8;
51 line-height: 42px;
52 padding: 0 4px;
53 font-size: 14px;
54 }
55
56 .title {
57 line-height: 68px;
58 font-size: 22px !important;
59 color: #4a4a4a !important;
60 background-color: #eceef2 !important;
61 text-align: center !important;
62 }
63
64 .unit {
65 text-align: right;
66 }
67 .title3 {
68 width: 140px !important;
69 }
70 .bhqk {
71 width: 140px;
72 padding: 0 !important;
73
74 .box {
75 width: 745px;
76 overflow: auto;
77 }
78
79 .test {
80 }
81
82 table {
83 .bhqkTh {
84 width: 110px;
85 line-height: 38px;
86 background-color: #f8f8fa;
87 border: 1px solid #e8e8e8;
88 font-weight: bold;
89 text-align: left;
90 }
91
92 td {
93 width: 180px;
94 }
95 }
96 }
97 }
98 }
1 <template> 1 <template>
2 <div class="zdxx"> 2 <div class="tableDivCss">
3 <div class="tablebox"> 3 <table cellpadding="0" cellspacing="0" class="tableCss">
4 <table cellpadding="0" cellspacing="0" class="Table"> 4 <tr>
5 <col width="80" /> 5 <th colspan="12" class="title">宗地基本信息</th>
6 <col width="60" /> 6 </tr>
7 <col width="90" /> 7 <tr>
8 <col width="235" /> 8 <td>单位</td>
9 <col width="150" /> 9 <td colspan="4">{{ zdjbxx.mjdw }}</td>
10 <tr> 10 </tr>
11 <td colspan="12" class="title">宗地基本信息</td> 11 <tr>
12 </tr> 12 <td>不动产类型</td>
13 <tr> 13 <td colspan="4">{{ bdclxList[zdjbxx.bdclx] }}</td>
14 <td colspan="2">不动产类型</td> 14 </tr>
15 <td colspan="3">{{ bdclxList[zdjbxx.bdclx] }}</td> 15 <tr>
16 <td>单位</td> 16 <td>坐落</td>
17 <td colspan="4">{{ zdjbxx.mjdw }}</td> 17 <td colspan="4">{{ zdjbxx.zl }}</td>
18 </tr> 18 </tr>
19 <tr> 19 <tr>
20 <td colspan="2">坐落</td> 20 <td style="width:10%" rowspan="8">土地状况</td>
21 <td colspan="10">{{ zdjbxx.zl }}</td> 21 </tr>
22 </tr> 22 <tr>
23 <tr> 23 <td style="width:15%">宗地面积</td>
24 <td rowspan="8" colspan="2" class="title2">土地状况</td> 24 <td style="width:30%">{{ zdjbxx.zdmj }}</td>
25 </tr> 25 <td style="width:15%">用途</td>
26 <tr> 26 <td style="width:30%">{{ zdjbxx.ghytmc }}</td>
27 <td>宗地面积</td> 27 </tr>
28 <td colspan="4">{{ zdjbxx.zdmj }}</td> 28 <tr>
29 <td>用途</td> 29 <td>等级</td>
30 <td>{{ zdjbxx.ghytmc }}</td> 30 <td>{{ zdjbxx.djmc }}</td>
31 </tr> 31 <td>价格</td>
32 <tr> 32 <td>{{ zdjbxx.jg }}</td>
33 <td>等级</td> 33 </tr>
34 <td colspan="4">{{ zdjbxx.djmc }}</td> 34 <tr>
35 <td>价格</td> 35 <td>权利类型</td>
36 <td colspan="3">{{ zdjbxx.jg }}</td> 36 <td>{{ zdjbxx.qllxmc }}</td>
37 </tr> 37 <td>权利性质</td>
38 <tr> 38 <td>{{ zdjbxx.qlxzmc }}</td>
39 <td>权利类型</td> 39 </tr>
40 <td colspan="4">{{ zdjbxx.qllxmc }}</td> 40 <tr>
41 <td>权利性质</td> 41 <td>权利设定方式</td>
42 <td>{{ zdjbxx.qlxzmc }}</td> 42 <td>{{ zdjbxx.qlsdfs }}</td>
43 </tr> 43 <td>容积率</td>
44 <tr> 44 <td>{{ zdjbxx.rjl }}</td>
45 <td>权利设定方式</td> 45 </tr>
46 <td colspan="4">{{ zdjbxx.qlsdfs }}</td> 46 <tr>
47 <td>容积率</td> 47 <td>建筑密度</td>
48 <td>{{ zdjbxx.rjl }}</td> 48 <td>{{ zdjbxx.jzmd }}</td>
49 </tr> 49 <td>建筑限高</td>
50 <tr> 50 <td>{{ zdjbxx.jzxg }}</td>
51 <td>建筑密度</td> 51 </tr>
52 <td colspan="4">{{ zdjbxx.jzmd }}</td> 52 <tr>
53 <td>建筑限高</td> 53 <td>图幅号</td>
54 <td>{{ zdjbxx.jzxg }}</td> 54 <td>{{ zdjbxx.tfh }}</td>
55 </tr> 55 <td>地籍号</td>
56 <tr> 56 <td>{{ zdjbxx.djh }}</td>
57 <td>图幅号</td> 57 </tr>
58 <td colspan="4">{{ zdjbxx.tfh }}</td> 58 <tr>
59 <td>地籍号</td> 59 <td>档案号</td>
60 <td colspan="3">{{ zdjbxx.djh }}</td> 60 <td>{{ zdjbxx.dah }}</td>
61 </tr> 61 <td>地块代码</td>
62 <tr> 62 <td>{{ zdjbxx.dkdm }}</td>
63 <td>档案号</td> 63 </tr>
64 <td colspan="4">{{ zdjbxx.dah }}</td> 64 <tr>
65 <td>地块代码</td> 65 <td rowspan="5">宗地四至</td>
66 <td colspan="3">{{ zdjbxx.dkdm }}</td> 66 </tr>
67 </tr> 67
68 <tr> 68 <tr>
69 <td colspan="2">宗地四至-东</td> 69 <td>东</td>
70 <td colspan="8">{{ zdjbxx.zdszd }}</td> 70 <td colspan="3">{{ zdjbxx.zdszd }}</td>
71 </tr> 71 </tr>
72 <tr> 72 <tr>
73 <td colspan="2">宗地四至-南</td> 73 <td>南</td>
74 <td colspan="8">{{ zdjbxx.zdszn }}</td> 74 <td colspan="3">{{ zdjbxx.zdszn }}</td>
75 </tr> 75 </tr>
76 <tr> 76 <tr>
77 <td colspan="2">宗地四至-西</td> 77 <td>西</td>
78 <td colspan="8">{{ zdjbxx.zdszx }}</td> 78 <td colspan="3">{{ zdjbxx.zdszx }}</td>
79 </tr> 79 </tr>
80 <tr> 80 <tr>
81 <td colspan="2">宗地四至-北</td> 81 <td>北</td>
82 <td colspan="8">{{ zdjbxx.zdszb }}</td> 82 <td colspan="3">{{ zdjbxx.zdszb }}</td>
83 </tr> 83 </tr>
84 <tr> 84 <tr>
85 <td class="title2" colspan="2" height="50">备注</td> 85 <td>登记时间</td>
86 <td colspan="8">{{ zdjbxx.bz }}</td> 86 <td colspan="2">{{ zdjbxx.bz }}</td>
87 </tr> 87 <td>登簿人</td>
88 <tr> 88 <td>{{ zdjbxx.bz }}</td>
89 <td class="title2" colspan="2" height="50">附记</td> 89 </tr>
90 <td colspan="8">{{ zdjbxx.fj }}</td> 90
91 </tr> 91 <tr>
92 <tr> 92 <td>附记</td>
93 <td colspan="2">状态</td> 93 <td colspan="8">{{ zdjbxx.fj }}</td>
94 <td colspan="2">{{ zdjbxx.zt }}</td> 94 </tr>
95 <td>区县代码</td> 95 <!-- <tr>
96 <td colspan="4">{{ zdjbxx.qxdm }}</td> 96 <td>状态</td>
97 </tr> 97 <td colspan="2">{{ zdjbxx.zt }}</td>
98 <tr v-if="showGroup"> 98 <td>区县代码</td>
99 <td colspan="2" class="title3">变化情况</td> 99 <td>{{ zdjbxx.qxdm }}</td>
100 <td colspan="4" class="bhqk"> 100 </tr> -->
101 <div class="box"> 101 <tr v-if="showGroup">
102 <table cellspacing="0" cellpadding="0" :width="bhqkTableWidth"> 102 <td>变化情况</td>
103 <tr v-for="(item, index) in bhqkColumns" :key="index"> 103 <td colspan="4">
104 <td class="bhqkTh">{{ item.label }}</td> 104 <table cellspacing="0" cellpadding="0" :width="bhqkTableWidth">
105 </tr> 105 <tr v-for="(item, index) in bhqkColumns" :key="index">
106 </table> 106 <td class="bhqkTh">{{ item.label }}</td>
107 </div> 107 </tr>
108 </td> 108 </table>
109 </tr> 109 </td>
110 </table> 110 </tr>
111 </div> 111 </table>
112 </div> 112 </div>
113 </template> 113 </template>
114 114
115 <script> 115 <script>
116 import { getZdjjxxBybdcdyid } from "@/api/registerBook.js"; 116 import { getZdjjxxBybdcdyid } from "@/api/registerBook.js";
117 117
118 export default { 118 export default {
119 data () { 119 data() {
120 return { 120 return {
121 bhqkColumns: [ 121 bhqkColumns: [
122 { 122 {
123 prop: "ssywh", 123 prop: "ssywh",
124 label: "上手业务号", 124 label: "上手业务号",
125 }, 125 },
126 { 126 {
127 prop: "zddm", 127 prop: "zddm",
128 label: "宗地代码", 128 label: "宗地代码",
129 }, 129 },
130 { 130 {
131 prop: "bhqzddm", 131 prop: "bhqzddm",
132 label: "变化前宗地代码", 132 label: "变化前宗地代码",
133 }, 133 },
134 { 134 {
135 prop: "bhnr", 135 prop: "bhnr",
136 label: "变化内容", 136 label: "变化内容",
137 }, 137 },
138 { 138 {
139 prop: "bhyy", 139 prop: "bhyy",
140 label: "变化原因", 140 label: "变化原因",
141 }, 141 },
142 { 142 {
143 prop: "djsj", 143 prop: "djsj",
144 label: "登记时间", 144 label: "登记时间",
145 }, 145 },
146 { 146 {
147 prop: "dbr", 147 prop: "dbr",
148 label: "登簿人", 148 label: "登簿人",
149 }, 149 },
150 { 150 {
151 prop: "fj", 151 prop: "fj",
152 label: "附记", 152 label: "附记",
153 }, 153 },
154 ], 154 ],
155 bhqkTableWidth: 745, 155 bhqkTableWidth: 745,
156 zdjbxx: {}, 156 zdjbxx: {},
157 zdbhqks: [], 157 zdbhqks: [],
158 propsParam: this.$attrs, 158 propsParam: this.$attrs,
159 showGroup: false, 159 showGroup: false,
160 bdclxList: ['', '宗地', '宗海', '自然幢', '多幢', '构筑物', '林权', '户'] 160 bdclxList: ["", "宗地", "宗海", "自然幢", "多幢", "构筑物", "林权", "户"],
161 }; 161 };
162 }, 162 },
163 created () { 163 created() {
164 this.loadData(); 164 this.loadData();
165 }, 165 },
166 methods: { 166 methods: {
167 loadData () { 167 loadData() {
168 getZdjjxxBybdcdyid({ bdcdyid: this.propsParam.bdcdyid }).then((res) => { 168 getZdjjxxBybdcdyid({ bdcdyid: this.propsParam.bdcdyid }).then((res) => {
169 if (res.code === 200) { 169 if (res.code === 200) {
170 this.zdjbxx = res.result.zdjbxx; 170 this.zdjbxx = res.result.zdjbxx;
171 this.zdbhqks = res.result.zdbhqkList; 171 this.zdbhqks = res.result.zdbhqkList;
172 if (this.zdbhqks != null && this.zdbhqks.length > 0) { 172 if (this.zdbhqks != null && this.zdbhqks.length > 0) {
173 this.showGroup = true; 173 this.showGroup = true;
174 }
175 } 174 }
176 }); 175 }
177 }, 176 });
178 }, 177 },
179 }; 178 },
179 };
180 </script> 180 </script>
181 181
182 <style lang="scss" scoped> 182 <style lang="scss" scoped>
183 @import "./tablestyle.scss"; 183 @import "~@/styles/bdctable.scss";
184 </style> 184 </style>
......
...@@ -122,13 +122,13 @@ ...@@ -122,13 +122,13 @@
122 </el-form-item> 122 </el-form-item>
123 </el-col> 123 </el-col>
124 </el-row> 124 </el-row>
125 <!-- <div class="slxx_title title-block"> 125 <div class="slxx_title title-block">
126 权利人信息 126 权利人信息
127 <div class="triangle"></div> 127 <div class="triangle"></div>
128 </div> --> 128 </div>
129 <el-divider content-position="left"><i 129 <!-- <el-divider content-position="left"><i
130 style="background-color:#3498db;font-size:16px;color:#fff !important;border-radius: 5px 5px 5px 0px;margin-bottom:10px;" 130 style="background-color:#3498db;font-size:16px;color:#fff !important;border-radius: 5px 5px 5px 0px;margin-bottom:10px;"
131 class="el-icon-edit-outline">权利人信息</i></el-divider> 131 class="el-icon-edit-outline">权利人信息</i></el-divider> -->
132 <el-row :gutter="10"> 132 <el-row :gutter="10">
133 <el-col :span="14"> 133 <el-col :span="14">
134 <el-form-item label="共有方式："> 134 <el-form-item label="共有方式：">
......