mirror of
https://github.com/yawaflua/LuckyDiamond.git
synced 2025-12-10 12:19:31 +02:00
Add carousel element
This commit is contained in:
Hepatica
@@ -108,6 +108,7 @@ button {
|
|||||||
"menu jackpot jackpot jackpot jackpot jackpot chat";
|
"menu jackpot jackpot jackpot jackpot jackpot chat";
|
||||||
grid-gap: 0.625rem;
|
grid-gap: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-grid--double {
|
.content-grid--double {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-auto-columns: 1fr;
|
grid-auto-columns: 1fr;
|
||||||
@@ -123,6 +124,7 @@ button {
|
|||||||
"menu double double double double double chat";
|
"menu double double double double double chat";
|
||||||
grid-gap: 0.625rem;
|
grid-gap: 0.625rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-crash {
|
.grid-crash {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
|
grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
|
||||||
@@ -225,6 +227,12 @@ button {
|
|||||||
margin: 0.625rem 2.438rem 1.125rem 1.125rem; */
|
margin: 0.625rem 2.438rem 1.125rem 1.125rem; */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.double {
|
||||||
|
display: flex;
|
||||||
|
grid-area: double;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.about {
|
.about {
|
||||||
grid-area: about;
|
grid-area: about;
|
||||||
|
|
||||||
@@ -293,7 +301,7 @@ button {
|
|||||||
grid-area: help;
|
grid-area: help;
|
||||||
display: flex;
|
display: flex;
|
||||||
/* height:99%; */
|
/* height:99%; */
|
||||||
height:86vh;
|
height: 86vh;
|
||||||
border-radius: 3.125rem;
|
border-radius: 3.125rem;
|
||||||
background: #17181C;
|
background: #17181C;
|
||||||
box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
|
box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
|
||||||
@@ -328,6 +336,7 @@ button {
|
|||||||
height: 35%;
|
height: 35%;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* /Crash */
|
/* /Crash */
|
||||||
|
|
||||||
/* Media */
|
/* Media */
|
||||||
|
|||||||
@@ -0,0 +1,17 @@
|
|||||||
|
<svg width="108" height="108" viewBox="0 0 108 108" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g filter="url(#filter0_d_2522_173)">
|
||||||
|
<rect x="4" width="100" height="100" rx="15" fill="#1F1F1F"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_d_2522_173" x="0" y="0" width="108" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feOffset dy="4"/>
|
||||||
|
<feGaussianBlur stdDeviation="2"/>
|
||||||
|
<feComposite in2="hardAlpha" operator="out"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||||
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2522_173"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2522_173" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 909 B |
@@ -0,0 +1,17 @@
|
|||||||
|
<svg width="108" height="108" viewBox="0 0 108 108" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g filter="url(#filter0_d_3462_2)">
|
||||||
|
<rect x="4" width="100" height="100" rx="15" fill="#3B6D3A"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_d_3462_2" x="0" y="0" width="108" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feOffset dy="4"/>
|
||||||
|
<feGaussianBlur stdDeviation="2"/>
|
||||||
|
<feComposite in2="hardAlpha" operator="out"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||||
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3462_2"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3462_2" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 901 B |
@@ -0,0 +1,17 @@
|
|||||||
|
<svg width="108" height="108" viewBox="0 0 108 108" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g filter="url(#filter0_d_2522_175)">
|
||||||
|
<rect x="4" width="100" height="100" rx="15" fill="#EF4444"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<filter id="filter0_d_2522_175" x="0" y="0" width="108" height="108" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||||
|
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||||
|
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||||
|
<feOffset dy="4"/>
|
||||||
|
<feGaussianBlur stdDeviation="2"/>
|
||||||
|
<feComposite in2="hardAlpha" operator="out"/>
|
||||||
|
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
|
||||||
|
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2522_175"/>
|
||||||
|
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2522_175" result="shape"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 909 B |
@@ -1,29 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- <roll /> -->
|
|
||||||
<div class="d-flex align-items-center justify-content-center">
|
|
||||||
<double />
|
|
||||||
<double-component2></double-component2>
|
|
||||||
<tutorial-page></tutorial-page>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// import Roll from '../components/Roll.vue';
|
|
||||||
import DoubleComponent2 from "@/components/DoubleComponent2.vue";
|
|
||||||
// import TutorialPage from '@/pages/games-pages/TutorialPage.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'DoubleComponent22',
|
|
||||||
components: {
|
|
||||||
// Roll
|
|
||||||
DoubleComponent2,
|
|
||||||
// TutorialPage
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.d-flex {
|
|
||||||
margin-left: 20vh;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,231 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="containerbox">
|
|
||||||
<div class="container main d-flex p-5 my-5">
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<span class="text-white">
|
|
||||||
sua escolha foi: {{ corSelecionada }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<h5 class="text-white">
|
|
||||||
Seu saldo na carteira: <span class="text-primary"> {{ `R$ ${wallet},00 ` }}</span>
|
|
||||||
</h5>
|
|
||||||
<div class="d-flex">
|
|
||||||
<button class="mx-1" :class="corSelecionada === 'vermelho' ? 'btn-red-active' : 'btn-red'"
|
|
||||||
@click="corSelecionada = 'vermelho'">2x</button>
|
|
||||||
<button class="mx-1" :class="corSelecionada === 'branco' ? 'btn-white-active' : 'btn-white '"
|
|
||||||
@click="corSelecionada = 'branco'">14x</button>
|
|
||||||
<button class="btn-black mx-1" :class="corSelecionada === 'preto' ? 'btn-black-active' : 'btn-black '"
|
|
||||||
@click="corSelecionada = 'preto'">2x</button>
|
|
||||||
</div>
|
|
||||||
<div class="my-3">
|
|
||||||
<!-- <label class="text-white" for="aposta">Valor da Aposta:</label> -->
|
|
||||||
<div class="d-flex aling-items-center my-3 p-2 input-container">
|
|
||||||
<input class="input-controler" type="number" id="aposta" v-model.number="valorAposta" :max="wallet"
|
|
||||||
placeholder="Quantia" />
|
|
||||||
<span class="text-white fw-bold">R$</span>
|
|
||||||
</div>
|
|
||||||
<button class="btn btn-primary w-100" @click="iniciarJogo()"
|
|
||||||
:disabled="indiceEtapa !== 0 || !corSelecionada || !valorAposta || valorAposta > wallet">Começar Jogo</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="container">
|
|
||||||
<div class="progress">
|
|
||||||
<div class="progress-bar" role="progressbar" :style="{ width: `${contador * 10}%` }">
|
|
||||||
<span class="timer-count">
|
|
||||||
{{ contador.toFixed(1) }} {{ etapas[indiceEtapa] }} <span v-if="indiceEtapa === 2">{{
|
|
||||||
numeroGerado }}</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<roll :etapa="etapas[indiceEtapa]" :winnerNumber="numeroGerado" @number-roll="atualizarNumero" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- <tutorial-page></tutorial-page> -->
|
|
||||||
<roll-page></roll-page>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import RollPage from '@/pages/games-pages/RollPage.vue';
|
|
||||||
// import TutorialPage from '@/pages/games-pages/TutorialPage.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
RollPage,
|
|
||||||
// TutorialPage
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
contador: 10,
|
|
||||||
etapas: ['Iniciar...', 'Girando...', 'Vencedor:'],
|
|
||||||
indiceEtapa: 0,
|
|
||||||
corSelecionada: null,
|
|
||||||
valorAposta: null,
|
|
||||||
resultado: null,
|
|
||||||
numeroGerado: null,
|
|
||||||
numtest: 6,
|
|
||||||
numeroDaRoleta: '',
|
|
||||||
wallet: 500,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
setInterval(() => {
|
|
||||||
this.contador -= 0.1
|
|
||||||
if (this.contador < 0.1) {
|
|
||||||
this.indiceEtapa = (this.indiceEtapa + 1) % this.etapas.length
|
|
||||||
this.contador = 10
|
|
||||||
if (this.indiceEtapa === 2) {
|
|
||||||
this.gerarNumero()
|
|
||||||
this.avaliarResultado()
|
|
||||||
this.resetGame()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}, 100)
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
atualizarNumero(num) {
|
|
||||||
this.numeroDaRoleta = num.num
|
|
||||||
},
|
|
||||||
iniciarJogo() {
|
|
||||||
if (this.valorAposta > this.wallet) {
|
|
||||||
alert('Valor da aposta é maior do que a carteira')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (!this.corSelecionada || !this.valorAposta) {
|
|
||||||
alert('Selecione uma cor e insira o valor da aposta')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.resultado = null
|
|
||||||
this.indiceEtapa = 1
|
|
||||||
// this.wallet -= this.valorAposta
|
|
||||||
},
|
|
||||||
gerarNumero() {
|
|
||||||
this.numeroGerado = this.numeroDaRoleta;
|
|
||||||
},
|
|
||||||
resetGame() {
|
|
||||||
this.corSelecionada = null,
|
|
||||||
this.numeroDaRoleta = null
|
|
||||||
},
|
|
||||||
avaliarResultado() {
|
|
||||||
if (this.numeroGerado <= 7 && this.corSelecionada === "vermelho" && this.corSelecionada != null && this.valorAposta <= this.wallet) {
|
|
||||||
this.resultado = "Parabéns! Você ganhou!";
|
|
||||||
this.wallet += this.valorAposta * 2;
|
|
||||||
} else if (this.numeroGerado > 7 && this.numeroGerado <= 14 && this.corSelecionada === "preto" && this.corSelecionada != null && this.valorAposta <= this.wallet) {
|
|
||||||
this.resultado = "Parabéns! Você ganhou!";
|
|
||||||
this.wallet += this.valorAposta * 2;
|
|
||||||
} else if (this.numeroGerado === 15 && this.corSelecionada === "branco" && this.corSelecionada != null && this.valorAposta <= this.wallet) {
|
|
||||||
this.resultado = "Parabéns! Você ganhou!";
|
|
||||||
this.wallet += this.valorAposta * 14;
|
|
||||||
} else {
|
|
||||||
if (this.corSelecionada != null && this.valorAposta <= this.wallet) {
|
|
||||||
this.resultado = "Que pena! Tente novamente.";
|
|
||||||
this.wallet -= this.valorAposta;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.indiceEtapa = 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.progress {
|
|
||||||
width: 40vh;
|
|
||||||
}
|
|
||||||
.containerbox {
|
|
||||||
width: 432px;
|
|
||||||
height: 438px;
|
|
||||||
margin-right: 300px;
|
|
||||||
}
|
|
||||||
.input-container {
|
|
||||||
background-color: #000;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-controler {
|
|
||||||
background-color: transparent;
|
|
||||||
outline: none;
|
|
||||||
border: none;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
background-color: #2f2f2f;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
border: 3px solid #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-bar {
|
|
||||||
background-color: #ff0037;
|
|
||||||
transition: width 0.1s ease-in-out;
|
|
||||||
width: 10vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-white {
|
|
||||||
background-color: #fff;
|
|
||||||
width: 100%;
|
|
||||||
border: none;
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-black {
|
|
||||||
background-color: #000;
|
|
||||||
color: white;
|
|
||||||
width: 100%;
|
|
||||||
border: none;
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-red {
|
|
||||||
background-color: #ff0037;
|
|
||||||
color: white;
|
|
||||||
width: 100%;
|
|
||||||
border: none;
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-red-active {
|
|
||||||
background-color: #940826;
|
|
||||||
color: white;
|
|
||||||
width: 100%;
|
|
||||||
border: none;
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 3px solid #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-black-active {
|
|
||||||
background-color: #000000;
|
|
||||||
color: white;
|
|
||||||
width: 100%;
|
|
||||||
border: none;
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 3px solid #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-white-active {
|
|
||||||
background-color: #858283;
|
|
||||||
color: rgb(0, 0, 0);
|
|
||||||
width: 100%;
|
|
||||||
border: none;
|
|
||||||
height: 50px;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 3px solid #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timer-count {
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
|
|
||||||
font-size: 17px;
|
|
||||||
color: #000;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,39 +1,184 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="content-grid--double">
|
<div class="content-grid--double">
|
||||||
<aside-bar-component></aside-bar-component>
|
<aside-bar-component></aside-bar-component>
|
||||||
<chat-component></chat-component>
|
<chat-component></chat-component>
|
||||||
<section class="double">
|
<header-component></header-component>
|
||||||
|
<div class="bg-gradient-left"></div>
|
||||||
|
|
||||||
|
<!-- <double-component></double-component> -->
|
||||||
|
<section class="double">
|
||||||
|
<h1>gdfgf</h1>
|
||||||
|
|
||||||
|
<!-- v-bind="settings" :breakpoints="breakpoints" -->
|
||||||
|
<Carousel
|
||||||
|
ref="carousel"
|
||||||
|
:wrapAround="true"
|
||||||
|
|
||||||
</section>
|
:itemsToShow="10"
|
||||||
<header-component></header-component>
|
|
||||||
<double-component></double-component>
|
>
|
||||||
</div>
|
<!-- <Slide v-for="slide in 10" :key="slide">
|
||||||
</template>
|
<div class="carousel__item">{{ slide }}</div>
|
||||||
|
</Slide> -->
|
||||||
|
|
||||||
|
<Slide v-for="(slide, index) in slides" :key="index">
|
||||||
|
<div >
|
||||||
|
<img
|
||||||
|
:src="slide.img"
|
||||||
|
onerror="this.onerror=null;this.src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Slide>
|
||||||
|
|
||||||
|
<!-- <template #addons>
|
||||||
|
<Navigation />
|
||||||
|
</template> -->
|
||||||
|
</Carousel>
|
||||||
|
|
||||||
|
<!-- <Carousel
|
||||||
|
ref="carousel"
|
||||||
|
:itemsToShow="10"
|
||||||
|
:autoplay="10"
|
||||||
|
:transition="150"
|
||||||
|
:wrapAround="true"
|
||||||
|
class="no-pointer-events"
|
||||||
|
>
|
||||||
|
<Slide v-for="(slide, index) in slides" :key="index">
|
||||||
|
<div class="carousel__item">
|
||||||
|
<img
|
||||||
|
:src="slide.img"
|
||||||
|
onerror="this.onerror=null;this.src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Slide>
|
||||||
|
</Carousel> -->
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import DoubleComponent from "@/components/DoubleComponent.vue";
|
import AsideBarComponent from "@/components/AsidebarComponent.vue";
|
||||||
import AsideBarComponent from "@/components/AsidebarComponent.vue";
|
import HeaderComponent from "@/components/HeaderComponent.vue";
|
||||||
import HeaderComponent from "@/components/HeaderComponent.vue";
|
import ChatComponent from "@/components/ChatComponent.vue";
|
||||||
import ChatComponent from "@/components/ChatComponent.vue";
|
import { Carousel, Slide } from "vue3-carousel";
|
||||||
|
import "vue3-carousel/dist/carousel.css";
|
||||||
|
import "@/assets/css/PagesStyles/games-pages/jackpot.css";
|
||||||
|
import "@/assets/css/global.css";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data: () => ({
|
||||||
return {
|
// carousel settings
|
||||||
Object: {
|
// slides: [],
|
||||||
bg: "value",
|
slides: [
|
||||||
nickname: "value",
|
{
|
||||||
icons: {},
|
img: "@/assets/icons-games/double-game/RectangleRedDouble.svg",
|
||||||
textTacholgy: { text1: "text2" },
|
nickname: "Hepatir",
|
||||||
},
|
},
|
||||||
};
|
{
|
||||||
|
img: "@/assets/icons-games/double-game/RectangleGreenDouble.svg",
|
||||||
|
nickname: "Hepatir",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
img: "@/assets/icons-games/double-game/RectangleBlackDouble.svg",
|
||||||
|
nickname: "Ckutls_",
|
||||||
|
}
|
||||||
|
// ,
|
||||||
|
// {
|
||||||
|
// img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
|
||||||
|
// nickname: "Ckutls_",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
|
||||||
|
// nickname: "Ckutls_",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// img: "https://avatar.spworlds.ru/face/55/Hepatir.png",
|
||||||
|
// nickname: "Hepagfdtir",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
|
||||||
|
// nickname: "Ckutls_",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
|
||||||
|
// nickname: "Ckutls_",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
|
||||||
|
// nickname: "Ckutls_",
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// img: "https://avatar.spworlds.ru/face/55/Hepatir.png",
|
||||||
|
// nickname: "Hepgdfatir",
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
settings: {
|
||||||
|
itemsToShow: 1,
|
||||||
|
snapAlign: "center",
|
||||||
},
|
},
|
||||||
name: "HelpPage",
|
// breakpoints are mobile first
|
||||||
components: {
|
// any settings not specified will fallback to the carousel settings
|
||||||
HeaderComponent,
|
breakpoints: {
|
||||||
AsideBarComponent,
|
// 700px and up
|
||||||
DoubleComponent,
|
700: {
|
||||||
ChatComponent,
|
itemsToShow: 3.5,
|
||||||
|
snapAlign: "center",
|
||||||
|
},
|
||||||
|
// 1024 and up
|
||||||
|
1024: {
|
||||||
|
itemsToShow: 5,
|
||||||
|
snapAlign: "start",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
}),
|
||||||
</script>
|
name: "HelpPage",
|
||||||
|
components: {
|
||||||
|
HeaderComponent,
|
||||||
|
AsideBarComponent,
|
||||||
|
ChatComponent,
|
||||||
|
Carousel,
|
||||||
|
Slide,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.carousel__slide {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel__viewport {
|
||||||
|
perspective: 2000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel__track {
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel__slide--sliding {
|
||||||
|
transition: 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel__slide {
|
||||||
|
opacity: 0.9;
|
||||||
|
transform: rotateY(-20deg) scale(0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel__slide--active ~ .carousel__slide {
|
||||||
|
transform: rotateY(20deg) scale(0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel__slide--prev {
|
||||||
|
opacity: 1;
|
||||||
|
transform: rotateY(-10deg) scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel__slide--next {
|
||||||
|
opacity: 1;
|
||||||
|
transform: rotateY(10deg) scale(0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel__slide--active {
|
||||||
|
opacity: 1;
|
||||||
|
transform: rotateY(0) scale(1.1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user