Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
c43614c3 by liangyifan
Options

发起受理

1 parent 65723796
Inline Side-by-side
Showing 3 changed files with 101 additions and 16 deletions
...@@ -16,17 +16,43 @@ ...@@ -16,17 +16,43 @@
16 </ul> 16 </ul>
17 </div> 17 </div>
18 <div class="tabsList"> 18 <div class="tabsList">
19 <p v-show="issplitScreen" class="splitScreen tabsList-title">材料信息</p> 19 <div class="tabsList-left" >
20 <el-tabs v-model="activeName"> 20 <div class="map-drawer-click"
21 <el-tab-pane :label="item.name" :name="index + 1 + ''" v-for="(item, index) in tabList" :key="index"> 21 v-if='isShowdrawer'
22 </el-tab-pane> 22 @click=" () => {
23 </el-tabs> 23 this.isShowdrawer = !this.isShowdrawer;}">
24 </div>
25 <div class="map-drawer-expand"
26 v-else
27 @click=" () => {
28 this.isShowdrawer = !this.isShowdrawer;}">
29 </div>
30 <ul v-if='this.isShowdrawer'>
31 <p>受理单元列表(3)</p>
32 <li>610100102104GB00004W00000000</li>
33 <div class="xian"></div>
34 <li>610100102104GB00004W00000000</li>
35 <div class="xian"></div>
36 <li>610100102104GB00004W00000000</li>
37 <div class="xian"></div>
38 </ul>
39 </div>
40 <div class="tabsList-right" >
41 <div class="fenpin" v-show="issplitScreen">
42 <p class="splitScreen tabsList-title">材料信息</p>
43 <div class="splitScreen" ></div>
44 </div>
45 <el-tabs v-model="activeName">
46 <el-tab-pane :label="item.name" :name="index + 1 + ''" v-for="(item, index) in tabList" :key="index">
47 <div class="splitScreen-con">
48 <component :is="editItem" :flag="flag" :key="key" />
49 </div>
50 </el-tab-pane>
51 </el-tabs></div>
52
24 </div> 53 </div>
25 54
26 <div class="splitScreen-con"> 55
27 <div class="splitScreen" v-show="issplitScreen"></div>
28 <component :is="editItem" :flag="flag" :key="key" />
29 </div>
30 </div> 56 </div>
31 </template> 57 </template>
32 <script> 58 <script>
...@@ -36,6 +62,7 @@ export default { ...@@ -36,6 +62,7 @@ export default {
36 components: {}, 62 components: {},
37 data () { 63 data () {
38 return { 64 return {
65 isShowdrawer: true,
39 key: 0, 66 key: 0,
40 flag: false, 67 flag: false,
41 headerleftList: [ 68 headerleftList: [
...@@ -165,18 +192,14 @@ export default { ...@@ -165,18 +192,14 @@ export default {
165 .fqsq { 192 .fqsq {
166 width: 100%; 193 width: 100%;
167 height: 100%; 194 height: 100%;
168 padding: 0 3%; 195 padding: 0;
169 box-sizing: border-box; 196 box-sizing: border-box;
170 background-color: #ffffff; 197 background-color: #ffffff;
171 198
172 .splitScreen-con { 199
173 display: flex;
174 }
175 200
176 .splitScreen { 201 .splitScreen {
177 min-width: 50%; 202 min-width: 50%;
178 width: 50%;
179 border-right: 1px solid $borderColor;
180 } 203 }
181 204
182 &-header { 205 &-header {
...@@ -216,7 +239,32 @@ export default { ...@@ -216,7 +239,32 @@ export default {
216 } 239 }
217 } 240 }
218 } 241 }
219 242 .map-drawer-expand {
243 width: 20px;
244 height: 77px;
245 background: url('../../../image/right.png');
246 background-size: cover;
247 position: absolute;
248 left: 0%;
249 top: 30%;
250 z-index: 999;
251 cursor: pointer;
252 }
253 .map-drawer-click {
254 width: 20px;
255 height: 77px;
256 background: url('../../../image/left.png');
257 background-size: cover;
258 position: absolute;
259 right: -8%;
260 top: 30%;
261 z-index: 999;
262 cursor: pointer;
263 }
264 .hide {
265 display: none;
266 }
267
220 .tabsList { 268 .tabsList {
221 width: 100%; 269 width: 100%;
222 position: sticky; 270 position: sticky;
...@@ -224,6 +272,43 @@ export default { ...@@ -224,6 +272,43 @@ export default {
224 background-color: #ffffff; 272 background-color: #ffffff;
225 z-index: 100; 273 z-index: 100;
226 @include flex; 274 @include flex;
275 .tabsList-left{
276 border-right: 1px solid #EBEEF5;
277 position: relative;
278
279 ul{
280 position: relative;
281
282 .xian{
283 background: #F2F2F2;
284 padding: 2px;
285 }
286 p{
287 padding: 20px;
288 text-align: center;
289 }
290 li{
291 padding: 10px;
292 font-size: 14px;
293 color: #606266;
294
295 }
296 li:hover{
297 color: #0F93F6;
298 cursor:pointer
299 }
300 }
301 }
302 .tabsList-right{
303 .fenpin{
304 min-width: 50%;
305 border-right: 1px solid #EBEEF5;
306 }
307 width: 100%;
308 background-color: #ffffff;
309 z-index: 100;
310 @include flex;
311 }
227 } 312 }
228 313
229 .tabsList-title { 314 .tabsList-title {
......