update responsive design
This commit is contained in:
Michel Fromme
@@ -2,7 +2,9 @@
|
||||
<div class="blood-chart-wrapper">
|
||||
<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>
|
||||
<div class="blood-chart-coin">
|
||||
<img :src="getImageUrl(coin.icon)" alt="logo" />
|
||||
</div>
|
||||
<div class="blood-chart-coin-title">{{ coin.name }}</div>
|
||||
</div>
|
||||
<div class="blood-chart-element-body">
|
||||
@@ -50,18 +52,25 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
function getImageUrl(url) {
|
||||
return new URL(url, import.meta.url).href;
|
||||
}
|
||||
|
||||
const dataPoints = [
|
||||
{
|
||||
name: "PEPE",
|
||||
name: "$PEPE",
|
||||
percentage: 62.2,
|
||||
icon: "/src/assets/img/token/pepevamp.png",
|
||||
},
|
||||
{
|
||||
name: "Shiba",
|
||||
name: "$SHIB",
|
||||
percentage: 31.2,
|
||||
icon: "/src/assets/img/token/shibvamp.png",
|
||||
},
|
||||
{
|
||||
name: "Doge",
|
||||
name: "$ELON",
|
||||
percentage: 54.5,
|
||||
icon: "/src/assets/img/token/elonvamp.png",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
@@ -69,8 +78,14 @@ const dataPoints = [
|
||||
<style lang="sass">
|
||||
.blood-chart-wrapper
|
||||
height: 750px
|
||||
width: 100%
|
||||
justify-content: space-around
|
||||
display: inline-flex
|
||||
gap: 96px
|
||||
@media (min-width: 992px)
|
||||
gap: 96px
|
||||
width: unset
|
||||
justify-content: unset
|
||||
|
||||
.blood-chart-element
|
||||
height: 100%
|
||||
width: 80px
|
||||
@@ -82,19 +97,22 @@ const dataPoints = [
|
||||
height: 80px
|
||||
width: 80px
|
||||
border-radius: 80px
|
||||
background-color: grey
|
||||
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: 24px
|
||||
font-size: 16px
|
||||
@media (min-width: 992px)
|
||||
font-size: 24px
|
||||
.blood-chart-element-body
|
||||
background-color: rgba(233, 233, 233, 0.2)
|
||||
flex: 1 1 auto
|
||||
border-radius: 8px 8px 40px 40px
|
||||
text-align: left
|
||||
.blood-chart-bar-wrapper
|
||||
height: 100%
|
||||
display: flex
|
||||
@@ -103,14 +121,14 @@ const dataPoints = [
|
||||
margin-top: auto
|
||||
background-color: var(--blood-color)
|
||||
position: relative
|
||||
border-radius: 8px 8px 40px 40px
|
||||
border-radius: 0 0 40px 40px
|
||||
.blood-chart-bar-percentage
|
||||
font-size: 14px
|
||||
text-align: center
|
||||
margin-top: 16px
|
||||
.waves
|
||||
position: absolute
|
||||
top: -8px
|
||||
top: -10px
|
||||
width: 100%
|
||||
height: 10px
|
||||
.blood-chart-element-footer
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
<script setup>
|
||||
import { storeToRefs } from "pinia";
|
||||
import { ref, onMounted, onBeforeUnmount } from "vue";
|
||||
import { ref, onMounted, onBeforeUnmount, inject } from "vue";
|
||||
import { useWalletStore } from "@/stores/wallet";
|
||||
const walletStore = useWalletStore();
|
||||
const { connected, address } = storeToRefs(walletStore);
|
||||
const isMobile = inject("isMobile");
|
||||
|
||||
const showNavbar = ref(true);
|
||||
const lastScrollPosition = ref(0);
|
||||
@@ -37,7 +38,7 @@ onBeforeUnmount(() => {
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="navbar-text">Bloodline</div>
|
||||
<div class="navbar-center">
|
||||
<div class="navbar-center" v-if="!isMobile">
|
||||
<div class="navbar-social-links">
|
||||
<div class="social-bloodline-badge">
|
||||
<div class="social-bloodline-badge-icon">
|
||||
@@ -60,8 +61,13 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
<div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div>
|
||||
<span v-else> {{ address }}</span>
|
||||
<div v-if="!isMobile">
|
||||
<div v-if="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div>
|
||||
<span v-else> {{ address }}</span>
|
||||
</div>
|
||||
<div v-else class="hamburger-menu">
|
||||
<font-awesome-icon :icon="['fas', 'bars']" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -78,7 +84,9 @@ header
|
||||
width: 100%
|
||||
transform: translate3d(0,0,0)
|
||||
transition: transform .3s ease,visibility 0s .3s linear
|
||||
height: 128px
|
||||
height: 82px
|
||||
@media (min-width: 992px)
|
||||
height: 128px
|
||||
&.navbar--hidden
|
||||
transform: translate3d(0,-100%,0)
|
||||
.navbar-inner
|
||||
@@ -89,10 +97,18 @@ header
|
||||
align-items: center
|
||||
@media (min-width: 992px)
|
||||
padding: 16px 24px
|
||||
.navbar-icon
|
||||
img
|
||||
height: 50px
|
||||
width: 50px
|
||||
.navbar-text
|
||||
font-family: 'Vampire', sans-serif
|
||||
font-size: 64px
|
||||
font-size: 36px
|
||||
margin-left: 16px
|
||||
letter-spacing: 0.138em
|
||||
line-height: 73.107px
|
||||
@media (min-width: 992px)
|
||||
font-size: 64px
|
||||
.navbar-center
|
||||
display: flex
|
||||
margin-left: auto
|
||||
@@ -105,10 +121,15 @@ header
|
||||
border-radius: 14px
|
||||
background-color: #0F0F0F
|
||||
display: flex
|
||||
&:hover,&:active,&:focus
|
||||
background-color: lighten(#0F0F0F, 10%)
|
||||
cursor: pointer
|
||||
.social-bloodline-badge-icon
|
||||
margin-right: 8px
|
||||
.navbar-end
|
||||
display: flex
|
||||
flex: 0 0 200px
|
||||
justify-content: flex-end
|
||||
margin-left: auto
|
||||
.hamburger-menu
|
||||
color: var(--purple)
|
||||
font-size: 42px
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="rewards-wrapper">
|
||||
<div class="rewards-header">
|
||||
<div class="rewards-header-title">
|
||||
{{ props.title }}
|
||||
</div>
|
||||
<div class="rewards-header-info">{{ props.info }}</div>
|
||||
</div>
|
||||
<div class="rewards-sacrifice-wrapper bloodline-border bloodline-border--variant1">
|
||||
<div class="rewards-body">
|
||||
<div class="rewards-coin">$BLOOD</div>
|
||||
<div class="rewards-amount">0</div>
|
||||
</div>
|
||||
<img class="bloodline-token" :src="props.image" alt="vampir" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
info: String,
|
||||
image: String,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.rewards-header
|
||||
font-size: 16px
|
||||
padding: 8px
|
||||
display: flex
|
||||
@media (min-width: 992px)
|
||||
font-size: 24px
|
||||
.rewards-header-info
|
||||
margin-left: auto
|
||||
.rewards-sacrifice-wrapper, .rewards-clan-wrapper
|
||||
display: flex
|
||||
.rewards-body
|
||||
align-self: center
|
||||
.rewards-coin
|
||||
font-size: 16px
|
||||
@media (min-width: 992px)
|
||||
font-size: 24px
|
||||
.rewards-amount
|
||||
font-size: 24px
|
||||
margin-top: 8px
|
||||
@media (min-width: 992px)
|
||||
font-size: 40px
|
||||
margin-top: 0
|
||||
img
|
||||
margin-left: auto
|
||||
align-self: center
|
||||
</style>
|
||||
+185
-130
@@ -1,76 +1,87 @@
|
||||
<template>
|
||||
<div class="sacrifice-wrapper card bloodline-wrapper">
|
||||
{{ activeToken.allowance }}
|
||||
<div class="sacrifice-headline">Select Token</div>
|
||||
<div class="sacrifice-select-tokens">
|
||||
<div class="sacrifice-tokens">
|
||||
<div
|
||||
class="sacrifice-token"
|
||||
:class="[{ 'sacrifice-token--active': token.contractAddress === activeToken.contractAddress }]"
|
||||
v-for="token in props.data"
|
||||
:key="token.contractAddress"
|
||||
@click="tokenStore.changeActiveToken(token)"
|
||||
>
|
||||
{{ token.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sacrifice-from-to-wrapper" v-if="activeToken.contractAddress">
|
||||
<div class="sacrifice-from-wrapper bloodline-border">
|
||||
<div class="sarcrifice-from-input">
|
||||
<input @input="processChange" type="number" v-model="tokenNumber" :placeholder="0" /><img
|
||||
src="@/assets/img/vampir.png"
|
||||
alt="vampir"
|
||||
/>
|
||||
</div>
|
||||
<div class="value-adder">
|
||||
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(1000000)">+1m</div>
|
||||
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(10000000)">+10m</div>
|
||||
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(100000000)">+100m</div>
|
||||
<div class="sacrifice-adder-balance">Balance: {{ parseFloat(activeToken.balance) }}</div>
|
||||
<div class="sacrifice-adder-max" @click="tokenNumber = parseFloat(activeToken.balance)">Max</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sacrifice-divider bloodline-devider">
|
||||
<font-awesome-icon :icon="['fas', 'arrow-down']" />
|
||||
</div>
|
||||
<div class="sacrifice-to-wrapper bloodline-border">
|
||||
<div class="sarcrifice-from-input">
|
||||
<div class="sacrifice-to-output">
|
||||
<div class="sacrifice-to-output-coin">{{ activeToken.name }}</div>
|
||||
<div class="sacrifice-to-output-rewards">{{ output }}</div>
|
||||
</div>
|
||||
<img src="@/assets/img/vampir.png" alt="vampir" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="sacrifice-fees-info-wrapper">
|
||||
<div class="sacrifice-fees-img">
|
||||
<img src="@/assets/img/fuel-noozle.png" alt="fuel noozle" />
|
||||
</div>
|
||||
<div class="sacrifice-fees-body">
|
||||
<div class="sacrifice-fees-body-header">
|
||||
<div class="sacrifice-fees-body-header-title">Gas Support</div>
|
||||
<div class="sacrifice-fees-body-header-amount">42Gwei</div>
|
||||
</div>
|
||||
<div class="sacrifice-fees-body-subheader">Increase amount to pay 97% less network fees.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sacrifice-buttons-function-wrapper">
|
||||
<div v-if="connected">
|
||||
|
||||
<div class="sacrifice-inner">
|
||||
<div class="sacrifice-headline">Select Sacrifice</div>
|
||||
<div class="sacrifice-select-tokens">
|
||||
<div class="sacrifice-tokens">
|
||||
<div
|
||||
class="btn btn-immortal"
|
||||
v-if="activeToken.allowance > 0 && activeToken.allowance >= tokenNumber"
|
||||
@click="approvalData = tokenStore.sacrificeToken(1)"
|
||||
class="sacrifice-token"
|
||||
:class="[{ 'sacrifice-token--active': token.contractAddress === activeToken.contractAddress }]"
|
||||
v-for="token in props.data"
|
||||
:key="token.contractAddress"
|
||||
@click="tokenStore.changeActiveToken(token)"
|
||||
>
|
||||
<font-awesome-icon v-if="loading" icon="spinner" spin />
|
||||
Sacrifce {{ activeToken.name }}
|
||||
</div>
|
||||
<div class="btn btn-immortal" v-else @click="approvalData = tokenStore.approveToken(1)">
|
||||
Approve {{ activeToken.name }}
|
||||
<div class="sacrifice-token-logo">
|
||||
<img v-if="isMobile" :src="token.logoMobile" alt="token logo" />
|
||||
<img v-if="!isMobile" :src="token.logo" alt="token logo" />
|
||||
</div>
|
||||
<div class="sacrifice-token-name">{{ token.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</div>
|
||||
</div>
|
||||
<div class="sacrifice-from-to-wrapper" v-if="activeToken.contractAddress">
|
||||
<div class="sacrifice-from-wrapper bloodline-border bloodline-border--variant1">
|
||||
<div class="sarcrifice-from-input">
|
||||
<input @input="processChange" type="number" v-model="tokenNumber" :placeholder="0" />
|
||||
<div class="sacrifice-logo">
|
||||
<img src="@/assets/img/vampir.png" alt="vampir" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="value-adder">
|
||||
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(10000000)">+10m</div>
|
||||
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(100000000)">+100m</div>
|
||||
<div class="sacrifice-adder-step bloodline-badge" @click="addTokens(1000000000)">+1b</div>
|
||||
<!-- <div class="sacrifice-adder-balance">Balance: {{ parseFloat(activeToken.balance) }}</div>
|
||||
<div class="sacrifice-adder-max" @click="tokenNumber = parseFloat(activeToken.balance)">
|
||||
Max
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="sacrifice-divider bloodline-devider">
|
||||
<font-awesome-icon :icon="['fas', 'arrow-down']" />
|
||||
</div>
|
||||
<div class="sacrifice-to-wrapper bloodline-border bloodline-border--variant1">
|
||||
<div class="sarcrifice-from-input">
|
||||
<div class="sacrifice-to-output">
|
||||
<div class="sacrifice-to-output-coin">$BLOOD</div>
|
||||
<div class="sacrifice-to-output-rewards">{{ output }}</div>
|
||||
</div>
|
||||
<div class="sacrifice-logo">
|
||||
<img :src="activeToken.vamp.logo" :alt="activeToken.vamp.name" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sacrifice-fees-info-wrapper">
|
||||
<div class="sacrifice-fees-img">
|
||||
<img src="@/assets/img/fuel-noozle.png" alt="fuel noozle" />
|
||||
</div>
|
||||
<div class="sacrifice-fees-body">
|
||||
<div class="sacrifice-fees-body-header">
|
||||
<div class="sacrifice-fees-body-header-title">Gas Support</div>
|
||||
<div class="sacrifice-fees-body-header-amount">42Gwei</div>
|
||||
</div>
|
||||
<div class="sacrifice-fees-body-subheader">Increase amount to pay 97% less network fees.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sacrifice-buttons-function-wrapper">
|
||||
<div v-if="connected">
|
||||
<div
|
||||
class="btn btn-immortal"
|
||||
v-if="activeToken.allowance > 0 && activeToken.allowance >= tokenNumber"
|
||||
@click="approvalData = tokenStore.sacrificeToken(1)"
|
||||
>
|
||||
<font-awesome-icon v-if="loading" icon="spinner" spin />
|
||||
Sacrifce {{ activeToken.name }}
|
||||
</div>
|
||||
<div class="btn btn-immortal" v-else @click="approvalData = tokenStore.approveToken(1)">
|
||||
Approve {{ activeToken.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="btn btn-immortal" @click="walletStore.connectWallet">Connect</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -78,11 +89,12 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps, watch } from "vue";
|
||||
import { ref, defineProps, watch, inject } from "vue";
|
||||
import { useWalletStore } from "@/stores/wallet";
|
||||
import { useTokenStore } from "@/stores/tokens";
|
||||
import { storeToRefs } from "pinia";
|
||||
import Helper from "@/utils/helper.js";
|
||||
const isMobile = inject("isMobile");
|
||||
|
||||
const walletStore = useWalletStore();
|
||||
const { contract, connected } = storeToRefs(walletStore);
|
||||
@@ -115,6 +127,10 @@ async function test(e) {
|
||||
function addTokens(value) {
|
||||
tokenNumber.value = tokenNumber.value + value;
|
||||
}
|
||||
|
||||
function getImageUrl(url) {
|
||||
return new URL(url, import.meta.url).href;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
@@ -125,72 +141,112 @@ function addTokens(value) {
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
background-color: var(--primary)
|
||||
.sacrifice-headline
|
||||
text-align: center
|
||||
font-size: 36px
|
||||
.sacrifice-select-tokens
|
||||
padding: 24px
|
||||
display: flex
|
||||
margin-bottom: 32px
|
||||
.sacrifice-tokens
|
||||
display: flex
|
||||
width: 100%
|
||||
justify-content: space-evenly
|
||||
.sacrifice-token
|
||||
width: 132px
|
||||
height: 132px
|
||||
border-radius: 16px
|
||||
padding: 12px
|
||||
border: 1px solid lightgrey
|
||||
cursor: pointer
|
||||
background-color: var(--tertiary)
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus
|
||||
background-color: var(--tertiary-dark)
|
||||
&.sacrifice-token--active
|
||||
background-color: var(--tertiary-dark)
|
||||
.sacrifice-buttons-function-wrapper
|
||||
text-align: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
margin-top: 24px
|
||||
.btn
|
||||
padding: 16px 64px
|
||||
.sacrifice-fees-info-wrapper
|
||||
display: flex
|
||||
border: 2px dashed var(--grey)
|
||||
border-radius: 16px
|
||||
padding: 16px 24px
|
||||
margin-top: 24px
|
||||
.sacrifice-fees-img
|
||||
flex: 0 0 15%
|
||||
.sacrifice-fees-body
|
||||
flex: 1 1 auto
|
||||
.sacrifice-fees-body-header
|
||||
font-size: 24px
|
||||
.sacrifice-inner
|
||||
padding: 48px 24px
|
||||
@media (min-width: 992px)
|
||||
padding: 48px 64px
|
||||
.sacrifice-headline
|
||||
text-align: center
|
||||
font-size: 24px
|
||||
margin-bottom: 32px
|
||||
@media (min-width: 992px)
|
||||
font-size: 36px
|
||||
.sacrifice-select-tokens
|
||||
display: flex
|
||||
margin-bottom: 32px
|
||||
.sacrifice-tokens
|
||||
display: flex
|
||||
width: 100%
|
||||
justify-content: space-between
|
||||
@media (min-width: 992px)
|
||||
justify-content: space-evenly
|
||||
|
||||
.sacrifice-token
|
||||
border-radius: 16px
|
||||
padding: 12px
|
||||
cursor: pointer
|
||||
background-color: #0F0F0F
|
||||
text-align: center
|
||||
@media (min-width: 992px)
|
||||
padding: 0
|
||||
background-color: unset
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus
|
||||
background-color: var(--tertiary-dark)
|
||||
&.sacrifice-token--active
|
||||
background-color: var(--tertiary-dark)
|
||||
.sacrifice-token-name
|
||||
padding: 5px 26px
|
||||
font-size: 16px
|
||||
@media (min-width: 992px)
|
||||
font-size: 24px
|
||||
|
||||
.sacrifice-buttons-function-wrapper
|
||||
text-align: center
|
||||
justify-content: center
|
||||
margin-top: 24px
|
||||
display: block
|
||||
@media (min-width: 992px)
|
||||
display: flex
|
||||
flex-direction: row
|
||||
justify-content: space-between
|
||||
.btn
|
||||
padding: 16px 64px
|
||||
.sacrifice-fees-info-wrapper
|
||||
display: flex
|
||||
border: 2px dashed var(--grey)
|
||||
color: var(--grey)
|
||||
border-radius: 16px
|
||||
padding: 16px 24px
|
||||
margin-top: 24px
|
||||
font-size: 16px
|
||||
.sacrifice-fees-img
|
||||
flex: 0 0 15%
|
||||
.sacrifice-fees-body
|
||||
flex: 1 1 auto
|
||||
.sacrifice-fees-body-header
|
||||
display: flex
|
||||
flex-direction: row
|
||||
justify-content: space-between
|
||||
margin-bottom: 8px
|
||||
@media (min-width: 992px)
|
||||
font-size: 24px
|
||||
margin-bottom: 0
|
||||
|
||||
.sacrifice-from-to-wrapper
|
||||
.sacrifice-from-wrapper,.sacrifice-to-wrapper
|
||||
.sarcrifice-from-input
|
||||
display: flex
|
||||
margin-bottom: 8px
|
||||
height: 60px
|
||||
// height: 60px
|
||||
input
|
||||
width: 100%
|
||||
font-size: 32px
|
||||
height: 45px
|
||||
font-size: 24px
|
||||
border-radius: 16px
|
||||
padding: 0 16px
|
||||
@media (min-width: 992px)
|
||||
font-size: 32px
|
||||
height: auto
|
||||
.sacrifice-logo
|
||||
margin-left: 16px
|
||||
img
|
||||
margin-left: 16px
|
||||
width: 45px
|
||||
height: 45px
|
||||
border-radius: 50%
|
||||
@media (min-width: 992px)
|
||||
height: auto
|
||||
width: auto
|
||||
.sacrifice-to-output
|
||||
flex: 1 1 auto
|
||||
text-align: left
|
||||
.sacrifice-to-output-coin
|
||||
font-size: 24px
|
||||
font-size: 16px
|
||||
@media (min-width: 992px)
|
||||
font-size: 24px
|
||||
.sacrifice-to-output-rewards
|
||||
font-size: 42px
|
||||
font-size: 24px
|
||||
@media (min-width: 992px)
|
||||
font-size: 42px
|
||||
.value-adder
|
||||
display: flex
|
||||
gap: 6px
|
||||
@@ -200,17 +256,16 @@ function addTokens(value) {
|
||||
&:active,
|
||||
&:focus
|
||||
background-color: var(--secondary)
|
||||
border: 1px solid var(--secondary-dark)
|
||||
cursor: pointer
|
||||
.sacrifice-adder-balance
|
||||
margin-left: auto
|
||||
.sacrifice-adder-max
|
||||
margin-left: 12px
|
||||
color: red
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active
|
||||
color: darken(red, 10%)
|
||||
transform: scale(1.1)
|
||||
transition: transform 0s
|
||||
// .sacrifice-adder-balance
|
||||
// margin-left: auto
|
||||
// .sacrifice-adder-max
|
||||
// margin-left: 12px
|
||||
// color: red
|
||||
// &:hover,
|
||||
// &:focus,
|
||||
// &:active
|
||||
// color: darken(red, 10%)
|
||||
// transform: scale(1.1)
|
||||
// transition: transform 0s
|
||||
</style>
|
||||
|
||||
@@ -1,57 +1,53 @@
|
||||
<template>
|
||||
<div class="claim bloodline-border">
|
||||
<div class="rewards-wrapper">
|
||||
<div class="rewards-headline">Sacrafice Reward</div>
|
||||
<div class="rewards-sacrifice-wrapper bloodline-border">
|
||||
<div class="rewards-body">
|
||||
<div class="rewards-coin">$BLOOD</div>
|
||||
<div class="rewards-amount">0</div>
|
||||
</div>
|
||||
<img src="@/assets/img/vampir.png" alt="vampir" />
|
||||
</div>
|
||||
<div class="rewards-wrapper" v-if="!isMobile">
|
||||
<rewards-wrapper title="Sacrafice Reward" coin="$BLOOD" amount="0" image="/src/assets/img/vampir.png" />
|
||||
<div class="rewards-divider bloodline-devider">
|
||||
<font-awesome-icon icon="fa-solid fa-plus" />
|
||||
</div>
|
||||
<div class="rewards-headline">Clan Reward</div>
|
||||
<div class="rewards-clan-wrapper bloodline-border">
|
||||
<div class="rewards-body">
|
||||
<div class="rewards-coin">$BLOOD</div>
|
||||
<div class="rewards-amount">0</div>
|
||||
</div>
|
||||
<img src="@/assets/img/vampir.png" alt="vampir" />
|
||||
</div>
|
||||
<rewards-wrapper title="Clan Reward" coin="$BLOOD" amount="0" image="/src/assets/img/vampir.png" />
|
||||
<div class="claim-button">
|
||||
<div class="btn btn-immortal">Claim</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rewards-list" v-else>
|
||||
<rewards-wrapper
|
||||
title="Total Sacrafice Reward"
|
||||
coin="$BLOOD"
|
||||
amount="0"
|
||||
image="/src/assets/img/vampir.png"
|
||||
/>
|
||||
<rewards-wrapper
|
||||
title="Total Stake Reward"
|
||||
coin="$BLOOD"
|
||||
amount="0"
|
||||
info="max: 312m"
|
||||
image="/src/assets/img/vampir.png"
|
||||
/>
|
||||
<rewards-wrapper title="Clan Bonus" coin="$BLOOD" amount="0" image="/src/assets/img/vampir.png" />
|
||||
<rewards-wrapper title="Total Reward" coin="$BLOOD" amount="0" image="/src/assets/img/vampir.png" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
<script setup>
|
||||
import RewardsWrapper from "@/components/RewardsWrapper.vue";
|
||||
import { inject } from "vue";
|
||||
const isMobile = inject("isMobile");
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.claim
|
||||
display: flex
|
||||
padding: 32px 20px
|
||||
flex-direction: column
|
||||
padding: 32px 40px
|
||||
@media (min-width: 992px)
|
||||
padding: 32px 40px
|
||||
.claim-button
|
||||
text-align: center
|
||||
margin-top: 32px
|
||||
.rewards-wrapper
|
||||
width: 100%
|
||||
.rewards-headline
|
||||
font-size: 24px
|
||||
padding: 0 0 4px 8px
|
||||
.rewards-divider
|
||||
text-align: center
|
||||
.rewards-sacrifice-wrapper, .rewards-clan-wrapper
|
||||
display: flex
|
||||
.rewards-body
|
||||
align-self: center
|
||||
.rewards-coin
|
||||
font-size: 24px
|
||||
.rewards-amount
|
||||
font-size: 40px
|
||||
img
|
||||
margin-left: auto
|
||||
.rewards-wrapper
|
||||
margin-bottom: 16px
|
||||
.rewards-divider
|
||||
text-align: center
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user