vhad/vue-webshop
1
0
Fork 0
mirror of https://github.com/gosticks/vue-webshop.git synced 2025-10-16 12:05:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

added small style changes to category selection

Browse Source
This commit is contained in:
Wlad 2017-09-07 01:23:28 +02:00
parent 9a741a218e
commit d804061c31
1 changed files with 44 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/UIComponents/OxyCategorySlider.vue
View File

@ -1,31 +1,34 @@
<template> <template>
<div class="category-slider-wrapper"> <div class="category-slider-wrapper">
<div class="category-slider-scroll"> <div class="category-slider-scroll">
<div class="category-slider-card" v-for="category in categories" :style="{backgroundImage : 'url(' + category.src + ')'}">{{category.title}}</div> <div class="category-slider-card" v-for="category in categories" :style="{background : 'url(' + category.img + ') no-repeat center center'}">
<div class="category-background-overlay"></div>
<h5 class="category-title">{{category.title}}</h5>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
const CategoryMockupData = [{ const CategoryMockupData = [{
title: 'Books', title: 'Electronics',
img: 'https://unsplash.it/200/160', img: 'https://unsplash.it/200/160/?random',
url: 'category/books' url: 'category/electronics'
}, },
{ {
title: 'Books', title: 'Books',
img: 'https://unsplash.it/200/160', img: 'https://unsplash.it/200/160/?random',
url: 'category/books' url: 'category/books'
}, },
{ {
title: 'Books', title: 'Health',
img: 'https://unsplash.it/200/160', img: 'https://unsplash.it/200/160/?random',
url: 'category/books' url: 'category/health'
}, },
{ {
title: 'Books', title: 'Software',
img: 'https://unsplash.it/200/160', img: 'https://unsplash.it/200/160/?random',
url: 'category/books' url: 'category/software'
}] }]
export default { export default {
props: { props: {
@ -49,21 +52,48 @@ $category-slider-height: 180px;
overflow-y: hidden; overflow-y: hidden;
overflow-x: scroll; overflow-x: scroll;
margin-bottom: 40px; margin-bottom: 40px;
border-radius: 5px;
background-color: #EEE;
.category-slider-scroll { .category-slider-scroll {
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
// background-color: #EEE; // background-color: #EEE;
// width: 1000px; // width: 1000px;
height: $category-slider-height - 20; height: $category-slider-height - 10;
.category-slider-card { .category-slider-card {
display: inline-block; display: inline-block;
position: relative;
height: 90%; height: 90%;
width: 300px; width: 270px;
margin: 2%; margin: 12px;
background-color: #EEE; background-color: #EEE;
background-size: cover !important;
border-radius: 5px; border-radius: 5px;
overflow: hidden;
cursor: pointer;
.category-background-overlay {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
transition: .2s all ease-in;
}
&:hover .category-background-overlay {
background-color: rgba(0, 0, 0, 0.8);
}
.category-title {
color: #FFF;
position: absolute;
bottom: 0;
right: 15px;
}
} }
} }
} }