update profile profile page
This commit is contained in:
EmberSpirit
@@ -0,0 +1,364 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="profile-header">Profile</div>
|
||||
<div class="profile-subheader">
|
||||
<div class="profile-subheader-logo"><img src="/assets/img/Icon.png" alt="" /></div>
|
||||
<div class="profile-subheader-address">0x12345...812d</div>
|
||||
</div>
|
||||
<div class="total-rewards-wrapper">
|
||||
<div class="total-rewards-headline">Total Rewards</div>
|
||||
<div class="total-rewards-inner">
|
||||
<div class="claim-wrapper">
|
||||
<div class="claim-inner">
|
||||
<div class="claim-header">Claimed</div>
|
||||
<div class="claim-body">TODO</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="claim-hr"></div>
|
||||
<div class="claim-wrapper">
|
||||
<div class="claim-inner">
|
||||
<div class="claim-header">Unclaimed</div>
|
||||
<div class="claim-body">TODO</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="total-rewards-buttons">
|
||||
<div class="btn btn-immortal">Stake</div>
|
||||
<div class="btn btn-immortal">Unstake</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="most-sacrificed-wrapper">
|
||||
<div class="most-sacrificed-inner">
|
||||
<div class="most-sacrificed-left">
|
||||
<div class="most-sacrificed-header">Bloodline Clan</div>
|
||||
<div class="most-sacrificed-subheader">Most sacrificed</div>
|
||||
</div>
|
||||
<div class="most-sacrificed-right">
|
||||
<div class="most-sacrificed-coin-logo">
|
||||
<img src="/assets/img/token/pepevamp.png" alt="" />
|
||||
</div>
|
||||
<div class="most-sacrificed-coin-name">$PEPE</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="total-sacrificed-wrapper">
|
||||
<div class="total-sacrificed-inner">
|
||||
<div class="total-sacrificed-header">Total Sacrifice</div>
|
||||
<div class="total-sacrificed-coins">
|
||||
<div class="total-sacrificed-coin">
|
||||
<div class="total-sacrificed-coin-amount">1,2b</div>
|
||||
<div class="total-sacrificed-coin-logo">
|
||||
<img src="/assets/img/token/pepevamp.png" alt="" />
|
||||
</div>
|
||||
<div class="total-sacrificed-coin-name">$PEPE</div>
|
||||
</div>
|
||||
<div class="total-sacrificed-coin">
|
||||
<div class="total-sacrificed-coin-amount">139m</div>
|
||||
<div class="total-sacrificed-coin-logo">
|
||||
<img src="/assets/img/token/shibvamp.png" alt="" />
|
||||
</div>
|
||||
<div class="total-sacrificed-coin-name">$SHIB</div>
|
||||
</div>
|
||||
<div class="total-sacrificed-coin">
|
||||
<div class="total-sacrificed-coin-amount">0</div>
|
||||
<div class="total-sacrificed-coin-logo">
|
||||
<img src="/assets/img/token/elonvamp.png" alt="" />
|
||||
</div>
|
||||
<div class="total-sacrificed-coin-name">$ELON</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cycle-wrapper">
|
||||
<div class="cycle-inner">
|
||||
<div class="cycle-headline">Cycles</div>
|
||||
<div class="cycle-header">
|
||||
<div class="cycle-header-left">Cycle</div>
|
||||
<div class="cycle-header-right">Reward</div>
|
||||
</div>
|
||||
<div class="cycle-rounds">
|
||||
<div class="cycle-round" v-for="(round, index) in rounds" :key="index">
|
||||
<template v-if="round">
|
||||
<div class="cycle-round-inner">
|
||||
<div class="cycle-round-number">{{ round.round }}</div>
|
||||
<div class="cycle-round-badget" v-if="roundsStore.currentRound === round.round">
|
||||
active
|
||||
</div>
|
||||
<div class="cycle-round-reward">
|
||||
{{ Number(round.rewards_total / BigInt(Math.pow(10, 18))) }} $BDL
|
||||
</div>
|
||||
<div class="cycle-round-more" @click="openRound(index)">
|
||||
<font-awesome-icon
|
||||
v-if="openCycleElement && index === activeRound"
|
||||
icon="chevron-up"
|
||||
/>
|
||||
<font-awesome-icon v-else icon="chevron-down" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="cycle-round-detail" v-if="openCycleElement && index === activeRound">
|
||||
<div class="cycle-round-detail-inner">
|
||||
<div class="sacrifice-reward-wrapper">
|
||||
<div class="sacrifice-reward-inner">
|
||||
<div class="sacrifice-reward-header">
|
||||
<div class="sacrifice-reward-header-name">Sacrifice Reward</div>
|
||||
<div class="sacrifice-reward-header-amount">+2,000 $BDL</div>
|
||||
</div>
|
||||
<table class="sacrifice-coins">
|
||||
<tr class="sacrifice-coin">
|
||||
<td>2b PEPE</td>
|
||||
<td class="arrow"><font-awesome-icon icon="arrow-right" /></td>
|
||||
<td>1,500 $BDL</td>
|
||||
</tr>
|
||||
<tr class="sacrifice-coin">
|
||||
<td>10m SHIB</td>
|
||||
<td class="arrow"><font-awesome-icon icon="arrow-right" /></td>
|
||||
<td class="bloodline">500 $BDL</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sacrifice-reward-wrapper">
|
||||
<div class="sacrifice-reward-inner">
|
||||
<div class="sacrifice-reward-header">
|
||||
<div class="sacrifice-reward-header-name">Staking Bonus</div>
|
||||
<div class="sacrifice-reward-header-amount">+1,000 $BDL</div>
|
||||
</div>
|
||||
<table class="sacrifice-coins">
|
||||
<tr class="sacrifice-coin">
|
||||
<td>Staked</td>
|
||||
<td class="arrow"></td>
|
||||
<td class="bloodline">1,000 $BDL</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sacrifice-reward-wrapper">
|
||||
<div class="sacrifice-reward-inner">
|
||||
<div class="sacrifice-reward-header">
|
||||
<div class="sacrifice-reward-header-name">Competition Bonus</div>
|
||||
<div class="sacrifice-reward-header-amount">+200 $BDL</div>
|
||||
</div>
|
||||
<table class="sacrifice-coins">
|
||||
<div class="sacrifice-coin">
|
||||
<div><img src="/assets/img/winner.png" alt="" /></div>
|
||||
<div><img src="/assets/img/token/pepevamp.png" alt="" /></div>
|
||||
<div>$PEPE</div>
|
||||
<div class="arrow"></div>
|
||||
<div class="bloodline">1,000 $BDL</div>
|
||||
</div>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, computed } from "vue";
|
||||
import { useRoundsStore } from "@/stores/rounds";
|
||||
|
||||
const roundsStore = useRoundsStore();
|
||||
|
||||
const activeRound = ref(null);
|
||||
const openCycleElement = ref(false);
|
||||
function openRound(index) {
|
||||
if (activeRound.value === index && openCycleElement.value) {
|
||||
openCycleElement.value = false;
|
||||
} else {
|
||||
openCycleElement.value = true;
|
||||
}
|
||||
activeRound.value = index;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
console.log("loadRounds");
|
||||
await roundsStore.loadRewardsRounds();
|
||||
console.log("roundsStore.rounds", roundsStore.rounds);
|
||||
});
|
||||
|
||||
const rounds = computed(() => roundsStore.rounds.reverse());
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.profile-header
|
||||
color: #FFF
|
||||
text-align: center
|
||||
font-size: 32px
|
||||
margin-bottom: 12px
|
||||
.profile-subheader
|
||||
display: flex
|
||||
justify-content: center
|
||||
gap: 12px
|
||||
align-items: center
|
||||
// .profile-subheader-logo
|
||||
margin-bottom: 24px
|
||||
.profile-subheader-address
|
||||
font-size: 12px
|
||||
.total-rewards-wrapper
|
||||
border-radius: 16px
|
||||
background: #202020
|
||||
padding: 8px
|
||||
.total-rewards-headline
|
||||
color: #FFF
|
||||
text-align: center
|
||||
font-size: 24px
|
||||
margin-bottom: 24px
|
||||
.total-rewards-inner
|
||||
border-radius: 16px
|
||||
border: 2px solid var(--grey, #858585)
|
||||
background: var(--dark-grey, #202020)
|
||||
padding: 8px 12px
|
||||
.claim-wrapper
|
||||
.claim-inner
|
||||
flex-direction: column
|
||||
margin-bottom: 16px
|
||||
.claim-header
|
||||
color: var(--white, #F9F9FA)
|
||||
font-size: 18px
|
||||
text-align: center
|
||||
margin-bottom: 16px
|
||||
.claim-hr
|
||||
background-color: #858585
|
||||
margin: 16px 0
|
||||
height: 1px
|
||||
.total-rewards-buttons
|
||||
display: flex
|
||||
text-align: center
|
||||
gap: 16px
|
||||
justify-content: space-between
|
||||
div
|
||||
flex: 1 1 auto
|
||||
font-size: 18px
|
||||
|
||||
|
||||
|
||||
.most-sacrificed-wrapper
|
||||
.most-sacrificed-inner
|
||||
padding: 8px
|
||||
border-radius: 16px
|
||||
border: 1px solid var(--grey, #858585)
|
||||
background: var(--dark-grey, #202020)
|
||||
gap: 34px
|
||||
display: flex
|
||||
justify-content: center
|
||||
.most-sacrificed-left
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: center
|
||||
.most-sacrificed-header
|
||||
font-size: 24px
|
||||
.most-sacrificed-subheader
|
||||
font-size: 12px
|
||||
.most-sacrificed-right
|
||||
display: flex
|
||||
flex-direction: column
|
||||
.most-sacrificed-coin-logo
|
||||
img
|
||||
width: 49px
|
||||
height: 49px
|
||||
border-radius: 50%
|
||||
|
||||
|
||||
|
||||
.total-sacrificed-wrapper
|
||||
background-color: var(--dark-grey, #202020)
|
||||
border-radius: 16px
|
||||
border: 1px solid var(--grey, #858585)
|
||||
padding: 8px
|
||||
.total-sacrificed-inner
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
gap: 16px
|
||||
.total-sacrificed-header
|
||||
font-size: 18px
|
||||
.total-sacrificed-coins
|
||||
display: flex
|
||||
gap: 27px
|
||||
.total-sacrificed-coin
|
||||
display: flex
|
||||
flex-direction: column
|
||||
gap: 8px
|
||||
text-align: center
|
||||
.total-sacrificed-coin-logo
|
||||
img
|
||||
height: 49px
|
||||
width: 49px
|
||||
border-radius: 50%
|
||||
|
||||
|
||||
|
||||
.cycle-wrapper
|
||||
margin-top: 24px
|
||||
.cycle-inner
|
||||
.cycle-headline
|
||||
font-size: 24px
|
||||
margin-bottom: 8px
|
||||
text-align: center
|
||||
.cycle-header
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
padding: 8px 16px
|
||||
font-size: 18px
|
||||
.cycle-rounds
|
||||
gap: 8px
|
||||
display: flex
|
||||
flex-direction: column
|
||||
.cycle-round
|
||||
border-radius: 16px
|
||||
border: 3px solid var(--grey, #858585)
|
||||
background: var(--dark-grey, #202020)
|
||||
padding: 12px
|
||||
min-height: 55px
|
||||
.cycle-round-inner
|
||||
display: flex
|
||||
font-size: 18px
|
||||
gap: 8px
|
||||
align-items: center
|
||||
// .cycle-round-number
|
||||
.cycle-round-badget
|
||||
border-radius: 14px
|
||||
border: 1px solid var(--grey, #858585)
|
||||
padding: 8px 16px
|
||||
height: 25px
|
||||
color: var(--grey, #858585)
|
||||
text-align: center
|
||||
font-size: 14px
|
||||
display: flex
|
||||
align-items: center
|
||||
margin-left: auto
|
||||
.cycle-round-reward
|
||||
margin-left: auto
|
||||
.cycle-round-more
|
||||
font-size: 16px
|
||||
.cycle-round-detail
|
||||
.cycle-round-detail-inner
|
||||
.sacrifice-reward-wrapper
|
||||
border-radius: 16px
|
||||
border: 0.5px solid var(--grey, #858585)
|
||||
margin-top: 12px
|
||||
.sacrifice-reward-inner
|
||||
padding: 8px 16px
|
||||
.sacrifice-reward-header
|
||||
display: flex
|
||||
font-size: 18px
|
||||
justify-content: space-between
|
||||
margin-bottom: 16px
|
||||
.sacrifice-coins
|
||||
margin-left: auto
|
||||
border-collapse: separate
|
||||
border-spacing: 0 12px
|
||||
.sacrifice-coin
|
||||
td
|
||||
text-align: right
|
||||
.arrow
|
||||
width: 14px
|
||||
padding: 0 16px
|
||||
</style>
|
||||
Reference in New Issue
Block a user