目录树样式调整
Showing
6 changed files
with
53 additions
and
48 deletions
src/assets/images/arrow-down-bold.svg
0 → 100644
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#666666" d="M904.533333 311.466667c-17.066667-17.066667-42.666667-17.066667-59.733333 0L512 644.266667 179.2 311.466667c-17.066667-17.066667-42.666667-17.066667-59.733333 0-17.066667 17.066667-17.066667 42.666667 0 59.733333l362.666666 362.666667c8.533333 8.533333 19.2 12.8 29.866667 12.8s21.333333-4.266667 29.866667-12.8l362.666666-362.666667c17.066667-17.066667 17.066667-42.666667 0-59.733333z" /></svg> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/assets/images/arrow-up-bold.svg
0 → 100644
1 | <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#666666" d="M904.533333 674.133333l-362.666666-362.666666c-17.066667-17.066667-42.666667-17.066667-59.733334 0l-362.666666 362.666666c-17.066667 17.066667-17.066667 42.666667 0 59.733334 17.066667 17.066667 42.666667 17.066667 59.733333 0L512 401.066667l332.8 332.8c8.533333 8.533333 19.2 12.8 29.866667 12.8s21.333333-4.266667 29.866666-12.8c17.066667-17.066667 17.066667-42.666667 0-59.733334z" /></svg> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
... | @@ -103,7 +103,7 @@ ol, ul { list-style:none; } | ... | @@ -103,7 +103,7 @@ ol, ul { list-style:none; } |
103 | >.is-top{ | 103 | >.is-top{ |
104 | position: -webkit-fixed; | 104 | position: -webkit-fixed; |
105 | position: fixed; | 105 | position: fixed; |
106 | top: 72px; | 106 | top: 66px; |
107 | z-index: 999; | 107 | z-index: 999; |
108 | width: 100%; | 108 | width: 100%; |
109 | margin-bottom: 0; | 109 | margin-bottom: 0; | ... | ... |
... | @@ -21,29 +21,6 @@ | ... | @@ -21,29 +21,6 @@ |
21 | }" | 21 | }" |
22 | > | 22 | > |
23 | <div | 23 | <div |
24 | v-if="item.children" | ||
25 | class="reTree_icon" | ||
26 | :style="{ | ||
27 | height: (size || 16 * 1.2) + 'px', | ||
28 | width: (size || 16 * 1.2) + 'px', | ||
29 | }" | ||
30 | :class="{ | ||
31 | reTree_default_icon: item.children.length === 0, | ||
32 | reTree_collapse_icon: !islpb && item.expand && item.children.length > 0, | ||
33 | reTree_expand_icon: !islpb && !item.expand && item.children.length > 0, | ||
34 | lpbTree_collapse_icon: islpb && item.expand && item.children.length > 0, | ||
35 | lpbTree_expand_icon: islpb && !item.expand && item.children.length > 0, | ||
36 | }" | ||
37 | ></div> | ||
38 | <div | ||
39 | v-if="item.children==null" | ||
40 | class="reTree_icon reTree_expand_icon" | ||
41 | :style="{ | ||
42 | height: (size || 16 * 1.2) + 'px', | ||
43 | width: (size || 16 * 1.2) + 'px', | ||
44 | }" | ||
45 | ></div> | ||
46 | <div | ||
47 | class="layer_text nowrap" | 24 | class="layer_text nowrap" |
48 | @contextmenu.prevent="openMenu($event, item,list)" | 25 | @contextmenu.prevent="openMenu($event, item,list)" |
49 | :class="{ | 26 | :class="{ |
... | @@ -54,8 +31,8 @@ | ... | @@ -54,8 +31,8 @@ |
54 | :data-zdbsm="item.zdbsm" | 31 | :data-zdbsm="item.zdbsm" |
55 | :title=item.mc | 32 | :title=item.mc |
56 | > | 33 | > |
57 | <span class="qsztImg" v-if="item.bblx == 1 || (item.bhqkbsm != ''&& item.bhqkbsm != null)" style="background: #9e9b9b"> | 34 | <span class="qsztImg" v-if="item.bblx == 1 || (item.bhqkbsm != ''&& item.bhqkbsm != null)"> |
58 | <span class="qsztFont">变</span> | 35 | <span class="qsztFont" style="background: #9e9b9b">变</span> |
59 | </span> | 36 | </span> |
60 | <template v-else> | 37 | <template v-else> |
61 | <span class="qsztImg" v-if="item.qszt=='0'" > | 38 | <span class="qsztImg" v-if="item.qszt=='0'" > |
... | @@ -80,9 +57,32 @@ | ... | @@ -80,9 +57,32 @@ |
80 | </span> | 57 | </span> |
81 | 58 | ||
82 | 59 | ||
83 | {{ item.mc }} | 60 | <span class="project-name">{{ item.mc }}</span> |
84 | 61 | ||
85 | </div> | 62 | </div> |
63 | <div | ||
64 | v-if="item.children" | ||
65 | class="reTree_icon" | ||
66 | :style="{ | ||
67 | height: (size || 16 * 1.2) + 'px', | ||
68 | width: (size || 16 * 1.2) + 'px', | ||
69 | }" | ||
70 | :class="{ | ||
71 | reTree_default_icon: item.children.length === 0, | ||
72 | reTree_collapse_icon: !islpb && item.expand && item.children.length > 0, | ||
73 | reTree_expand_icon: !islpb && !item.expand && item.children.length > 0, | ||
74 | lpbTree_collapse_icon: islpb && item.expand && item.children.length > 0, | ||
75 | lpbTree_expand_icon: islpb && !item.expand && item.children.length > 0, | ||
76 | }" | ||
77 | ></div> | ||
78 | <div | ||
79 | v-if="item.children==null" | ||
80 | class="reTree_icon reTree_expand_icon" | ||
81 | :style="{ | ||
82 | height: (size || 16 * 1.2) + 'px', | ||
83 | width: (size || 16 * 1.2) + 'px', | ||
84 | }" | ||
85 | ></div> | ||
86 | </div> | 86 | </div> |
87 | <line-item | 87 | <line-item |
88 | :list="item.children" | 88 | :list="item.children" |
... | @@ -331,6 +331,7 @@ export default { | ... | @@ -331,6 +331,7 @@ export default { |
331 | cursor: pointer; | 331 | cursor: pointer; |
332 | .layer_text { | 332 | .layer_text { |
333 | flex: 1; | 333 | flex: 1; |
334 | line-height: 16px; | ||
334 | } | 335 | } |
335 | } | 336 | } |
336 | .first_vertical_line { | 337 | .first_vertical_line { |
... | @@ -348,15 +349,15 @@ export default { | ... | @@ -348,15 +349,15 @@ export default { |
348 | } | 349 | } |
349 | .second_layer { | 350 | .second_layer { |
350 | position: relative; | 351 | position: relative; |
351 | width: 100%; | 352 | width: calc(100% - 20px); |
352 | cursor: pointer; | 353 | cursor: pointer; |
353 | padding-left: 25px; | 354 | padding-left: 20px; |
354 | } | 355 | } |
355 | .third_layer { | 356 | .third_layer { |
356 | position: relative; | 357 | position: relative; |
357 | // padding-bottom: 15px; | 358 | width: calc(100% - 20px); |
358 | width: 100%; | 359 | cursor: pointer; |
359 | padding-left: 25px; | 360 | padding-left: 20px; |
360 | } | 361 | } |
361 | .white_layer { | 362 | .white_layer { |
362 | color: black!important; | 363 | color: black!important; |
... | @@ -441,13 +442,13 @@ export default { | ... | @@ -441,13 +442,13 @@ export default { |
441 | 442 | ||
442 | .reTree_collapse_icon { | 443 | .reTree_collapse_icon { |
443 | // opacity: .5; | 444 | // opacity: .5; |
444 | background: url("../../assets/images/reTree_collapse_.svg") no-repeat center | 445 | background: url("../../assets/images/arrow-up-bold.svg") no-repeat center |
445 | center; | 446 | center; |
446 | background-size: contain; | 447 | background-size: contain; |
447 | } | 448 | } |
448 | .reTree_expand_icon { | 449 | .reTree_expand_icon { |
449 | // opacity: .5; | 450 | // opacity: .5; |
450 | background: url("../../assets/images/reTree_expand_.svg") no-repeat center | 451 | background: url("../../assets/images/arrow-down-bold.svg") no-repeat center |
451 | center; | 452 | center; |
452 | background-size: contain; | 453 | background-size: contain; |
453 | } | 454 | } |
... | @@ -474,9 +475,11 @@ export default { | ... | @@ -474,9 +475,11 @@ export default { |
474 | } | 475 | } |
475 | .qsztImg{ | 476 | .qsztImg{ |
476 | width: 16px; | 477 | width: 16px; |
478 | border-radius: 50%; height: 20px; width: 20px; display: inline-block; | ||
479 | } | ||
480 | .project-name{ | ||
477 | position: relative; | 481 | position: relative; |
478 | top: 1px; | 482 | top: 1px; |
479 | border-radius: 50%; height: 20px; width: 20px; display: inline-block; | ||
480 | } | 483 | } |
481 | .curPage{ | 484 | .curPage{ |
482 | color: orange; | 485 | color: orange; | ... | ... |
1 | <template> | 1 | <template> |
2 | <div | 2 | <div |
3 | class="content column-start-center reTree_box" | 3 | class="content column-start-center reTree_box" |
4 | :style="{ fontSize: (size || 16) + 'px', lineHeight: (size || 16) + 'px', width: (islpb ? '200':'374') + 'px' }" | 4 | :style="{ fontSize: (size || 16) + 'px', lineHeight: (size || 16) + 'px', width: (islpb ? '200':'270') + 'px' }" |
5 | > | 5 | > |
6 | <div | 6 | <div |
7 | class="column-start-center basic_layer" | 7 | class="column-start-center basic_layer" |
... | @@ -16,7 +16,8 @@ | ... | @@ -16,7 +16,8 @@ |
16 | }" | 16 | }" |
17 | @click="itemClick(item)" | 17 | @click="itemClick(item)" |
18 | > | 18 | > |
19 | <div | 19 | |
20 | <div class="layer_text nowrap" @contextmenu.prevent="openMenu($event, item)">{{ item.mc }}</div><div | ||
20 | class="reTree_icon" | 21 | class="reTree_icon" |
21 | :style="{ | 22 | :style="{ |
22 | height: (size || 16 * 1.2) + 'px', | 23 | height: (size || 16 * 1.2) + 'px', |
... | @@ -30,7 +31,6 @@ | ... | @@ -30,7 +31,6 @@ |
30 | lpbTree_expand_icon: islpb && !item.expand && item.children.length > 0, | 31 | lpbTree_expand_icon: islpb && !item.expand && item.children.length > 0, |
31 | }" | 32 | }" |
32 | ></div> | 33 | ></div> |
33 | <div class="layer_text nowrap" @contextmenu.prevent="openMenu($event, item)">{{ item.mc }}</div> | ||
34 | </div> | 34 | </div> |
35 | 35 | ||
36 | <lineItem | 36 | <lineItem |
... | @@ -114,9 +114,9 @@ | ... | @@ -114,9 +114,9 @@ |
114 | </ul> | 114 | </ul> |
115 | 115 | ||
116 | <!--@close="closeImportDialog"--> | 116 | <!--@close="closeImportDialog"--> |
117 | <el-dialog v-dialogDrag :close-on-click-modal="false" title="导入图形" :modal="false" custom-class="importDialog" :visible.sync="improtDialog" width="30%" @close="closeImportDialog"> | 117 | <el-dialog v-dialogDrag :close-on-click-modal="false" title="导入图形" :modal="false" custom-class="importDialog" :visible.sync="improtDialog" width="30%" @close="closeImportDialog"> |
118 | <import-geo :property-info="zdData" :timeLine="new Date().getTime()" :geo-info="currentClickZdGeo" @closeImportDialog="closeImportDialog"></import-geo> | 118 | <import-geo :property-info="zdData" :timeLine="new Date().getTime()" :geo-info="currentClickZdGeo" @closeImportDialog="closeImportDialog"></import-geo> |
119 | </el-dialog> | 119 | </el-dialog> |
120 | <!-- 添加定着物弹框 --> | 120 | <!-- 添加定着物弹框 --> |
121 | <el-dialog v-dialogDrag :close-on-click-modal="false" title="新建" :visible.sync="dialogVisible" width="48%"> | 121 | <el-dialog v-dialogDrag :close-on-click-modal="false" title="新建" :visible.sync="dialogVisible" width="48%"> |
122 | <Create @closeDialog="closeDialog" :auth="true" :createZrz="createZrz" ></Create> | 122 | <Create @closeDialog="closeDialog" :auth="true" :createZrz="createZrz" ></Create> |
... | @@ -793,7 +793,7 @@ export default { | ... | @@ -793,7 +793,7 @@ export default { |
793 | background: #c3c5c8; | 793 | background: #c3c5c8; |
794 | } | 794 | } |
795 | .reTree_collapse_icon { | 795 | .reTree_collapse_icon { |
796 | background: url("../../assets/images/reTree_collapse_.svg") no-repeat center | 796 | background: url("../../assets/images/arrow-up-bold.svg") no-repeat center |
797 | center; | 797 | center; |
798 | background-size: contain; | 798 | background-size: contain; |
799 | } | 799 | } |
... | @@ -805,7 +805,7 @@ export default { | ... | @@ -805,7 +805,7 @@ export default { |
805 | } | 805 | } |
806 | 806 | ||
807 | .reTree_expand_icon { | 807 | .reTree_expand_icon { |
808 | background: url("../../assets/images/reTree_expand_.svg") no-repeat center | 808 | background: url("../../assets/images/arrow-down-bold.svg") no-repeat center |
809 | center; | 809 | center; |
810 | background-size: contain; | 810 | background-size: contain; |
811 | } | 811 | } |
... | @@ -828,8 +828,8 @@ export default { | ... | @@ -828,8 +828,8 @@ export default { |
828 | center; | 828 | center; |
829 | background-size: contain; | 829 | background-size: contain; |
830 | } | 830 | } |
831 | /deep/ .importDialog{ | 831 | /deep/ .importDialog{ |
832 | margin-top: 120px!important; | 832 | margin-top: 120px!important; |
833 | margin-left: 291px; | 833 | margin-left: 291px; |
834 | } | 834 | } |
835 | </style> | 835 | </style> | ... | ... |
... | @@ -66,7 +66,7 @@ | ... | @@ -66,7 +66,7 @@ |
66 | </el-main> | 66 | </el-main> |
67 | </el-container> | 67 | </el-container> |
68 | </el-container> | 68 | </el-container> |
69 | <div class="treeModule-show" :class="{ 'w0': isActive }"></div> | 69 | <!-- <div class="treeModule-show" :class="{ 'w0': isActive }"></div> --> |
70 | </div> | 70 | </div> |
71 | </template> | 71 | </template> |
72 | <script> | 72 | <script> | ... | ... |
-
Please register or sign in to post a comment