mirror of
https://github.com/anatolykopyl/bakery.git
synced 2026-03-26 04:54:26 +00:00
759 lines
26 KiB
Vue
759 lines
26 KiB
Vue
<template>
|
||
<div class="wrapper">
|
||
<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 }"
|
||
:id="'element'+bakery.n"
|
||
v-on:click="select(bakery.n)">
|
||
<h3>{{ bakery.address }}</h3>
|
||
<img v-if="bakery.metro" src="@/assets/metro.png" alt="Иконка метро"/> <span class="light">{{ bakery.metro }}{{ bakery.location }}</span>
|
||
<br />
|
||
<span>{{ bakery.hours }}</span>
|
||
</div>
|
||
</div>
|
||
<img v-if="showHint" id="scroll-hint" src="@/assets/down.png" alt="Scroll hint">
|
||
<br />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "AddressList",
|
||
props: ['selectedNew'],
|
||
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",
|
||
},
|
||
{
|
||
n: 22,
|
||
address: "Энгельса пр., д.124, к.1, ТК Вояж",
|
||
metro: "Озерки",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 21,
|
||
address: "Пулковская ул., д.10, к.2",
|
||
metro: "Звездная",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 23,
|
||
address: "8-я линия ВО, д.49",
|
||
metro: "Василеостровская",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 25,
|
||
address: "Коллонтай ул. д.5",
|
||
metro: "Проспект Большевиков",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 26,
|
||
address: "Гривцова пер. д.26",
|
||
metro: "Садовая",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 27,
|
||
address: "Разъезжая ул. д.43",
|
||
metro: "Лиговский проспект",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 28,
|
||
address: "наб. Канала Грибоедова, д.79/23",
|
||
metro: "Садовая",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 30,
|
||
address: "Ветеранов пр., д.110",
|
||
metro: "Проспект Ветеранов",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 29,
|
||
address: "Заневский пр., д.9/8",
|
||
metro: "Новочеркасская",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 24,
|
||
address: "Блохина ул. д.23",
|
||
metro: "Спортивная",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 31,
|
||
address: "Разъезжая ул., д.1",
|
||
metro: "Владимирская",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 32,
|
||
address: "Ленина ул., д.27",
|
||
metro: "Чкаловская",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 34,
|
||
address: "Автовская ул., д.4",
|
||
metro: "Автово",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 36,
|
||
address: "Чкаловский пр., д.11",
|
||
metro: "Чкаловская",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 38,
|
||
address: "Удельный пр., д.25",
|
||
metro: "Удельная",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 35,
|
||
address: "1-ая Красноармейская, д.8-10",
|
||
metro: "Технологический Институт",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 42,
|
||
address: "ул. Марата, д.54/34",
|
||
metro: "Лиговский проспект",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 39,
|
||
address: "Вознесенский пр., д.45",
|
||
metro: "Садовая",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 33,
|
||
address: "Пионерская ул., д.35",
|
||
metro: "Чкаловская",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 40,
|
||
address: "Лермонтовский пр., д.55",
|
||
metro: "Балтийская",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 37,
|
||
address: "Большая Зеленина ул., д.2/42",
|
||
metro: "Чкаловская",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 44,
|
||
address: "наб. Канала Грибоедова, д.42",
|
||
metro: "Сенная площадь",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 47,
|
||
address: "Солидарности пр., д.9",
|
||
metro: "Проспект Большевиков",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 50,
|
||
address: "ул. Дыбенко, д.16",
|
||
metro: "Улица Дыбенко",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 52,
|
||
address: "Елизарова пр., д.3",
|
||
metro: "Елизаровская",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 54,
|
||
address: "Всеволожский пр., д.72А",
|
||
location: "Всеволожск",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 60,
|
||
address: "Невский пр., д.15",
|
||
metro: "Адмиралтейская",
|
||
hours: "8:00 - 0:00",
|
||
},
|
||
{
|
||
n: 56,
|
||
address: "Белышева ул., д.5/6",
|
||
metro: "Большевиков",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 57,
|
||
address: "Ланское ш., д.59",
|
||
metro: "Черная речка",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 49,
|
||
address: "Жуковского ул. д.38А",
|
||
metro: "Площадь восстания",
|
||
hours: "закрыта",
|
||
},
|
||
{
|
||
n: 62,
|
||
address: "Коли Томчака ул. д.18/26",
|
||
metro: "Московские ворота",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 65,
|
||
address: "Стачек пр., д. 40",
|
||
metro: "Кировский завод",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 67,
|
||
address: "Стачек пр., д. 75",
|
||
metro: "Автово",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 68,
|
||
address: "Будапештская ул., д.74 к.1",
|
||
metro: "Купчино",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 69,
|
||
address: "Ярослава Гашека ул., д.4",
|
||
metro: "Купчино",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 72,
|
||
address: "Большевиков пр., д.9",
|
||
metro: "Проспект Большевиков",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 70,
|
||
address: "Будапештская ул., д.14",
|
||
metro: "Международная",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 77,
|
||
address: "Гражданский пр., д.76",
|
||
metro: "Академическая",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 79,
|
||
address: "Новоизмайловский пр., д.38 к.1",
|
||
metro: "Московская",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 80,
|
||
address: "Гатчинская ул., д.35",
|
||
metro: "Чкаловская",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 82,
|
||
address: "Федора Абрамова ул., д.8",
|
||
metro: "Парнас",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 84,
|
||
address: "ул.Борисова д.4, лит А",
|
||
location: "г.Сестрорецк",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 93,
|
||
address: "Европейский проспект, д.8 (Кудрово)",
|
||
metro: "Улица Дыбенко",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 90,
|
||
address: "Невский д.52/Садовая ул.д.14",
|
||
metro: "Гостинный двор",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 91,
|
||
address: "Конюшенный пер.,д.1/6",
|
||
metro: "Адмиралтейская",
|
||
hours: "8:00 - 0:00",
|
||
},
|
||
{
|
||
n: 94,
|
||
address: "Бабушкина ул., д.14",
|
||
metro: "Ломоносовская",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 97,
|
||
address: "Восстания ул., д.43",
|
||
metro: "Чернышевская",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 98,
|
||
address: "Некрасова ул., д.1/38",
|
||
metro: "Чернышевская",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
{
|
||
n: 100,
|
||
address: "Невский пр., д.151",
|
||
metro: "пл. Александра Невского",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
/*{
|
||
n: ,
|
||
address: "Маршала Казакова ул., д.1, корп.2",
|
||
metro: "Автово",
|
||
hours: "8:00 - 22:00",
|
||
},*/
|
||
{
|
||
n: 104,
|
||
address: "1-я линия В.О., д. 46, лит. А",
|
||
metro: "Василеостровская",
|
||
hours: "8:00 - 22:00",
|
||
},
|
||
/*{
|
||
n: ,
|
||
address: "Ветеранов пр., д. 87",
|
||
metro: "Проспект Ветеранов",
|
||
hours: "8:00 - 22:00",
|
||
},*/
|
||
{
|
||
n: 107,
|
||
address: "Средний пр. В.О. д. 50., лит. А",
|
||
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;
|
||
}
|
||
},
|
||
watch: {
|
||
selectedNew: function() {
|
||
this.selected = this.selectedNew;
|
||
}
|
||
}
|
||
};
|
||
</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) {
|
||
.wrapper {
|
||
width: 100%;
|
||
}
|
||
|
||
#address-list {
|
||
height: 100%;
|
||
width: 90%;
|
||
padding: 20px;
|
||
}
|
||
|
||
#scroll-hint {
|
||
display: none;
|
||
}
|
||
}
|
||
</style> |