main-slider.vue

<template>
  <div class="mx-n2_5 mx-xl-0">
    <Swiper
      ref="swiperComponent"
      :options="swiperOptions"
      :class="{
        'slider-container main-slider mx-auto mt-2 mt-xl-4_75 mb-0 mb-xl-6_75 px-2_5 px-xl-0 pb-7 pb-xl-0': true,
      }"
      class=""
    >
      <SwiperSlide class="slider-slide text-center flex align-items-center justify-content-center position-relative" v-for="slide in slides" :key="slide.image">
        <div class="embed-responsive slider-slide-embed rounded-xl">
          <a class="stretched-link" :href="slide.url">
            <picture class="w-100 h-100">
              <source :srcset="slide.image" type="image/jpg" media="(min-width: 768px)">
              <source :srcset="slide.imageMobile" type="image/jpg">
              <img class="embed-responsive-item cover-object" :src="slide.image" loading="lazy" />
            </picture>
          </a>
        </div>
      </SwiperSlide>
      <div
        :class="{
          'swiper-pagination slider-pagination d-xl-none': true,
          'mb-2_5': $device.isDesktopOrTablet,
          'slider-pagination-mobile mb-2_5': $device.isMobile,
        }"
        slot="pagination"></div>
      <div class="swiper-button-prev slider-prev w-7_25 h-7_25 rounded-pill" title="Назад" slot="button-prev" v-if="$device.isDesktopOrTablet">
        <svgicon class="text-white w-3 h-3" name="chevron-left" />
      </div>
      <div class="swiper-button-next slider-next w-7_25 h-7_25 rounded-pill" title="Вперед" slot="button-next" v-if="$device.isDesktopOrTablet">
        <svgicon class="text-white w-3 h-3" name="chevron-right" />
      </div>
    </Swiper>
  </div>
</template>

<script>
  import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper';
  import 'swiper/css/swiper.css';
  import '@/components/icons/chevron-left';
  import '@/components/icons/chevron-right';

  export default {
    data() {
      return {
        slides: [
          { image: "/images/banner-01-desktop.jpg", imageMobile: "/images/banner-01-mobile.jpg", url: "#" },
          { image: "/images/banner-01-desktop.jpg", imageMobile: "/images/banner-01-mobile.jpg", url: "#" },
          { image: "/images/banner-01-desktop.jpg", imageMobile: "/images/banner-01-mobile.jpg", url: "#" },
        ],
        swiperOptions: {
          effect: 'coverflow',
          loop: true,
          grabCursor: true,
          centeredSlides: true,
          slidesPerView: 1,
          spaceBetween: 20,
          slideToClickedSlide: true,
          noSwiping: true,
          coverflowEffect: {
            rotate: 0,
            stretch: 0,
            depth: 0,
            modifier: 1,
            slideShadows : false,
          },
          breakpoints: {
            1200: {
              slidesPerView: 2,
              spaceBetween: 0,
              coverflowEffect: {
                rotate: 0,
                stretch: 240,
                depth: 100,
                modifier: 1,
                slideShadows : false,
              },
            }
          },
          pagination: {
            el: '.swiper-pagination',
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper;
      }
    },
    mounted() {
      // console.log('Current Swiper instance object', this.swiper)
      // this.swiper.slideTo(3, 1000, false)
    },
    components: {
      Swiper,
      SwiperSlide,
    },
    directives: {
      swiper: directive,
    }
  }
</script>

<style lang="scss">
  .main-slider {
    max-width: 1404px;

    .slider-slide {
      width: calc(100% / 2);

      @media (max-width: 1200px) {
        width: 100%;
      }

      &:not(.swiper-slide-active) .stretched-link {
        pointer-events: none !important;
      }
    }

    .slider-slide-embed {
      transition: all .2s;
      transform: scale(.7);

      &::before {
        padding-top: percentage(311 / 702);
      }

      .embed-responsive-item {
        filter: blur(5px);

        @media (max-width: 1200px) {
          filter: none;
        }
      }
    }

    .slider-slide.swiper-slide-active .slider-slide-embed {
      transform: scale(1);

      .embed-responsive-item {
        filter: none;
      }
    }

    .slider-slide.swiper-slide-prev .slider-slide-embed,
    .slider-slide.swiper-slide-next .slider-slide-embed, {
      transform: scale(.85);

      @media (max-width: 1200px) {
        transform: scale(1);
      }
    }

    .slider-prev,
    .slider-next {
      margin-top: calc(-1 * 3.625rem / 2);

      @media (max-width: 1200px) {
        margin-top: calc(-1 * 3.625rem / 2 + -1 * 3.5rem / 2);
      }
    }

    .slider-prev {
      left: calc(25% - 1.8125rem);

      @media (max-width: 1200px) {
        left: 1.25rem;
      }
    }

    .slider-next {
      right: calc(25% - 1.8125rem);

      @media (max-width: 1200px) {
        right: 1.25rem;
      }
    }
  }
</style>

match-info.vue

<template>
  <article
    :class="{
      'match-info d-flex flex-nowrap align-items-center justify-content-center row no-gutters': true,
      'match-info-info': variant == 'info',
      'match-info-info-small': variant == 'info-small',
      'match-info-info-medium': variant == 'info-medium',
      'match-info-short': variant == 'short',
      'match-info-short-small': variant == 'short-small',
      'match-info-short-medium': variant == 'short-medium',
      'match-info-text': variant == 'text',
      'match-info-layout-center': layout == 'center',
      'match-info-layout-side': layout == 'side',
      'match-info-mobile': $device.isMobile,
    }"
  >
    <MatchTeam
      :class="{
        'col': layout == 'center',
        'col-auto': layout == 'side',
      }"
      name="manchester-united"
      :size="sizeTeamMap[variant]"
      :text="variant == 'text'"
    />
    <div class="match-info-sep text-center mx-1 col-auto" v-if="variant == 'text' && layout == 'side'">&ndash;</div>
    <div class="match-info-sep text-gray-525 w-5_5 mx-1 text-center col-auto" v-if="variant == 'short' || variant == 'short-small' || variant == 'short-medium'">vs</div>
    <MatchTeam
      :class="{
        'col': layout == 'center',
        'col-auto': layout == 'side',
      }"
      name="chelsea"
      :size="sizeTeamMap[variant]"
      :text="variant == 'text'"
      second
    />
    <div class="flex-grow-1" v-if="layout == 'side'"></div>
    <div
      :class="{
        'd-flex match-info-secondary order-2 col-auto': true,
        'flex-column text-center px-2_25': variant != 'text' && $device.isDesktopOrTablet,
        'flex-column text-center px-2': variant != 'text' && $device.isMobile,
        'flex-row align-items-center': variant == 'text' && $device.isDesktopOrTablet,
        'flex-row align-items-center': variant == 'text' && $device.isMobile,
      }"
      v-if="variant != 'short' && variant != 'short-small' && variant != 'short-medium'"
    >
      <strong
        :class="{
          'text-nowrap match-info-time': true,
        }"
      >
        19:30
      </strong>
      <small
        :class="{
          'text-nowrap text-gray-525 match-info-date': true,
        }"
      >
        15 января
      </small>
    </div>
  </article>
</template>

<script>
  import MatchTeam from '@/components/match/match-team';

  export default {
    data() {
      return {
        sizeTeamMap: {
          'info': 'large',
          'info-small': 'small',
          'info-medium': 'medium',
          'short': 'large',
          'short-small': 'small',
          'short-medium': 'medium',
          'text': 'small',
        },
      }
    },
    props: {
      variant: {
        type: String,
        default: 'info', // info info-medium info-small short short-medium short-small text
      },
      layout: {
        type: String,
        default: 'center', // center side
      },
    },
    components: {
      MatchTeam,
    },
  }
</script>

<style lang="scss">

  /*layout*/

  .match-info-layout-center {
    .match-team-1 {
      order: 1;
    }

    .match-team-2 {
      order: 3;
    }

    &.match-info-info .match-info-secondary,
    &.match-info-info-medium .match-info-secondary,
    &.match-info-info-small .match-info-secondary {
      order: 2;
    }

    &.match-info-short .match-info-sep,
    &.match-info-short-medium .match-info-sep,
    &.match-info-short-small .match-info-sep {
      order: 2;
    }
  }


  /*large*/

  .match-info-info .match-info-time,
  .match-info-short .match-info-time {
    font-size: var(--text-3xl);
  }

  .match-info-info.match-info-mobile .match-info-time,
  .match-info-short.match-info-mobile .match-info-time {
    font-size: var(--text-4xl);
  }

  .match-info-info .match-info-date,
  .match-info-short .match-info-date {
    font-size: var(--text-lg);
  }

  .match-info-info.match-info-mobile .match-info-date,
  .match-info-short.match-info-mobile .match-info-date {
    font-size: var(--text-xl);
  }

  .match-info-text.match-info-mobile .match-info-time {
    font-size: var(--text-2xl);
  }

  .match-info-text.match-info-mobile .match-info-date {
    font-size: var(--text-base);
  }


  /*medium*/

  .match-info-info-medium .match-info-time,
  .match-info-short-medium .match-info-time {
    font-size: var(--text-xl);
  }

  .match-info-info-medium .match-info-date,
  .match-info-short-medium .match-info-date {
    font-size: var(--text-sm);
  }
</style>

match-table-body.vue

<template>
  <b-tbody
    :class="{
      'match-table-body bg-white text-gray-950': true,
      'match-table-body-mobile': $device.isMobile,
    }"
  >
    <b-tr class="match-table-row h-1" v-if="$device.isDesktopOrTablet">
      <b-td class="match-table-cell cell-hr p-0 bg-black" colspan="9"></b-td>
    </b-tr>
    <b-tr class="match-table-row first h-1_25" v-if="$device.isDesktopOrTablet">
      <b-td class="match-table-cell cell-hr p-0" colspan="9"></b-td>
    </b-tr>
    <b-tr class="match-table-row" v-if="$device.isMobile">
      <b-th class="match-table-cell align-middle font-weight-semibold text-xl" colspan="3">
        Мы нашли:
      </b-th>
    </b-tr>
    <b-tr class="match-table-row">
      <b-td class="match-table-cell text-center align-middle cell-date" rowspan="2" v-if="$device.isDesktopOrTablet">
        <strong class="text-xl time d-block">21:00</strong>
        <small class="text-sm font-weight-medium text-gray-525 d-block day">Сегодня</small>
      </b-td>
      <b-td class="match-table-cell align-middle text-center cell-match" rowspan="2" v-if="$device.isDesktopOrTablet">
        <MatchInfo variant="short-small" />
      </b-td>
      <b-th class="match-table-cell align-middle font-weight-semibold text-lg text-white bg-red-500 rounded-tl-xl" v-if="$device.isDesktopOrTablet">
        Мы нашли
      </b-th>
      <b-td class="match-table-cell cell-bet text-center align-middle">
        <BetFactor factor="1.5" percent="13" outline />
      </b-td>
      <b-td class="match-table-cell cell-bet text-center align-middle">
        <BetFactor factor="1.5" percent="13" outline />
      </b-td>
      <b-td
        :class="{
          'match-table-cell cell-bet text-center align-middle': true,
          'rounded-tr-xl': $device.isDesktopOrTablet,
        }"
      >
        <BetFactor factor="1.5" percent="13" outline />
      </b-td>
      <b-td class="match-table-cell p-0 cell-vr w-1_25" rowspan="2" v-if="$device.isDesktopOrTablet"></b-td>
      <b-td class="match-table-cell text-center align-middle font-weight-bold text-base text-primary bg-gray-200 cell-count rounded-xl" rowspan="2" v-if="$device.isDesktopOrTablet">
        +1245
      </b-td>
      <b-td class="match-table-cell p-0 cell-vr w-1_25" rowspan="2" v-if="$device.isDesktopOrTablet"></b-td>
    </b-tr>
    <b-tr class="match-table-row" v-if="$device.isMobile">
      <b-th
        class="match-table-cell align-middle font-weight-semibold text-xl" colspan="3">
        Букмекеры РФ:
      </b-th>
    </b-tr>
    <b-tr
      :class="{
        'match-table-row': true,
        'last': $device.isMobile,
      }"
    >
      <b-th class="match-table-cell align-middle font-weight-semibold text-xs text-gray-950 bg-gray-300 rounded-bl-xl" v-if="$device.isDesktopOrTablet">
        Букмекеры России
      </b-th>
      <b-td
        :class="{
          'match-table-cell text-center align-middle bg-gray-200': true,
          'text-lg': $device.isDesktopOrTablet,
          'text-xl': $device.isMobile,
        }"
      >
        1.5
      </b-td>
      <b-td
        :class="{
          'match-table-cell text-center align-middle bg-gray-200': true,
          'text-lg': $device.isDesktopOrTablet,
          'text-3xl': $device.isMobile,
        }"
      >
        1.5
      </b-td>
      <b-td
        :class="{
          'match-table-cell text-center align-middle bg-gray-200': true,
          'text-lg rounded-br-xl': $device.isDesktopOrTablet,
          'text-3xl': $device.isMobile,
        }"
      >
        1.5
      </b-td>
    </b-tr>
    <b-tr class="match-table-row last h-1_25" v-if="$device.isDesktopOrTablet">
      <b-td class="match-table-cell cell-hr p-0" colspan="9"></b-td>
    </b-tr>
  </b-tbody>
</template>

<script>
  import MatchInfo from '@/components/match/match-info';
  import BetFactor from '@/components/bet/bet-factor';

  export default {
    components: {
      MatchInfo,
      BetFactor,
    }
  }
</script>

<style lang="scss">
  .match-table-body {
    .match-table-row.first .match-table-cell {
      &:first-child,
      &:last-child {
        position: relative;
      }

      &:first-child::before,
      &:last-child::after {
        position: absolute;
        content: '';
        width: 10px;
        height: 10px;
        overflow: hidden;
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAA4UlEQVQ4jaWUQQqCQBSGx6HIhW2cTVOnKLqFIgouXLrwTG7EGwRJ6C1EryAqT4+QKdTCMF0YOvMxy/cx/4P3noAkGY0QdzvT0HRVuV7OR3pACEFVx0kahNHt/ng2DZogycOzbKcEeM9QAli2M67/ynhPXM+f08a4no/3ZCIvNAf/J1u2s9zs+eYXCf3T5xwlgEgoNg3tRClayYlS09CwriprzR5dVVCWF2sz92R5IbzadrvZMPzcdh1my9yDoarZTKhqHCcpmxwnKQ7CiE0OwohrSPjGk3cxeFeS7RgIPGfoA98wLv6WQffcAAAAAElFTkSuQmCC');
      }

      &:first-child::before {
        top: 0;
        left: 0;
        background-position: 0 0;
      }

      &:last-child::after {
        top: 0;
        right: 0;
        background-position: 100% 0;
      }
    }

    .match-table-row.last .match-table-cell {
      &:first-child {
        border-bottom-left-radius: 10px;
      }

      &:last-child {
        border-bottom-right-radius: 10px;
      }
    }

    .match-table-cell.cell-bet {
      background-color: var(--primary);
    }
  }

  .match-table-body-mobile {
    td.match-table-cell {
      padding-top: .625rem;
      padding-bottom: .625rem;

      &.cell-bet {
        padding-top: .875rem;
        padding-bottom: .875rem;
      }
    }

    th.match-table-cell {
      padding-top: .25rem;
      padding-bottom: .25rem;
    }

    .match-table-cell.cell-bet {
      background-color: var(--gray-200);
    }
  }
</style>

match-team.vue

   <template>
     <div
       :class="{
          'd-flex flex-nowrap align-items-center match-team': true,
          'match-team-1': !second,
          'match-team-2 flex-row-reverse': second,
          'match-team-large': size == 'large',
          'match-team-medium': size == 'medium',
          'match-team-small': size == 'small',
        }"
     >
       <div class="flex-grow-1">
         <div
           :class="{
              'match-team-name': true,
              'text-right': !second,
              'text-left': second,
              'text-2xl font-weight-bold': size == 'large' && $device.isDesktopOrTablet,
              'text-xl font-weight-bold': size == 'large' && $device.isMobile,
              'text-sm-2 font-weight-semibold': size == 'medium' && $device.isDesktopOrTablet,
              'text-xl font-weight-semibold': size == 'medium' && $device.isMobile,
              'text-sm-2 font-weight-semibold':  size == 'small' && $device.isDesktopOrTablet,
              'text-xl font-weight-semibold':  size == 'small' && $device.isMobile,
            }"
         >
           {{ namesMap[name] }}
         </div>
       </div>
       <img
         v-if="!text"
         :class="{
          'match-team-logo cover-object flex-shrink-0': true,
          'ml-2_5':  size == 'large' && !second,
          'mr-2_5':  size == 'large' && second,
          'ml-2_25':  size == 'medium' && !second,
          'mr-2_25':  size == 'medium' && second,
          'ml-2':  size == 'small' && !second,
          'mr-2':  size == 'small' && second,
          'w-7_5 h-7_5':  size == 'large',
          'w-6 h-6':  size == 'medium',
          'w-3_75 h-3_75':  size == 'small',
        }"
        :src="logosMap[name]"
         alt=""
       >
     </div>
</template>

<script>
  export default {
    data() {
      return {
        logosMap: {
          'manchester-united': '/team-logos/manchester-united.svg',
          'chelsea': '/team-logos/chelsea.svg',
        },
        namesMap: {
          'manchester-united': 'Манчестер Юнайтед',
          'chelsea': 'Челси',
        },
      }
    },
    props: {
      name: {
        type: String,
        default: 'Нонейм',
      },
      logo: {
        type: String,
        default: 'http://placehold.it/60x60',
      },
      text: {
        type: Boolean,
        default: false,
      },
      second: {
        type: Boolean,
        default: false,
      },
      size: {
        type: String,
        default: 'large', // large medium small
      },
    },
    components: {
    },
  }
</script>

<style lang="scss">
.match-team {
  &-name {
    line-height: 1.2;
  }
}
</style>