Commit f7a4bce8b141f75c3c677367624c6b5c8017f8b5
1 parent
025aa0aa
perf(src/packages): 优化图层区域,文本列表展示样式问题
Showing
1 changed file
with
21 additions
and
2 deletions
... | ... | @@ -9,11 +9,11 @@ |
9 | 9 | :fallback-src="requireErrorImg()" |
10 | 10 | ></n-image> |
11 | 11 | <n-ellipsis style="margin-right: auto"> |
12 | - <span class="list-text"> | |
12 | + <span class="list-text" :class="{'list-text-mini': selectText }"> | |
13 | 13 | {{ t(props.componentData.chartConfig.title) }} |
14 | 14 | </span> |
15 | 15 | </n-ellipsis> |
16 | - <div class="list-layers"> | |
16 | + <div class="list-layers" :class="{'list-layers-mini': selectText }"> | |
17 | 17 | <layers-status :isGroup="isGroup" :hover="hover" :status="status"></layers-status> |
18 | 18 | </div> |
19 | 19 | </div> |
... | ... | @@ -157,12 +157,31 @@ $textSize: 10px; |
157 | 157 | text-overflow: ellipsis; |
158 | 158 | white-space: nowrap; |
159 | 159 | } |
160 | + .list-text-mini{ | |
161 | + position: absolute; | |
162 | + z-index: 99; | |
163 | + left: 70px; | |
164 | + top: 8px; | |
165 | + padding-left: 6px; | |
166 | + width: 60px; | |
167 | + font-size: $textSize; | |
168 | + overflow: hidden; | |
169 | + text-align: left; | |
170 | + text-overflow: ellipsis; | |
171 | + white-space: nowrap; | |
172 | + } | |
160 | 173 | |
161 | 174 | .list-layers { |
162 | 175 | position: absolute; |
163 | 176 | z-index: 99; |
164 | 177 | left: 140px; |
165 | 178 | top: 15px; |
179 | + } | |
180 | + .list-layers-mini { | |
181 | + position: absolute; | |
182 | + z-index: 99; | |
183 | + left: 140px; | |
184 | + top: 2px; | |
166 | 185 | } |
167 | 186 | |
168 | 187 | /* 选中样式 */ | ... | ... |