47 lines
1.1 KiB
Vue
47 lines
1.1 KiB
Vue
<template>
|
|
<div class="rewards-wrapper">
|
|
<div class="rewards-headline low-mid-text">
|
|
{{ props.title }}
|
|
</div>
|
|
<div class="rewards-inner">
|
|
<div class="rewards-body">
|
|
<div class="rewards-coin low-mid-text">$BLOOD</div>
|
|
<div class="rewards-amount">{{ props.amount }}</div>
|
|
</div>
|
|
<img class="bloodline-token" :src="props.image" alt="vampir" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
title: String,
|
|
info: String,
|
|
amount: String,
|
|
image: String,
|
|
});
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
.rewards-wrapper
|
|
display: flex
|
|
flex-direction: column
|
|
gap: 8px
|
|
.rewards-inner, .rewards-clan-wrapper
|
|
display: flex
|
|
padding: 0 8px 8px 8px
|
|
border-bottom: 1px solid var(--grey, #858585)
|
|
.rewards-body
|
|
align-self: center
|
|
.rewards-amount
|
|
text-align: left
|
|
font-size: 24px
|
|
margin-top: 8px
|
|
@media (min-width: 992px)
|
|
font-size: 40px
|
|
margin-top: 0
|
|
img
|
|
margin-left: auto
|
|
align-self: center
|
|
</style>
|