-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcategory.html
224 lines (196 loc) · 14.8 KB
/
category.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
---
title: Категория
---
{% include head.html %}
{% include templates.html %}
<script src="https://cdn.jsdelivr.net/npm/nouislider/dist/nouislider.min.js"></script>
<main class="max-w-md mx-auto px-2" :with="{
popup:false,
sorting:'popular',
sortings: {
popular:'Популярные',
rating:'Высокий рейтинг',
new:'Новинки',
cheap:'Сначала дешевле',
expensive:'Сначала дороже'
},
price:[0,100],
delivery:'today'
}">
<header class="flex flex-row items-center mt-8 mb-6">
<h1 class="text-xl font-semibold">Плодовые и ягодные</h1>
<button class="ml-auto" @click="popup='filters'">
<svg width="23" height="18" viewBox="0 0 23 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.6873 13.334L7.65397 13.334M7.65397 13.334C7.65397 11.5391 6.19516 10.084 4.39563 10.084C2.5961 10.084 1.1373 11.5391 1.1373 13.334C1.1373 15.1289 2.5961 16.584 4.39563 16.584C6.19516 16.584 7.65397 15.1289 7.65397 13.334ZM15.2568 4.66732L3.30952 4.66732M15.2568 4.66732C15.2568 2.87239 16.7156 1.41732 18.5151 1.41732C20.3146 1.41732 21.7734 2.87239 21.7734 4.66732C21.7734 6.46224 20.3146 7.91732 18.5151 7.91732C16.7156 7.91732 15.2568 6.46224 15.2568 4.66732Z" stroke="#414141" stroke-width="2.16667" stroke-linecap="round"/>
</svg>
</button>
</header>
<nav class="flex flex-row flex-wrap gap-2">
<button class="text-sm w-full py-1 text-left" @click="popup='sorting'">
<span :text="sortings[sorting]"></span>
<svg class="inline" width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 5L0.669873 0.5L9.33013 0.500001L5 5Z" fill="#222222"/>
</svg>
</button>
<button class="text-sm bg-gray-100 rounded-md px-2 py-1" @click="popup='price'">Цена</button>
<button class="text-sm bg-gray-100 rounded-md px-2 py-1" @click="popup='delivery'">Доставка</button>
<button class="text-sm bg-gray-100 rounded-md px-2 py-1" @click="popup='merchant'">Продавец</button>
</nav>
<section id="for-you" class="my-6" :with="{
items: [
{id:1,name:'Яблоня “Мельба”',desc:`Яблоня Мельба относится к сортам среднего срока созревания.
При хорошем уходе и благоприятных погодных условиях плоды могут быть получены уже в конце августа.
Сорт яблони Мельба был выведен в Швеции.`,img:'apples-1.png',price:450,rating:4},
{id:2,name:'Яблоня “Икша”',desc:`Яблоня Мельба относится к сортам среднего срока созревания.
При хорошем уходе и благоприятных погодных условиях плоды могут быть получены уже в конце августа.
Сорт яблони Мельба был выведен в Швеции.`,img:'apples-2.png',price:450,rating:4.3},
{id:3,name:'Яблоня “Жигулевская”',desc:`Яблоня Мельба относится к сортам среднего срока созревания.
При хорошем уходе и благоприятных погодных условиях плоды могут быть получены уже в конце августа.
Сорт яблони Мельба был выведен в Швеции.`,img:'apples-3.png',price:450,rating:4},
{id:4,name:'Яблоня “Красная”',desc:`Яблоня Мельба относится к сортам среднего срока созревания.
При хорошем уходе и благоприятных погодных условиях плоды могут быть получены уже в конце августа.
Сорт яблони Мельба был выведен в Швеции.`,img:'apples-4.png',price:450,rating:4.1},
{id:5,name:'Яблоня “Ред Чиф”',desc:`Яблоня Мельба относится к сортам среднего срока созревания.
При хорошем уходе и благоприятных погодных условиях плоды могут быть получены уже в конце августа.
Сорт яблони Мельба был выведен в Швеции.`,img:'apples-5.png',price:389,rating:5},
{id:6,name:'Яблоня “Богатырь”',desc:`Яблоня Мельба относится к сортам среднего срока созревания.
При хорошем уходе и благоприятных погодных условиях плоды могут быть получены уже в конце августа.
Сорт яблони Мельба был выведен в Швеции.`,img:'apples-6.png',price:380,rating:4},
{id:7,name:'Яблоня “Грушовка”',desc:`Яблоня Мельба относится к сортам среднего срока созревания.
При хорошем уходе и благоприятных погодных условиях плоды могут быть получены уже в конце августа.
Сорт яблони Мельба был выведен в Швеции.`,img:'apples-7.png',price:389,rating:5},
{id:8,name:'Яблоня “Ренет”',desc:`Яблоня Ренет относится к сортам среднего срока созревания.
При хорошем уходе и благоприятных погодных условиях плоды могут быть получены уже в конце августа.
Сорт яблони Мельба был выведен в Швеции.`,img:'apples-8.png',price:380,rating:4}
]}">
<div :render="articlesTpl"></div>
</section>
<section id="sorting" :if="popup=='sorting'" class="popup mt-14">
<a href="#close" @click.prevent="popup=false" class="absolute top-6 right-6 text-gray-500">
<svg width="16" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.00065 7.35006L15.1757 1.17502C15.6313 0.71941 16.37 0.71941 16.8256 1.17502C17.2812 1.63063 17.2812 2.36933 16.8256 2.82494L10.6506 8.99998L16.8256 15.175C17.2812 15.6306 17.2812 16.3693 16.8256 16.8249C16.37 17.2805 15.6313 17.2805 15.1757 16.8249L9.00065 10.6499L2.82561 16.8249C2.37 17.2805 1.6313 17.2805 1.17569 16.8249C0.720081 16.3693 0.720081 15.6306 1.17569 15.175L7.35074 8.99998L1.17569 2.82494C0.720081 2.36933 0.720081 1.63063 1.17569 1.17502C1.6313 0.71941 2.37 0.71941 2.82561 1.17502L9.00065 7.35006Z" fill="currentColor"/>
</svg>
</a>
<div class="divide-y w-full flex flex-col mx-2 mt-12">
<button :each="name,key in sortings" class="py-3 relative flex flex-row gap-3 items-center text-sm hover:text-gray-400" :class="key === sorting && 'text-green-500'" @click="(sorting=key,popup=false)">
<span :text="name"></span>
</button>
</div>
</section>
<section id="price" :if="popup=='price'" class="popup mt-14" :with="{min:0,max:1000}">
<a href="#close" @click.prevent="popup=false" class="absolute top-6 right-6 text-gray-500">
<svg width="16" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.00065 7.35006L15.1757 1.17502C15.6313 0.71941 16.37 0.71941 16.8256 1.17502C17.2812 1.63063 17.2812 2.36933 16.8256 2.82494L10.6506 8.99998L16.8256 15.175C17.2812 15.6306 17.2812 16.3693 16.8256 16.8249C16.37 17.2805 15.6313 17.2805 15.1757 16.8249L9.00065 10.6499L2.82561 16.8249C2.37 17.2805 1.6313 17.2805 1.17569 16.8249C0.720081 16.3693 0.720081 15.6306 1.17569 15.175L7.35074 8.99998L1.17569 2.82494C0.720081 2.36933 0.720081 1.63063 1.17569 1.17502C1.6313 0.71941 2.37 0.71941 2.82561 1.17502L9.00065 7.35006Z" fill="currentColor"/>
</svg>
</a>
<h3 class="font-semibold text-lg mt-12">Цена</h3>
<div id="price-slider" :ref="slider" class="slider mt-8" :init="window.noUiSlider.create(this, {
start: [0, 1000],
connect: true,
range: {min:0, max:10000}
});" :update="this.noUiSlider.on('update',values=>([min,max]=values))"></div>
<div class="w-full mt-8 grid grid-cols-2 gap-8">
<input id="price-min" :value="min" class="input" step="100" type="number" min="0" max="10000" @input="slider.noUiSlider.set([this.value, null])" />
<input id="price-max" :value="max" class="input" step="100" type="number" min="0" max="10000" @input="slider.noUiSlider.set([null,this.value])"/>
</div>
</section>
<section id="delivery" :if="popup=='delivery'" class="popup mt-14" :with="{min:0,max:1000}">
<a href="#close" @click.prevent="popup=false" class="absolute top-6 right-6 text-gray-500">
<svg width="16" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.00065 7.35006L15.1757 1.17502C15.6313 0.71941 16.37 0.71941 16.8256 1.17502C17.2812 1.63063 17.2812 2.36933 16.8256 2.82494L10.6506 8.99998L16.8256 15.175C17.2812 15.6306 17.2812 16.3693 16.8256 16.8249C16.37 17.2805 15.6313 17.2805 15.1757 16.8249L9.00065 10.6499L2.82561 16.8249C2.37 17.2805 1.6313 17.2805 1.17569 16.8249C0.720081 16.3693 0.720081 15.6306 1.17569 15.175L7.35074 8.99998L1.17569 2.82494C0.720081 2.36933 0.720081 1.63063 1.17569 1.17502C1.6313 0.71941 2.37 0.71941 2.82561 1.17502L9.00065 7.35006Z" fill="currentColor"/>
</svg>
</a>
<h3 class="font-semibold text-lg mt-12">Доставка</h3>
<nav class="flex flex-row flex-wrap gap-2 mt-4">
<button class="text-sm bg-gray-100 rounded-md px-2 py-1" @click="delivery='today',popup=false">Сегодня</button>
<button class="text-sm bg-gray-100 rounded-md px-2 py-1" @click="delivery='tomorrow',popup=false">Завтра</button>
<button class="text-sm bg-gray-100 rounded-md px-2 py-1" @click="delivery='2days',popup=false">До 2 дней</button>
<button class="text-sm bg-gray-100 rounded-md px-2 py-1" @click="delivery='5days',popup=false">До 5 дней</button>
</nav>
</section>
<section id="merchant" :if="popup=='merchant'" class="popup mt-14" :with="{min:0,max:1000}">
<a href="#close" @click.prevent="popup=false" class="absolute top-6 right-6 text-gray-500">
<svg width="16" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.00065 7.35006L15.1757 1.17502C15.6313 0.71941 16.37 0.71941 16.8256 1.17502C17.2812 1.63063 17.2812 2.36933 16.8256 2.82494L10.6506 8.99998L16.8256 15.175C17.2812 15.6306 17.2812 16.3693 16.8256 16.8249C16.37 17.2805 15.6313 17.2805 15.1757 16.8249L9.00065 10.6499L2.82561 16.8249C2.37 17.2805 1.6313 17.2805 1.17569 16.8249C0.720081 16.3693 0.720081 15.6306 1.17569 15.175L7.35074 8.99998L1.17569 2.82494C0.720081 2.36933 0.720081 1.63063 1.17569 1.17502C1.6313 0.71941 2.37 0.71941 2.82561 1.17502L9.00065 7.35006Z" fill="currentColor"/>
</svg>
</a>
<h3 class="font-semibold text-lg mt-12">Бренд</h3>
<nav class="flex flex-row flex-wrap gap-2 mt-4">
<button :each="brand in 15" class="text-sm bg-gray-100 rounded-md px-2 py-1" @click="merchant=brand,popup=false">Name</button>
</nav>
</section>
<section id="filters" :if="popup=='filters'" class="popup max-w-md left-0 right-0 pb-6" :with="{min:0,max:1000}" :lock="popup=='filters' ? window.bodyScrollLock.disableBodyScroll(this) : window.bodyScrollLock.enableBodyScroll(this)">
<a href="#close" @click.prevent="popup=false" class="absolute top-6 right-6 text-gray-500">
<svg width="16" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.00065 7.35006L15.1757 1.17502C15.6313 0.71941 16.37 0.71941 16.8256 1.17502C17.2812 1.63063 17.2812 2.36933 16.8256 2.82494L10.6506 8.99998L16.8256 15.175C17.2812 15.6306 17.2812 16.3693 16.8256 16.8249C16.37 17.2805 15.6313 17.2805 15.1757 16.8249L9.00065 10.6499L2.82561 16.8249C2.37 17.2805 1.6313 17.2805 1.17569 16.8249C0.720081 16.3693 0.720081 15.6306 1.17569 15.175L7.35074 8.99998L1.17569 2.82494C0.720081 2.36933 0.720081 1.63063 1.17569 1.17502C1.6313 0.71941 2.37 0.71941 2.82561 1.17502L9.00065 7.35006Z" fill="currentColor"/>
</svg>
</a>
<h3 class="font-semibold text-xl mt-6 mb-12">Фильтры</h3>
<input class="input !w-full" placeholder="Поиск по категориям"/>
<h3 class="font-semibold text-lg mt-6">Цена</h3>
<div id="price-slider" :ref="slider" class="slider mt-8" :init="window.noUiSlider.create(this, {
start: [0, 1000],
connect: true,
range: {min:0, max:10000}
});" :update="this.noUiSlider.on('update',values=>([min,max]=values))"></div>
<div class="w-full mt-8 grid grid-cols-2 gap-8">
<input id="price-min" :value="min" class="input" step="100" type="number" min="0" max="10000" @input="slider.noUiSlider.set([this.value, null])" />
<input id="price-max" :value="max" class="input" step="100" type="number" min="0" max="10000" @input="slider.noUiSlider.set([null,this.value])"/>
</div>
<hr class="mt-6"/>
<h3 class="font-semibold text-lg mt-3">Вкус</h3>
<nav class="flex flex-row flex-wrap gap-2 mt-4">
<button :each="item in [
'Сладкий',
'Кислый',
'Кисло-сладкий',
'Нежный',
'Сочный',
'Насыщенный',
'Освежающий',
'Фруктовый',
'Конфетный',
'Пряный',
'Десертный',
'Пикантный',
'Вяжущий',
'Терпкий',
'Ванильный',
]" class="text-sm bg-gray-100 rounded-md px-2 py-1" @click="popup=false" :text="item"></button>
</nav>
<hr class="mt-6"/>
<h3 class="font-semibold text-lg mt-3">Доставка</h3>
<nav class="flex flex-row flex-wrap gap-2 mt-4">
<button :each="item in [
'Бесплатно',
'Точно ко времени',
'Сегодня',
'Завтра',
'До 2 дней',
'До 5 дней',
'На следующий год',
]" class="text-sm bg-gray-100 rounded-md px-2 py-1" @click="popup=false" :text="item"></button>
</nav>
<hr class="mt-6"/>
<h3 class="font-semibold text-lg mt-3">Уход</h3>
<nav class="flex flex-row flex-wrap gap-2 mt-4">
<button :each="item in [
'Легко',
'Средне',
'Сложно',
]" class="text-sm bg-gray-100 rounded-md px-2 py-1" @click="popup=false" :text="item"></button>
</nav>
<hr class="mt-6"/>
<h3 class="font-semibold text-lg mt-3">Время цветения</h3>
<nav class="flex flex-row flex-wrap gap-2 mt-4">
<button :each="item in [
'Май',
'Июнь',
'Июль',
'Сентябрь',
'Октябрь',
]" class="text-sm bg-gray-100 rounded-md px-2 py-1" @click="popup=false" :text="item"></button>
</nav>
</section>
</main>
{% include foot.html %}