start implementing frontend design
This commit is contained in:
Michel Fromme
@@ -1,17 +1,50 @@
|
||||
<template>
|
||||
<div class="blood-chart-wrapper">
|
||||
<div class="blood-chart-element" v-for="(coin, index) in dataPoints" :key="coin.name">
|
||||
<div class="blood-chart-element" v-for="coin in dataPoints" :key="coin.name">
|
||||
<div class="blood-chart-element-header">
|
||||
<div class="blood-chart-coin">
|
||||
<div :class="[{ drop: true, ['variant' + index]: true }]"></div>
|
||||
</div>
|
||||
<div class="blood-chart-coin"></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: ${coin.percentage}%`">{{ coin.percentage }}%</div>
|
||||
<div class="blood-chart-bar" :style="`height: ${coin.percentage}%`">
|
||||
<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">{{ coin.percentage }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="blood-chart-element-footer">
|
||||
<div class="blood-chart-amount">130,4b</div>
|
||||
<div class="blood-chart-coin">$BLOOD</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -20,76 +53,72 @@
|
||||
const dataPoints = [
|
||||
{
|
||||
name: "PEPE",
|
||||
percentage: 34.4,
|
||||
percentage: 62.2,
|
||||
},
|
||||
{
|
||||
name: "Shiba",
|
||||
percentage: 50.4,
|
||||
percentage: 31.2,
|
||||
},
|
||||
{
|
||||
name: "Doge",
|
||||
percentage: 42.4,
|
||||
percentage: 54.5,
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.blood-chart-wrapper
|
||||
height: 500px
|
||||
height: 750px
|
||||
display: inline-flex
|
||||
gap: 48px
|
||||
gap: 96px
|
||||
.blood-chart-element
|
||||
height: 100%
|
||||
width: 50px
|
||||
width: 80px
|
||||
display: flex
|
||||
flex-direction: column
|
||||
.blood-chart-element-header
|
||||
flex: 0 0 100px
|
||||
.blood-chart-coin
|
||||
height: 50px
|
||||
width: 50px
|
||||
border-radius: 50px
|
||||
height: 80px
|
||||
width: 80px
|
||||
border-radius: 80px
|
||||
background-color: grey
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
position: relative
|
||||
margin-bottom: 16px
|
||||
.blood-chart-coin-title
|
||||
text-align: center
|
||||
margin-bottom: 32px
|
||||
font-size: 24px
|
||||
.blood-chart-element-body
|
||||
background-color: lightgrey
|
||||
background-color: rgba(233, 233, 233, 0.2)
|
||||
flex: 1 1 auto
|
||||
border-radius: 8px 8px 40px 40px
|
||||
.blood-chart-bar-wrapper
|
||||
height: 100%
|
||||
display: flex
|
||||
flex-direction: column
|
||||
.blood-chart-bar
|
||||
margin-top: auto
|
||||
background-color: red
|
||||
|
||||
.drop
|
||||
width: 1.1em
|
||||
height: 1.1em
|
||||
border-radius: 0 100% 100% 100%
|
||||
background-color: red
|
||||
position: absolute
|
||||
animation: drop 3s infinite both
|
||||
top: 32px
|
||||
&.variant0
|
||||
left: 14%
|
||||
animation-delay: -5.2s
|
||||
&.variant1
|
||||
left: 39%
|
||||
animation-delay: -.4s
|
||||
|
||||
&.variant2
|
||||
left: 55%
|
||||
animation-delay: -1.5s
|
||||
|
||||
@keyframes drop
|
||||
0%
|
||||
transform: translateY(0) scaleX(.85) rotate(45deg)
|
||||
animation-timing-function: ease-out
|
||||
60%
|
||||
transform: translateY(120%) scaleX(.85) rotate(45deg)
|
||||
animation-timing-function: ease-in
|
||||
80%, 100%
|
||||
transform: translateY(440px) scaleX(.85) rotate(45deg)
|
||||
background-color: var(--blood-color)
|
||||
position: relative
|
||||
border-radius: 8px 8px 40px 40px
|
||||
.blood-chart-bar-percentage
|
||||
font-size: 14px
|
||||
text-align: center
|
||||
margin-top: 16px
|
||||
.waves
|
||||
position: absolute
|
||||
top: -8px
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user