37 lines
610 B
Vue
37 lines
610 B
Vue
|
<script setup lang="ts">
|
||
|
|
import BoxIcon from '@/components/icons/BoxIcon.vue'
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<n-card title="Card template" class="responsive-card">
|
||
|
|
<template #cover>
|
||
|
|
<div class="cover-wrapper">
|
||
|
|
<BoxIcon />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
Card Content
|
||
|
|
</n-card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.responsive-card {
|
||
|
|
max-width: 200px;
|
||
|
|
min-width: 180px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cover-wrapper {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
width: 100%;
|
||
|
|
padding: 12px 0;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cover-wrapper :deep(svg) {
|
||
|
|
width: 100%;
|
||
|
|
height: auto;
|
||
|
|
max-width: 80%;
|
||
|
|
}
|
||
|
|
</style>
|