anatolykopyl/bakery
1
0
Fork 0
mirror of https://github.com/anatolykopyl/bakery.git synced 2026-03-26 21:14:26 +00:00
Code Issues Projects Releases Wiki Activity

Картинки категорий

Browse Source
This commit is contained in:
Anatoly Kopyl
2020-08-03 22:44:16 +03:00
parent 906a35bdd6
commit bd2c0bb00d
9 changed files with 44 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/views/Goods.vue
View File

@@ -1,28 +1,28 @@
<template>
<div class="goods">
<div id="sneakpeek">
<div href="#pastry">
<img src="@/assets/bread-tab.png">
<a href="#pastry">
<img src="@/assets/pastry-tab.png">
<h4>Кондитерские изделия</h4>
</div>
<div href="#singles">
<img src="@/assets/bread-tab.png">
</a>
<a href="#singles">
<img src="@/assets/singles-tab.png">
<h4>Мелкоштучные изделия</h4>
</div>
<div href="#pies">
<img src="@/assets/bread-tab.png">
</a>
<a href="#pies">
<img src="@/assets/pies-tab.png">
<h4>Пироги</h4>
</div>
<div href="#bread">
</a>
<a href="#bread">
<img src="@/assets/bread-tab.png">
<h4>Хлеба и багеты</h4>
</div>
<div href="#drinks">
<img src="@/assets/bread-tab.png">
</a>
<a href="#drinks">
<img src="@/assets/drinks-tab.png">
<h4>Напитки</h4>
</div>
</a>
</div>
<h2>Кондитерские изделия:</h2>
<h2 id="pastry">Кондитерские изделия:</h2>
<div class="category">
<div class="col">
<Card v-for="item in itemsSubset(1, ['Кондитерские изделия', 'Леденцы', 'Печенье'])" v-bind:key=item.nameEng :item=item />
@@ -34,7 +34,7 @@
<Card v-for="item in itemsSubset(3, ['Кондитерские изделия', 'Леденцы', 'Печенье'])" v-bind:key=item.nameEng :item=item />
</div>
</div>
<h2>Мелкоштучные изделия:</h2>
<h2 id="singles">Мелкоштучные изделия:</h2>
<div class="category">
<div class="col">
<Card v-for="item in itemsSubset(1, 'Мелкоштучные изделия')" v-bind:key=item.nameEng :item=item />
@@ -46,7 +46,7 @@
<Card v-for="item in itemsSubset(3, 'Мелкоштучные изделия')" v-bind:key=item.nameEng :item=item />
</div>
</div>
<h2>Пироги:</h2>
<h2 id="pies">Пироги:</h2>
<div class="category">
<div class="col">
<Card v-for="item in itemsSubset(1, 'Пироги')" v-bind:key=item.nameEng :item=item />
@@ -58,7 +58,7 @@
<Card v-for="item in itemsSubset(3, 'Пироги')" v-bind:key=item.nameEng :item=item />
</div>
</div>
<h2>Хлеба и багеты:</h2>
<h2 id="bread">Хлеба и багеты:</h2>
<div class="category">
<div class="col">
<Card v-for="item in itemsSubset(1, 'Хлеба, багеты')" v-bind:key=item.nameEng :item=item />
@@ -70,7 +70,7 @@
<Card v-for="item in itemsSubset(3, 'Хлеба, багеты')" v-bind:key=item.nameEng :item=item />
</div>
</div>
<h2>Напитки:</h2>
<h2 id="drinks">Напитки:</h2>
<div class="category">
<div class="col">
<Card v-for="item in itemsSubset(1, 'Напитки')" v-bind:key=item.nameEng :item=item />
@@ -120,29 +120,33 @@ export default {
padding-bottom: 80px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);
background: rgb(255,255,255);
background: linear-gradient(0deg, rgba(255,255,255,0.49763655462184875) 0%, rgba(255,255,255,0) 100%);
background: linear-gradient(0deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
}
#sneakpeek h4 {
font-family: 'Playfair Display', serif;
font-size: 17px;
font-weight: 100;
color: #3a3a3a;
}
#sneakpeek div {
#sneakpeek a {
width: 20%;
transition: transform .2s;
cursor: pointer;
text-decoration: none;
}
#sneakpeek a:hover {
transform: scale(1.05);
}
#sneakpeek img {
width: 70%;
/*border: white solid;
border-radius: 100%;*/
}
#sneakpeek div:hover {
transform: scale(1.05);
border: rgb(253, 253, 253) solid;
border-radius: 100%;
border-width: 8px;
filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.4));
}
h2 {
@@ -160,6 +164,15 @@ h2 {
padding-right: 20px;
}
h2::before {
display: block;
content: " ";
margin-top: -100px;
height: 100px;
visibility: hidden;
pointer-events: none;
}
.col {
width: 33.33%;
padding: 30px;