From 20963debe0d24544a8f998e21b818faffc7ef1a4 Mon Sep 17 00:00:00 2001
From: chenjiajian <770230504@qq.com>
Date: Thu, 6 Apr 2023 18:50:25 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96z-index?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/badge/index.js   |  4 ++--
 src/image/preview.js | 21 ++++++++++-----------
 2 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/src/badge/index.js b/src/badge/index.js
index 13c7b09..d20c3a6 100644
--- a/src/badge/index.js
+++ b/src/badge/index.js
@@ -25,7 +25,7 @@ class Badge extends Component {
         display: inline-block;
       }
       .num {
-        z-index: 100;
+        z-index: 1;
         position: absolute;
         display: inline-flex;
         justify-content: center;
@@ -41,7 +41,7 @@ class Badge extends Component {
         background: var(--color-blue-3);
       }
       :host([is-dot])::after {
-        z-index: 100;
+        z-index: 1;
         position: absolute;
         height: 8px;
         width: 8px;
diff --git a/src/image/preview.js b/src/image/preview.js
index eed818a..d2cc274 100644
--- a/src/image/preview.js
+++ b/src/image/preview.js
@@ -20,7 +20,7 @@ class ImagePreview extends Component {
   active = 0
   static styles = css`
     :host {
-      z-index: 1000;
+      z-index: 1;
       position: fixed;
       display: none;
       width: 100%;
@@ -52,7 +52,6 @@ class ImagePreview extends Component {
     }
     .toggle-btn {
       user-select: none;
-      z-index: 100;
       cursor: pointer;
       position: absolute;
       display: flex;
@@ -220,15 +219,6 @@ class ImagePreview extends Component {
     })
     return html`
       <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}>
           ${this.list.map(
             (url, index) =>
@@ -241,6 +231,15 @@ class ImagePreview extends Component {
               />`
           )}
         </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">
           <wc-icon name="zoomIn" @click=${this.zoomIn}></wc-icon>
           <wc-icon name="zoomOut" @click=${this.zoomOut}></wc-icon>