62 lines
1.3 KiB
Vue
62 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import AppBox from './app/AppBox.vue';
|
|
import { Icon } from '@iconify/vue';
|
|
defineProps<{
|
|
icon: string;
|
|
text: string;
|
|
color: string;
|
|
changeColor?: boolean;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<AppBox
|
|
style="
|
|
padding: 0;
|
|
border-radius: var(--radius-2);
|
|
width: 320px;
|
|
height: 195px;
|
|
"
|
|
bordered
|
|
class="cursor-pointer"
|
|
@click="$emit('trigger')"
|
|
>
|
|
<div class="column" style="height: 100%">
|
|
<div class="col-9 flex justify-center items-center">
|
|
<Icon
|
|
:icon="icon"
|
|
width="64px"
|
|
:class="`${$q.dark.isActive ? '' : 'app-text-muted'}`"
|
|
:color="changeColor ? color : ''"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="col-3 flex text-bold text-h6 text-center justify-center items-center variable-item-card"
|
|
:class="{ dark: $q.dark.isActive }"
|
|
:style="`background-color: ${color}`"
|
|
>
|
|
<div style="color: white">{{ $t(text) }}</div>
|
|
</div>
|
|
</div>
|
|
</AppBox>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.variable-item-card {
|
|
--_var-filter: grayscale(30%);
|
|
|
|
filter: var(--_var-filter);
|
|
&.dark {
|
|
--_var-filter: grayscale(0%);
|
|
}
|
|
}
|
|
|
|
.variable-icon-color {
|
|
--_var-filter: grayscale(0%);
|
|
|
|
filter: var(--_var-filter);
|
|
&.dark {
|
|
--_var-filter: color;
|
|
}
|
|
}
|
|
</style>
|