mirror of
https://github.com/anatolykopyl/bakery.git
synced 2026-03-26 13:04:27 +00:00
Initial commit
This commit is contained in:
BIN
assets/bread-for-breakfast-on-table.jpg
Normal file
BIN
assets/bread-for-breakfast-on-table.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 878 KiB |
BIN
assets/bread-tab.psd
Normal file
BIN
assets/bread-tab.psd
Normal file
Binary file not shown.
BIN
assets/brick.png
Normal file
BIN
assets/brick.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
assets/bricktile.png
Normal file
BIN
assets/bricktile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
BIN
assets/chocolate-cookies.jpg
Normal file
BIN
assets/chocolate-cookies.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
assets/head.jpg
Normal file
BIN
assets/head.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
2492
assets/items.json
Normal file
2492
assets/items.json
Normal file
File diff suppressed because one or more lines are too long
BIN
assets/items.xlsx
Normal file
BIN
assets/items.xlsx
Normal file
Binary file not shown.
2492
assets/items_fixed.js
Normal file
2492
assets/items_fixed.js
Normal file
File diff suppressed because it is too large
Load Diff
BIN
assets/logo.png
Normal file
BIN
assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 257 KiB |
BIN
assets/marker.psd
Normal file
BIN
assets/marker.psd
Normal file
Binary file not shown.
BIN
assets/napkin.jpg
Normal file
BIN
assets/napkin.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
assets/napkin.psd
Normal file
BIN
assets/napkin.psd
Normal file
Binary file not shown.
BIN
assets/red-ceramic-mug-on-red-saucer.jpg
Normal file
BIN
assets/red-ceramic-mug-on-red-saucer.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
5
package-lock.json
generated
5
package-lock.json
generated
@@ -10609,6 +10609,11 @@
|
|||||||
"integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
|
"integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"vue-yandex-maps": {
|
||||||
|
"version": "0.10.9",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue-yandex-maps/-/vue-yandex-maps-0.10.9.tgz",
|
||||||
|
"integrity": "sha512-gDRU3bGFGxMYE8XFcyrSndRzxTC6opvKL4WvIhMRD8SctObQWdonI0h2NpU8Srn5ge8MV5a9QDjQs9Mrqj+slA=="
|
||||||
|
},
|
||||||
"watchpack": {
|
"watchpack": {
|
||||||
"version": "1.7.4",
|
"version": "1.7.4",
|
||||||
"resolved": "https://registry.npm.taobao.org/watchpack/download/watchpack-1.7.4.tgz?cache=0&sync_timestamp=1595633479247&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwatchpack%2Fdownload%2Fwatchpack-1.7.4.tgz",
|
"resolved": "https://registry.npm.taobao.org/watchpack/download/watchpack-1.7.4.tgz?cache=0&sync_timestamp=1595633479247&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwatchpack%2Fdownload%2Fwatchpack-1.7.4.tgz",
|
||||||
|
|||||||
@@ -10,7 +10,8 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
"vue": "^2.6.11",
|
"vue": "^2.6.11",
|
||||||
"vue-router": "^3.2.0"
|
"vue-router": "^3.2.0",
|
||||||
|
"vue-yandex-maps": "^0.10.9"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/cli-plugin-babel": "~4.4.0",
|
"@vue/cli-plugin-babel": "~4.4.0",
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 15 KiB |
@@ -4,8 +4,8 @@
|
|||||||
<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="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="favicon.ico">
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<title>Булочные Ф. Вольчека</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
|
|||||||
121
src/App.vue
121
src/App.vue
@@ -1,32 +1,135 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<div id="nav">
|
<div id="nav">
|
||||||
<router-link to="/">Home</router-link> |
|
<span class="tiny-logo">
|
||||||
<router-link to="/about">About</router-link>
|
<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>
|
</div>
|
||||||
<router-view/>
|
<router-view id="router-view" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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>
|
<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 {
|
#app {
|
||||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #2c3e50;
|
background: radial-gradient(100% 150.53% at 16.91% 0%, #F8F3E7 0%, rgba(248, 243, 231, 0.06) 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
#nav {
|
#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 {
|
#nav a {
|
||||||
font-weight: bold;
|
color: #656565;
|
||||||
color: #2c3e50;
|
margin-left: 30px;
|
||||||
|
margin-right: 30px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav a:hover {
|
||||||
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
#nav a.router-link-exact-active {
|
#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>
|
</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>
|
|
||||||
@@ -11,12 +11,22 @@ Vue.use(VueRouter)
|
|||||||
component: Home
|
component: Home
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/about',
|
path: '/goods',
|
||||||
name: 'About',
|
name: 'Goods',
|
||||||
// route level code-splitting
|
// route level code-splitting
|
||||||
// this generates a separate chunk (about.[hash].js) for this route
|
// this generates a separate chunk (about.[hash].js) for this route
|
||||||
// which is lazy-loaded when the route is visited.
|
// which is lazy-loaded when the route is visited.
|
||||||
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
|
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')
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
@@ -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>
|
<template>
|
||||||
<div class="home">
|
<div id="home">
|
||||||
<img alt="Vue logo" src="../assets/logo.png">
|
<Header/>
|
||||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// @ is an alias to /src
|
import { yandexMap, ymapMarker } from 'vue-yandex-maps'
|
||||||
import HelloWorld from '@/components/HelloWorld.vue'
|
import Header from "@/components/Header.vue";
|
||||||
|
import AddressList from "@/components/AddressList.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Home',
|
name: "Home",
|
||||||
components: {
|
components: {
|
||||||
HelloWorld
|
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>
|
</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