155 lines
4.6 KiB
Vue
155 lines
4.6 KiB
Vue
<template>
|
|
<div class="blood-chart-wrapper" v-if="props.data">
|
|
<div class="blood-chart-element" v-for="coin in props.data.token" :key="coin.name">
|
|
<div class="blood-chart-element-header">
|
|
<div class="blood-chart-coin">
|
|
<img :src="getImageUrl(coin.vamplogo)" alt="logo" />
|
|
</div>
|
|
<div class="blood-chart-coin-title">{{ coin.name }}</div>
|
|
</div>
|
|
<div class="blood-chart-element-body">
|
|
<div class="blood-chart-bar-wrapper">
|
|
<div class="blood-chart-bar" :style="`height: ${getPercentage(coin.amount, props.data.goal)}%`">
|
|
<svg
|
|
class="waves"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
viewBox="0 24 150 28"
|
|
preserveAspectRatio="none"
|
|
shape-rendering="auto"
|
|
>
|
|
<defs>
|
|
<path
|
|
id="gentle-wave"
|
|
d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
|
|
/>
|
|
</defs>
|
|
<g class="parallax">
|
|
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(139, 0, 0,0.7)" />
|
|
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(139, 0, 0,0.5)" />
|
|
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(139, 0, 0,0.3)" />
|
|
<use xlink:href="#gentle-wave" x="48" y="7" fill="#8B0000" />
|
|
</g>
|
|
</svg>
|
|
<div class="wrapper">
|
|
<div><span class="dot"></span></div>
|
|
<div><span class="dot"></span></div>
|
|
<div><span class="dot"></span></div>
|
|
<div><span class="dot"></span></div>
|
|
<div><span class="dot"></span></div>
|
|
<div><span class="dot"></span></div>
|
|
</div>
|
|
<div class="blood-chart-bar-percentage">{{ getPercentage(coin.amount, props.data.goal) }}%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="blood-chart-element-footer">
|
|
<div class="blood-chart-amount">
|
|
{{ compactNumber(coin.amount) }}
|
|
</div>
|
|
<div class="blood-chart-coin">$BLOOD</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { getPercentage, compactNumber } from "@/helper/helper.js";
|
|
import { useMemeburnerStore } from "@/stores/memeburner";
|
|
|
|
const memeBurnerStore = useMemeburnerStore();
|
|
|
|
const props = defineProps({
|
|
data: Array,
|
|
});
|
|
|
|
console.log(props.data);
|
|
|
|
function getImageUrl(url) {
|
|
return new URL(url, import.meta.url).href;
|
|
}
|
|
|
|
// const dataPoints = [
|
|
// {
|
|
// name: "$PEPE",
|
|
// percentage: 62.2,
|
|
// icon: "/assets/img/token/pepevamp.png",
|
|
// },
|
|
// {
|
|
// name: "$SHIB",
|
|
// percentage: 31.2,
|
|
// icon: "/assets/img/token/shibvamp.png",
|
|
// },
|
|
// {
|
|
// name: "$ELON",
|
|
// percentage: 54.5,
|
|
// icon: "/assets/img/token/elonvamp.png",
|
|
// },
|
|
// ];
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
.blood-chart-wrapper
|
|
height: 750px
|
|
width: 100%
|
|
justify-content: space-around
|
|
display: inline-flex
|
|
@media (min-width: 992px)
|
|
gap: 96px
|
|
width: unset
|
|
justify-content: unset
|
|
|
|
.blood-chart-element
|
|
height: 100%
|
|
width: 80px
|
|
display: flex
|
|
flex-direction: column
|
|
.blood-chart-element-header
|
|
flex: 0 0 100px
|
|
.blood-chart-coin
|
|
height: 80px
|
|
width: 80px
|
|
border-radius: 80px
|
|
margin-left: auto
|
|
margin-right: auto
|
|
position: relative
|
|
margin-bottom: 16px
|
|
overflow: hidden
|
|
.blood-chart-coin-title
|
|
text-align: center
|
|
margin-bottom: 32px
|
|
font-size: 16px
|
|
@media (min-width: 992px)
|
|
font-size: 24px
|
|
.blood-chart-element-body
|
|
background-color: rgba(233, 233, 233, 0.2)
|
|
flex: 0 0 500px
|
|
border-radius: 8px 8px 40px 40px
|
|
text-align: left
|
|
.blood-chart-bar-wrapper
|
|
height: 100%
|
|
display: flex
|
|
flex-direction: column
|
|
.blood-chart-bar
|
|
margin-top: auto
|
|
background-color: var(--blood-color)
|
|
position: relative
|
|
border-radius: 0 0 40px 40px
|
|
.blood-chart-bar-percentage
|
|
font-size: 14px
|
|
text-align: center
|
|
.waves
|
|
position: absolute
|
|
top: -10px
|
|
width: 100%
|
|
height: 10px
|
|
.blood-chart-element-footer
|
|
margin-top: 32px
|
|
text-align: center
|
|
.blood-chart-amount
|
|
font-size: 24px
|
|
margin-bottom: 8px
|
|
.blood-chart-coin
|
|
font-size: 16px
|
|
</style>
|