-
-
Save aversan/cfe6a9440aa27ab38e6b060c0803f381 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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'">–</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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<b-tbody | |
:class="{ | |
'match-table-body bg-white text-gray-950': true, | |
'match-table-body-mobile': $device.isMobile, | |
}" | |
><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> | |
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment