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

update responsive design

Browse Source
This commit is contained in:
Michel Fromme
2023-06-25 17:00:16 +02:00
parent db41b03456
commit fdf96948a5
31 changed files with 879 additions and 603 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TokenClaim.vue
+32 -36
View File
@@ -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>