mirror of
https://github.com/anatolykopyl/bakery.git
synced 2026-03-26 13:04:27 +00:00
Initial commit
This commit is contained in:
133
src/App.vue
133
src/App.vue
@@ -1,32 +1,135 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div id="nav">
|
||||
<router-link to="/">Home</router-link> |
|
||||
<router-link to="/about">About</router-link>
|
||||
<div id="app">
|
||||
<div id="nav">
|
||||
<span class="tiny-logo">
|
||||
<img class="tiny-logo" src="@/assets/flag.png" v-bind:style='{ "transform": tinyOffset }'>
|
||||
</span>
|
||||
<span id="links">
|
||||
<router-link to="/">Главная</router-link>
|
||||
<router-link to="/goods">Ассортимент</router-link>
|
||||
<router-link to="/order">Заказ</router-link>
|
||||
<router-link to="/contact-us">Контакты</router-link>
|
||||
</span>
|
||||
</div>
|
||||
<router-view id="router-view" />
|
||||
</div>
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App',
|
||||
data() {
|
||||
return {
|
||||
tinyOffset: "translateY(-100px)"
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleScroll: function() {
|
||||
let offset = window.scrollY/3-100;
|
||||
offset = Math.min(0, offset);
|
||||
this.tinyOffset = "translateY("+offset+"px)";
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('scroll', this.handleScroll);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,700&family=Raleway:wght@100;200;300&display=swap');
|
||||
|
||||
* {
|
||||
/*font-family: 'Playfair Display', serif;*/
|
||||
font-family: 'Raleway', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 40px;
|
||||
color: #3a3a3a;
|
||||
}
|
||||
|
||||
.light {
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
#router-view {
|
||||
margin-top: 59px;
|
||||
}
|
||||
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
background: radial-gradient(100% 150.53% at 16.91% 0%, #F8F3E7 0%, rgba(248, 243, 231, 0.06) 100%);
|
||||
}
|
||||
|
||||
#nav {
|
||||
padding: 30px;
|
||||
width: 90%;
|
||||
height: 59px;
|
||||
padding-right: 300px;
|
||||
background-color: #FAEED1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
z-index: 10000;
|
||||
/*box-shadow: 0px 0px 6px black;*/
|
||||
}
|
||||
|
||||
#nav a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
color: #656565;
|
||||
margin-left: 30px;
|
||||
margin-right: 30px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#nav a:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
#nav a.router-link-exact-active {
|
||||
color: #42b983;
|
||||
color: black;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
img.tiny-logo {
|
||||
width: auto;
|
||||
height: 100px;
|
||||
margin-top: 44px;
|
||||
margin-left: 150px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
#nav {
|
||||
width: 100%;
|
||||
height: 59px;
|
||||
padding-right: 0px;
|
||||
background-color: #FAEED1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#nav a {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
span.tiny-logo {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#links {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
src/assets/bread-tab.png
Normal file
BIN
src/assets/bread-tab.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
BIN
src/assets/down.png
Normal file
BIN
src/assets/down.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
src/assets/flag.png
Normal file
BIN
src/assets/flag.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 258 KiB |
BIN
src/assets/head.png
Normal file
BIN
src/assets/head.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 546 KiB |
BIN
src/assets/headcut.png
Normal file
BIN
src/assets/headcut.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 604 KiB |
2492
src/assets/items.js
Normal file
2492
src/assets/items.js
Normal file
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
BIN
src/assets/marker.png
Normal file
BIN
src/assets/marker.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
BIN
src/assets/metro.png
Normal file
BIN
src/assets/metro.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
src/assets/napkin.png
Normal file
BIN
src/assets/napkin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 619 KiB |
430
src/components/AddressList.vue
Normal file
430
src/components/AddressList.vue
Normal file
@@ -0,0 +1,430 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-on:scroll="handleScroll" id="address-list">
|
||||
<div class="address" v-for="bakery in bakeries" v-bind:key="bakery.n"
|
||||
v-bind:class="{ 'inactive': bakery.hours.includes('закрыта'), 'selected': selected===bakery.n }"
|
||||
v-on:click="select(bakery.n)">
|
||||
<h3>{{ bakery.address }}</h3>
|
||||
<img src="@/assets/metro.png" /> <span class="light">{{ bakery.metro }}</span>
|
||||
<br />
|
||||
<span>{{ bakery.hours }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<img v-if="showHint" id="scroll-hint" src="@/assets/down.png">
|
||||
<br />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AddressList",
|
||||
data() {
|
||||
return {
|
||||
selected: 1,
|
||||
bakeries: [
|
||||
{
|
||||
n: 1,
|
||||
address: "Парашютная ул., д.27 к.1",
|
||||
metro: "Комендантский пр.",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 4,
|
||||
address: "Комендантский пр., д.34 к.1",
|
||||
metro: "Комендантский пр.",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 3,
|
||||
address: "Приморский пр., д.137 к.1",
|
||||
metro: "Беговая",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 9,
|
||||
address: "Смолячкова ул., д.11",
|
||||
metro: "Выборгская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 11,
|
||||
address: "Лесной пр., д.5",
|
||||
metro: "Площадь Ленина",
|
||||
hours: "закрыта",
|
||||
},
|
||||
{
|
||||
n: 12,
|
||||
address: "Александра Матросова ул., д.9",
|
||||
metro: "Лесная",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 5,
|
||||
address: "Суворовский пр., д.6",
|
||||
metro: "Площадь Восстания",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 6,
|
||||
address: "Среднеохтинский пр., д.25",
|
||||
metro: "Новочеркасская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 10,
|
||||
address: "Маяковского ул., д.28",
|
||||
metro: "Маяковская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 7,
|
||||
address: "Московский пр., д.7",
|
||||
metro: "Садовая",
|
||||
hours: "закрыта",
|
||||
},
|
||||
{
|
||||
n: 13,
|
||||
address: "Сытнинская ул., д.10",
|
||||
metro: "Горьковская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 14,
|
||||
address: "Бассейная ул., д.39",
|
||||
metro: "Парк Победы",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 15,
|
||||
address: "Кузнечный пер., д.8",
|
||||
metro: "Владимирская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 16,
|
||||
address: "Композиторов пр., д.12",
|
||||
metro: "Проспект Просвещения",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 17,
|
||||
address: "Мытнинская ул., д.20",
|
||||
metro: "Площадь Восстания",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 8,
|
||||
address: "Энгельса пр., д.113 к.2",
|
||||
metro: "Озерки",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 2,
|
||||
address: "Светлановский пр., д.66",
|
||||
metro: "Гражданский проспект",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 18,
|
||||
address: "Брянцева ул., д.20",
|
||||
metro: "Гражданский проспект",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 20,
|
||||
address: "Среднеохтинский пр., д.53",
|
||||
metro: "Новочеркасская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 19,
|
||||
address: "Ланское ш., д.14",
|
||||
metro: "Черная речка",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 41,
|
||||
address: "Стачек пр., д.4",
|
||||
metro: "Нарвская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 43,
|
||||
address: "Фурштатская ул., д.42",
|
||||
metro: "Чернышевская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 48,
|
||||
address: "7-линия В.О., д.28",
|
||||
metro: "Василеостровская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 45,
|
||||
address: "Греческий пр., д.27",
|
||||
metro: "Площадь Восстания",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 55,
|
||||
address: "Малый пр. В.О., д.75",
|
||||
metro: "Приморская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 53,
|
||||
address: "Малая Морская ул., д.19",
|
||||
metro: "Адмиралтейская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 51,
|
||||
address: "Новочеркасский пр., д.49",
|
||||
metro: "Новочеркасская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 58,
|
||||
address: "Малая Посадская ул., д.7/4",
|
||||
metro: "Горьковская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 46,
|
||||
address: "Лазо ул., д.3",
|
||||
metro: "Ладожская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 61,
|
||||
address: "Льва Толстого ул., д.4",
|
||||
metro: "Петроградская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 59,
|
||||
address: "Седова ул., д.89",
|
||||
metro: "Ломоносовская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 64,
|
||||
address: "Заневский пр., д.23",
|
||||
metro: "Новочеркасская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 63,
|
||||
address: "Художников ул., д.30",
|
||||
metro: "Проспект Просвещения",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 66,
|
||||
address: "Моховая ул., д.27-29",
|
||||
metro: "Чернышевская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 73,
|
||||
address: "Типанова ул., д.8",
|
||||
metro: "Московская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 76,
|
||||
address: "Малый пр. ВО, д.45",
|
||||
metro: "Василеостровская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 74,
|
||||
address: "Гражданская ул., д.18",
|
||||
metro: "Садовая",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 71,
|
||||
address: "Комендантский пр., д.51 к.1",
|
||||
metro: "Комендантский проспект",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 78,
|
||||
address: "Стачек пр., д.69",
|
||||
metro: "Автово",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 81,
|
||||
address: "Федора Абрамова ул., д.18 к.1",
|
||||
metro: "Парнас",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 83,
|
||||
address: "Капитанская ул., д.4",
|
||||
metro: "Приморская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 85,
|
||||
address: "Лиговский пр., д.10/118",
|
||||
metro: "Площадь Восстания",
|
||||
hours: "временно закрыта",
|
||||
},
|
||||
{
|
||||
n: 86,
|
||||
address: "Гаванская ул. д.19/100",
|
||||
metro: "Приморская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 88,
|
||||
address: "Барочная ул. д.8,лит.А",
|
||||
metro: "Петроградская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 89,
|
||||
address: "Литейный пр.,д.64/78",
|
||||
metro: "Маяковская",
|
||||
hours: "8:00 - 0:00",
|
||||
},
|
||||
{
|
||||
n: 87,
|
||||
address: "Торжковская ул.,д.1",
|
||||
metro: "Черная речка",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 92,
|
||||
address: "Союза Печатников ул.,д.27",
|
||||
metro: "Садовая",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 96,
|
||||
address: "Римского Корсакова пр.,д.8/18",
|
||||
metro: "Садовая",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 99,
|
||||
address: "Федора Абрамова ул.,д.17",
|
||||
metro: "Парнас",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 101,
|
||||
address: "Наставников пр.,д.21,лит.А",
|
||||
metro: "Ладожская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 102,
|
||||
address: "г.Мурино, Бульвар Менделеева,д.11,к.1",
|
||||
metro: "Девяткино",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 103,
|
||||
address: "Планерная ул.,д.63,к.1,лит.А",
|
||||
metro: "Комендантский проспект",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
{
|
||||
n: 106,
|
||||
address: "Каменноостровский пр.,д.29,лит.А",
|
||||
metro: "Петроградская",
|
||||
hours: "8:00 - 22:00",
|
||||
},
|
||||
],
|
||||
showHint: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
select: function(n) {
|
||||
this.selected = n;
|
||||
this.$emit('selected', this.selected);
|
||||
},
|
||||
handleScroll: function() {
|
||||
this.showHint = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#address-list {
|
||||
overflow: auto;
|
||||
height: 660px;
|
||||
width: 500px;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#scroll-hint {
|
||||
opacity: 0.75;
|
||||
width: 50px;
|
||||
margin-top: -60px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.inactive {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.selected h3 {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
.address {
|
||||
text-align: left;
|
||||
border-style: solid;
|
||||
border-color: transparent;
|
||||
border-width: 1px;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.address:hover {
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
.address h3 {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.address img {
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
#address-list {
|
||||
height: 100%;
|
||||
width: 90%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#scroll-hint {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
72
src/components/Card.vue
Normal file
72
src/components/Card.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div class="card" v-on:click='expanded=!expanded'>
|
||||
<h4>{{ item.name }}</h4>
|
||||
<p>{{ item.mainIng }}</p>
|
||||
<p v-if=expanded class="light">{{ item.ing }}</p>
|
||||
<span class="footer">
|
||||
<p>{{item.mass}} {{item.unit}}</p>
|
||||
<p v-if=expanded class='light'>
|
||||
{{ item.energ }}<br />
|
||||
Б: {{item.prots}}, Ж: {{item.fats}}, У: {{item.carbs}}
|
||||
</p>
|
||||
<p class="price">{{ item.cost }}</p>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Card",
|
||||
props: {
|
||||
item: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
expanded: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
border: black solid;
|
||||
border-width: 1px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 40px;
|
||||
padding: 10px;
|
||||
padding-top: 30px;
|
||||
transition: transform .2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
background-color: rgba(233, 213, 160, 0.2);
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 0px;
|
||||
margin-bottom: 14px;
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
color: #3a3a3a;
|
||||
}
|
||||
|
||||
p:first-letter {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.light {
|
||||
font-size: smaller;
|
||||
}
|
||||
</style>
|
||||
26
src/components/Header.vue
Normal file
26
src/components/Header.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div id="header"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Header",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#header {
|
||||
background: url('../assets/headcut.png') no-repeat center;
|
||||
height: 388px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
#header {
|
||||
background: url('../assets/head.png') no-repeat center;
|
||||
background-size: contain;
|
||||
height: 0;
|
||||
padding-top: 17.25%; /* (img-height / img-width * container-width) */
|
||||
/* (388 / 2000 * 100) */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,59 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
@@ -5,6 +5,6 @@ import router from './router'
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
render: h => h(App)
|
||||
router,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
||||
@@ -4,26 +4,36 @@ import Home from '../views/Home.vue'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'About',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
|
||||
}
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
path: '/goods',
|
||||
name: 'Goods',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import(/* webpackChunkName: "about" */ '../views/Goods.vue')
|
||||
},
|
||||
{
|
||||
path: '/order',
|
||||
name: 'Order',
|
||||
component: () => import(/* webpackChunkName: "about" */ '../views/Order.vue')
|
||||
},
|
||||
{
|
||||
path: '/contact-us',
|
||||
name: 'Contact',
|
||||
component: () => import(/* webpackChunkName: "about" */ '../views/Contact.vue')
|
||||
}
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
base: process.env.BASE_URL,
|
||||
routes
|
||||
mode: 'history',
|
||||
base: process.env.BASE_URL,
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
5
src/views/Contact.vue
Normal file
5
src/views/Contact.vue
Normal file
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
Обратная связь
|
||||
</div>
|
||||
</template>
|
||||
167
src/views/Goods.vue
Normal file
167
src/views/Goods.vue
Normal file
@@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<div class="goods">
|
||||
<div id="sneakpeek">
|
||||
<div href="#pastry">
|
||||
<img src="@/assets/bread-tab.png">
|
||||
<h4>Кондитерские изделия</h4>
|
||||
</div>
|
||||
<div href="#singles">
|
||||
<img src="@/assets/bread-tab.png">
|
||||
<h4>Мелкоштучные изделия</h4>
|
||||
</div>
|
||||
<div href="#pies">
|
||||
<img src="@/assets/bread-tab.png">
|
||||
<h4>Пироги</h4>
|
||||
</div>
|
||||
<div href="#bread">
|
||||
<img src="@/assets/bread-tab.png">
|
||||
<h4>Хлеба и багеты</h4>
|
||||
</div>
|
||||
<div href="#drinks">
|
||||
<img src="@/assets/bread-tab.png">
|
||||
<h4>Напитки</h4>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Кондитерские изделия:</h2>
|
||||
<div class="category">
|
||||
<div class="col">
|
||||
<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 />
|
||||
</div>
|
||||
<div class="col">
|
||||
<Card v-for="item in itemsSubset(3, ['Кондитерские изделия', 'Леденцы', 'Печенье'])" v-bind:key=item.nameEng :item=item />
|
||||
</div>
|
||||
</div>
|
||||
<h2>Мелкоштучные изделия:</h2>
|
||||
<div class="category">
|
||||
<div class="col">
|
||||
<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 />
|
||||
</div>
|
||||
<div class="col">
|
||||
<Card v-for="item in itemsSubset(3, 'Мелкоштучные изделия')" v-bind:key=item.nameEng :item=item />
|
||||
</div>
|
||||
</div>
|
||||
<h2>Пироги:</h2>
|
||||
<div class="category">
|
||||
<div class="col">
|
||||
<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 />
|
||||
</div>
|
||||
<div class="col">
|
||||
<Card v-for="item in itemsSubset(3, 'Пироги')" v-bind:key=item.nameEng :item=item />
|
||||
</div>
|
||||
</div>
|
||||
<h2>Хлеба и багеты:</h2>
|
||||
<div class="category">
|
||||
<div class="col">
|
||||
<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 />
|
||||
</div>
|
||||
<div class="col">
|
||||
<Card v-for="item in itemsSubset(3, 'Хлеба, багеты')" v-bind:key=item.nameEng :item=item />
|
||||
</div>
|
||||
</div>
|
||||
<h2>Напитки:</h2>
|
||||
<div class="category">
|
||||
<div class="col">
|
||||
<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 />
|
||||
</div>
|
||||
<div class="col">
|
||||
<Card v-for="item in itemsSubset(3, 'Напитки')" v-bind:key=item.nameEng :item=item />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Card from "@/components/Card.vue";
|
||||
import items from '@/assets/items.js'
|
||||
|
||||
export default {
|
||||
name: "Goods",
|
||||
components: {
|
||||
Card
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
items: items
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
itemsSubset: function(col, category) {
|
||||
return this.items.filter((v, i) => (i % 3 === col-1) && category.includes(v.category));
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#sneakpeek {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
padding-left: 10%;
|
||||
padding-right: 10%;
|
||||
margin-bottom: 60px;
|
||||
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.49763655462184875) 0%, rgba(255,255,255,0) 100%);
|
||||
}
|
||||
|
||||
#sneakpeek h4 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-size: 17px;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
#sneakpeek div {
|
||||
width: 20%;
|
||||
transition: transform .2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#sneakpeek img {
|
||||
width: 70%;
|
||||
/*border: white solid;
|
||||
border-radius: 100%;*/
|
||||
}
|
||||
|
||||
#sneakpeek div:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: left;
|
||||
margin-left: 50px;
|
||||
font-family: 'Playfair Display', serif;
|
||||
font-weight: 500;
|
||||
font-size: 30px;
|
||||
color: #3a3a3a;
|
||||
}
|
||||
|
||||
.category {
|
||||
display: flex;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.col {
|
||||
width: 33.33%;
|
||||
padding: 30px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,18 +1,238 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<img alt="Vue logo" src="../assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
</div>
|
||||
<div id="home">
|
||||
<Header/>
|
||||
<h1>Любимые булочные Северной Столицы</h1>
|
||||
<div id="map">
|
||||
<div id="napkin">
|
||||
<yandex-map :settings=settings :coords=markers[selected] :zoom=16>
|
||||
<ymap-marker v-for="marker in markers" v-bind:key="marker.join()"
|
||||
marker-id=marker
|
||||
:coords=marker
|
||||
:icon=markerIcon
|
||||
/>
|
||||
</yandex-map>
|
||||
</div>
|
||||
<AddressList v-on:selected="selectMarker" />
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import HelloWorld from '@/components/HelloWorld.vue'
|
||||
import { yandexMap, ymapMarker } from 'vue-yandex-maps'
|
||||
import Header from "@/components/Header.vue";
|
||||
import AddressList from "@/components/AddressList.vue";
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
HelloWorld
|
||||
}
|
||||
}
|
||||
name: "Home",
|
||||
components: {
|
||||
Header,
|
||||
yandexMap,
|
||||
ymapMarker,
|
||||
AddressList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selected: 1,
|
||||
settings: {
|
||||
apiKey: '40a5e665-b4d4-4f22-8443-0482b3e0053d',
|
||||
lang: 'ru_RU',
|
||||
coordorder: 'latlong',
|
||||
version: '2.1'
|
||||
},
|
||||
markers: {
|
||||
'1': [60.019534, 30.268610],
|
||||
'2': [60.040288, 30.398212],
|
||||
'3': [59.983603, 30.215427],
|
||||
'4': [60.022674, 30.240786],
|
||||
'5': [59.932976, 30.368614],
|
||||
'6': [59.953303, 30.415903],
|
||||
'7': [60.004088, 30.300681],
|
||||
'8': [60.038039, 30.326816],
|
||||
'9': [59.970499, 30.341647],
|
||||
'10': [59.938549, 30.355006],
|
||||
'11': [59.962553, 30.352343],
|
||||
'12': [59.982757, 30.346958],
|
||||
'13': [59.957663, 30.307750],
|
||||
'14': [59.864632, 30.319245],
|
||||
'15': [59.927508, 30.350922],
|
||||
'16': [60.052189, 30.314933],
|
||||
'17': [59.934856, 30.378606],
|
||||
'18': [60.038839, 30.405275],
|
||||
'19': [59.994016, 30.310741],
|
||||
'20': [59.959597, 30.415967],
|
||||
'21': [59.836469, 30.351999],
|
||||
'22': [60.040347, 30.324675],
|
||||
'23': [59.943110, 30.275743],
|
||||
'24': [59.952298, 30.297081],
|
||||
'25': [59.914175, 30.449498],
|
||||
'26': [59.927354, 30.316987],
|
||||
'27': [59.921173, 30.353383],
|
||||
'28': [59.926731, 30.307987],
|
||||
'29': [59.927828, 30.407583],
|
||||
'30': [59.832788, 30.203817],
|
||||
'31': [59.925929, 30.342349],
|
||||
'32': [59.963367, 30.302220],
|
||||
'33': [59.958633, 30.288242],
|
||||
'34': [59.866481, 30.264656],
|
||||
'35': [59.915880, 30.314319],
|
||||
'36': [59.960433, 30.290667],
|
||||
'37': [59.959355, 30.295555],
|
||||
'38': [60.017525, 30.315038],
|
||||
'39': [59.922243, 30.307789],
|
||||
'40': [59.910719, 30.297352],
|
||||
'41': [59.899427, 30.275482],
|
||||
'42': [59.922892, 30.350467],
|
||||
'43': [59.945306, 30.361815],
|
||||
'44': [59.930193, 30.319261],
|
||||
'45': [59.938186, 30.369766],
|
||||
'46': [59.956828, 30.485993],
|
||||
'47': [59.921102, 30.491868],
|
||||
'48': [59.940178, 30.281666],
|
||||
'49': [59.935899, 30.363927],
|
||||
'50': [59.903951, 30.469366],
|
||||
'51': [59.924953, 30.415569],
|
||||
'52': [59.897988, 30.427450],
|
||||
'53': [59.934959, 30.310318],
|
||||
'54': [60.014588, 30.648427],
|
||||
'55': [59.938001, 30.236196],
|
||||
'56': [59.908516, 30.455867],
|
||||
'57': [59.994694, 30.318336],
|
||||
'58': [59.956973, 30.322109],
|
||||
'59': [59.867924, 30.440858],
|
||||
'60': [59.936094, 30.318888],
|
||||
'61': [59.965660, 30.314216],
|
||||
'62': [59.888725, 30.325089],
|
||||
'63': [60.051935, 30.355862],
|
||||
'64': [59.929482, 30.415728],
|
||||
'65': [59.887040, 30.268858],
|
||||
'66': [59.942060, 30.345025],
|
||||
'67': [59.867763, 30.258727],
|
||||
'68': [59.844575, 30.391391],
|
||||
'69': [59.832684, 30.389438],
|
||||
'70': [59.868641, 30.370757],
|
||||
'71': [60.031207, 30.239017],
|
||||
'72': [59.913286, 30.475319],
|
||||
'73': [59.851895, 30.331793],
|
||||
'74': [59.927575, 30.311345],
|
||||
|
||||
'76': [59.944049, 30.263672],
|
||||
'77': [60.014664, 30.397912],
|
||||
'78': [59.869802, 30.259164],
|
||||
'79': [59.856644, 30.306228],
|
||||
'80': [59.963737, 30.295818],
|
||||
'81': [60.080042, 30.341946],
|
||||
'82': [60.072093, 30.336802],
|
||||
'83': [59.954363, 30.213416],
|
||||
'84': [60.101611, 29.970707],
|
||||
'85': [59.931989, 30.362188],
|
||||
'86': [59.929522, 30.242520],
|
||||
'87': [59.986464, 30.303873],
|
||||
'88': [59.966230, 30.288240],
|
||||
'89': [59.932916, 30.348294],
|
||||
'90': [59.934788, 30.335712],
|
||||
'91': [59.941562, 30.323510],
|
||||
'92': [59.922297, 30.285011],
|
||||
'93': [59.899675, 30.512551],
|
||||
'94': [59.895730, 30.425406],
|
||||
|
||||
'96': [59.924251, 30.306367],
|
||||
'97': [59.940587, 30.360997],
|
||||
'98': [59.938845, 30.349567],
|
||||
'99': [60.077629, 30.343891],
|
||||
'100': [59.925493, 30.379317],
|
||||
'101': [59.946124, 30.492174],
|
||||
'102': [60.053062, 30.427300],
|
||||
'103': [60.023151, 30.220602],
|
||||
'104': [59.945505, 30.285580],
|
||||
|
||||
'106': [59.964458, 30.313182],
|
||||
'107': [59.940763, 30.270929],
|
||||
},
|
||||
markerIcon: {
|
||||
layout: 'default#image',
|
||||
imageHref: 'https://radner.ru/files/marker.png',
|
||||
imageSize: [48, 48],
|
||||
imageOffset: [0, -48]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectMarker: function(n) {
|
||||
this.selected = n;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
margin-bottom: 50px;
|
||||
margin-top: 50px;
|
||||
font-size: 5vh;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
color: #3a3a3a;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.ymap-container {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: darkgray solid 1px;
|
||||
}
|
||||
|
||||
#napkin {
|
||||
padding: 35px;
|
||||
background: url('../assets/napkin.png') no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#map {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.marker {
|
||||
font-family: 'Playfair Display', serif;
|
||||
width: 100px;
|
||||
color: #000000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
#map {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ymap-container {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.ymap-container div {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#napkin {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
#napkin:after {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
9
src/views/Order.vue
Normal file
9
src/views/Order.vue
Normal file
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
ДРУЗЬЯ!<br />
|
||||
Вы можете заказать любую продукцию к Вашему празднику.<br />
|
||||
Для этого необходимо:<br />
|
||||
Оформить заказ у продавца в булочной (в любой день, но не позднее 14:00 накануне дня получения),
|
||||
Оплатить заказ при получении в указанный день.
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user