From cc475a5c500b761659e2a57223a4d6c0af0b2eff Mon Sep 17 00:00:00 2001
From: BTMuli <BT-Muli@outlook.com>
Date: Wed, 18 Oct 2023 21:58:44 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8D=E9=81=AE?=
 =?UTF-8?q?=E6=8C=A1=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/func/snackbar.vue | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/func/snackbar.vue b/src/components/func/snackbar.vue
index 3b799ad3..157ff556 100644
--- a/src/components/func/snackbar.vue
+++ b/src/components/func/snackbar.vue
@@ -1,13 +1,13 @@
 <template>
-  <div class="func-snackbar-container">
-    <transition name="func-snackbar">
-      <div v-show="show" class="func-snackbar" :style="{ backgroundColor: data.color }">
+  <transition name="func-snackbar">
+    <div class="func-snackbar-container" v-show="show">
+      <div class="func-snackbar" :style="{ backgroundColor: data.color }">
         <slot name="text">
           <span class="func-snackbar-text">{{ data.text }}</span>
         </slot>
       </div>
-    </transition>
-  </div>
+    </div>
+  </transition>
 </template>
 <script lang="ts" setup>
 import { onMounted, reactive, ref } from "vue";
@@ -88,8 +88,7 @@ defineExpose({
 }
 
 .func-snackbar-container {
-  position: absolute;
-  z-index: 999;
+  position: fixed;
   bottom: 0;
   left: 0;
   display: flex;
@@ -107,7 +106,6 @@ defineExpose({
   justify-content: center;
   padding: 10px 20px;
   border-radius: 5px;
-  margin: 20px;
   box-shadow: 0 0 10px rgb(0 0 0 / 20%);
 }