You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
69 lines
1.2 KiB
69 lines
1.2 KiB
<template> |
|
<n-card class="h-full" content-style="padding: 0;"> |
|
<div class="cover-container"> |
|
<div class="title select">{{ content.name }}</div> |
|
<div class="overlay"></div> |
|
|
|
<img :src="content.smallCoverUrl" class="cover" alt="cover" /> |
|
</div> |
|
<div class="artists select"> |
|
{{ content.mainArtists }} |
|
</div> |
|
</n-card> |
|
</template> |
|
|
|
<script lang="ts"> |
|
import { Options, Vue } from "vue-class-component"; |
|
|
|
@Options({ |
|
props: { |
|
content: { |
|
required: true, |
|
}, |
|
}, |
|
}) |
|
export default class GridCard extends Vue {} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.cover-container { |
|
position: relative; |
|
display: flex; |
|
width: 100%; |
|
cursor: pointer; |
|
margin-bottom: 5px; |
|
|
|
&:hover .overlay { |
|
opacity: 1; |
|
} |
|
|
|
.title { |
|
position: absolute; |
|
background-color: rgba(0, 0, 0, 0.6); |
|
color: #fff; |
|
width: 100%; |
|
padding: 5px; |
|
z-index: 1; |
|
line-height: 18px; |
|
font-weight: 500; |
|
} |
|
|
|
.overlay { |
|
position: absolute; |
|
opacity: 0; |
|
background-color: rgba(0, 0, 0, 0.3); |
|
width: 100%; |
|
height: 100%; |
|
transition: opacity 200ms; |
|
} |
|
|
|
.cover { |
|
width: 100%; |
|
} |
|
} |
|
|
|
.artists { |
|
padding: 8px 5px; |
|
font-size: 14px; |
|
} |
|
</style>
|
|
|