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/views/HomeView.vue
+162 -19
View File
@@ -1,4 +1,5 @@
<script setup>
import { ref, computed, inject } from "vue";
import { storeToRefs } from "pinia";
import SacrificeToken from "@/components/SacrificeToken.vue";
import BloodChart from "@/components/BloodChart.vue";
@@ -8,11 +9,36 @@ import TokenClaim from "@/components/TokenClaim.vue";
import { useTokenStore } from "@/stores/tokens";
const tokenStore = useTokenStore();
const { token } = storeToRefs(tokenStore);
import { Navigation } from "swiper";
// Import Swiper Vue.js components
const swiperInstance = ref();
import { Navigation } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/navigation";
const modules = [Navigation];
const isMobile = inject("isMobile");
function onSwiper(swiper) {
swiperInstance.value = swiper;
}
const rounds = [{ round: 1 }, { round: 2 }, { round: 3 }];
const currentSlide = ref(1);
const currentIndex = computed(() => {
return rounds.findIndex((obj) => obj.round === currentSlide.value);
});
function prevSlide() {
if (currentSlide.value !== rounds[0].round) {
currentSlide.value--;
}
}
function nextSlide() {
if (currentSlide.value < rounds[rounds.length - 1].round) {
currentSlide.value++;
}
}
// let web3 = new Web3(
// "https://eth-goerli.g.alchemy.com/v2/0-W9tOm6v_QP1PfRV8RuBCpWr-qoEbkN"
// );
@@ -31,28 +57,51 @@ import "swiper/css/navigation";
<sacrifice-token :data="token"></sacrifice-token>
</section>
<swiper :slides-per-view="1" :navigation="true" :space-between="50">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
</swiper>
<div class="container section-header-container">
<h2>Bloodline Cycle</h2>
<h3>Bloodline Cycle</h3>
Become the most powerful clan each cycle and claim extra rewards.<br />Claim and trade your $BLOOD at
each cycle's end.
</div>
<section id="cycle-section" class="container">
<swiper
:slides-per-view="1"
:navigation="true"
:space-between="50"
@swiper="onSwiper"
:modules="modules"
class="cycle-slider"
>
<swiper-slide>Cycle 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
</swiper>
<div class="slider-wrapper">
<font-awesome-icon
:class="{ 'slider-prev': true, disabled: currentSlide === rounds[0].round }"
@click="prevSlide"
:icon="['fas', 'caret-left']"
/>
<div class="slider-text">Cycle {{ currentSlide }}</div>
<font-awesome-icon
:class="{ 'slider-next': true, disabled: currentSlide === rounds[rounds.length - 1].round }"
@click="nextSlide"
:icon="['fas', 'caret-right']"
/>
</div>
<div class="cycle card bloodline-wrapper">
<token-claim></token-claim>
<div>
<h2>Bloodline Clan</h2>
<div class="bloodline-inner">
<token-claim></token-claim>
</div>
<div class="bloodline-clan">
<h3>Bloodline Clan</h3>
<p>
Win extra rewards for you and your clan. Increase the strength of your bloodline by
sacrificing more memes.
</p>
<table class="bonus-table">
<table class="bonus-table" v-if="!isMobile">
<tbody>
<tr>
<th scope="row">1st</th>
@@ -68,9 +117,34 @@ import "swiper/css/navigation";
</tr>
</tbody>
</table>
<div class="bloodline-container" v-else>
<div class="bloodline-border purple">
Get up to +100% Clan Bonus <br />on your sacrifice.
</div>
</div>
<div class="blood-chart">
<blood-chart></blood-chart>
</div>
<div class="cycle-end-wrapper">
<div class="cycle-end-inner">
<h2>Cycle End</h2>
<div class="cycle-end-text">A cycle ends when only one of these goals is reached.</div>
<div class="bloodline-border">
<table>
<tr>
<td>Sacrifice:</td>
<td class="divider"></td>
<td>200b $BLOOD</td>
</tr>
<tr>
<td>Time left:</td>
<td class="divider"></td>
<td>23h 59m</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
@@ -83,7 +157,8 @@ import "swiper/css/navigation";
<div class="card">
<h2>Tokenomics</h2>
<p>100% clan owned. No team %, no pre-mine</p>
<img src="@/assets/img/tokenomics.png" alt="tokenomics" />
<img v-if="isMobile" src="@/assets/img/tokenomics_footer.png" alt="tokenomics" />
<img v-else src="@/assets/img/tokenomics.png" alt="tokenomics" />
</div>
</section>
</div>
@@ -92,17 +167,26 @@ import "swiper/css/navigation";
<style lang="sass">
.blood-chart
margin-top: 56px
display: flex
justify-content: center
.bloodline-wrapper
padding: 48px 64px
margin-bottom: 80px
.header-text
font-size: 64px
line-height: 80px
font-weight: 600
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25)
font-size: 32px
text-align: center
margin-top: 64px
margin-bottom: 100px
@media (min-width: 992px)
font-size: 64px
margin-top: 0px
line-height: unset
text-shadow: unset
line-height: 80px
font-weight: 600
.chart-wrapper-coin
display: flex
justify-content: space-evenly
@@ -126,6 +210,7 @@ import "swiper/css/navigation";
th
padding-right: 16px
#tokenomics
background-color: var(--darkgrey)
>div
text-align: center
img
@@ -149,4 +234,62 @@ import "swiper/css/navigation";
margin-top: auto
text-align: center
padding-top: 10px
.cycle-slider
text-align: center
.swiper-button-next
right: 30%
.swiper-button-prev
left: 30%
.slider-wrapper
display: flex
justify-content: center
font-size: 24px
user-select: none
.slider-text
margin: 0 24px
margin-top: auto
margin-bottom: auto
.slider-prev, .slider-next
color: #3B0067
font-size: 40px
cursor: pointer
&.disabled
opacity: .35
pointer-events: none
.section-header-container
text-align: center
font-size: 24px
margin-top: 64px
margin-bottom: 64px
@media (min-width: 992px)
width: 655px
.bloodline-wrapper
.bloodline-inner
padding: 4px
@media (min-width: 992px)
padding: 20px
.bloodline-clan
text-align: center
.cycle-end-wrapper
.cycle-end-inner
text-align: center
font-size: 24px
padding: 0 24px 48px 24px
.cycle-end-text
margin-bottom: 32px
table
width: 100%
tr
td
text-align: left
&.divider
width: 10px
h2
font-size: 40px
</style>