fixed styles and type slider

This commit is contained in:
Kostya
2024-01-20 22:33:47 +03:00
parent 590aa3aafb
commit 5ced3cff2d
2 changed files with 23 additions and 7 deletions

View File

@@ -400,6 +400,13 @@ input[type="number"]::-webkit-outer-spin-button {
width: 30%; width: 30%;
height: 80%; height: 80%;
} }
.btns-style__steps button {
width: 60px;
height: 50px;
}
.swiper-slide {
margin-right: 29px !important;
}
.steps-btns__display { .steps-btns__display {
justify-content: center; justify-content: center;
} }
@@ -456,6 +463,13 @@ input[type="number"]::-webkit-outer-spin-button {
.steps-btns__display { .steps-btns__display {
justify-content: center; justify-content: center;
} }
.btns-style__steps button {
width: 60px;
height: 50px;
}
.swiper-slide {
margin-right: 30px !important;
}
.margin-lines .firstline { .margin-lines .firstline {
margin-top: 2%; margin-top: 2%;
} }
@@ -506,6 +520,7 @@ input[type="number"]::-webkit-outer-spin-button {
user-select: none; user-select: none;
width: 100%; width: 100%;
height: 100%; height: 100%;
margin-top: 18px;
} }
.swiper-slide { .swiper-slide {
@@ -522,8 +537,9 @@ input[type="number"]::-webkit-outer-spin-button {
object-fit: cover; object-fit: cover;
} }
.swiper-pagination { .swiper-button-prev:after, .swiper-button-next:after {
position: unset !important; font-size: 30px;
color: rgb(210 31 31 / 62%);
} }
/* /Swiper */ /* /Swiper */

View File

@@ -44,7 +44,7 @@
<button class="btn-claim">Забрать 15 АР</button> <button class="btn-claim">Забрать 15 АР</button>
</div> </div>
<div class="saper-start__steps btns-style__steps"> <div class="saper-start__steps btns-style__steps">
<swiper v-if="PercentageGameSteps.length" :key="PercentageGameSteps[0]" :spaceBetween="30" :slides-per-view="4" :centeredSlides="false" :pagination="{ clickable: true }" :modules="modules"> <swiper v-if="PercentageGameSteps.length" :key="PercentageGameSteps[0]" :spaceBetween="30" :slides-per-view="4" :centeredSlides="false" :navigation="true" :modules="modules">
<template v-for="(item, index) in PercentageGameSteps" :key="index"> <template v-for="(item, index) in PercentageGameSteps" :key="index">
<swiper-slide> <swiper-slide>
<div class="steps-btns__display"> <div class="steps-btns__display">
@@ -138,11 +138,11 @@ import { GetPercentageSteps } from "@/assets/js/games/saper/SaperAPI";
import { Swiper, SwiperSlide } from 'swiper/vue'; import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css'; import 'swiper/css';
import 'swiper/css/pagination'; import "swiper/css/navigation";
import SwiperCore from 'swiper/core'; import SwiperCore from 'swiper/core';
import { Pagination } from "swiper/modules"; import {Navigation } from "swiper/modules";
SwiperCore.use([Pagination]); SwiperCore.use([Navigation]);
import '@/assets/css/PagesStyles/games-pages/saper.css' import '@/assets/css/PagesStyles/games-pages/saper.css'
import SaperNumbers from "@/mocks/SaperNumbers"; import SaperNumbers from "@/mocks/SaperNumbers";
@@ -160,7 +160,7 @@ export default {
amountDeposit: 5, amountDeposit: 5,
flippedCards: [], flippedCards: [],
PercentageGameSteps: [], PercentageGameSteps: [],
modules: [ Pagination ] modules: [ Navigation ]
} }
}, },
watch: { watch: {