merch card template
This commit is contained in:
parent
fc7308ac07
commit
c94becae92
1 changed files with 36 additions and 0 deletions
36
src/views/CollectionView/CollectionMerchCard.vue
Normal file
36
src/views/CollectionView/CollectionMerchCard.vue
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue