43 lines
849 B
Vue
43 lines
849 B
Vue
<template>
|
|
<section class="fdCard">
|
|
<div class="label">
|
|
<label class="fill" v-text="label"/>
|
|
<slot v-if="$slots.right" name="right"/>
|
|
</div>
|
|
<div class="content">
|
|
<slot/>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "fdCard",
|
|
props: {
|
|
label: String
|
|
},
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.fdCard {
|
|
backdrop-filter: blur(8px);
|
|
background: #7583900f;
|
|
|
|
.label {
|
|
display: flex;
|
|
color: white;
|
|
background-image: url("../assets/card-label-icon.png"), url("../assets/card-bottom.png");
|
|
background-repeat: no-repeat;
|
|
height: 50px;
|
|
font-weight: 500;
|
|
font-size: 22px;
|
|
padding-left: 54px;
|
|
padding-top: 10px;
|
|
background-position: left top, left bottom;
|
|
background-size: 54px 42px, 100% 31px;
|
|
}
|
|
.content{
|
|
padding: 0 18px;
|
|
}
|
|
}
|
|
</style>
|