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-04 14:33:03 +03:00
parent bd2c0bb00d
commit a64fa39e0b
8 changed files with 161 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="favicon.ico"> <link rel="icon" href="/favicon.ico">
<title>Булочные Ф. Вольчека</title> <title>Булочные Ф. Вольчека</title>
</head> </head>
<body> <body>

25
src/App.vue
View File

@@ -1,10 +1,10 @@
<template> <template>
<div id="app"> <div id="app" style="min-height: 100vh;">
<div id="nav"> <div id="nav">
<span class="tiny-logo"> <span class="tiny-logo">
<img class="tiny-logo" src="@/assets/flag.png" v-bind:style='{ "transform": tinyOffset }'> <img class="tiny-logo" src="@/assets/flag.png" v-bind:style='{ "transform": tinyOffset }'>
</span> </span>
<span id="links"> <span id="links" v-on:click="handleScroll">
<router-link to="/" exact>Главная</router-link> <router-link to="/" exact>Главная</router-link>
<router-link to="/goods">Ассортимент</router-link> <router-link to="/goods">Ассортимент</router-link>
<router-link to="/order">Заказ</router-link> <router-link to="/order">Заказ</router-link>
@@ -24,10 +24,18 @@ export default {
} }
}, },
methods: { methods: {
handleScroll: function() { handleScroll: function(event) {
let offset = window.scrollY/3-100; if (event.type === "click" && event.target.text !== "Главная") {
offset = Math.min(0, offset); this.tinyOffset = "translateY(0px)";
this.tinyOffset = "translateY("+offset+"px)"; } else {
if (this.$route.name === "Home") {
let offset = window.scrollY/3-100;
offset = Math.min(0, offset);
this.tinyOffset = "translateY("+offset+"px)";
} else {
this.tinyOffset = "translateY(0px)";
}
}
} }
}, },
mounted() { mounted() {
@@ -110,6 +118,7 @@ img.tiny-logo {
#nav { #nav {
width: 100%; width: 100%;
height: 59px; height: 59px;
padding-left: 0px;
padding-right: 0px; padding-right: 0px;
background-color: #FAEED1; background-color: #FAEED1;
position: fixed; position: fixed;
@@ -119,6 +128,10 @@ img.tiny-logo {
justify-content: space-between; justify-content: space-between;
} }
#nav span#links {
width: 100%;
}
#nav a { #nav a {
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;

BIN
src/assets/interior.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 188 KiB

BIN
src/assets/interior.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 959 KiB

23
src/components/Card.vue
View File

@@ -4,12 +4,14 @@
<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>
<span class="footer"> <span class="footer">
<p>{{item.mass}} {{item.unit}}</p> <p>{{item.mass}} {{unit}}</p>
<p v-if=expanded class='light'> <p v-if=expanded class='light'>
{{ item.energ }}<br /> {{ item.energ }}<br />
Б: {{item.prots}}, Ж: {{item.fats}}, У: {{item.carbs}} <span v-if="item.prots && item.fats && item.carbs">
Б: {{item.prots}}, Ж: {{item.fats}}, У: {{item.carbs}}
</span>
</p> </p>
<p class="price">{{ item.cost }}</p> <p class="price">{{ cost }}</p>
</span> </span>
</div> </div>
</template> </template>
@@ -24,6 +26,21 @@ export default {
return { return {
expanded: false expanded: false
} }
},
computed: {
// У некоторых товаров цена указана без символа рубля, легче просто его тут добавить.
cost: function() {
return isNaN(this.item.cost) ? this.item.cost : this.item.cost + " ₽"
},
unit: function() {
// У некоторых товаров указана масса, но единицей измерения являются штуки.
// Вероятно стоит еще указывать количество (1 шт.)?
if (this.item.mass < 1 && this.item.unit === "шт.") {
return "кг";
} else {
return this.item.unit;
}
}
} }
} }
</script> </script>

18
src/views/Contact.vue
View File

@@ -1,5 +1,21 @@
<template> <template>
<div> <div>
Обратная связь Телефон: 642-06-38; e-mail: info@fvolchek.ru
ОТДЕЛ ПЕРСОНАЛА:
e-mail: hr@fvolchek.com
ХОТИТЕ КУПИТЬ НАШУ ПРОДУКЦИЮ ОПТОМ:
e-mail: sales-b2b@fvolchek.com
ПРЕДЛОЖИТЕ НАМ:
Товары и услуги: zakupki@fvolchek.com
Предложения по аренде помещений: arenda@fvolchek.com
ЗАДАТЬ ВОПРОС:
e-mail: info@fvolchek.ru
ПО ЛЮБЫМ ВОПРОСАМ:
e-mail: flv@fvolchek.ru, Филипп Вольчек
</div> </div>
</template> </template>

55
src/views/Goods.vue
View File

@@ -1,5 +1,7 @@
<template> <template>
<div class="goods"> <div class="goods">
<a id="top"></a>
<a class="jump-to-top" href="#top"><img src="@/assets/down.png"></a>
<div id="sneakpeek"> <div id="sneakpeek">
<a href="#pastry"> <a href="#pastry">
<img src="@/assets/pastry-tab.png"> <img src="@/assets/pastry-tab.png">
@@ -61,13 +63,13 @@
<h2 id="bread">Хлеба и багеты:</h2> <h2 id="bread">Хлеба и багеты:</h2>
<div class="category"> <div class="category">
<div class="col"> <div class="col">
<Card v-for="item in itemsSubset(1, 'Хлеба, багеты')" v-bind:key=item.nameEng :item=item /> <Card v-for="item in itemsSubset(1, ['Хлеба, багеты', 'Сухарики'])" v-bind:key=item.nameEng :item=item />
</div> </div>
<div class="col"> <div class="col">
<Card v-for="item in itemsSubset(2, 'Хлеба, багеты')" v-bind:key=item.nameEng :item=item /> <Card v-for="item in itemsSubset(2, ['Хлеба, багеты', 'Сухарики'])" v-bind:key=item.nameEng :item=item />
</div> </div>
<div class="col"> <div class="col">
<Card v-for="item in itemsSubset(3, 'Хлеба, багеты')" v-bind:key=item.nameEng :item=item /> <Card v-for="item in itemsSubset(3, ['Хлеба, багеты', 'Сухарики'])" v-bind:key=item.nameEng :item=item />
</div> </div>
</div> </div>
<h2 id="drinks">Напитки:</h2> <h2 id="drinks">Напитки:</h2>
@@ -109,9 +111,10 @@ export default {
<style scoped> <style scoped>
#sneakpeek { #sneakpeek {
max-width: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: top;
justify-content: space-evenly; justify-content: space-evenly;
padding-left: 10%; padding-left: 10%;
padding-right: 10%; padding-right: 10%;
@@ -131,7 +134,7 @@ export default {
} }
#sneakpeek a { #sneakpeek a {
width: 20%; width: 204.8px;
transition: transform .2s; transition: transform .2s;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
@@ -145,13 +148,13 @@ export default {
width: 70%; width: 70%;
border: rgb(253, 253, 253) solid; border: rgb(253, 253, 253) solid;
border-radius: 100%; border-radius: 100%;
border-width: 8px; border-width: 0.35vw;
filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.4)); filter: drop-shadow(0.35vw 0.35vw 0.35vw rgba(0, 0, 0, 0.4));
} }
h2 { h2 {
text-align: left; text-align: left;
margin-left: 50px; margin-left: 5vh;
font-family: 'Playfair Display', serif; font-family: 'Playfair Display', serif;
font-weight: 500; font-weight: 500;
font-size: 30px; font-size: 30px;
@@ -177,4 +180,40 @@ h2::before {
width: 33.33%; width: 33.33%;
padding: 30px; padding: 30px;
} }
.jump-to-top {
position: fixed;
opacity: 0.75;
right: 2vw;
bottom: 2vw;
z-index: 100;
}
.jump-to-top img {
width: 10vh;
transform: rotate(180deg);
}
@media screen and (max-width: 1024px) {
#sneakpeek {
padding: 0px;
padding-top: 2vh;
}
.category {
display: inline-block;
padding: 0px;
padding-left: 5vh;
padding-right: 5vh;
}
.col {
width: 100%;
padding: 0px;
}
.jump-to-top img {
width: 15vw;
}
}
</style> </style>

62
src/views/Order.vue
View File

@@ -1,9 +1,59 @@
<template> <template>
<div> <div class="main">
ДРУЗЬЯ!<br /> <img src="@/assets/interior.png">
Вы можете заказать любую продукцию к Вашему празднику.<br /> <div class='text'>
Для этого необходимо:<br /> <h2>ДРУЗЬЯ!</h2>
Оформить заказ у продавца в булочной (в любой день, но не позднее 14:00 накануне дня получения), Вы можете заказать любую продукцию к Вашему празднику.<br />
Оплатить заказ при получении в указанный день. Для этого необходимо:<br />
Оформить заказ у продавца в булочной (в любой день, но не позднее 14:00 накануне дня получения),
оплатить заказ при получении в указанный день.
</div>
</div> </div>
</template> </template>
<style scoped>
.main {
display: flex;
align-items: center;
justify-content: space-between;
padding: 70px;
padding-top: 70px;
}
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));
}
.text {
width: 40%;
}
h2 {
margin-top: 0px;
font-family: 'Playfair Display', serif;
font-weight: 500;
font-size: 30px;
color: #3a3a3a;
}
@media screen and (max-width: 1024px) {
.main {
display: inherit;
}
img {
width: 80%;
height: auto;
}
.text {
width: 100%;
}
}
</style>