Zeen Component Library

# ZeenIntro

Базовый блочный компонент. Принимает в себя левую и правую часть контента через v-slot.

# Примеры:

Размеры:

ZeenIntro

intro-padding-top

intro-padding-bottom

Цвета:

intro-background-color

По умолчанию наследуется от main-color

  • Пример - Главная страница

    Заголовок мероприятия

    Мероприятие "Zeen Event" начнется 21.07.2021 в 12:00"

  • Пример - Страница магазина

    Магазин подарков

    Как получить коины?

    Мои баллы 531 624

# props

Название Тип Обязательный По умолчанию Описание
src String - '' Принимает в себя путь для фоновой картинки в виде: :src="require('yourPath')

# Source Code - исходный код компонента

<template>
  <section class="zeen-intro" ref="main">
    <ZeenContainer>
      <div class="zeen-intro__row">
        <div class="zeen-intro__left-block">
          <slot name="left" />
        </div>
        <div class="zeen-intro__right-block">
          <slot name="right" />
        </div>
      </div>
    </ZeenContainer>
  </section>
</template>

<script>
import ZeenContainer from '../../components/ZeenContainer/ZeenContainer'

export default {
  name: 'ZeenIntro',
  components: {ZeenContainer},
  props: {
    src: {
      type: String,
      default: '',
      required: false,
    },
  },
  mounted() {
    if (this.src) {
      this.$refs.main.style.setProperty('--intro-background-image', `url("${this.src}")`)
    }
  },
}
</script>

<style lang="scss">
@import '../../styles/mixins.scss';
:root {
  /* Размеры */
  --intro-padding-top: 80px;
  --intro-padding-bottom: 80px;
  --intro-align-items: center;
  --intro-justify-content: space-between;
  --intro-flex-direction: row;

  @include phones {
    --intro-padding-top: 60px;
    --intro-padding-bottom: 60px;
  }

  /* Цвета */
  --intro-background-image: none;
  --intro-background-color: var(--main-color);
}
</style>

<style lang="scss" scoped>
@import '../../styles/mixins.scss';

.zeen-intro {
  padding-top: var(--intro-padding-top);
  padding-bottom: var(--intro-padding-bottom);
  background-image: var(--intro-background-image);
  background-color: var(--intro-background-color);

  &__row {
    display: flex;
    align-items: var(--intro-align-items);
    justify-content: var(--intro-justify-content);
    flex-direction: var(--intro-flex-direction);
  }
}
</style>

← ZeenHowGetCoins →