cindylouwho/ImmortalClanVue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new coins + chart swiper

Browse Source
This commit is contained in:
EmberSpirit
2023-09-08 23:56:44 +02:00
parent dfd208e075
commit 44173a36e1
5 changed files with 111 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BloodChart.vue
+65 -2
View File
@@ -1,5 +1,57 @@
<template>
<div class="blood-chart-wrapper" v-if="props.data">
<swiper class="blood-chart-wrapper" :slidesPerView="'auto'" :centeredSlides="false" :spaceBetween="35">
<swiper-slide 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">
<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="blood-chart-bar" :style="`height: ${getPercentage(coin.amount, props.data.goal)}%`">
<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>
</swiper-slide>
</swiper>
<!-- <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">
@@ -50,13 +102,20 @@
<div class="blood-chart-coin">$BLOOD</div>
</div>
</div>
</div>
</div> -->
</template>
<script setup>
import { getPercentage, compactNumber } from "@/helper/helper.js";
import { useMemeburnerStore } from "@/stores/memeburner";
import { Swiper, SwiperSlide } from "swiper/vue";
// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";
// import required modules
const memeBurnerStore = useMemeburnerStore();
const props = defineProps({
@@ -149,4 +208,8 @@ function getImageUrl(url) {
margin-bottom: 8px
.blood-chart-coin
font-size: 16px
.swiper-slide
width: 80px
</style>
src/components/SacrificeToken.vue
+7 -4
View File
@@ -1,5 +1,5 @@
<template>
<div class="sacrifice-wrapper card bloodline-wrapper">
<div class="sacrifice-wrapper bloodline-wrapper">
<!-- {{ activeToken.allowance }} -->
<div class="sacrifice-inner">
<div class="sacrifice-headline">Select Sacrifice</div>
@@ -201,8 +201,9 @@ async function addTokens(value) {
margin-left: auto
margin-right: auto
background-color: var(--primary)
padding: 24px
align-items: center
.sacrifice-inner
padding: 24px
@media (min-width: 992px)
padding: 48px 64px
.sacrifice-headline
@@ -217,7 +218,9 @@ async function addTokens(value) {
.sacrifice-tokens
display: flex
width: 100%
justify-content: space-between
justify-content: center
flex-wrap: wrap
gap: 12px
@media (min-width: 992px)
justify-content: space-evenly
@@ -238,9 +241,9 @@ async function addTokens(value) {
border-color: var(--purple)
.sacrifice-token-name
padding: 5px 26px
font-size: 16px
@media (min-width: 992px)
padding: 5px 26px
font-size: 24px
.sacrifice-buttons-function-wrapper