bd
/
ui
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

优化z-index

master
chenjiajian 2023-04-06 18:50:25 +08:00
parent 236553189c
commit 20963debe0
2 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/badge/index.js
View File

@ -25,7 +25,7 @@ class Badge extends Component {
display: inline-block; display: inline-block;
} }
.num { .num {
z-index: 100; z-index: 1;
position: absolute; position: absolute;
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
@ -41,7 +41,7 @@ class Badge extends Component {
background: var(--color-blue-3); background: var(--color-blue-3);
} }
:host([is-dot])::after { :host([is-dot])::after {
z-index: 100; z-index: 1;
position: absolute; position: absolute;
height: 8px; height: 8px;
width: 8px; width: 8px;

21
src/image/preview.js
View File

@ -20,7 +20,7 @@ class ImagePreview extends Component {
active = 0 active = 0
static styles = css` static styles = css`
:host { :host {
z-index: 1000; z-index: 1;
position: fixed; position: fixed;
display: none; display: none;
width: 100%; width: 100%;
@ -52,7 +52,6 @@ class ImagePreview extends Component {
} }
.toggle-btn { .toggle-btn {
user-select: none; user-select: none;
z-index: 100;
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
display: flex; display: flex;
@ -220,15 +219,6 @@ class ImagePreview extends Component {
}) })
return html` return html`
<div class="wrapper"> <div class="wrapper">
<div class="left toggle-btn" @click=${this.pre}>
<wc-icon name="left"></wc-icon>
</div>
<div class="right toggle-btn" @click=${this.next}>
<wc-icon name="right"></wc-icon>
</div>
<div class="close toggle-btn" @click=${this.close}>
<wc-icon name="close"></wc-icon>
</div>
<div class="images" ref="images" style=${translate}> <div class="images" ref="images" style=${translate}>
${this.list.map( ${this.list.map(
(url, index) => (url, index) =>
@ -241,6 +231,15 @@ class ImagePreview extends Component {
/>` />`
)} )}
</div> </div>
<div class="left toggle-btn" @click=${this.pre}>
<wc-icon name="left"></wc-icon>
</div>
<div class="right toggle-btn" @click=${this.next}>
<wc-icon name="right"></wc-icon>
</div>
<div class="close toggle-btn" @click=${this.close}>
<wc-icon name="close"></wc-icon>
</div>
<div class="tools-bar"> <div class="tools-bar">
<wc-icon name="zoomIn" @click=${this.zoomIn}></wc-icon> <wc-icon name="zoomIn" @click=${this.zoomIn}></wc-icon>
<wc-icon name="zoomOut" @click=${this.zoomOut}></wc-icon> <wc-icon name="zoomOut" @click=${this.zoomOut}></wc-icon>