yawaflua/LuckyDiamond
1
0
Fork 0
mirror of https://github.com/yawaflua/LuckyDiamond.git synced 2025-12-10 12:19:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

added slider in saper-page, saper-menu

Browse Source
This commit is contained in:
Kostya
2024-01-19 15:23:43 +03:00
parent c20832953f
commit dd48dbf940
4 changed files with 74 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
luckydiamond/package-lock.json generated
View File

@@ -12,6 +12,7 @@
"bootstrap": "^5.3.2",
"core-js": "^3.8.3",
"mitt": "^3.0.1",
"swiper": "^11.0.5",
"vue": "^3.2.13",
"vue-recaptcha": "^3.0.0-alpha.6",
"vue-router": "^4.2.5",
@@ -10759,6 +10760,24 @@
"node": ">= 10"
}
},
"node_modules/swiper": {
"version": "11.0.5",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.0.5.tgz",
"integrity": "sha512-rhCwupqSyRnWrtNzWzemnBLMoyYuoDgGgspAm/8iBD3jCvAWycPLH4Z3TB0O5520DHLzMx94yUMH/B9Efpa48w==",
"funding": [
{
"type": "patreon",
"url": "https://www.patreon.com/swiperjs"
},
{
"type": "open_collective",
"url": "http://opencollective.com/swiper"
}
],
"engines": {
"node": ">= 4.7.0"
}
},
"node_modules/table": {
"version": "6.8.1",
"resolved": "https://registry.npmjs.org/table/-/table-6.8.1.tgz",

1
luckydiamond/package.json
View File

@@ -13,6 +13,7 @@
"bootstrap": "^5.3.2",
"core-js": "^3.8.3",
"mitt": "^3.0.1",
"swiper": "^11.0.5",
"vue": "^3.2.13",
"vue-recaptcha": "^3.0.0-alpha.6",
"vue-router": "^4.2.5",

30
luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
View File

@@ -492,4 +492,32 @@ input[type="number"]::-webkit-outer-spin-button {
}
}
/* /Media */
/* /Media */
/* Swiper */
.swiper {
user-select: none;
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
display: flex;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-pagination {
position: unset !important;
}
/* /Swiper */

32
luckydiamond/src/pages/games-pages/SapergamePage.vue
View File

@@ -44,11 +44,22 @@
<button class="btn-claim">Забрать 15 АР</button>
</div>
<div class="saper-start__steps btns-style__steps">
<ul class="steps-btns__display">
<li v-for="(item, index) in SaperNumbers" :key="index">
<button v-if="item.steps !== undefined">{{ item.steps }}</button>
</li>
</ul>
<swiper :slidesPerView="6" :spaceBetween="-100" :pagination="{ clickable: true }" :modules="modules">
<swiper-slide>1</swiper-slide> <swiper-slide>1</swiper-slide>
<swiper-slide>1</swiper-slide> <swiper-slide>1</swiper-slide>
<swiper-slide>1</swiper-slide> <swiper-slide>1</swiper-slide>
<swiper-slide>1</swiper-slide> <swiper-slide>1</swiper-slide>
<swiper-slide>1</swiper-slide> <swiper-slide>1</swiper-slide>
<swiper-slide>1</swiper-slide> <swiper-slide>1</swiper-slide>
<swiper-slide>1</swiper-slide> <swiper-slide>1</swiper-slide>
<swiper-slide>1</swiper-slide> <swiper-slide>1</swiper-slide>
<swiper-slide>1</swiper-slide> <swiper-slide>1</swiper-slide>
</swiper>
<!-- <ul class="steps-btns__display">-->
<!-- <li v-for="(item, index) in SaperNumbers" :key="index">-->
<!-- <button v-if="item.steps !== undefined">{{ item.steps }}</button>-->
<!-- </li>-->
<!-- </ul>-->
</div>
</div>
</div>
@@ -125,11 +136,17 @@
import ChatComponent from "@/components/ChatComponent.vue";
import AsideBarElement from "@/components/AsidebarComponent.vue";
import HeaderElementPage from "@/components/HeaderComponent.vue";
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination';
import { Pagination } from 'swiper/modules';
import '@/assets/css/PagesStyles/games-pages/saper.css'
import SaperNumbers from "@/mocks/SaperNumbers";
export default {
components: {ChatComponent, HeaderElementPage, AsideBarElement },
components: {ChatComponent, HeaderElementPage, AsideBarElement, Swiper, SwiperSlide },
data() {
return {
SaperNumbers,
@@ -137,7 +154,8 @@ export default {
amountCrystals: 5,
balance: 1000,
amountDeposit: 5,
flippedCards: []
flippedCards: [],
modules: [ Pagination ]
}
},
methods: {