style:证书证明预览样式修改
Showing
1 changed file
with
51 additions
and
59 deletions
... | @@ -8,28 +8,24 @@ | ... | @@ -8,28 +8,24 @@ |
8 | class="from-clues loadingtext" | 8 | class="from-clues loadingtext" |
9 | v-Loading="loading" | 9 | v-Loading="loading" |
10 | element-loading-text="拼命加载中..." | 10 | element-loading-text="拼命加载中..." |
11 | style="height: 720px; text-align: center" | 11 | style="height: 720px; text-align: center"> |
12 | > | ||
13 | <!-- 表单部分 --> | 12 | <!-- 表单部分 --> |
14 | <el-tabs v-model="activeName" @tab-click="handleClick"> | 13 | <el-tabs v-model="activeName" @tab-click="handleClick"> |
15 | <el-tab-pane label="证书预览" name="zsyl"> | 14 | <el-tab-pane label="证书预览" name="zsyl"> |
16 | <el-empty | 15 | <el-empty |
17 | description="暂无数据" | 16 | description="暂无数据" |
18 | v-if="headTabBdcqz.length == 0 && noData" | 17 | v-if="headTabBdcqz.length == 0 && noData"></el-empty> |
19 | ></el-empty> | ||
20 | <div class="zsys"> | 18 | <div class="zsys"> |
21 | <canvas | 19 | <canvas |
22 | ref="zs" | 20 | ref="zs" |
23 | width="1000" | 21 | width="1000" |
24 | v-show="this.bdcqz.bdcqzlx == 1" | 22 | v-show="this.bdcqz.bdcqzlx == 1" |
25 | height="700" | 23 | height="700"></canvas> |
26 | ></canvas> | ||
27 | <canvas | 24 | <canvas |
28 | ref="zm" | 25 | ref="zm" |
29 | width="1180" | 26 | width="1180" |
30 | v-show="this.bdcqz.bdcqzlx == 2" | 27 | v-show="this.bdcqz.bdcqzlx == 2" |
31 | height="780" | 28 | height="780"></canvas> |
32 | ></canvas> | ||
33 | </div> | 29 | </div> |
34 | </el-tab-pane> | 30 | </el-tab-pane> |
35 | <el-tab-pane label="证书详情" name="lcjl"> | 31 | <el-tab-pane label="证书详情" name="lcjl"> |
... | @@ -79,17 +75,14 @@ | ... | @@ -79,17 +75,14 @@ |
79 | 缮证记录信息 | 75 | 缮证记录信息 |
80 | <div class="triangle"></div> | 76 | <div class="triangle"></div> |
81 | </div> | 77 | </div> |
82 | <div class="from-clues-content"> | ||
83 | <lb-table | 78 | <lb-table |
84 | class="sz" | 79 | class="sz" |
85 | :column="szxxtableData.columns" | 80 | :column="szxxtableData.columns" |
86 | heightNumSetting | 81 | heightNumSetting |
87 | :pagination="false" | 82 | :pagination="false" |
88 | :key="key" | 83 | :key="key" |
89 | :data="szxxtableData.data" | 84 | :data="szxxtableData.data"> |
90 | > | ||
91 | </lb-table> | 85 | </lb-table> |
92 | </div> | ||
93 | <div class="slxx_title title-block"> | 86 | <div class="slxx_title title-block"> |
94 | 发证记录信息 | 87 | 发证记录信息 |
95 | <div class="triangle"></div> | 88 | <div class="triangle"></div> |
... | @@ -99,8 +92,7 @@ | ... | @@ -99,8 +92,7 @@ |
99 | :column="tableDatas.columns" | 92 | :column="tableDatas.columns" |
100 | :heightNum="100" | 93 | :heightNum="100" |
101 | :data="tableDatas.data" | 94 | :data="tableDatas.data" |
102 | :pagination="false" | 95 | :pagination="false"> |
103 | > | ||
104 | </lb-table> | 96 | </lb-table> |
105 | </el-tab-pane> | 97 | </el-tab-pane> |
106 | <el-tab-pane label="电子证照" name="third"> 等一个照片 </el-tab-pane> | 98 | <el-tab-pane label="电子证照" name="third"> 等一个照片 </el-tab-pane> |
... | @@ -109,13 +101,13 @@ | ... | @@ -109,13 +101,13 @@ |
109 | </template> | 101 | </template> |
110 | 102 | ||
111 | <script> | 103 | <script> |
112 | // import { zsyldatas } from "../../javascript/zsyl.js"; | 104 | // import { zsyldatas } from "../../javascript/zsyl.js"; |
113 | import { getSlsqBdcqzList } from "@/api/bdcqz.js"; | 105 | import { getSlsqBdcqzList } from "@/api/bdcqz.js"; |
114 | import { getCertificateList } from "@/api/bdcqz.js"; | 106 | import { getCertificateList } from "@/api/bdcqz.js"; |
115 | import { getSzRecordList } from "@/api/bdcqz.js"; | 107 | import { getSzRecordList } from "@/api/bdcqz.js"; |
116 | import { szxxdatas } from "../../javascript/szxxdatapart"; | 108 | import { szxxdatas } from "../../javascript/szxxdatapart"; |
117 | import { datas } from "../../javascript/fzxxdatapart"; | 109 | import { datas } from "../../javascript/fzxxdatapart"; |
118 | export default { | 110 | export default { |
119 | name: "zsyl", | 111 | name: "zsyl", |
120 | props: { | 112 | props: { |
121 | formData: { | 113 | formData: { |
... | @@ -123,7 +115,7 @@ export default { | ... | @@ -123,7 +115,7 @@ export default { |
123 | default: {}, | 115 | default: {}, |
124 | }, | 116 | }, |
125 | }, | 117 | }, |
126 | data() { | 118 | data () { |
127 | return { | 119 | return { |
128 | key: 0, | 120 | key: 0, |
129 | noData: false, | 121 | noData: false, |
... | @@ -165,7 +157,7 @@ export default { | ... | @@ -165,7 +157,7 @@ export default { |
165 | }, | 157 | }, |
166 | }; | 158 | }; |
167 | }, | 159 | }, |
168 | mounted() { | 160 | mounted () { |
169 | this.queryClick(); | 161 | this.queryClick(); |
170 | this.query(); | 162 | this.query(); |
171 | if (this.formData.bdcqz) { | 163 | if (this.formData.bdcqz) { |
... | @@ -181,12 +173,12 @@ export default { | ... | @@ -181,12 +173,12 @@ export default { |
181 | * @description: queryClick | 173 | * @description: queryClick |
182 | * @author: miaofang | 174 | * @author: miaofang |
183 | */ | 175 | */ |
184 | queryClick() { | 176 | queryClick () { |
185 | this.formdata.bsmSlsq = this.formData.bsmSlsq; | 177 | this.formdata.bsmSlsq = this.formData.bsmSlsq; |
186 | getCertificateList(this.formdata).then((res) => { | 178 | getCertificateList(this.formdata).then((res) => { |
187 | if (res.code === 200) { | 179 | if (res.code === 200) { |
188 | this.tableDatas.data = res.result ? res.result : []; | 180 | this.tableDatas.data = res.result ? res.result : []; |
189 | console.log("this.tableDatas",this.tableDatas); | 181 | console.log("this.tableDatas", this.tableDatas); |
190 | } | 182 | } |
191 | }); | 183 | }); |
192 | }, | 184 | }, |
... | @@ -194,7 +186,7 @@ export default { | ... | @@ -194,7 +186,7 @@ export default { |
194 | * @description: query | 186 | * @description: query |
195 | * @author: miaofang | 187 | * @author: miaofang |
196 | */ | 188 | */ |
197 | query() { | 189 | query () { |
198 | getSzRecordList({ bsmBdcqz: this.formData.bsmBdcqz }).then((res) => { | 190 | getSzRecordList({ bsmBdcqz: this.formData.bsmBdcqz }).then((res) => { |
199 | if (res.code == 200) { | 191 | if (res.code == 200) { |
200 | this.szxxtableData.data = res.result; | 192 | this.szxxtableData.data = res.result; |
... | @@ -207,7 +199,7 @@ export default { | ... | @@ -207,7 +199,7 @@ export default { |
207 | * @param {*} code | 199 | * @param {*} code |
208 | * @author: miaofang | 200 | * @author: miaofang |
209 | */ | 201 | */ |
210 | getRowValue(code) { | 202 | getRowValue (code) { |
211 | var value = this.bdcqz[code]; | 203 | var value = this.bdcqz[code]; |
212 | return value; | 204 | return value; |
213 | }, | 205 | }, |
... | @@ -215,7 +207,7 @@ export default { | ... | @@ -215,7 +207,7 @@ export default { |
215 | * @description: 获取受理申请下全部不动产权证 | 207 | * @description: 获取受理申请下全部不动产权证 |
216 | * @author: miaofang | 208 | * @author: miaofang |
217 | */ | 209 | */ |
218 | getHeadTabBdcqz() { | 210 | getHeadTabBdcqz () { |
219 | console.log("formData", this.formData); | 211 | console.log("formData", this.formData); |
220 | this.loading = true; | 212 | this.loading = true; |
221 | getSlsqBdcqzList({ bsmSlsq: this.formData.bsmSlsq }).then((res) => { | 213 | getSlsqBdcqzList({ bsmSlsq: this.formData.bsmSlsq }).then((res) => { |
... | @@ -240,7 +232,7 @@ export default { | ... | @@ -240,7 +232,7 @@ export default { |
240 | * @param {*} e | 232 | * @param {*} e |
241 | * @author: miaofang | 233 | * @author: miaofang |
242 | */ | 234 | */ |
243 | handleClick(tab, event) { | 235 | handleClick (tab, event) { |
244 | console.log(tab, event); | 236 | console.log(tab, event); |
245 | this.bdcqz = this.headTabBdcqz[0]; | 237 | this.bdcqz = this.headTabBdcqz[0]; |
246 | if (this.bdcqz.bdcqzlx == 1) { | 238 | if (this.bdcqz.bdcqzlx == 1) { |
... | @@ -253,8 +245,8 @@ export default { | ... | @@ -253,8 +245,8 @@ export default { |
253 | * @description: 不动产证书 | 245 | * @description: 不动产证书 |
254 | * @author: miaofang | 246 | * @author: miaofang |
255 | */ | 247 | */ |
256 | drawTextOnImage() { | 248 | drawTextOnImage () { |
257 | function getByteLen(val) { | 249 | function getByteLen (val) { |
258 | var len = 0; | 250 | var len = 0; |
259 | if (!val) return len; | 251 | if (!val) return len; |
260 | for (var i = 0; i < val.length; i++) { | 252 | for (var i = 0; i < val.length; i++) { |
... | @@ -497,8 +489,8 @@ export default { | ... | @@ -497,8 +489,8 @@ export default { |
497 | * @description: 不动产证明 | 489 | * @description: 不动产证明 |
498 | * @author: miaofang | 490 | * @author: miaofang |
499 | */ | 491 | */ |
500 | drawTextzmImage() { | 492 | drawTextzmImage () { |
501 | function getByteLen(val) { | 493 | function getByteLen (val) { |
502 | var len = 0; | 494 | var len = 0; |
503 | if (!val) return len; | 495 | if (!val) return len; |
504 | for (var i = 0; i < val.length; i++) { | 496 | for (var i = 0; i < val.length; i++) { |
... | @@ -696,27 +688,27 @@ export default { | ... | @@ -696,27 +688,27 @@ export default { |
696 | }, | 688 | }, |
697 | }, | 689 | }, |
698 | computed: { | 690 | computed: { |
699 | hdiffHeight() { | 691 | hdiffHeight () { |
700 | return 0; | 692 | return 0; |
701 | // return this.headTabBdcqz.length > 1 ? 54 : 0 | 693 | // return this.headTabBdcqz.length > 1 ? 54 : 0 |
702 | }, | 694 | }, |
703 | }, | 695 | }, |
704 | }; | 696 | }; |
705 | </script> | 697 | </script> |
706 | <style scoped lang="scss"> | 698 | <style scoped lang="scss"> |
707 | @import "~@/styles/mixin.scss"; | 699 | @import "~@/styles/mixin.scss"; |
708 | 700 | ||
709 | .imgClass { | 701 | .imgClass { |
710 | display: inline-block; | 702 | display: inline-block; |
711 | height: auto; | 703 | height: auto; |
712 | max-width: 100%; | 704 | max-width: 100%; |
713 | } | 705 | } |
714 | 706 | ||
715 | .middle_padding { | 707 | .middle_padding { |
716 | padding-bottom: 10px; | 708 | padding-bottom: 10px; |
717 | } | 709 | } |
718 | 710 | ||
719 | .zsyl-button { | 711 | .zsyl-button { |
720 | text-align: center; | 712 | text-align: center; |
721 | margin-top: 20px; | 713 | margin-top: 20px; |
722 | 714 | ||
... | @@ -729,9 +721,9 @@ export default { | ... | @@ -729,9 +721,9 @@ export default { |
729 | color: white; | 721 | color: white; |
730 | background-color: rgb(0, 121, 254); | 722 | background-color: rgb(0, 121, 254); |
731 | } | 723 | } |
732 | } | 724 | } |
733 | 725 | ||
734 | .table-column { | 726 | .table-column { |
735 | border-spacing: 1px; | 727 | border-spacing: 1px; |
736 | width: 100%; | 728 | width: 100%; |
737 | 729 | ||
... | @@ -743,37 +735,37 @@ export default { | ... | @@ -743,37 +735,37 @@ export default { |
743 | font-size: 13px; | 735 | font-size: 13px; |
744 | background: rgb(251, 249, 229); | 736 | background: rgb(251, 249, 229); |
745 | } | 737 | } |
746 | } | 738 | } |
747 | 739 | ||
748 | .zsyl-title { | 740 | .zsyl-title { |
749 | background: #fafbe5; | 741 | background: #fafbe5; |
750 | text-align: center; | 742 | text-align: center; |
751 | padding: 5px 0px; | 743 | padding: 5px 0px; |
752 | font-size: 20px; | 744 | font-size: 20px; |
753 | } | 745 | } |
754 | 746 | ||
755 | .no-data { | 747 | .no-data { |
756 | font-size: 18px; | 748 | font-size: 18px; |
757 | display: flex; | 749 | display: flex; |
758 | text-align: center; | 750 | text-align: center; |
759 | justify-content: center; | 751 | justify-content: center; |
760 | } | 752 | } |
761 | .el-tab-pane { | 753 | .el-tab-pane { |
762 | width: 1190px; | 754 | width: 1190px; |
763 | height: 670px; | 755 | height: 670px; |
764 | overflow-y: auto; | 756 | overflow-y: auto; |
765 | } | 757 | } |
766 | .zsys { | 758 | .zsys { |
767 | width: 1180px; | 759 | width: 1180px; |
768 | height: 670px; | 760 | height: 670px; |
769 | } | 761 | } |
770 | /deep/.el-table { | 762 | /deep/.el-table { |
771 | height: 100px !important; | 763 | height: 100px !important; |
772 | } | 764 | } |
773 | /deep/.sz { | 765 | // /deep/.sz { |
774 | height: 340px !important; | 766 | // height: 340px !important; |
775 | } | 767 | // } |
776 | .el-form{ | 768 | .el-form { |
777 | margin-top: 20px; | 769 | margin-top: 20px; |
778 | } | 770 | } |
779 | </style> | 771 | </style> | ... | ... |
-
Please register or sign in to post a comment