宗地分割页面交互优化
Showing
2 changed files
with
303 additions
and
181 deletions
... | @@ -32,3 +32,37 @@ export default { | ... | @@ -32,3 +32,37 @@ export default { |
32 | }, | 32 | }, |
33 | }; | 33 | }; |
34 | </script> | 34 | </script> |
35 | |||
36 | <style lang="less"> | ||
37 | .popper-zxx{ | ||
38 | padding: 0!important; | ||
39 | /deep/ .el-tabs__header{ | ||
40 | margin-bottom: 10px; | ||
41 | } | ||
42 | ul{ | ||
43 | margin-bottom: 10px; | ||
44 | li{ | ||
45 | cursor: pointer; | ||
46 | padding: 4px 16px; | ||
47 | position: relative; | ||
48 | i{ | ||
49 | position: absolute; | ||
50 | right: 20px; | ||
51 | top: 6px; | ||
52 | color: #4EB2FF; | ||
53 | display: none; | ||
54 | } | ||
55 | } | ||
56 | li:hover{ | ||
57 | background: #eee; | ||
58 | } | ||
59 | .choosed{ | ||
60 | color: #4EB2FF; | ||
61 | background-color: #F0F9FF!important; | ||
62 | i{ | ||
63 | display: inline-block; | ||
64 | } | ||
65 | } | ||
66 | } | ||
67 | } | ||
68 | </style> | ||
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -8,9 +8,9 @@ | ... | @@ -8,9 +8,9 @@ |
8 | <div class="fgq"> | 8 | <div class="fgq"> |
9 | <el-card class="data"> | 9 | <el-card class="data"> |
10 | <div slot="header" class="clearfix"> | 10 | <div slot="header" class="clearfix"> |
11 | <span>基本信息</span> | 11 | <span>宗地基本信息</span> |
12 | </div> | 12 | </div> |
13 | <ul> | 13 | <ul class="zdjbxx"> |
14 | <li><span class="label">宗地代码:</span><span class="value">{{zdFgqData.zddm}}</span></li> | 14 | <li><span class="label">宗地代码:</span><span class="value">{{zdFgqData.zddm}}</span></li> |
15 | <li><span class="label">不动产单元号:</span><span class="value">{{zdFgqData.bdcdyh}}</span></li> | 15 | <li><span class="label">不动产单元号:</span><span class="value">{{zdFgqData.bdcdyh}}</span></li> |
16 | <li><span class="label">项目名称:</span><span class="value">{{zdFgqData.xmmc}}</span></li> | 16 | <li><span class="label">项目名称:</span><span class="value">{{zdFgqData.xmmc}}</span></li> |
... | @@ -18,178 +18,203 @@ | ... | @@ -18,178 +18,203 @@ |
18 | <li><span class="label">权利人:</span><span class="value">{{zdFgqData.qlr}}</span></li> | 18 | <li><span class="label">权利人:</span><span class="value">{{zdFgqData.qlr}}</span></li> |
19 | <li><span class="label">坐落:</span><span class="value">{{zdFgqData.zl}}</span></li> | 19 | <li><span class="label">坐落:</span><span class="value">{{zdFgqData.zl}}</span></li> |
20 | </ul> | 20 | </ul> |
21 | <div class="zdmap"> | ||
22 | |||
23 | </div> | ||
21 | </el-card> | 24 | </el-card> |
22 | <div class="zxx"> | 25 | <div class="zxx"> |
23 | <el-card class="dz"> | ||
24 | <div slot="header" class="clearfix"> | ||
25 | <span>多幢信息({{zdZxx.dzList.length}}个)</span> | ||
26 | </div> | ||
27 | <ul> | ||
28 | <li v-for="(item,index) in zdZxx.dzList" :key="index" | ||
29 | :class="[{'search':!zdDzList.includes(item)}]" | ||
30 | ><span class="label">多幢名称:</span> <span class="value">{{item.displays}}</span> | ||
31 | </li> | ||
32 | </ul> | ||
33 | </el-card> | ||
34 | |||
35 | <el-card class="zrz"> | 26 | <el-card class="zrz"> |
36 | <div slot="header" class="clearfix"> | 27 | <div slot="header" class="clearfix"> |
28 | <span>多幢信息({{zdZxx.dzList.length}}个)</span>, | ||
37 | <span>自然幢信息({{zdZxx.zrzList.length}}个)</span> | 29 | <span>自然幢信息({{zdZxx.zrzList.length}}个)</span> |
38 | </div> | 30 | </div> |
39 | <ul> | 31 | <ul> |
40 | <li v-for="(item,index) in zdZxx.zrzList" :key="index" | 32 | <li v-for="(item,index) in zdZxx.dzList" :key="index+item.xmmc" |
33 | :class="[{'search':!zdDzList.includes(item)}]" | ||
34 | >{{item.displays}} | ||
35 | </li> | ||
36 | <li v-for="(item,index) in zdZxx.zrzList" :key="index+item.xmmc" | ||
41 | :class="[{'oddborder':((index+1)%2) === 1},{'search':!zdZrzList.includes(item)}]"> | 37 | :class="[{'oddborder':((index+1)%2) === 1},{'search':!zdZrzList.includes(item)}]"> |
42 | {{item.displays}} | 38 | {{item.displays}} |
43 | </li> | 39 | </li> |
44 | </ul> | 40 | </ul> |
45 | <div class="line"></div> | ||
46 | </el-card> | 41 | </el-card> |
47 | </div> | 42 | </div> |
48 | </div> | 43 | </div> |
49 | <div class="fgh"> | 44 | <div class="fgh" :style="{'minHeight':tableHeight+'px'}"> |
50 | <span class="tips">分割后宗地信息</span> | 45 | <span class="tips">分割后宗地信息</span> |
51 | <table border="1"> | 46 | <table border="1"> |
52 | <tr> | 47 | <tr> |
53 | <th class="cz">操作</th> | 48 | <th class="cz"><el-button |
49 | type="primary" | ||
50 | class="changeBtn outAdd addMinus" | ||
51 | @click="addRow" | ||
52 | >+ | ||
53 | </el-button | ||
54 | ></th> | ||
54 | <th class="xzq">行政区</th> | 55 | <th class="xzq">行政区</th> |
55 | <th class="djq">地籍区</th> | 56 | <th class="djq">地籍区</th> |
56 | <th class="djzq">地籍子区</th> | 57 | <th class="djzq">地籍子区</th> |
57 | <th class="syqlx">所有权类型</th> | 58 | <th class="syqlx">所有权类型</th> |
58 | <th class="tdtzm">土地特征码</th> | 59 | <th class="tdtzm">土地特征码</th> |
59 | <th class="xmmc">项目名称</th> | 60 | <th class="xmmc">项目名称</th> |
60 | <th class="xzzxx">幢信息</th> | 61 | <!-- <th class="xzzxx">幢信息</th> --> |
61 | <!-- <th class="">选择</th> --> | 62 | <!-- <th class="">选择</th> --> |
62 | </tr> | 63 | </tr> |
63 | <tr> | 64 | <template v-for="(item,index) in zdFghData.newZdlist"> |
64 | <td> | 65 | <tr :key="item.xzqbsm"> |
65 | <el-button | 66 | <td class="cz" rowspan="2"> |
66 | type="primary" | 67 | <el-button |
67 | class="changeBtn outAdd addMinus" | 68 | type="primary" |
68 | @click="addRow" | 69 | class="changeBtn outMinus addMinus" |
69 | >+ | 70 | @click="delRow(index)" |
70 | </el-button | 71 | >- |
71 | > | 72 | </el-button |
72 | </td> | 73 | > |
73 | <td></td> | 74 | </td> |
74 | <td></td> | 75 | <td class="xzq"> |
75 | <td></td> | 76 | <el-select class="" v-model="item.xzqbsm" @change="changeXzq(item.xzqbsm,index)"> |
76 | <td></td> | 77 | <el-option |
77 | <td></td> | 78 | v-for="i in xzq" |
78 | <td></td> | 79 | :key="i.bsm" |
79 | <td></td> | 80 | :label="i.mc" |
80 | </tr> | 81 | :value="i.bsm" |
81 | <tr v-for="(item,index) in zdFghData.newZdlist" :key="index"> | 82 | ></el-option> |
82 | <td class="cz"> | 83 | </el-select> |
83 | <el-button | 84 | </td> |
84 | type="primary" | 85 | <td class="djq"> |
85 | class="changeBtn outMinus addMinus" | 86 | <el-select class="" v-model="item.djqbsm" @change="changeDjq(item.djqbsm,index)"> |
86 | @click="delRow(index)" | 87 | <el-option |
87 | >- | 88 | v-for="i in djq" |
88 | </el-button | 89 | :key="i.bsm" |
89 | > | 90 | :label="i.mc" |
90 | </td> | 91 | :value="i.bsm" |
91 | <td class="xzq"> | 92 | ></el-option> |
92 | <el-select class="" v-model="item.xzqbsm" @change="changeXzq(item.xzqbsm,index)"> | 93 | </el-select> |
93 | <el-option | 94 | </td> |
94 | v-for="i in xzq" | 95 | <td class="syqlx"> |
95 | :key="i.bsm" | 96 | <el-select class="" v-model="item.djzqbsm"> |
96 | :label="i.mc" | 97 | <el-option |
97 | :value="i.bsm" | 98 | v-for="i in djzq" |
98 | ></el-option> | 99 | :key="i.bsm" |
99 | </el-select> | 100 | :label="i.mc" |
100 | </td> | 101 | :value="i.bsm" |
101 | <td class="djq"> | 102 | ></el-option> |
102 | <el-select class="" v-model="item.djqbsm" @change="changeDjq(item.djqbsm,index)"> | 103 | </el-select> |
103 | <el-option | 104 | </td> |
104 | v-for="i in djq" | 105 | <td class="tdtzm"> |
105 | :key="i.bsm" | 106 | <el-select class="" v-model="item.syqlxbsm"> |
106 | :label="i.mc" | 107 | <el-option |
107 | :value="i.bsm" | 108 | v-for="i in syq" |
108 | ></el-option> | 109 | :key="i.value" |
109 | </el-select> | 110 | :label="i.label" |
110 | </td> | 111 | :value="i.value" |
111 | <td class="syqlx"> | 112 | ></el-option> |
112 | <el-select class="" v-model="item.djzqbsm"> | 113 | </el-select> |
113 | <el-option | 114 | </td> |
114 | v-for="i in djzq" | 115 | <td class="syqlx"> |
115 | :key="i.bsm" | 116 | <el-select class="" v-model="item.zdtzmbsm"> |
116 | :label="i.mc" | 117 | <el-option |
117 | :value="i.bsm" | 118 | v-for="i in tdtzm" |
118 | ></el-option> | 119 | :key="i.bsm" |
119 | </el-select> | 120 | :label="i.mc" |
120 | </td> | 121 | :value="i.bsm" |
121 | <td class="tdtzm"> | 122 | ></el-option> |
122 | <el-select class="" v-model="item.syqlxbsm"> | 123 | </el-select> |
123 | <el-option | 124 | </td> |
124 | v-for="i in syq" | 125 | <td class="xmmc"> |
125 | :key="i.value" | 126 | <input type="text" v-model="item.xmmc" class="formInput"/> |
126 | :label="i.label" | 127 | </td> |
127 | :value="i.value" | 128 | <!-- <td class="xzzxx"> |
128 | ></el-option> | 129 | <span>多幢:</span> |
129 | </el-select> | 130 | <ul> |
130 | </td> | 131 | <li v-for="(dzItem,dzIndex) in item.dz" :key="dzIndex" |
131 | <td class="syqlx"> | 132 | @mouseenter="mouseenter($event,index,dzIndex,'dz')" |
132 | <el-select class="" v-model="item.zdtzmbsm"> | 133 | @mouseleave="mouseleave($event)">{{dzItem.xmmc}} |
133 | <el-option | 134 | <span v-if="dzIndex<item.dz.length-1">,</span> |
134 | v-for="i in tdtzm" | 135 | </li> |
135 | :key="i.bsm" | 136 | </ul> |
136 | :label="i.mc" | 137 | <span>自然幢:</span> |
137 | :value="i.bsm" | 138 | <ul> |
138 | ></el-option> | 139 | <li v-for="(zrzItem,zrzIndex) in item.zrz" :key="zrzIndex" |
139 | </el-select> | 140 | @mouseenter="mouseenter($event,index,zrzIndex,'zrz')" |
140 | </td> | 141 | @mouseleave="mouseleave($event)" |
141 | <td class="xmmc"> | 142 | >{{zrzItem.xmmc}} |
142 | <input type="text" v-model="item.xmmc" class="formInput"/> | 143 | <span v-if="zrzIndex<item.zrz.length-1">,</span> |
143 | </td> | 144 | </li> |
144 | <td class="xzzxx"> | 145 | </ul> |
145 | <!-- <span>多幢:</span> | 146 | <span class="zxx">自然幢1 <i class="fa fa-times"></i></span> |
146 | <ul> | 147 | <span class="zxx">自然幢2 <i class="fa fa-times"></i></span> |
147 | <li v-for="(dzItem,dzIndex) in item.dz" :key="dzIndex" | 148 | <span class="zxx">自然幢3 <i class="fa fa-times"></i></span> |
148 | @mouseenter="mouseenter($event,index,dzIndex,'dz')" | 149 | <span class="zxx">多幢1 <i class="fa fa-times"></i></span> |
149 | @mouseleave="mouseleave($event)">{{dzItem.xmmc}} | 150 | <span class="choose">选择</span> |
150 | <span v-if="dzIndex<item.dz.length-1">,</span> | 151 | </td> --> |
151 | </li> | 152 | <!-- <td class=""> |
152 | </ul> | 153 | <el-dropdown @command="dzHandleCommand($event,index)"> |
153 | <span>自然幢:</span> | 154 | <span class="el-dropdown-link"> |
154 | <ul> | 155 | 选择多幢<i class="el-icon-arrow-down el-icon--right"></i> |
155 | <li v-for="(zrzItem,zrzIndex) in item.zrz" :key="zrzIndex" | 156 | </span> |
156 | @mouseenter="mouseenter($event,index,zrzIndex,'zrz')" | 157 | <el-dropdown-menu slot="dropdown"> |
157 | @mouseleave="mouseleave($event)" | 158 | <el-dropdown-item v-for="(childItem,childIndex) in zdDzList" |
158 | >{{zrzItem.xmmc}} | 159 | :key="childIndex" :command="childItem.bsm"> |
159 | <span v-if="zrzIndex<item.zrz.length-1">,</span> | 160 | {{childItem.xmmc}} |
160 | </li> | 161 | </el-dropdown-item> |
161 | </ul> --> | 162 | </el-dropdown-menu> |
162 | <span class="zxx">自然幢1 <i class="fa fa-times"></i></span> | 163 | </el-dropdown> |
163 | <span class="zxx">自然幢2 <i class="fa fa-times"></i></span> | 164 | <el-dropdown @command="zrzHandleCommand($event,index)"> |
164 | <span class="zxx">自然幢3 <i class="fa fa-times"></i></span> | 165 | <span class="el-dropdown-link"> |
165 | <span class="zxx">多幢1 <i class="fa fa-times"></i></span> | 166 | 选择自然幢<i class="el-icon-arrow-down el-icon--right"></i> |
166 | <span class="choose">选择</span> | 167 | </span> |
167 | </td> | 168 | <el-dropdown-menu slot="dropdown"> |
168 | <!-- <td class=""> | 169 | <el-dropdown-item v-for="(childItem,childIndex) in zdZrzList" |
169 | <el-dropdown @command="dzHandleCommand($event,index)"> | 170 | :key="childIndex" :command="childItem.bsm"> |
170 | <span class="el-dropdown-link"> | 171 | {{childItem.xmmc}} |
171 | 选择多幢<i class="el-icon-arrow-down el-icon--right"></i> | 172 | </el-dropdown-item> |
172 | </span> | 173 | </el-dropdown-menu> |
173 | <el-dropdown-menu slot="dropdown"> | 174 | </el-dropdown> |
174 | <el-dropdown-item v-for="(childItem,childIndex) in zdDzList" | 175 | </td> --> |
175 | :key="childIndex" :command="childItem.bsm"> | 176 | </tr> |
176 | {{childItem.xmmc}} | 177 | <tr :key="index"> |
177 | </el-dropdown-item> | 178 | <td colspan="6"> |
178 | </el-dropdown-menu> | 179 | <div class="fghzxx"> |
179 | </el-dropdown> | 180 | <div class="choosedZxx"> |
180 | <el-dropdown @command="zrzHandleCommand($event,index)"> | 181 | <span v-for="(dzItem,dzIndex) in item.dz" :key="dzIndex+dzItem.xmmc" class="zxx"> |
181 | <span class="el-dropdown-link"> | 182 | {{dzItem.xmmc}} <i class="fa fa-times"></i> |
182 | 选择自然幢<i class="el-icon-arrow-down el-icon--right"></i> | 183 | </span> |
183 | </span> | 184 | <span v-for="(zrzItem,zrzIndex) in item.zrz" :key="zrzIndex+zrzItem.xmmc" class="zxx"> |
184 | <el-dropdown-menu slot="dropdown"> | 185 | {{zrzItem.xmmc}} <i class="fa fa-times"></i> |
185 | <el-dropdown-item v-for="(childItem,childIndex) in zdZrzList" | 186 | </span> |
186 | :key="childIndex" :command="childItem.bsm"> | 187 | </div> |
187 | {{childItem.xmmc}} | 188 | <p class="choose"> |
188 | </el-dropdown-item> | 189 | <el-popover |
189 | </el-dropdown-menu> | 190 | placement="top-end" |
190 | </el-dropdown> | 191 | width="300" |
191 | </td> --> | 192 | popper-class="popper-zxx" |
192 | </tr> | 193 | style="padding:0 12px" |
194 | trigger="click"> | ||
195 | <el-tabs v-model="activeName" type="card"> | ||
196 | <el-tab-pane label="多幢" name="dz"> | ||
197 | <ul> | ||
198 | <li :class="zdFghData.newZdlist[index].dz.indexOf(childItem) > -1 ? 'choosed':''" @click="dzHandleCommand(childItem,childItem.bsm,index)" v-for="(childItem) in zdDzList" :key="childItem.bsm"> | ||
199 | {{childItem.xmmc}}<i class="fa fa-check" style="color:'#4EB2FF'"></i> | ||
200 | </li> | ||
201 | </ul> | ||
202 | </el-tab-pane> | ||
203 | <el-tab-pane label="自然幢" name="zrz"> | ||
204 | <ul> | ||
205 | <li :class="zdFghData.newZdlist[index].zrz.indexOf(childItem) > -1 ? 'choosed':''" @click="zrzHandleCommand(childItem,childItem.bsm,index)" v-for="(childItem) in zdZrzList" :key="childItem.bsm"> | ||
206 | {{childItem.xmmc}} <i class="fa fa-check" style="color:'#4EB2FF'"></i> | ||
207 | </li> | ||
208 | </ul> | ||
209 | </el-tab-pane> | ||
210 | </el-tabs> | ||
211 | <span slot="reference">选择</span> | ||
212 | </el-popover> | ||
213 | </p> | ||
214 | </div> | ||
215 | </td> | ||
216 | </tr> | ||
217 | </template> | ||
193 | </table> | 218 | </table> |
194 | </div> | 219 | </div> |
195 | <zd-query-data @getData="getData" :centerDialogVisible.sync="centerDialogVisible" :isZdClose="true" | 220 | <zd-query-data @getData="getData" :centerDialogVisible.sync="centerDialogVisible" :isZdClose="true" |
... | @@ -556,6 +581,8 @@ | ... | @@ -556,6 +581,8 @@ |
556 | newZdlist: [] | 581 | newZdlist: [] |
557 | }, | 582 | }, |
558 | fgBoxWidth: 0, | 583 | fgBoxWidth: 0, |
584 | tableHeight:0, | ||
585 | activeName:'dz' | ||
559 | } | 586 | } |
560 | }, | 587 | }, |
561 | created() { | 588 | created() { |
... | @@ -565,6 +592,7 @@ | ... | @@ -565,6 +592,7 @@ |
565 | this.getzdtzm(); | 592 | this.getzdtzm(); |
566 | this.$nextTick(() => { | 593 | this.$nextTick(() => { |
567 | this.fgBoxWidth = this.$refs.fgBox.clientWidth; | 594 | this.fgBoxWidth = this.$refs.fgBox.clientWidth; |
595 | this.tableHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 590; | ||
568 | }) | 596 | }) |
569 | }, | 597 | }, |
570 | methods: { | 598 | methods: { |
... | @@ -654,27 +682,32 @@ | ... | @@ -654,27 +682,32 @@ |
654 | ztype: 'zrz' | 682 | ztype: 'zrz' |
655 | }) | 683 | }) |
656 | }, | 684 | }, |
657 | dzHandleCommand(command, index) { | 685 | dzHandleCommand(obj,bsm, index) { |
658 | let item = this.zdDzList.filter(i => i.bsm == command)[0]; | 686 | if(this.zdFghData.newZdlist[index].dz.indexOf(obj) < 0){ |
659 | this.zdFghData.newZdlist[index].fwlist.push({ | 687 | this.zdFghData.newZdlist[index].fwlist.push({ |
660 | zbsm: command, | 688 | zbsm: bsm, |
661 | ztype: 'dz' | 689 | ztype: 'dz' |
662 | }); | 690 | }); |
663 | this.zdFghData.newZdlist[index].dz.push(item) | 691 | this.zdFghData.newZdlist[index].dz.push(obj) |
664 | this.zdDzList = this.zdDzList.filter(i => i.bsm !== command); | 692 | }else{ |
693 | this.zdFghData.newZdlist[index].dz = this.zdFghData.newZdlist[index].dz.filter(i => i.bsm !== bsm) | ||
694 | } | ||
665 | }, | 695 | }, |
666 | zrzHandleCommand(command, index) { | 696 | zrzHandleCommand(obj,bsm, index) { |
667 | let item = this.zdZrzList.filter(i => i.bsm == command)[0]; | 697 | if(this.zdFghData.newZdlist[index].zrz.indexOf(obj) < 0){ |
668 | this.zdFghData.newZdlist[index].fwlist.push({ | 698 | this.zdFghData.newZdlist[index].fwlist.push({ |
669 | zbsm: command, | 699 | zbsm: bsm, |
670 | ztype: 'zrz' | 700 | ztype: 'zrz' |
671 | }) | 701 | }) |
672 | this.zdFghData.newZdlist[index].zrz.push(item) | 702 | this.zdFghData.newZdlist[index].zrz.push(obj) |
673 | this.zdZrzList = this.zdZrzList.filter(i => i.bsm !== command); | 703 | }else{ |
704 | this.zdFghData.newZdlist[index].zrz = this.zdFghData.newZdlist[index].zrz.filter(i => i.bsm !== bsm) | ||
705 | } | ||
674 | }, | 706 | }, |
675 | ZdgetDzXx(zdbsm) { | 707 | ZdgetDzXx(zdbsm) { |
676 | ZdfggetZxx(zdbsm).then(res => { | 708 | ZdfggetZxx(zdbsm).then(res => { |
677 | if (res.success) { | 709 | if (res.success) { |
710 | console.log(res.result,'res.result'); | ||
678 | this.zdZxx = res.result; | 711 | this.zdZxx = res.result; |
679 | this.zdZrzList = res.result.zrzList | 712 | this.zdZrzList = res.result.zrzList |
680 | this.zdDzList = res.result.dzList | 713 | this.zdDzList = res.result.dzList |
... | @@ -951,6 +984,7 @@ | ... | @@ -951,6 +984,7 @@ |
951 | </script> | 984 | </script> |
952 | <style scoped lang="less"> | 985 | <style scoped lang="less"> |
953 | .fg { | 986 | .fg { |
987 | |||
954 | .menu { | 988 | .menu { |
955 | /deep/ .el-tabs__content { | 989 | /deep/ .el-tabs__content { |
956 | position: unset; | 990 | position: unset; |
... | @@ -990,6 +1024,14 @@ | ... | @@ -990,6 +1024,14 @@ |
990 | } | 1024 | } |
991 | } | 1025 | } |
992 | } | 1026 | } |
1027 | |||
1028 | /deep/ .el-card__header{ | ||
1029 | padding: 16px 20px; | ||
1030 | background-color: #F2F2F2; | ||
1031 | border: 1px solid #DBDBDB; | ||
1032 | -webkit-box-sizing: border-box; | ||
1033 | box-sizing: border-box; | ||
1034 | } | ||
993 | } | 1035 | } |
994 | 1036 | ||
995 | .v-model { | 1037 | .v-model { |
... | @@ -1003,7 +1045,7 @@ | ... | @@ -1003,7 +1045,7 @@ |
1003 | flex-direction: column; | 1045 | flex-direction: column; |
1004 | flex-flow: nowrap; | 1046 | flex-flow: nowrap; |
1005 | .data{ | 1047 | .data{ |
1006 | width: 36%; | 1048 | width: 40%; |
1007 | } | 1049 | } |
1008 | .el-card { | 1050 | .el-card { |
1009 | border: 1px solid #E6E6E6; | 1051 | border: 1px solid #E6E6E6; |
... | @@ -1027,16 +1069,30 @@ | ... | @@ -1027,16 +1069,30 @@ |
1027 | display: inline-block; | 1069 | display: inline-block; |
1028 | width: 104px; | 1070 | width: 104px; |
1029 | text-align: right; | 1071 | text-align: right; |
1072 | vertical-align: top; | ||
1030 | } | 1073 | } |
1031 | .value{ | 1074 | .value{ |
1032 | color: #6D7278; | 1075 | color: #6D7278; |
1076 | display: inline-block; | ||
1033 | padding-left: 10px; | 1077 | padding-left: 10px; |
1078 | width: calc(100% - 116px); | ||
1079 | word-break: break-all; | ||
1034 | } | 1080 | } |
1035 | } | 1081 | } |
1036 | } | 1082 | } |
1083 | .zdjbxx{ | ||
1084 | width: 380px; | ||
1085 | height: 200px; | ||
1086 | float: left; | ||
1087 | } | ||
1088 | .zdmap{ | ||
1089 | width: calc(100% - 380px); | ||
1090 | height: 200px; | ||
1091 | float: left; | ||
1092 | } | ||
1037 | } | 1093 | } |
1038 | .zxx { | 1094 | .zxx { |
1039 | width: calc(64% - 40px); | 1095 | width: calc(60% - 40px); |
1040 | margin-left: 20px; | 1096 | margin-left: 20px; |
1041 | display: flex; | 1097 | display: flex; |
1042 | flex-direction: column; | 1098 | flex-direction: column; |
... | @@ -1070,14 +1126,16 @@ | ... | @@ -1070,14 +1126,16 @@ |
1070 | 1126 | ||
1071 | } | 1127 | } |
1072 | .zrz { | 1128 | .zrz { |
1073 | width: 66%; | 1129 | width: 100%; |
1074 | margin-left: 20px; | ||
1075 | overflow: auto; | 1130 | overflow: auto; |
1076 | } | 1131 | } |
1077 | ul { | 1132 | ul { |
1078 | overflow: auto; | 1133 | overflow: auto; |
1134 | width: 100%; | ||
1135 | float: left; | ||
1136 | margin-left: 10px; | ||
1079 | li { | 1137 | li { |
1080 | width: 48%; | 1138 | width: 23%; |
1081 | padding: 5px; | 1139 | padding: 5px; |
1082 | text-align: left; | 1140 | text-align: left; |
1083 | line-height: 20px; | 1141 | line-height: 20px; |
... | @@ -1096,9 +1154,6 @@ | ... | @@ -1096,9 +1154,6 @@ |
1096 | } | 1154 | } |
1097 | } | 1155 | } |
1098 | 1156 | ||
1099 | .oddborder { | ||
1100 | border-right: 1px solid #000; | ||
1101 | } | ||
1102 | 1157 | ||
1103 | .fg-tabs { | 1158 | .fg-tabs { |
1104 | height: auto; | 1159 | height: auto; |
... | @@ -1129,13 +1184,16 @@ | ... | @@ -1129,13 +1184,16 @@ |
1129 | overflow: visible; | 1184 | overflow: visible; |
1130 | text-align: center; | 1185 | text-align: center; |
1131 | } | 1186 | } |
1132 | tr:nth-of-type(odd) { | 1187 | // tr:nth-of-type(odd) { |
1133 | background: #FAFAFA; | 1188 | // background: #FAFAFA; |
1134 | } | 1189 | // } |
1135 | tr{ | 1190 | tr{ |
1136 | th,td{ | 1191 | th,td{ |
1137 | height: 44px; | 1192 | height: 44px; |
1138 | } | 1193 | } |
1194 | th{ | ||
1195 | background: #FAFAFA; | ||
1196 | } | ||
1139 | } | 1197 | } |
1140 | 1198 | ||
1141 | tr:hover { | 1199 | tr:hover { |
... | @@ -1162,12 +1220,43 @@ | ... | @@ -1162,12 +1220,43 @@ |
1162 | .fgh { | 1220 | .fgh { |
1163 | box-sizing: border-box; | 1221 | box-sizing: border-box; |
1164 | /*padding: 0 18px;*/ | 1222 | /*padding: 0 18px;*/ |
1165 | height: 480px; | ||
1166 | overflow: auto; | 1223 | overflow: auto; |
1167 | margin-top: 26px; | 1224 | margin-top: 26px; |
1168 | table { | 1225 | table { |
1169 | margin: 0 20px; | 1226 | margin: 0 20px; |
1170 | } | 1227 | } |
1228 | .fghzxx{ | ||
1229 | width: 100%; | ||
1230 | height: 100%; | ||
1231 | line-height: 44px; | ||
1232 | .choosedZxx{ | ||
1233 | width:calc(100% - 88px); | ||
1234 | float: left; | ||
1235 | text-align: left; | ||
1236 | text-indent: 20px; | ||
1237 | .zxx{ | ||
1238 | padding-right: 10px; | ||
1239 | position: relative; | ||
1240 | i{ | ||
1241 | display: none; | ||
1242 | position: absolute; | ||
1243 | right: 4px; | ||
1244 | top: -6px; | ||
1245 | } | ||
1246 | } | ||
1247 | .zxx:hover{ | ||
1248 | i{ | ||
1249 | display: inline-block; | ||
1250 | } | ||
1251 | } | ||
1252 | } | ||
1253 | .choose{ | ||
1254 | width: 88px; | ||
1255 | color: #30A4FD; | ||
1256 | cursor: pointer; | ||
1257 | float: right; | ||
1258 | } | ||
1259 | } | ||
1171 | .tips { | 1260 | .tips { |
1172 | display: inline-block; | 1261 | display: inline-block; |
1173 | margin-bottom: 14px; | 1262 | margin-bottom: 14px; |
... | @@ -1221,10 +1310,6 @@ | ... | @@ -1221,10 +1310,6 @@ |
1221 | display: inline; | 1310 | display: inline; |
1222 | } | 1311 | } |
1223 | } | 1312 | } |
1224 | .choose{ | ||
1225 | color: #30A4FD; | ||
1226 | cursor: pointer; | ||
1227 | } | ||
1228 | } | 1313 | } |
1229 | 1314 | ||
1230 | .cz, .xh { | 1315 | .cz, .xh { |
... | @@ -1238,4 +1323,7 @@ | ... | @@ -1238,4 +1323,7 @@ |
1238 | .search { | 1323 | .search { |
1239 | color: #BBB !important; | 1324 | color: #BBB !important; |
1240 | } | 1325 | } |
1326 | /deep/ .el-select{ | ||
1327 | width: 100%; | ||
1328 | } | ||
1241 | </style> | 1329 | </style> | ... | ... |
-
Please register or sign in to post a comment