Merge branch 'dev'
Showing
2 changed files
with
111 additions
and
118 deletions
1 | <!-- | 1 | <!-- |
2 | * @Description: | 2 | * @Description: |
3 | * @Autor: renchao | 3 | * @Autor: renchao |
4 | * @LastEditTime: 2023-10-12 09:49:08 | 4 | * @LastEditTime: 2023-10-13 15:02:59 |
5 | --> | 5 | --> |
6 | <template> | 6 | <template> |
7 | <div class="rlPopup"> | 7 | <div class="rlPopup"> |
... | @@ -346,7 +346,7 @@ | ... | @@ -346,7 +346,7 @@ |
346 | // 查看大图 | 346 | // 查看大图 |
347 | .rlPopup { | 347 | .rlPopup { |
348 | position: relative; | 348 | position: relative; |
349 | width: 100%; | 349 | width: 80%; |
350 | text-align: center; | 350 | text-align: center; |
351 | height: 100%; | 351 | height: 100%; |
352 | 352 | ||
... | @@ -402,7 +402,7 @@ | ... | @@ -402,7 +402,7 @@ |
402 | &-button { | 402 | &-button { |
403 | display: flex; | 403 | display: flex; |
404 | justify-content: center; | 404 | justify-content: center; |
405 | 405 | flex-wrap: wrap; | |
406 | .fileUpdate { | 406 | .fileUpdate { |
407 | margin: 0 10px; | 407 | margin: 0 10px; |
408 | } | 408 | } | ... | ... |
... | @@ -5,55 +5,53 @@ | ... | @@ -5,55 +5,53 @@ |
5 | --> | 5 | --> |
6 | <template> | 6 | <template> |
7 | <div class="clxx"> | 7 | <div class="clxx"> |
8 | <div class="right"> | 8 | <!-- 材料预览 --> |
9 | <!-- 材料预览 --> | 9 | <div class="clyl-box"> |
10 | <div class="clyl-box"> | 10 | <div class="menu-tree"> |
11 | <div class="menu-tree"> | 11 | <el-button |
12 | <el-button | 12 | type="primary" |
13 | type="primary" | 13 | native-type="submit" |
14 | native-type="submit" | 14 | @click="viewDetail" |
15 | @click="viewDetail" | 15 | style="width: 100%; margin-top: 10px">申请材料目录</el-button> |
16 | style="width: 100%; margin-top: 10px">申请材料目录</el-button> | 16 | <div class="item"> |
17 | <div class="item"> | 17 | 材料目录({{ tableData.length }}) |
18 | 材料目录({{ tableData.length }}) | 18 | <div class="tableList"> |
19 | <div class="tableList"> | 19 | <div |
20 | <div | 20 | style=" |
21 | style=" | ||
22 | text-align: center; | 21 | text-align: center; |
23 | line-height: 20px; | 22 | line-height: 20px; |
24 | color: black; | 23 | color: black; |
25 | font-size: 14px; | 24 | font-size: 14px; |
26 | " | 25 | " |
27 | v-if="tableData.length == 0"> | 26 | v-if="tableData.length == 0"> |
28 | 暂无数据 | 27 | 暂无数据 |
29 | </div> | 28 | </div> |
30 | <div | 29 | <div |
31 | v-for="(item, index) in tableData" | 30 | v-for="(item, index) in tableData" |
32 | :key="item.bsmSj" | 31 | :key="item.bsmSj" |
33 | :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']" | 32 | :class="['child', treeCheckId == item.bsmSj ? 'checked' : '']" |
34 | @click="treeClick(item, index)"> | 33 | @click="treeClick(item, index)"> |
35 | <span v-if="item.isrequired == 1" class="required">必选</span> | 34 | <span v-if="item.isrequired == 1" class="required">必选</span> |
36 | <span class="item_name">{{ item.sjmc }}</span> | 35 | <span class="item_name">{{ item.sjmc }}</span> |
37 | <span class="cl_number" :key="key">({{ item.ys ? item.ys : 0 }})</span> | 36 | <span class="cl_number" :key="key">({{ item.ys ? item.ys : 0 }})</span> |
38 | </div> | ||
39 | </div> | 37 | </div> |
40 | </div> | 38 | </div> |
41 | <el-button | ||
42 | type="primary" | ||
43 | native-type="submit" | ||
44 | style="width: 100%" | ||
45 | @click="handleAdd()" | ||
46 | v-if="ableOperation">新增</el-button> | ||
47 | </div> | 39 | </div> |
48 | <image-preview | 40 | <el-button |
49 | ref="imageRef" | 41 | type="primary" |
50 | v-if="tableData.length > 0" | 42 | native-type="submit" |
51 | :previewImg="previewImg" | 43 | style="width: 100%" |
52 | :ableOperation="ableOperation" | 44 | @click="handleAdd()" |
53 | @updateList="updateList" | 45 | v-if="ableOperation">新增</el-button> |
54 | @nextPriview="nextPriview" | ||
55 | @prevPriview="prevPriview" /> | ||
56 | </div> | 46 | </div> |
47 | <image-preview | ||
48 | ref="imageRef" | ||
49 | v-if="tableData.length > 0" | ||
50 | :previewImg="previewImg" | ||
51 | :ableOperation="ableOperation" | ||
52 | @updateList="updateList" | ||
53 | @nextPriview="nextPriview" | ||
54 | @prevPriview="prevPriview" /> | ||
57 | </div> | 55 | </div> |
58 | <clxxAddDialog v-model="isDialog" /> | 56 | <clxxAddDialog v-model="isDialog" /> |
59 | </div> | 57 | </div> |
... | @@ -382,93 +380,88 @@ | ... | @@ -382,93 +380,88 @@ |
382 | } | 380 | } |
383 | } | 381 | } |
384 | 382 | ||
385 | .right { | 383 | .clmlmx-box { |
384 | margin: 0 auto; | ||
385 | |||
386 | .title { | ||
387 | text-align: center; | ||
388 | height: 60px; | ||
389 | line-height: 60px; | ||
390 | border: 1px solid #dfe6ec; | ||
391 | font-size: 20px; | ||
392 | background: #81d3f81a; | ||
393 | margin-bottom: -1px; | ||
394 | } | ||
395 | } | ||
396 | |||
397 | .clyl-box { | ||
386 | width: 100%; | 398 | width: 100%; |
387 | height: 100%; | 399 | height: 100%; |
400 | display: flex; | ||
401 | .tableList { | ||
402 | margin-top: 10px; | ||
403 | } | ||
404 | .menu-tree { | ||
405 | width: 20%; | ||
406 | min-width: 160px; | ||
407 | height: 100%; | ||
408 | font-size: 14px; | ||
409 | border-right: 1px dotted #d9d9d9; | ||
410 | padding: 0 15px; | ||
388 | 411 | ||
389 | .clmlmx-box { | 412 | .item { |
390 | margin: 0 auto; | 413 | line-height: 30px; |
391 | 414 | padding-top: 5px; | |
392 | .title { | 415 | border-bottom: 1px solid #e8e8e8; |
416 | font-size: 16px; | ||
393 | text-align: center; | 417 | text-align: center; |
394 | height: 60px; | 418 | color: $light-blue; |
395 | line-height: 60px; | ||
396 | border: 1px solid #dfe6ec; | ||
397 | font-size: 20px; | ||
398 | background: #81d3f81a; | ||
399 | margin-bottom: -1px; | ||
400 | } | ||
401 | } | ||
402 | 419 | ||
403 | .clyl-box { | 420 | .itemIcon { |
404 | width: 100%; | 421 | float: right; |
405 | height: 100%; | 422 | line-height: 60px; |
406 | display: flex; | 423 | cursor: pointer; |
407 | .tableList { | 424 | } |
408 | margin-top: 10px; | ||
409 | } | ||
410 | .menu-tree { | ||
411 | width: 20%; | ||
412 | min-width: 160px; | ||
413 | height: 100%; | ||
414 | font-size: 14px; | ||
415 | border-right: 1px dotted #d9d9d9; | ||
416 | padding: 0 15px; | ||
417 | 425 | ||
418 | .item { | 426 | .child { |
419 | line-height: 30px; | 427 | line-height: 32px; |
420 | padding-top: 5px; | ||
421 | border-bottom: 1px solid #e8e8e8; | 428 | border-bottom: 1px solid #e8e8e8; |
422 | font-size: 16px; | 429 | padding-left: 10px; |
423 | text-align: center; | 430 | color: #6b6b6b; |
431 | cursor: pointer; | ||
432 | box-sizing: border-box; | ||
433 | border-radius: 6px; | ||
434 | line-height: 20px; | ||
435 | transition: all 0.3s; | ||
436 | padding: 8px 0; | ||
437 | overflow: hidden; | ||
438 | display: flex; | ||
439 | justify-content: space-between; | ||
440 | } | ||
441 | .item_name { | ||
442 | flex: 1; | ||
443 | font-size: 14px; | ||
444 | display: flex; | ||
445 | justify-content: center; | ||
446 | } | ||
447 | .child:hover { | ||
424 | color: $light-blue; | 448 | color: $light-blue; |
449 | transform: scale(1.1); | ||
450 | } | ||
425 | 451 | ||
426 | .itemIcon { | 452 | .checked { |
427 | float: right; | 453 | border: 1px solid $light-blue; |
428 | line-height: 60px; | 454 | color: $light-blue; |
429 | cursor: pointer; | ||
430 | } | ||
431 | |||
432 | .child { | ||
433 | line-height: 32px; | ||
434 | border-bottom: 1px solid #e8e8e8; | ||
435 | padding-left: 10px; | ||
436 | color: #6b6b6b; | ||
437 | cursor: pointer; | ||
438 | box-sizing: border-box; | ||
439 | border-radius: 6px; | ||
440 | line-height: 20px; | ||
441 | transition: all 0.3s; | ||
442 | padding: 8px 0; | ||
443 | overflow: hidden; | ||
444 | display: flex; | ||
445 | justify-content: space-between; | ||
446 | } | ||
447 | .item_name { | ||
448 | flex: 1; | ||
449 | font-size: 14px; | ||
450 | display: flex; | ||
451 | justify-content: center; | ||
452 | } | ||
453 | .child:hover { | ||
454 | color: $light-blue; | ||
455 | transform: scale(1.1); | ||
456 | } | ||
457 | |||
458 | .checked { | ||
459 | border: 1px solid $light-blue; | ||
460 | color: $light-blue; | ||
461 | } | ||
462 | } | 455 | } |
463 | } | 456 | } |
457 | } | ||
464 | 458 | ||
465 | .clyl-img { | 459 | .clyl-img { |
466 | width: 75%; | 460 | width: 75%; |
467 | height: 100%; | 461 | height: 100%; |
468 | background: #f3f4f7; | 462 | background: #f3f4f7; |
469 | margin: 0 auto; | 463 | margin: 0 auto; |
470 | position: relative; | 464 | position: relative; |
471 | } | ||
472 | } | 465 | } |
473 | } | 466 | } |
474 | } | 467 | } | ... | ... |
-
Please register or sign in to post a comment