# ZeenQuizSection
ZeenQuizSection секция включающая в себя слайдер и набор карточек с данными викторины
# Примеры:
Вертикальная карточка
:quizzes='quizzes':isSwiper='isSwiper'Проверь свои знания
Вертикальная карточка
:quizzes='quizzes'Проверь свои знания
Горизонтальная карточка + кастомная настройка слайдра
:quizzes='quizzes':settingsSwiper='settingsSwiper':isVertical='false':isSwiper='false'Проверь свои знания
Научный аспект искусственного интеллекта
Научный аспект искусственного интеллекта
Какой-то сопроводительный текст, описывающий тест, который очень длинный.
Научный аспект #2
Научный аспект #2
Какой-то сопроводительный текст, описывающий тестНаучный аспект #3
Научный аспект #3
Какой-то сопроводительный текст, описывающий тестНаучный аспект #4
Научный аспект #4
Какой-то сопроводительный текст, описывающий тестНаучный аспект #5
Научный аспект #5
Какой-то сопроводительный текст, описывающий тест
# props
| Название | Тип | Обязательный | По умолчанию | Описание |
|---|---|---|---|---|
| quiz | Array | + | - | Принимает в себя массив с данными викторины |
| isVertical | Boolean | true | Отвечает за вид карточек(вертикальный/горизонтальный) | |
| isSwiper | Boolean | true | Включает/выключает слайдер |
# Quiz - код объекта
Код объекта
export default [
{
id: 1,
picture: {
url: 'https://cdn.igromania.ru/mnt/articles/9/0/a/8/5/2/31166/preview/6bc66b47933f35f1_848x477.jpg',
},
title: 'Научный аспект искусственного интеллекта',
description: 'Какой-то сопроводительный текст, описывающий тест, который очень длинный.',
testComplete: true,
currentAnswer: [1, 1],
tags: [],
progress: {
title: 'Прогресс',
points: 15,
maxPoints: 100,
},
questions: [
{
title: 'Научный аспект #1',
picture: {
url: require('/src/images/examples/back-example.png'),
alt: 'image',
},
main: {
text: 'Пройдя этот тест, вы можете узнать ваш уровень эрудированности в теме истории машинного обучения и узнать свои сильные стороны.',
},
},
{
picture: {
url: require('/src/images/examples/back-example.png'),
alt: 'image',
},
main: {
question:
'В феврале 2017 года был подписан список из 23 правил, которых стоит придерживаться при разработке ИИ. Среди подписавших документ были Илон Маск, Стивен Хокинг и другие IT-эксперты. На какие три группы разделены пункты?',
answers: [
{
answer: 'Выделенный в фокус вариант ответа',
value: 1,
},
{
answer:
'Научно-исследовательские, нравственные и долгосрочные вопросы нравственные и долгосрочные вопросы',
value: 2,
},
{
answer: 'Пройдя этот тест, вы можете узнать ваш уровень эрудированности',
value: 3,
},
],
help: 'Реальные, философские и научно-фантастические',
},
},
{
picture: {
url: require('/src/images/examples/back-example.png'),
alt: 'image',
},
main: {
question:
'Пройдя этот тест, вы можете узнать ваш уровень эрудированности в теме истории машинного обучения и узнать свои сильные стороны.',
answers: [
{
answer: 'Выделенный в фокус вариант ответа',
value: 1,
},
{
answer:
'Научно-исследовательские, нравственные и долгосрочные вопросынравственные и долгосрочные вопросы',
value: 2,
},
{
answer: 'Пройдя этот тест, вы можете узнать ваш уровень эрудированности',
value: 3,
},
],
help: 'Вопросы прошлого, настоящего и будущего',
},
},
{
title: 'Вы отлично разбираетесь в теме!',
picture: {
url: require('/src/images/examples/back-example.png'),
alt: 'image',
},
main: {
text: 'Диаграммы связей, которые представляют собой яркий пример континентально европейского типа.',
},
},
],
},
{
id: 2,
picture: {
url: 'https://storage.yandexcloud.net/zeen-stg-static/zeen_core/uploads/user/picture/759ea65c-85be-4c9f-b8f6-5a2eb65c0d64/5543f5a8e95661b18a0f0a9fab75e2e3.jpg',
},
title: 'Научный аспект #2',
description: 'Какой-то сопроводительный текст, описывающий тест',
testComplete: false,
currentAnswer: [2, 1],
questions: [
{
title: 'Научный аспект #2',
picture: {
url: require('/src/images/examples/back-example.png'),
alt: 'image',
},
main: {
text: 'Пройдя этот тест, вы можете узнать ваш уровень эрудированности в теме истории машинного обучения и узнать свои сильные стороны.',
},
},
{
picture: {
url: require('/src/images/examples/back-example.png'),
alt: 'image',
},
main: {
question:
'В феврале 2017 года был подписан список из 23 правил, которых стоит придерживаться при разработке ИИ. Среди подписавших документ были Илон Маск, Стивен Хокинг и другие IT-эксперты. На какие три группы разделены пункты?',
answers: [
{
answer: 'Выделенный в фокус вариант ответа',
value: 1,
},
{
answer:
'Научно-исследовательские, нравственные и долгосрочные вопросы нравственные и долгосрочные вопросы',
value: 2,
},
{
answer: 'Пройдя этот тест, вы можете узнать ваш уровень эрудированности',
value: 3,
},
],
help: 'Реальные, философские и научно-фантастические',
},
},
{
picture: {
url: require('/src/images/examples/back-example.png'),
alt: 'image',
},
main: {
question:
'Пройдя этот тест, вы можете узнать ваш уровень эрудированности в теме истории машинного обучения и узнать свои сильные стороны.',
answers: [
{
answer: 'Выделенный в фокус вариант ответа',
value: 1,
},
{
answer:
'Научно-исследовательские, нравственные и долгосрочные вопросынравственные и долгосрочные вопросы',
value: 2,
},
{
answer: 'Пройдя этот тест, вы можете узнать ваш уровень эрудированности',
value: 3,
},
],
help: 'Вопросы прошлого, настоящего и будущего',
},
},
{
title: 'Вы отлично разбираетесь в теме!',
picture: {
url: require('/src/images/examples/back-example.png'),
alt: 'image',
},
main: {
text: 'Диаграммы связей, которые представляют собой яркий пример континентально европейского типа.',
},
},
],
},
{
id: 3,
picture: {
url: 'https://cdn.igromania.ru/mnt/articles/9/0/a/8/5/2/31166/preview/6bc66b47933f35f1_848x477.jpg',
},
title: 'Научный аспект #3',
description: 'Какой-то сопроводительный текст, описывающий тест',
testComplete: false,
currentAnswer: [2, 1],
questions: [
{
title: 'Научный аспект #3',
picture: {
url: require('/src/images/examples/back-example.png'),
alt: 'image',
},
main: {
text: 'Пройдя этот тест, вы можете узнать ваш уровень эрудированности в теме истории машинного обучения и узнать свои сильные стороны.',
},
},
{
picture: {
url: require('/src/images/examples/back-example.png'),
alt: 'image',
},
main: {
question:
'В феврале 2017 года был подписан список из 23 правил, которых стоит придерживаться при разработке ИИ. Среди подписавших документ были Илон Маск, Стивен Хокинг и другие IT-эксперты. На какие три группы разделены пункты?',
answers: [
{
answer: 'Выделенный в фокус вариант ответа',
value: 1,
},
{
answer:
'Научно-исследовательские, нравственные и долгосрочные вопросы нравственные и долгосрочные вопросы',
value: 2,
},
{
answer: 'Пройдя этот тест, вы можете узнать ваш уровень эрудированности',
value: 3,
},
],
help: 'Реальные, философские и научно-фантастические',
},
},
{
picture: {
url: require('/src/images/examples/back-example.png'),
alt: 'image',
},
main: {
question:
'Пройдя этот тест, вы можете узнать ваш уровень эрудированности в теме истории машинного обучения и узнать свои сильные стороны.',
answers: [
{
answer: 'Выделенный в фокус вариант ответа',
value: 1,
},
{
answer:
'Научно-исследовательские, нравственные и долгосрочные вопросынравственные и долгосрочные вопросы',
value: 2,
},
{
answer: 'Пройдя этот тест, вы можете узнать ваш уровень эрудированности',
value: 3,
},
],
help: 'Вопросы прошлого, настоящего и будущего',
},
},
{
title: 'Вы отлично разбираетесь в теме!',
picture: {
url: require('/src/images/examples/back-example.png'),
alt: 'image',
},
main: {
text: 'Диаграммы связей, которые представляют собой яркий пример континентально европейского типа.',
},
},
],
},
{
id: 4,
picture: {
url: 'https://zeen-core.stg.tooladigital.ru/assets/default/quiz-8aefa3d54626eaae4e54f8f715d9c7785e3c698091ed569e3aad2f299d2da42f.png',
},
title: 'Научный аспект #4',
description: 'Какой-то сопроводительный текст, описывающий тест',
testComplete: false,
currentAnswer: [2, 1],
questions: [
{
title: 'Научный аспект #4',
picture: {
url: require('/src/images/examples/back-example.png'),
alt: 'image',
},
main: {
text: 'Пройдя этот тест, вы можете узнать ваш уровень эрудированности в теме истории машинного обучения и узнать свои сильные стороны.',
},
},
{
picture: {
url: require('/src/images/examples/back-example.png'),
alt: 'image',
},
main: {
question:
'В феврале 2017 года был подписан список из 23 правил, которых стоит придерживаться при разработке ИИ. Среди подписавших документ были Илон Маск, Стивен Хокинг и другие IT-эксперты. На какие три группы разделены пункты?',
answers: [
{
answer: 'Выделенный в фокус вариант ответа',
value: 1,
},
{
answer:
'Научно-исследовательские, нравственные и долгосрочные вопросы нравственные и долгосрочные вопросы',
value: 2,
},
{
answer: 'Пройдя этот тест, вы можете узнать ваш уровень эрудированности',
value: 3,
},
],
help: 'Реальные, философские и научно-фантастические',
},
},
{
picture: {
url: require('/src/images/examples/back-example.png'),
alt: 'image',
},
main: {
question:
'Пройдя этот тест, вы можете узнать ваш уровень эрудированности в теме истории машинного обучения и узнать свои сильные стороны.',
answers: [
{
answer: 'Выделенный в фокус вариант ответа',
value: 1,
},
{
answer:
'Научно-исследовательские, нравственные и долгосрочные вопросынравственные и долгосрочные вопросы',
value: 2,
},
{
answer: 'Пройдя этот тест, вы можете узнать ваш уровень эрудированности',
value: 3,
},
],
help: 'Вопросы прошлого, настоящего и будущего',
},
},
{
title: 'Вы отлично разбираетесь в теме!',
picture: {
url: require('/src/images/examples/back-example.png'),
alt: 'image',
},
main: {
text: 'Диаграммы связей, которые представляют собой яркий пример континентально европейского типа.',
},
},
],
},
{
id: 5,
picture: {
url: 'https://zeen-core.stg.tooladigital.ru/assets/default/quiz-8aefa3d54626eaae4e54f8f715d9c7785e3c698091ed569e3aad2f299d2da42f.png',
},
title: 'Научный аспект #5',
description: 'Какой-то сопроводительный текст, описывающий тест',
testComplete: false,
currentAnswer: [3, 1],
questions: [
{
title: 'Научный аспект #5',
picture: {
url: require('/src/images/examples/back-example.png'),
alt: 'image',
},
main: {
text: 'Пройдя этот тест, вы можете узнать ваш уровень эрудированности в теме истории машинного обучения и узнать свои сильные стороны.',
},
},
{
picture: {
url: require('/src/images/examples/back-example.png'),
alt: 'image',
},
main: {
question:
'В феврале 2017 года был подписан список из 23 правил, которых стоит придерживаться при разработке ИИ. Среди подписавших документ были Илон Маск, Стивен Хокинг и другие IT-эксперты. На какие три группы разделены пункты?',
answers: [
{
answer: 'Выделенный в фокус вариант ответа',
value: 1,
},
{
answer:
'Научно-исследовательские, нравственные и долгосрочные вопросы нравственные и долгосрочные вопросы',
value: 2,
},
{
answer: 'Пройдя этот тест, вы можете узнать ваш уровень эрудированности',
value: 3,
},
],
help: 'Реальные, философские и научно-фантастические',
},
},
{
picture: {
url: require('/src/images/examples/back-example.png'),
alt: 'image',
},
main: {
question:
'Пройдя этот тест, вы можете узнать ваш уровень эрудированности в теме истории машинного обучения и узнать свои сильные стороны.',
answers: [
{
answer: 'Выделенный в фокус вариант ответа',
value: 1,
},
{
answer:
'Научно-исследовательские, нравственные и долгосрочные вопросынравственные и долгосрочные вопросы',
value: 2,
},
{
answer: 'Пройдя этот тест, вы можете узнать ваш уровень эрудированности',
value: 3,
},
],
help: 'Вопросы прошлого, настоящего и будущего',
},
},
{
title: 'Вы отлично разбираетесь в теме!',
picture: {
url: require('/src/images/examples/back-example.png'),
alt: 'image',
},
main: {
text: 'Диаграммы связей, которые представляют собой яркий пример континентально европейского типа.',
},
},
],
},
]
# Source Code - исходный код компонента
<template lang="pug">
.quiz-section(ref='main')
ZeenContainer
.container.container_swiper(v-if='isSwiper')
.quiz-section__actions.js-program-actions.js-program-actions_none
ZeenHeadline(v-bind='mainHeadlineAttrs') {{ title }}
slot(name='top-button')
.quiz-section__btns.js-program-btns
button.js-program-btn.js-program-next.swiper-button-disabled.js-program-btn_desktop(ref='btnPrev')
slot(name='btn-prev')
svg(width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg')
path(
fill-rule='evenodd'
clip-rule='evenodd'
d='M7.35667 1.10026C6.94389 0.73334 6.31182 0.77052 5.9449 1.1833L2.25259 5.33715C1.9158 5.71603 1.9158 6.28699 2.25259 6.66588L5.9449 10.8197C6.31182 11.2325 6.94389 11.2697 7.35667 10.9028C7.76945 10.5359 7.80664 9.90378 7.43972 9.491L4.33795 6.00151L7.43972 2.51203C7.80664 2.09925 7.76945 1.46718 7.35667 1.10026Z')
button.js-program-btn.js-program-prev.js-program-btn_desktop(ref='btnNext')
slot(name='btn-next')
svg(width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg')
path(
fill-rule='evenodd'
clip-rule='evenodd'
d='M7.35667 1.10026C6.94389 0.73334 6.31182 0.77052 5.9449 1.1833L2.25259 5.33715C1.9158 5.71603 1.9158 6.28699 2.25259 6.66588L5.9449 10.8197C6.31182 11.2325 6.94389 11.2697 7.35667 10.9028C7.76945 10.5359 7.80664 9.90378 7.43972 9.491L4.33795 6.00151L7.43972 2.51203C7.80664 2.09925 7.76945 1.46718 7.35667 1.10026Z')
.quiz-section__swiper.swiper-container(ref='slider')
.swiper-wrapper
.swiper-slide(v-for='quiz in quizzes' :key='quiz.id')
ZeenTestCard(
v-if='isVertical'
:quiz='quiz'
:testComplete='quiz.testComplete'
:progress='quiz.progress'
:tags='quiz.tags'
:quizType='quiz.type'
@test-click='openModal'
v-bind='quizProps')
template(v-for='(slot, slotName) in quizSlots' v-slot:[slotName]='params')
slot(:name='`${quizPrefix}${slotName}`' v-bind='params')
ZeenTestCardVert(
v-else
:quiz='quiz'
:tags='quiz.tags'
:testComplete='quiz.testComplete'
:progress='quiz.progress'
:quizType='quiz.type'
@test-click='openModal'
v-bind='quizProps')
template(v-for='(slot, slotName) in quizSlots' v-slot:[slotName]='params')
slot(:name='`${quizPrefix}${slotName}`' v-bind='params')
.quiz-section__actions.js-program-actions.js-program-actions_none.js-program-actions_phones(v-if='!isPagination')
button.js-program-btn.js-program-next.swiper-button-disabled(ref='btnPrevPhone')
slot(name='btn-prev-phone')
svg(width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg')
path(
fill-rule='evenodd'
clip-rule='evenodd'
d='M7.35667 1.10026C6.94389 0.73334 6.31182 0.77052 5.9449 1.1833L2.25259 5.33715C1.9158 5.71603 1.9158 6.28699 2.25259 6.66588L5.9449 10.8197C6.31182 11.2325 6.94389 11.2697 7.35667 10.9028C7.76945 10.5359 7.80664 9.90378 7.43972 9.491L4.33795 6.00151L7.43972 2.51203C7.80664 2.09925 7.76945 1.46718 7.35667 1.10026Z')
button.js-program-btn.js-program-prev(ref='btnNextPhone')
slot(name='btn-next-phone')
svg(width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg')
path(
fill-rule='evenodd'
clip-rule='evenodd'
d='M7.35667 1.10026C6.94389 0.73334 6.31182 0.77052 5.9449 1.1833L2.25259 5.33715C1.9158 5.71603 1.9158 6.28699 2.25259 6.66588L5.9449 10.8197C6.31182 11.2325 6.94389 11.2697 7.35667 10.9028C7.76945 10.5359 7.80664 9.90378 7.43972 9.491L4.33795 6.00151L7.43972 2.51203C7.80664 2.09925 7.76945 1.46718 7.35667 1.10026Z')
.swiper-pagination(ref='pagination' v-if='isPagination')
.container.container_block(v-else)
ZeenHeadline(v-bind='mainHeadlineAttrs') {{ title }}
.quiz-section__list
.quiz-section__item(v-for='quiz in quizzes' :key='quiz.id')
ZeenTestCard(
v-if='isVertical'
:quiz='quiz'
:progress='quiz.progress'
:tags='quiz.tags'
:quizType='quiz.type'
:testComplete='quiz.testComplete'
@test-click='openModal'
v-bind='quizProps')
template(v-for='(slot, slotName) in quizSlots' v-slot:[slotName]='params')
slot(:name='`${quizPrefix}${slotName}`' v-bind='params')
ZeenTestCardVert(
v-else
:quiz='quiz'
:progress='quiz.progress'
:tags='quiz.tags'
:quizType='quiz.type'
:testComplete='quiz.testComplete'
@test-click='openModal'
v-bind='quizProps')
template(v-for='(slot, slotName) in quizSlots' v-slot:[slotName]='params')
slot(:name='`${quizPrefix}${slotName}`' v-bind='params')
</template>
<script>
import Vue from 'vue'
import Swiper from 'swiper/bundle'
import ZeenHeadline from '../../components/ZeenHeadline/ZeenHeadline'
import ZeenTestCard from '../../components/ZeenTestCard/ZeenTestCard'
import 'swiper/swiper-bundle.css'
import ZeenContainer from '../../components/ZeenContainer/ZeenContainer'
import {createSlotsFor} from '../../helpers/createBlockData'
import ZeenActionIcon from '../../components/ZeenActionIcon/ZeenActionIcon'
export default {
name: 'ZeenQuizSection',
components: {ZeenContainer, ZeenTestCard, ZeenHeadline, ZeenActionIcon},
inheritAttrs: false,
props: {
isSwiper: {
type: Boolean,
default: true,
},
isVertical: {
type: Boolean,
default: true,
},
quizProps: Object,
title: {
type: String,
default: 'Проверь свои знания',
},
mainHeadlineAttrs: {
type: Object,
default: () => ({type: 'dark-48'}),
},
quizzes: {
type: Array,
},
settingsSwiper: {
type: Object,
default: () => ({
breakpoints: {
1200: {
slidesPerView: 4,
spaceBetween: 24,
},
992: {
slidesPerView: 3,
spaceBetween: 20,
},
768: {
slidesPerView: 2.7,
spaceBetween: 20,
},
560: {
slidesPerView: 2.7,
spaceBetween: 20,
},
320: {
slidesPerView: 1.1,
spaceBetween: 16,
},
},
}),
},
isPagination: {
type: Boolean,
default: false,
},
},
mounted() {
this.slider = new Swiper(this.$refs.slider, {
pagination: {
el: this.$refs.pagination,
type: 'bullets',
},
navigation: {
prevEl: this.$refs.btnPrev,
nextEl: this.$refs.btnNext,
},
breakpoints: {
1200: {
slidesPerView: this.setSettings1200.slidesPerView,
spaceBetween: this.setSettings1200.spaceBetween,
},
992: {
slidesPerView: this.setSettings992.slidesPerView,
spaceBetween: this.setSettings992.spaceBetween,
},
768: {
slidesPerView: this.setSettings768.slidesPerView,
spaceBetween: this.setSettings768.spaceBetween,
},
560: {
slidesPerView: this.setSettings560.slidesPerView,
spaceBetween: this.setSettings560.spaceBetween,
},
320: {
slidesPerView: this.setSettings320.slidesPerView,
spaceBetween: this.setSettings320.spaceBetween,
navigation: {
prevEl: this.$refs.btnPrevPhone,
nextEl: this.$refs.btnNextPhone,
},
},
},
})
if (this.isSwiper) {
this.updateSlider()
setTimeout(() => {
this.updateSlider()
}, 1000)
}
},
methods: {
updateSlider() {
Vue.nextTick(() => {
setTimeout(() => {
this.slider.update()
}, 1000)
})
},
setCustomProperty(variable, property) {
this.$refs.main.style.setProperty(variable, property)
},
openModal(quiz) {
this.$emit('openQuiz', quiz)
// this.$vfm.show(name)
},
},
computed: {
quizPrefix() {
return 'quiz_'
},
quizSlots() {
return createSlotsFor(this, this.quizPrefix)
},
setSettings1200() {
let data = {}
const breakpoint = this.settingsSwiper.breakpoints?.[1200]
if (breakpoint) {
if (breakpoint.slidesPerView) {
data.slidesPerView = breakpoint.slidesPerView
} else {
data.slidesPerView = 4
}
if (breakpoint.spaceBetween) {
data.spaceBetween = breakpoint.spaceBetween
} else {
data.spaceBetween = 204
}
} else {
data.slidesPerView = 4
data.spaceBetween = 24
}
return data
},
setSettings992() {
let data = {}
const breakpoint = this.settingsSwiper.breakpoints[992]
if (breakpoint) {
if (breakpoint.slidesPerView) {
data.slidesPerView = breakpoint.slidesPerView
} else {
data.slidesPerView = 3
}
if (breakpoint.spaceBetween) {
data.spaceBetween = breakpoint.spaceBetween
} else {
data.spaceBetween = 20
}
} else {
data.slidesPerView = 3
data.spaceBetween = 20
}
return data
},
setSettings768() {
let data = {}
const breakpoint = this.settingsSwiper.breakpoints[768]
if (breakpoint) {
if (breakpoint.slidesPerView) {
data.slidesPerView = breakpoint.slidesPerView
} else {
data.slidesPerView = 2.7
}
if (breakpoint.spaceBetween) {
data.spaceBetween = breakpoint.spaceBetween
} else {
data.spaceBetween = 20
}
} else {
data.slidesPerView = 2.7
data.spaceBetween = 20
}
return data
},
setSettings560() {
let data = {}
const breakpoint = this.settingsSwiper.breakpoints[560]
if (breakpoint) {
if (breakpoint.slidesPerView) {
data.slidesPerView = breakpoint.slidesPerView
} else {
data.slidesPerView = 2.7
}
if (breakpoint.spaceBetween) {
data.spaceBetween = breakpoint.spaceBetween
} else {
data.spaceBetween = 20
}
} else {
data.slidesPerView = 2.7
data.spaceBetween = 20
}
return data
},
setSettings320() {
let data = {}
const breakpoint = this.settingsSwiper.breakpoints[320]
if (breakpoint) {
if (breakpoint.slidesPerView) {
data.slidesPerView = breakpoint.slidesPerView
} else {
data.slidesPerView = 1.1
}
if (breakpoint.spaceBetween) {
data.spaceBetween = breakpoint.spaceBetween
} else {
data.spaceBetween = 16
}
} else {
data.slidesPerView = 1.1
data.spaceBetween = 16
}
return data
},
},
watch: {
quiz() {
this.updateSlider()
},
},
}
</script>
<style lang="scss" scoped>
@import '/src/styles/mixins.scss';
:root {
/* Size */
--quiz-card-title-margin-top: 30px;
--quiz-card-title-margin-bottom: 20px;
--quiz-card-title-font-size: var(--main-large-size);
--quiz-card-title-font-weight: 600;
--quiz-card-title-line-height: 1.3;
--quiz-card-description-font-size: var(--main-small-text);
--quiz-card-description-font-weight: 400;
--quiz-card-description-line-height: 1.4;
--quiz-arrows-phone-margin-top: 30px;
--quiz-actions-margin-bottom: 56px;
--quiz-swiper-padding-bottom: 50px;
--quiz-swiper-padding-top: 56px;
--quiz-card-border-radius: 12px;
--quiz-card-headline-font-size: var(--main-bigger-size);
--quiz-item-width: 50%;
--quiz-item-padding: 10px;
--quiz-item-margin: -10px;
--quiz-arrows-icon-size: 12px;
--quiz-swiper-button-padding: 14px;
/* Colors */
--quiz-card-title-color: var(--main-positive-color);
--quiz-card-description-color: var(--dark-1);
--quiz-swiper-icon-disabled-color: var(--gray-4);
--quiz-arrows-stroke-color: var(--main-color);
--quiz-pagination-bullet-color: var(--main-color);
--quiz-slider-button-background: var(--gray-3);
--quiz-swiper-button-disabled-color: var(--gray-1);
}
</style>
<style lang="scss" scoped>
@import '../../styles/mixins.scss';
.quiz-section {
width: 100%;
overflow: hidden;
& .container {
&_block {
& .quiz-section__list {
display: flex;
flex-wrap: wrap;
margin: var(--quiz-item-margin);
}
& .quiz-section__item {
width: var(--quiz-item-width);
padding: var(--quiz-item-padding);
}
}
}
::v-deep {
.swiper-slide {
height: auto;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.swiper-container {
overflow: visible;
}
}
&__swiper {
padding-bottom: var(--quiz-swiper-padding-bottom);
padding-top: var(--quiz-swiper-padding-top);
}
.swiper-pagination {
text-align: left;
display: none;
@include tablets {
display: block;
}
}
.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
bottom: 0;
}
::v-deep.swiper-pagination-bullet {
background-color: var(--quiz-swiper-icon-disabled-color);
opacity: initial;
width: 10px;
height: 10px;
&-active {
background-color: var(--quiz-pagination-bullet-color);
}
&:not(:last-child) {
margin-right: 18px;
}
}
.zeen-headline {
margin: 0;
}
.quiz-card {
display: flex;
flex-direction: column;
border-radius: var(--quiz-card-border-radius);
height: 100%;
width: 100%;
::v-deep.quiz-card__body {
display: flex;
flex-direction: column;
height: 100%;
> *:last-child {
margin-top: auto;
}
}
::v-deep.zeen-picture {
display: block;
&__img {
max-width: 100%;
width: 100%;
max-height: initial;
}
}
::v-deep.zeen-headline {
font-size: var(--quiz-card-headline-font-size);
}
&__title {
margin: var(--quiz-card-title-margin-top) 0 var(--quiz-card-title-margin-bottom);
font-size: var(--quiz-card-title-font-size);
font-weight: var(--quiz-card-title-font-weight);
line-height: var(--quiz-card-title-line-height);
color: var(--quiz-card-title-color);
}
&__description {
font-size: var(--quiz-card-description-font-size);
font-weight: var(--quiz-card-description-font-weight);
line-height: var(--quiz-card-description-line-height);
color: var(--quiz-card-description-color);
}
}
&__actions {
margin-bottom: var(--quiz-actions-margin-bottom);
align-items: center;
}
.js-program {
&-next {
margin-left: auto;
margin-right: 10px;
@include phones {
margin-left: 0;
margin-right: 30px;
}
}
&-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--quiz-slider-button-background);
border: none;
border-radius: 50%;
transform: rotate(180deg);
cursor: pointer;
padding: var(--quiz-swiper-button-padding);
transition-property: filter;
transition-duration: 0.3s;
transition-timing-function: ease;
& svg {
width: var(--quiz-arrows-icon-size);
height: var(--quiz-arrows-icon-size);
stroke: var(--quiz-arrows-stroke-color);
fill: var(--quiz-arrows-stroke-color);
transition-property: stroke, fill, filter;
transition-duration: 0.3s;
transition-timing-function: ease;
}
&:focus,
&:visited {
& svg {
stroke: var(--quiz-arrows-stroke-color);
fill: var(--quiz-arrows-stroke-color);
filter: brightness(0.8);
}
}
&:hover {
& svg {
stroke: var(--quiz-arrows-stroke-color);
fill: var(--quiz-arrows-stroke-color);
filter: brightness(0.8);
}
}
&:active {
& svg {
stroke: var(--quiz-arrows-stroke-color);
fill: var(--quiz-arrows-stroke-color);
filter: brightness(0.6);
}
}
&_desktop {
@include phones {
display: none;
}
}
}
&-next {
& svg {
transform: rotate(180deg);
}
}
&-swiper {
overflow: visible;
}
&-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: auto;
@include phones {
justify-content: left;
}
&_phones {
display: none;
@include phones {
display: flex;
margin-top: var(--quiz-arrows-phone-margin-top);
}
}
}
}
.swiper-button-disabled {
cursor: default;
background: var(--quiz-swiper-button-disabled-color);
& svg {
stroke: var(--quiz-swiper-icon-disabled-color);
fill: var(--quiz-swiper-icon-disabled-color);
}
&,
&:focus,
&:visited {
& svg {
stroke: var(--quiz-swiper-icon-disabled-color);
fill: var(--quiz-swiper-icon-disabled-color);
}
}
&:hover,
&:active {
& svg {
stroke: var(--quiz-swiper-icon-disabled-color);
fill: var(--quiz-swiper-icon-disabled-color);
filter: none;
}
}
}
}
</style>