17 lines
814 B
Vue
17 lines
814 B
Vue
<script setup>
|
|
defineProps({ label: String, value: String, active: Boolean, bg: String })
|
|
</script>
|
|
<template>
|
|
<div class="relative h-[100px] rounded-card shadow-card overflow-hidden cursor-pointer transition active:scale-[0.98]">
|
|
<img :src="bg" alt="" class="absolute inset-0 w-full h-full object-cover" loading="lazy" />
|
|
<div class="absolute inset-0"
|
|
:class="active
|
|
? 'bg-gradient-to-tr from-brand/85 via-brand/70 to-brand/40'
|
|
: 'bg-gradient-to-tr from-black/55 via-black/35 to-black/10'"></div>
|
|
<div class="relative h-full px-4 flex items-end pb-3 text-white">
|
|
<div class="text-lg font-semibold tracking-wide drop-shadow-sm">{{ label }}</div>
|
|
<div v-if="active" class="ml-auto self-start mt-3 w-2 h-2 rounded-full bg-white"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|