WebIndex/src/components/card/CardTitle.vue
2024-10-02 17:35:34 +08:00

27 lines
755 B
Vue

<script lang="ts" setup>
defineProps<{
title: string
mainColor: string
subColor: string
url: string
icon: string[]
}>()
</script>
<template>
<div class="mb-4 flex justify-between text-2xl font-bold text-white">
<div :class="mainColor" class="w-max overflow-hidden rounded-2xl bg-rose-500 flex justify-center items-center">
<div :class="[subColor]" class="rounded-2xl px-4 py-2 w-14 text-center flex justify-center items-center h-full">
<font-awesome-icon :icon="icon"/>
</div>
<span class="px-4">{{ title }}</span>
</div>
<a :class="[mainColor]" :href="url" class="rounded-2xl px-4 py-2">
<font-awesome-icon :icon="['fas', 'chevron-right']"/>
</a>
</div>
</template>
<style scoped>
</style>