Update protocolBadge.vue

This commit is contained in:
Donald Zou
2025-08-16 16:17:25 +08:00
parent a511eb21fc
commit f777ac5f75

View File

@@ -6,25 +6,15 @@ const props = defineProps({
protocol: String, protocol: String,
mini: false mini: false
}) })
const blur = ref(undefined)
onMounted(() => {
setTimeout(() => {
blur.value = !props.mini
}, 500)
})
</script> </script>
<template> <template>
<div class="position-relative"> <div class="position-relative">
<span class="badge wireguardBg rounded-3 shadow z-1" <span class="badge wireguardBg rounded-3 shadow z-1"
:class="{blur: blur === true}"
v-if="protocol === 'wg'"> v-if="protocol === 'wg'">
WireGuard <LocaleText t="Configuration" v-if="!mini"></LocaleText> WireGuard <LocaleText t="Configuration" v-if="!mini"></LocaleText>
</span> </span>
<span class="badge amneziawgBg rounded-3 shadow" <span class="badge amneziawgBg rounded-3 shadow"
:class="{blur: blur === true}"
v-else-if="protocol === 'awg'"> v-else-if="protocol === 'awg'">
AmneziaWG <LocaleText t="Configuration" v-if="!mini"></LocaleText> AmneziaWG <LocaleText t="Configuration" v-if="!mini"></LocaleText>
</span> </span>
@@ -32,12 +22,4 @@ onMounted(() => {
</template> </template>
<style scoped> <style scoped>
.wireguardBg.blur{
box-shadow: rgba(255, 56, 56, 1) 3rem 1rem 8rem 10px !important;
transition: box-shadow 1s cubic-bezier(0.82, -0.07, 0, 1);
}
.amneziawgBg.blur{
box-shadow: rgb(227, 142, 65) 3rem 1rem 8rem 10px !important;
transition: box-shadow 1s cubic-bezier(0.82, -0.07, 0, 1);
}
</style> </style>