40 lines
877 B
Vue
40 lines
877 B
Vue
|
<script setup>
|
||
|
|
import { computed } from 'vue'
|
||
|
|
import { StyleService } from '@/Stores/style'
|
||
|
|
import { gradientBgPurplePink, gradientBgDark, gradientBgPinkRed, gradientBgGreenBlue } from '@/colors'
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
bg: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
validator: value => ['purplePink', 'pinkRed', 'greenBlue'].includes(value)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const colorClass = computed(() => {
|
||
|
|
if (StyleService().darkMode) {
|
||
|
|
return gradientBgDark
|
||
|
|
}
|
||
|
|
|
||
|
|
switch (props.bg) {
|
||
|
|
case 'purplePink':
|
||
|
|
return gradientBgPurplePink
|
||
|
|
case 'pinkRed':
|
||
|
|
return gradientBgPinkRed
|
||
|
|
case 'greenBlue':
|
||
|
|
return gradientBgGreenBlue
|
||
|
|
}
|
||
|
|
|
||
|
|
return ''
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div
|
||
|
|
class="flex min-h-screen items-center justify-center"
|
||
|
|
:class="colorClass"
|
||
|
|
>
|
||
|
|
<slot card-class="w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12 shadow-2xl" />
|
||
|
|
</div>
|
||
|
|
</template>
|