forked from geolba/tethys.backend
31 lines
655 B
Vue
31 lines
655 B
Vue
|
<script setup>
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import { gradientBgPurplePink, gradientBgPinkRed, gradientBgGreenBlue } from '@/colors';
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
bg: {
|
||
|
|
type: String,
|
||
|
|
required: true,
|
||
|
|
validator: (value) => ['purplePink', 'pinkRed', 'greenBlue'].includes(value),
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
const colorClass = computed(() => {
|
||
|
|
switch (props.bg) {
|
||
|
|
case 'purplePink':
|
||
|
|
return gradientBgPurplePink;
|
||
|
|
case 'pinkRed':
|
||
|
|
return gradientBgPinkRed;
|
||
|
|
case 'greenBlue':
|
||
|
|
return gradientBgGreenBlue;
|
||
|
|
}
|
||
|
|
|
||
|
|
return '';
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div :class="colorClass" class="mt-6 mb-6 rounded-2xl py-12 px-6 text-center">
|
||
|
|
<slot />
|
||
|
|
</div>
|
||
|
|
</template>
|