Perf(custom): remove backdrop-filter for better performance

This commit is contained in:
Kuingsmile
2026-01-01 16:26:16 +08:00
parent fa6f2a9070
commit 34fde7a4e6
6 changed files with 610 additions and 616 deletions

View File

@@ -522,7 +522,6 @@ function generateErrorPage(errorCode: number, _e: string): string {
background: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.95);
border-radius: 15px; border-radius: 15px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
padding: 60px 40px; padding: 60px 40px;
text-align: center; text-align: center;
max-width: 500px; max-width: 500px;

View File

@@ -5,7 +5,7 @@
<Transition name="inputbox-scale"> <Transition name="inputbox-scale">
<div v-if="showInputBoxVisible" class="inputbox-container" @click.stop> <div v-if="showInputBoxVisible" class="inputbox-container" @click.stop>
<button class="inputbox-close" @click="handleInputBoxCancel"> <button class="inputbox-close" @click="handleInputBoxCancel">
<X :size="20" /> <XIcon :size="20" />
</button> </button>
<div class="inputbox-body"> <div class="inputbox-body">
@@ -54,7 +54,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { X } from 'lucide-vue-next' import { XIcon } from 'lucide-vue-next'
import { nextTick, onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue' import { nextTick, onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
@@ -165,7 +165,6 @@ export default {
align-items: center; align-items: center;
padding: 1rem; padding: 1rem;
background: rgb(0 0 0 / 40%); background: rgb(0 0 0 / 40%);
backdrop-filter: blur(4px);
} }
/* Container */ /* Container */
@@ -224,7 +223,7 @@ export default {
/* Body */ /* Body */
.inputbox-body { .inputbox-body {
padding: 2rem 2rem 1.5rem; padding: 1rem 1rem 0.5rem;
} }
.inputbox-title { .inputbox-title {

View File

@@ -147,7 +147,6 @@ export default {
align-items: center; align-items: center;
padding: 1rem; padding: 1rem;
background: rgb(0 0 0 / 40%); background: rgb(0 0 0 / 40%);
backdrop-filter: blur(4px);
} }
/* Container */ /* Container */

View File

@@ -69,7 +69,6 @@
var(--color-surface) 50%, var(--color-surface) 50%,
rgb(var(--accent-rgb) / 5%) 100% rgb(var(--accent-rgb) / 5%) 100%
); );
backdrop-filter: blur(10px);
box-shadow: box-shadow:
0 4px 24px rgb(0 0 0 / 8%), 0 4px 24px rgb(0 0 0 / 8%),
0 1px 2px rgb(0 0 0 / 4%), 0 1px 2px rgb(0 0 0 / 4%),

View File

@@ -66,7 +66,6 @@
0 4px 24px rgb(0 0 0 / 8%), 0 4px 24px rgb(0 0 0 / 8%),
0 1px 2px rgb(0 0 0 / 4%), 0 1px 2px rgb(0 0 0 / 4%),
inset 0 1px 0 rgb(255 255 255 / 5%); inset 0 1px 0 rgb(255 255 255 / 5%);
backdrop-filter: blur(10px);
flex-wrap: wrap; flex-wrap: wrap;
gap: 1.5rem; gap: 1.5rem;
} }
@@ -442,7 +441,6 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: rgb(0 0 0 / 60%); background: rgb(0 0 0 / 60%);
backdrop-filter: blur(8px);
} }
.loading-content { .loading-content {