# ZeenTestCardVert
Компонент ZeenTestCardVert
# Примеры:
Примеры использования ZeenTestCardVert
Научный аспект искусственного интеллекта
Научный аспект искусственного интеллекта
Какой-то сопроводительный текст, описывающий тест, который очень длинный.
# props
| Название | Тип | Обязательный | По умолчанию | Описание |
|---|---|---|---|---|
| picture | String | - | - | url картинки |
| testComplite | Boolean | - | false | пройден тест или нет |
| cardWithPoints | Boolean | - | true | отвечает за показ максимальных баллов |
| cardWithTags | Boolean | - | false | отвечает за показ тэгов |
| maxPoints | Number | - | 0 | текст количества баллов |
| tags | Array | - | 'количество вопросов' | массив с тэгами |
| quizType | Boolean | - | Аудиоквест | текст плашки с типом квиза и отвечает за показ типа аудиоквиза |
# slots
| Название | Описание |
|---|---|
| title | слот для заголовка |
| description | слот для описания |
| tags | слот для тэгов |
| type | слот для типа |
| points | слот для баллов |
| action | слот для кнопки |
# Source Code - исходный код компонента
<template lang="pug">
.zeen-test
.zeen-test__part.zeen-test__header(v-if='cardWithTags')
slot(name='tags' :quiz='quiz')
.zeen-test__tags
ZeenTags(:tags='tags')
template(#tag)
slot(name='type' :quiz='quiz')
.zeen-test__type(v-if='quizType')
svg(
height="20"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink")
clipPath(id="a")
path(d="m0 0h20v20h-20z")
g(clip-path="url(#a)")
path(
clip-rule="evenodd"
d="m9.99935 2.29297c-4.2572 0-7.70833 3.45114-7.70833 7.70833 0 4.2572 3.45113 7.7083 7.70833 7.7083 4.25715 0 7.70835-3.4511 7.70835-7.7083 0-4.25719-3.4512-7.70833-7.70835-7.70833zm-8.95833 7.70833c0-4.94755 4.01078-8.95833 8.95833-8.95833s8.95835 4.01078 8.95835 8.95833c0 4.9476-4.0108 8.9583-8.95835 8.9583s-8.95833-4.0107-8.95833-8.9583zm9.43558-3.25816c.0164.00993.0327.01988.0491.02984.2393.14552.4755.29682.6879.44597.2419.16982.4997.36977.7538.57709.0129.01048.0257.02092.0384.03132.4149.33837.7879.64257 1.0485.946.2954.34406.4867.73078.4867 1.22794 0 .4972-.1913.884-.4867 1.228-.2606.3034-.6336.6076-1.0485.946l-.0384.0313c-.2541.2074-.5119.4073-.7538.5771-.2124.1492-.4486.3005-.6879.446-.0164.01-.0328.0199-.0491.0298-.404.2459-.78574.4781-1.11981.5981-.1857.0668-.39871.1157-.62795.0987-.24079-.0179-.45643-.1054-.64436-.2465-.38257-.2871-.53622-.703-.61635-1.1165-.07635-.394-.10567-.9014-.13993-1.4944l-.00249-.043c-.02102-.3635-.03469-.7255-.03469-1.0546 0-.32902.01367-.69105.03469-1.0545l.00249-.04302c.03426-.593.06358-1.10044.13993-1.49443.08013-.41352.23378-.82933.61635-1.11652.18793-.14107.40357-.22852.64436-.24641.22924-.01704.44225.0319.62795.09861.33407.12001.71581.35227 1.11981.59811zm-1.6436.55082c-.02048.01567-.08305.07115-.1377.35319-.05843.30151-.0842.72373-.12168 1.37181-.02018.34897-.0326.68535-.0326.98234 0 .2971.01242.6335.0326.9824.03748.6481.06325 1.0703.12168 1.3718.05465.2821.11722.3375.1377.3532.01567-.002.04761-.0082.10118-.0274.19947-.0717.47057-.2329.94205-.5196.22437-.1365.43597-.2724.61907-.4009.2089-.1467.4416-.3266.682-.5228.4655-.3797.7493-.6142.9286-.823.1525-.1775.1851-.286.1851-.4137 0-.12766-.0326-.23608-.1851-.4136-.1793-.20883-.4631-.4433-.9286-.82306-.2404-.19612-.4731-.37601-.682-.52271-.1831-.12854-.3947-.26447-.61908-.40092-.47147-.2867-.74257-.44793-.94203-.51958-.05358-.01925-.08552-.02547-.10119-.02747z"
fill-rule="evenodd"
stroke-width=".5"
)
span {{ quizType }}
slot(name='points' :quiz='quiz')
.zeen-test__points(v-if='cardWithPoints')
span {{ progress.maxPoints }}
svg(width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg")
rect(y="8" width="11.3136" height="11.3136" transform="rotate(-45 0 8)")
rect(x="4" y="8" width="5.65681" height="5.65681" transform="rotate(-45 4 8)" fill="white")
.zeen-test__part
.zeen-test__wrapper
ZeenPicture(
v-if='picture'
:src='picture'
class='zeen-test__icon'
)
slot(name='title' :quiz='quiz')
.zeen-test__title.zeen-test__title_phones
ZeenHeadline(type='dark-18' tag='h3' v-html='quiz.title')
.zeen-test__text
slot(name='title' :quiz='quiz')
.zeen-test__title.zeen-test__title_desktop
ZeenHeadline(type='dark-18' tag='h3' v-html='quiz.title')
slot(name='description' :quiz='quiz')
.zeen-test__description
ZeenText(size='12' v-html='quiz.description')
slot(name='action' :quiz='quiz')
.zeen-test__button
ZeenButton(
:disabled='testComplete'
@click='$emit("test-click", quiz)'
)
template(v-slot:rightIcon)
svg(width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg")
path(fill-rule="evenodd" clip-rule="evenodd" d="M4.65261 1.46668C5.20298 0.977461 6.04575 1.02703 6.53497 1.57741L11.458 7.11587C11.9071 7.62105 11.9071 8.38233 11.458 8.88751L6.53497 14.426C6.04575 14.9763 5.20298 15.0259 4.65261 14.5367C4.10223 14.0475 4.05266 13.2047 4.54188 12.6543L8.67756 8.00169L4.54188 3.34905C4.05266 2.79867 4.10223 1.95591 4.65261 1.46668Z")
</template>
<script>
import ZeenTags from '../ZeenTags/ZeenTags.vue'
import ZeenPicture from '../ZeenPicture/ZeenPicture.vue'
import ZeenButton from '../ZeenButton/ZeenButton'
import ZeenHeadline from '../ZeenHeadline/ZeenHeadline'
import ZeenText from '../ZeenText/ZeenText'
export default {
name: 'ZeenTestCardVert',
components: {
ZeenTags,
ZeenPicture,
ZeenButton,
ZeenHeadline,
ZeenText,
},
props: {
quiz: {
type: Object,
required: true,
},
tags: {
type: Array,
default: () => {
return ['Количество вопросов']
},
},
progress: {
type: Object,
default: () => {
return {
title: 'Ваш прогресс',
points: 0,
maxPoints: 0,
}
},
},
cardWithPoints: {
type: Boolean,
default: false,
},
cardWithTags: {
type: Boolean,
default: false,
},
quizType: {
type: String,
default: 'Аудиоквест',
},
testComplete: {
type: Boolean,
default: false,
},
},
computed: {
picture() {
if (this.quiz?.picture?.url.includes('assets/default')) {
return ''
}
return this.quiz?.picture?.url
},
},
}
</script>
<style lang="scss">
@import '../../styles/mixins.scss';
:root {
/* Размеры */
--zeen-test-card-vert-size: var(--main-size);
--zeen-test-icon-size: 112px;
--zeen-test-icon-margin-right: 20px;
--zeen-test-padding-vertical: var(--zeen-card-padding-vertical);
--zeen-test-padding-horizontal: var(--zeen-card-padding-horizontal);
--zeen-test-text-margin-right: 24px;
--zeen-test-button-padding-vertical: 12px;
--zeen-test-button-padding-horizontal: var(--zeen-test-button-padding-vertical);
--zeen-test-button-radius: 50%;
@include phones {
--zeen-test-icon-size: 52px;
--zeen-test-icon-margin-right: 12px;
--zeen-test-type-bottom: 20px;
--zeen-test-padding-vertical: 16px;
--zeen-test-padding-horizontal: 16px;
}
/* Цвета */
--zeen-test-card-vert-color: var(--main-color);
}
</style>
<style lang="scss" scoped>
@import '../../styles/mixins.scss';
.zeen-test {
display: flex;
flex-direction: column;
border-radius: var(--zeen-card-border-radius);
box-shadow: 0px 5px 20px var(--zeen-card-box-shadow);
padding-top: var(--zeen-test-padding-vertical);
padding-bottom: var(--zeen-test-padding-vertical);
padding-left: var(--zeen-test-padding-horizontal);
padding-right: var(--zeen-test-padding-horizontal);
position: relative;
background: var(--zeen-card-background);
height: 100%;
&__part {
display: flex;
&:last-of-type {
flex: 1 1 auto;
@include phones {
flex-direction: column;
}
}
}
&__header {
align-items: center;
justify-content: space-between;
margin-bottom: var(--zeen-card-part-margin-bottom);
}
&__wrapper {
display: flex;
@include phones {
margin-bottom: var(--zeen-card-part-margin-bottom);
align-items: center;
}
}
&__title {
&_desktop {
display: block;
@include phones {
display: none;
}
}
&_phones {
display: none;
@include phones {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
}
&__type {
display: inline-flex;
align-items: center;
color: var(--zeen-card-type-color);
padding: var(--zeen-tags-item-padding);
font-size: var(--zeen-card-type-font-size);
line-height: var(--zeen-card-type-line-height);
& svg {
fill: var(--zeen-card-type-fill);
stroke: var(--zeen-card-type-fill);
margin-right: var(--zeen-card-type-icon-margin-right);
height: var(--zeen-card-type-icon-size);
width: var(--zeen-card-type-icon-size);
}
}
&__points {
display: inline-flex;
align-self: flex-start;
align-items: center;
padding: var(--zeen-card-progress-padding-vertical) var(--zeen-card-progress-padding-horizontal);
box-shadow: 0px 2px 16px var(--zeen-card-box-shadow);
border-radius: var(--zeen-card-progress-radius);
font-weight: var(--zeen-card-progress-font-weight);
font-size: var(--main-small-text);
line-height: var(--zeen-card-progress-line-height);
color: var(--zeen-card-progress-color);
@include phones {
position: absolute;
bottom: var(--zeen-test-type-bottom);
left: var(--zeen-test-padding-vertical);
}
& span {
margin-right: var(--zeen-card-type-icon-margin-right);
}
& svg {
fill: currentColor;
}
}
&__icon {
--picture-max-height: var(--zeen-test-icon-size);
--picture-max-width: var(--zeen-test-icon-size);
--picture-border-radius: var(--zeen-card-icon-border-radius);
margin-right: var(--zeen-test-icon-margin-right);
height: var(--zeen-test-icon-size);
width: var(--zeen-test-icon-size);
}
&__text {
margin-right: var(--zeen-test-text-margin-right);
align-items: center;
flex: 1;
@include phones {
margin-bottom: var(--zeen-card-part-margin-bottom);
}
}
&__button {
--button-padding-vertical: var(--zeen-test-button-padding-vertical);
--button-padding-horizontal: var(--zeen-test-button-padding-horizontal);
--button-border-radius: var(--zeen-test-button-radius);
margin-left: auto;
align-self: flex-end;
}
}
</style>
← ZeenTags ZeenTeaser →