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

Поиск по ассортименту

Browse Source
This commit is contained in:
Anatoly Kopyl
2020-08-05 02:10:37 +03:00
parent a64fa39e0b
commit 6d2a2a3032
7 changed files with 170 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -2,6 +2,7 @@
node_modules node_modules
/dist /dist
.env
# local env files # local env files
.env.local .env.local
.env.*.local .env.*.local

BIN
assets/301c63b214c73bcdbe032ab72b74a055.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 181 KiB

4
src/App.vue
View File

@@ -62,6 +62,10 @@ h1 {
color: #3a3a3a; color: #3a3a3a;
} }
a {
color: brown;
}
.light { .light {
font-weight: 200; font-weight: 200;
} }

1
src/assets/search.svg Normal file
View File

@@ -0,0 +1 @@
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48px" height="48px"><path d="M 13.261719 14.867188 L 15.742188 17.347656 C 15.363281 18.070313 15.324219 18.789063 15.722656 19.1875 L 20.25 23.714844 C 20.820313 24.285156 22.0625 23.972656 23.015625 23.015625 C 23.972656 22.058594 24.285156 20.820313 23.714844 20.25 L 19.191406 15.722656 C 18.789063 15.324219 18.070313 15.363281 17.347656 15.738281 L 14.867188 13.261719 Z M 8.5 0 C 3.804688 0 0 3.804688 0 8.5 C 0 13.195313 3.804688 17 8.5 17 C 13.195313 17 17 13.195313 17 8.5 C 17 3.804688 13.195313 0 8.5 0 Z M 8.5 15 C 4.910156 15 2 12.089844 2 8.5 C 2 4.910156 4.910156 2 8.5 2 C 12.089844 2 15 4.910156 15 8.5 C 15 12.089844 12.089844 15 8.5 15 Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 748 B

5
src/components/Card.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="card" v-on:click='expanded=!expanded'> <div v-if="item.name.toLowerCase().includes(query.toLowerCase())" class="card" v-on:click='expanded=!expanded'>
<h4>{{ item.name }}</h4> <h4>{{ item.name }}</h4>
<p>{{ item.mainIng }}</p> <p>{{ item.mainIng }}</p>
<p v-if=expanded class="light">{{ item.ing }}</p> <p v-if=expanded class="light">{{ item.ing }}</p>
@@ -20,7 +20,8 @@
export default { export default {
name: "Card", name: "Card",
props: { props: {
item: Object item: Object,
query: String
}, },
data() { data() {
return { return {

72
src/views/Contact.vue
View File

@@ -1,21 +1,65 @@
<template> <template>
<div> <div class="main">
Телефон: 642-06-38; e-mail: info@fvolchek.ru <div class="side-col">
<h2>Свяжитесь с нами</h2>
642-06-38<br />
<a href="mailto:info@fvolchek.ru">info@fvolchek.ru</a><br />
ОТДЕЛ ПЕРСОНАЛА: <h2>Отдел персонала</h2>
e-mail: hr@fvolchek.com <a href="mailto:hr@fvolchek.ru">hr@fvolchek.com</a><br />
ХОТИТЕ КУПИТЬ НАШУ ПРОДУКЦИЮ ОПТОМ: <h2>Хотите купить нашу продукцию оптом?</h2>
e-mail: sales-b2b@fvolchek.com <a href="mailto:sales-b2b@fvolchek.ru">sales-b2b@fvolchek.com</a><br />
ПРЕДЛОЖИТЕ НАМ: <h2>Предложите нам</h2>
Товары и услуги: zakupki@fvolchek.com Товары и услуги: <a href="mailto:zakupki@fvolchek.ru">zakupki@fvolchek.com</a><br />
Предложения по аренде помещений: arenda@fvolchek.com Предложения по аренде помещений: <a href="mailto:arenda@fvolchek.ru">arenda@fvolchek.com</a><br />
ЗАДАТЬ ВОПРОС: <h2>По любым вопросам</h2>
e-mail: info@fvolchek.ru Филипп Вольчек<br />
<a href="mailto:flv@fvolchek.ru">flv@fvolchek.ru</a>
ПО ЛЮБЫМ ВОПРОСАМ: </div>
e-mail: flv@fvolchek.ru, Филипп Вольчек
</div> </div>
</template> </template>
<script>
export default {
name: "Contact",
}
</script>
<style scoped>
.main {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 70px;
padding-left: 100px;
}
h2 {
font-family: 'Playfair Display', serif;
font-weight: 500;
}
.side-col {
text-align: left;
color: #3a3a3a;
}
img {
width: 40%;
height: auto;
margin: 30px;
border: rgb(253, 253, 253) solid;
border-radius: 100%;
border-width: 8px;
filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.4));
}
@media screen and (max-width: 1024px) {
.main {
padding-left: 10vw;
}
}
</style>

149
src/views/Goods.vue
View File

@@ -1,8 +1,8 @@
<template> <template>
<div class="goods"> <div class="goods">
<a id="top"></a> <a class="jump-to-top" href="#router-view"><img src="@/assets/down.png"></a>
<a class="jump-to-top" href="#top"><img src="@/assets/down.png"></a> <div id="menu">
<div id="sneakpeek"> <div class="buttons">
<a href="#pastry"> <a href="#pastry">
<img src="@/assets/pastry-tab.png"> <img src="@/assets/pastry-tab.png">
<h4>Кондитерские изделия</h4> <h4>Кондитерские изделия</h4>
@@ -24,64 +24,36 @@
<h4>Напитки</h4> <h4>Напитки</h4>
</a> </a>
</div> </div>
<h2 id="pastry">Кондитерские изделия:</h2> <input type="text" placeholder="Поиск..." v-model="query"/>
<div class="category">
<div class="col">
<Card v-for="item in itemsSubset(1, ['Кондитерские изделия', 'Леденцы', 'Печенье'])" v-bind:key=item.nameEng :item=item />
</div> </div>
<div class="col"> <h2 v-if="categoryLength(['Кондитерские изделия', 'Леденцы', 'Печенье'])" id="pastry">Кондитерские изделия:</h2>
<Card v-for="item in itemsSubset(2, ['Кондитерские изделия', 'Леденцы', 'Печенье'])" v-bind:key=item.nameEng :item=item /> <div v-if="categoryLength(['Кондитерские изделия', 'Леденцы', 'Печенье'])" class="category">
</div> <div v-for="n in 3" v-bind:key=n class="col">
<div class="col"> <Card v-for="item in itemsSubset(n, ['Кондитерские изделия', 'Леденцы', 'Печенье'])" v-bind:key=item.nameEng :item=item :query=query />
<Card v-for="item in itemsSubset(3, ['Кондитерские изделия', 'Леденцы', 'Печенье'])" v-bind:key=item.nameEng :item=item />
</div> </div>
</div> </div>
<h2 id="singles">Мелкоштучные изделия:</h2> <h2 v-if="categoryLength('Мелкоштучные изделия')" id="singles">Мелкоштучные изделия:</h2>
<div class="category"> <div v-if="categoryLength('Мелкоштучные изделия')" class="category">
<div class="col"> <div v-for="n in 3" v-bind:key=n class="col">
<Card v-for="item in itemsSubset(1, 'Мелкоштучные изделия')" v-bind:key=item.nameEng :item=item /> <Card v-for="item in itemsSubset(n, 'Мелкоштучные изделия')" v-bind:key=item.nameEng :item=item :query=query />
</div>
<div class="col">
<Card v-for="item in itemsSubset(2, 'Мелкоштучные изделия')" v-bind:key=item.nameEng :item=item />
</div>
<div class="col">
<Card v-for="item in itemsSubset(3, 'Мелкоштучные изделия')" v-bind:key=item.nameEng :item=item />
</div> </div>
</div> </div>
<h2 id="pies">Пироги:</h2> <h2 v-if="categoryLength('Пироги')" id="pies">Пироги:</h2>
<div class="category"> <div v-if="categoryLength('Пироги')" class="category">
<div class="col"> <div v-for="n in 3" v-bind:key=n class="col">
<Card v-for="item in itemsSubset(1, 'Пироги')" v-bind:key=item.nameEng :item=item /> <Card v-for="item in itemsSubset(n, 'Пироги')" v-bind:key=item.nameEng :item=item :query=query />
</div>
<div class="col">
<Card v-for="item in itemsSubset(2, 'Пироги')" v-bind:key=item.nameEng :item=item />
</div>
<div class="col">
<Card v-for="item in itemsSubset(3, 'Пироги')" v-bind:key=item.nameEng :item=item />
</div> </div>
</div> </div>
<h2 id="bread">Хлеба и багеты:</h2> <h2 v-if="categoryLength(['Хлеба, багеты', 'Сухарики'])" id="bread">Хлеба и багеты:</h2>
<div class="category"> <div v-if="categoryLength(['Хлеба, багеты', 'Сухарики'])" class="category">
<div class="col"> <div v-for="n in 3" v-bind:key=n class="col">
<Card v-for="item in itemsSubset(1, ['Хлеба, багеты', 'Сухарики'])" v-bind:key=item.nameEng :item=item /> <Card v-for="item in itemsSubset(n, ['Хлеба, багеты', 'Сухарики'])" v-bind:key=item.nameEng :item=item :query=query />
</div>
<div class="col">
<Card v-for="item in itemsSubset(2, ['Хлеба, багеты', 'Сухарики'])" v-bind:key=item.nameEng :item=item />
</div>
<div class="col">
<Card v-for="item in itemsSubset(3, ['Хлеба, багеты', 'Сухарики'])" v-bind:key=item.nameEng :item=item />
</div> </div>
</div> </div>
<h2 id="drinks">Напитки:</h2> <h2 v-if="categoryLength('Напитки')" id="drinks">Напитки:</h2>
<div class="category"> <div v-if="categoryLength('Напитки')" class="category">
<div class="col"> <div v-for="n in 3" v-bind:key=n class="col">
<Card v-for="item in itemsSubset(1, 'Напитки')" v-bind:key=item.nameEng :item=item /> <Card v-for="item in itemsSubset(n, 'Напитки')" v-bind:key=item.nameEng :item=item :query=query />
</div>
<div class="col">
<Card v-for="item in itemsSubset(2, 'Напитки')" v-bind:key=item.nameEng :item=item />
</div>
<div class="col">
<Card v-for="item in itemsSubset(3, 'Напитки')" v-bind:key=item.nameEng :item=item />
</div> </div>
</div> </div>
</div> </div>
@@ -98,19 +70,58 @@ export default {
}, },
data() { data() {
return { return {
items: items items: items,
query: ''
} }
}, },
methods: { methods: {
itemsSubset: function(col, category) { itemsSubset: function(col, category) {
return this.items.filter((v, i) => (i % 3 === col-1) && category.includes(v.category)); return this.items.filter((v, i) => (i % 3 === col-1) && category.includes(v.category));
},
categoryLength: function(category) {
let cropped = this.items.filter((v) => category.includes(v.category));
let result = cropped.filter((v) => v.name.toLowerCase().includes(this.query.toLowerCase()));
return result.length;
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
#sneakpeek { #menu {
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.4) 0%, rgba(255,255,255,0) 100%);
padding-top: 80px;
padding-bottom: 40px;
margin-bottom: 60px;
}
#menu input {
color: #b4a89c;
background-color: #F8F3E7;
font-size: 16px;
font-weight: 700;
text-align: center;
padding: 12px;
width: 40em;
border: none;
border-bottom: 2px solid #F8F3E7;
border-radius: 6px;
background-image: url("../assets/search.svg");
background-repeat: no-repeat;
background-position: center left;
background-size: 2em;
background-position-x: 20px;
}
#menu input:focus {
outline: none;
border-bottom: 2px solid #b4a89c;
color: #3a3a3a;
}
.buttons {
max-width: 100%; max-width: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -118,33 +129,28 @@ export default {
justify-content: space-evenly; justify-content: space-evenly;
padding-left: 10%; padding-left: 10%;
padding-right: 10%; padding-right: 10%;
margin-bottom: 60px; margin-bottom: 30px;
padding-top: 80px;
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.4) 0%, rgba(255,255,255,0) 100%);
} }
#sneakpeek h4 { .buttons h4 {
font-family: 'Playfair Display', serif; font-family: 'Playfair Display', serif;
font-size: 17px; font-size: 17px;
font-weight: 100; font-weight: 100;
color: #3a3a3a; color: #3a3a3a;
} }
#sneakpeek a { .buttons a {
width: 204.8px; width: 204.8px;
transition: transform .2s; transition: transform .2s;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
} }
#sneakpeek a:hover { .buttons a:hover {
transform: scale(1.05); transform: scale(1.05);
} }
#sneakpeek img { .buttons img {
width: 70%; width: 70%;
border: rgb(253, 253, 253) solid; border: rgb(253, 253, 253) solid;
border-radius: 100%; border-radius: 100%;
@@ -195,16 +201,23 @@ h2::before {
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
#sneakpeek { #menu {
padding-top: 4vh;
padding-bottom: 4vh;
}
#menu input {
width: 85%;
}
.buttons {
padding: 0px; padding: 0px;
padding-top: 2vh;
} }
.category { .category {
display: inline-block; display: inline-block;
padding: 0px; padding: 0px;
padding-left: 5vh; width: 90%;
padding-right: 5vh;
} }
.col { .col {