Адаптивный ассортимент

2026-03-26 04:54:26 +00:00 · 2020-08-04 14:33:03 +03:00
parent bd2c0bb00d
commit a64fa39e0b
8 changed files with 161 additions and 26 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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>
  </head>
  <body>
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,10 @@
 <template>
-    <div id="app">
+    <div id="app" style="min-height: 100vh;">
        <div id="nav">
            <span class="tiny-logo">
                <img class="tiny-logo" src="@/assets/flag.png" v-bind:style='{ "transform": tinyOffset }'>
            </span>
-            <span id="links">
+            <span id="links" v-on:click="handleScroll">
                <router-link to="/" exact>Главная</router-link>
                <router-link to="/goods">Ассортимент</router-link>
                <router-link to="/order">Заказ</router-link>
@@ -24,10 +24,18 @@ export default {
        }
    },
    methods: {
-        handleScroll: function() {
-            let offset = window.scrollY/3-100;
-            offset = Math.min(0, offset);
-            this.tinyOffset = "translateY("+offset+"px)";
+        handleScroll: function(event) {
+            if (event.type === "click" && event.target.text !== "Главная") {
+                this.tinyOffset = "translateY(0px)";
+            } 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() {
@@ -110,6 +118,7 @@ img.tiny-logo {
    #nav {
        width: 100%;
        height: 59px;
+        padding-left: 0px;
        padding-right: 0px;
        background-color: #FAEED1;
        position: fixed;
@@ -119,6 +128,10 @@ img.tiny-logo {
        justify-content: space-between;
    }

+    #nav span#links {
+        width: 100%;
+    }
+        
    #nav a {
        margin-left: 10px;
        margin-right: 10px;
--- a/src/assets/interior.jpg
+++ b/src/assets/interior.jpg
--- a/src/assets/interior.png
+++ b/src/assets/interior.png
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -4,12 +4,14 @@
        <p>{{ item.mainIng }}</p>
        <p v-if=expanded class="light">{{ item.ing }}</p>
        <span class="footer">
-            <p>{{item.mass}} {{item.unit}}</p>
+            <p>{{item.mass}} {{unit}}</p>
            <p v-if=expanded class='light'>
                {{ 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 class="price">{{ item.cost }}</p>
+            <p class="price">{{ cost }}</p>
        </span>
    </div>
 </template>
@@ -24,6 +26,21 @@ export default {
        return {
            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>
--- a/src/views/Contact.vue
+++ b/src/views/Contact.vue
@@ -1,5 +1,21 @@
 <template>
    <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>
 </template>
--- a/src/views/Goods.vue
+++ b/src/views/Goods.vue
@@ -1,5 +1,7 @@
 <template>
    <div class="goods">
+        <a id="top"></a>
+        <a class="jump-to-top" href="#top"><img src="@/assets/down.png"></a>
        <div id="sneakpeek">
            <a href="#pastry">
                <img src="@/assets/pastry-tab.png">
@@ -61,13 +63,13 @@
        <h2 id="bread">Хлеба и багеты:</h2>
        <div class="category">
            <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 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 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>
        <h2 id="drinks">Напитки:</h2>
@@ -109,9 +111,10 @@ export default {

 <style scoped>
 #sneakpeek {
+    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
-    align-items: center;
+    align-items: top;
    justify-content: space-evenly;
    padding-left: 10%;
    padding-right: 10%;
@@ -131,7 +134,7 @@ export default {
 }

 #sneakpeek a {
-    width: 20%;
+    width: 204.8px;
    transition: transform .2s;
    cursor: pointer;
    text-decoration: none;
@@ -145,13 +148,13 @@ export default {
    width: 70%;
    border: rgb(253, 253, 253) solid;
    border-radius: 100%;
-    border-width: 8px;
-    filter: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.4));
+    border-width: 0.35vw;
+    filter: drop-shadow(0.35vw 0.35vw 0.35vw rgba(0, 0, 0, 0.4));
 }

 h2 {
    text-align: left;
-    margin-left: 50px;
+    margin-left: 5vh;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 30px;
@@ -177,4 +180,40 @@ h2::before {
    width: 33.33%;
    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>
--- a/src/views/Order.vue
+++ b/src/views/Order.vue
@@ -1,9 +1,59 @@
 <template>
-    <div>
-        ДРУЗЬЯ!<br />
-        Вы можете заказать любую продукцию к Вашему празднику.<br />
-        Для этого необходимо:<br />
-        Оформить заказ у продавца в булочной (в любой день, но не позднее 14:00 накануне дня получения),
-        Оплатить заказ при получении в указанный день.
+    <div class="main">
+        <img src="@/assets/interior.png">
+        <div class='text'>
+            <h2>ДРУЗЬЯ!</h2>
+            Вы можете заказать любую продукцию к Вашему празднику.<br />
+            Для этого необходимо:<br />
+            Оформить заказ у продавца в булочной (в любой день, но не позднее 14:00 накануне дня получения),
+            оплатить заказ при получении в указанный день.
+        </div>
    </div>
 </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>