Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-13 09:28:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

🐛 修复遮挡问题

Browse Source
This commit is contained in:
BTMuli
2023-10-18 21:58:44 +08:00
parent 98189974b8
commit cc475a5c50
1 changed files with 6 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/func/snackbar.vue
View File

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