skytek_xinliang
56 lines
1.1 KiB
Vue
56 lines
1.1 KiB
Vue
<template>
|
|
<v-card
|
|
class="rounded-xl elevation-2 d-flex align-center justify-space-between pa-4 my-4"
|
|
color="surface"
|
|
:disabled="disabled"
|
|
:link="Boolean(to || clickable)"
|
|
:loading="loading"
|
|
:to="to"
|
|
@click="emit('click', $event)"
|
|
>
|
|
<div class="d-flex align-center">
|
|
<v-avatar
|
|
class="mr-3 text-white elevation-1"
|
|
:color="iconColor"
|
|
size="48"
|
|
>
|
|
<v-icon :icon="icon" />
|
|
</v-avatar>
|
|
|
|
<div>
|
|
<div class="font-weight-bold text-subtitle-2 text-grey-darken-4">
|
|
{{ title }}
|
|
</div>
|
|
|
|
<div class="text-caption text-grey">{{ description }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<v-icon v-if="to" color="primary" icon="mdi-chevron-right" />
|
|
</v-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
withDefaults(
|
|
defineProps<{
|
|
to?: string;
|
|
clickable?: boolean;
|
|
disabled?: boolean;
|
|
loading?: boolean;
|
|
icon: string;
|
|
iconColor: string;
|
|
title: string;
|
|
description: string;
|
|
}>(),
|
|
{
|
|
clickable: false,
|
|
disabled: false,
|
|
loading: false,
|
|
},
|
|
);
|
|
|
|
const emit = defineEmits<{
|
|
click: [event: MouseEvent];
|
|
}>();
|
|
</script>
|