-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathitem.html
257 lines (235 loc) · 34.9 KB
/
item.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
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
---
title: Карточка
---
{% include head.html %}
{% include templates.html %}
<main class="max-w-md mx-auto relative px-4 pt-4" :with="{pickup:false, newAddress:false, anotherRecipient:false}">
<nav class="mt-2 flex flex-row items-center gap-4">
<a href="." class=" text-gray-500">
<svg width="19" height="16" viewBox="0 0 19 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.1665 8H1.99982M7.83316 1L1.65811 7.17504C1.2025 7.63065 1.2025 8.36935 1.65811 8.82496L7.83316 15" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</a>
<a href="#like" class="ml-auto text-red-400">
<svg width="24" height="22" viewBox="0 0 24 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9928 3.90217C9.89349 1.45565 6.39273 0.797539 3.76243 3.03782C1.13213 5.2781 0.761816 9.02374 2.82741 11.6733C4.54481 13.8763 9.74226 18.5225 11.4457 20.0263C11.6363 20.1945 11.7316 20.2786 11.8427 20.3117C11.9397 20.3405 12.0459 20.3405 12.1429 20.3117C12.254 20.2786 12.3493 20.1945 12.5399 20.0263C14.2434 18.5225 19.4408 13.8763 21.1582 11.6733C23.2238 9.02374 22.8987 5.25453 20.2232 3.03782C17.5477 0.821105 14.0921 1.45565 11.9928 3.90217Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
<a href="#share" class="text-gray-600">
<svg width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99999 -3.04702e-05C8.74397 -0.00010425 8.48793 0.0975268 8.29259 0.292863L4.29259 4.29286C3.90207 4.68339 3.90207 5.31655 4.29259 5.70708C4.68312 6.0976 5.31628 6.0976 5.70681 5.70708L8.0003 3.41358V14C8.0003 14.5523 8.44801 15 9.0003 15C9.55258 15 10.0003 14.5523 10.0003 14V3.41478L12.2926 5.70708C12.6831 6.0976 13.3163 6.0976 13.7068 5.70708C14.0973 5.31655 14.0973 4.68339 13.7068 4.29286L9.72779 0.313846C9.54545 0.12059 9.28696 -3.05176e-05 9.0003 -3.05176e-05C9.0002 -3.05176e-05 9.00009 -3.04702e-05 8.99999 -3.04702e-05ZM0 10.9999V18.9999C0 20.6567 1.34315 21.9999 3 21.9999H15C16.6569 21.9999 18 20.6567 18 18.9999V10.9999C18 10.4476 17.5523 9.99989 17 9.99989C16.4477 9.99989 16 10.4476 16 10.9999V18.9999C16 19.5522 15.5523 19.9999 15 19.9999H3C2.44771 19.9999 2 19.5522 2 18.9999V10.9999C2 10.4476 1.55228 9.99989 1 9.99989C0.447715 9.99989 0 10.4476 0 10.9999Z" fill="currentColor"/>
</svg>
</a>
</nav>
<div class="bg-slate-200 overflow-hidden rounded-lg mt-4" data-flickity='{ "imagesLoaded": true, "percentPosition": false, "prevNextButtons": false }'>
<img class="block w-full h-96 object-cover" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" alt="orange tree" />
<img class="block w-full h-96 object-cover" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" alt="submerged" />
<img class="block w-full h-96 object-cover" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" alt="look-out" />
<img class="block w-full h-96 object-cover" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" alt="One World Trade" />
<img class="block w-full h-96 object-cover" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" alt="drizzle" />
<img class="block w-full h-96 object-cover" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg" alt="cat nose" />
</div>
<section id="description">
<h1 class="mt-4 font-semibold text-xl max-w-xs leading-tight">Абрикос обыкновенный краснощекий</h1>
<div class="mt-4 flex flex-row items-center">
<div class="font-semibold text-3xl">950 ₽</div>
<button class="button !text-gray-900 !flex-col !py-2 !h-auto ml-auto">
<div class="flex flex-row text-base items-center !leading-snug">
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.4315 4.90674L8.71283 1.9149C8.39371 1.3594 7.59323 1.35674 7.27043 1.91011L5.45681 5.01917C5.21659 5.43098 4.81152 5.72019 4.34404 5.81369L1.86594 6.30931C1.22412 6.43767 0.97403 7.22191 1.42305 7.69814L3.2154 9.59912C3.59867 10.0056 3.75277 10.5771 3.62582 11.1212L2.81454 14.5981C2.64777 15.3128 3.41952 15.8785 4.05091 15.5044L7.14609 13.6702C7.67 13.3597 8.32153 13.3597 8.84544 13.6702L11.9406 15.5044C12.572 15.8785 13.3438 15.3128 13.177 14.5981L12.3586 11.0907C12.2356 10.5635 12.3763 10.0094 12.736 9.60476L14.5306 7.58587C14.9581 7.10485 14.7022 6.34131 14.0711 6.21509L11.5499 5.71083C11.0786 5.61658 10.6709 5.32347 10.4315 4.90674Z" fill="#FCC11F" stroke="#FCC11F" stroke-miterlimit="10"/>
</svg> 5.0
</div>
<span class="text-gray-400 text-xs">67 отзывов</span>
</button>
</div>
<div class="mt-4 flex flex-row items-center">
<div class="border-gray-50 border-8 rounded-xl p-2 text-xs">
<strong>Высота:</strong> 4/6/7/10 м
</div>
<div class="border-gray-50 border-8 rounded-xl p-2 ml-auto text-xs">
<strong>Тип:</strong> С/Р/RB
</div>
</div>
<div class="mt-4 p-3 bg-gray-50 rounded-lg text-sm overflow-hidden relative after:bg-gradient-to-t after:from-gray-50 after:from-40% after:to-transparent after:absolute after:z-10 after:left-0 after:right-0 after:h-24 after:bottom-0" :with="{collapsed:true, tab:1}" :class="collapsed ? 'h-60' : 'after:content-none'">
<nav class="flex flex-row gap-3 mb-3">
<a href="#tab-1" @click="tab=1" class="bg-white p-2 rounded-lg text-gray-800" :class="tab==1&&'text-green-500'">Описание</a>
<a href="#tab-2" @click="tab=2" class="bg-white p-2 rounded-lg text-gray-800" :class="tab==2&&'text-green-500'">Характеристики</a>
</nav>
<p :if="tab==1" class="whitespace-pre-line">Саженцы абрикоса Краснощекий вырастают крупным деревом с раскидистой, редкой кроной.
Продолжительность жизни
около 50 лет.
Листва крупная, темно-зеленого окраса, яйцевидной формы.
Цветение обильно покрывает ветви.
Цветочки белые с коричнево-желтыми тычинками.
Достоинства абрикоса:
- минимальный уход
- урожайность с одного дерева составляет около 90 кг
- плоды пригодны к транспортировке
Плоды абрикоса Краснощекий вырастают крупными, овальной формы, желтого окраса с большим красным румянцем.
Мякоть мягкая и сладкая, а косточка отлично отделяется.
Шкурка не очень толстая.
</p>
<dl :else :if="tab==2" class="defs">
<dt>Название:</dt> <dd></dd>
<dt>Род:</dt> <dd>Абрикос</dd>
<dt>Вид:</dt> <dd>Обыкновенный</dd>
<dt>Сорт:</dt> <dd>Краснощекий</dd>
<dt>Размеры:</dt> <dd></dd>
<dt>Высота:</dt> <dd>до 400 см</dd>
<dt>Плоды:</dt> <dd></dd>
<dt>Пол:</dt> <dd>Обоеполый</dd>
<dt>Опыление:</dt> <dd>Самоопыляемый</dd>
<dt>Урожайность:</dt> <dd>30 кг</dd>
<dt>Посадка и уход:</dt> <dd></dd>
<dt>Морозостойкость:</dt> <dd>Зона 4 — Московская Область, большая часть России, северные и горные районы Скандинавии</dd>
<dt>Классификация:</dt> <dd></dd>
<dt>Применение:</dt> <dd>Плодовые</dd>
<dt>Жизненная форма:</dt> <dd>Дерево</dd>
</dl>
<a href="#more" class="absolute z-20 p-2 -ml-2 bottom-0 text-xs text-green-500" @click="collapsed=false" :if="collapsed">Развернуть</a>
</div>
</section>
<section id="delivery-info">
<h2 class="mt-4 font-semibold text-lg max-w-xs leading-tight">Информация о доставке</h2>
<div class="flex flex-col bg-gray-50 rounded-lg p-3 mb-6 text-base gap-3 mt-3" :with="{select:false}">
<button class="bg-white rounded-md overflow-hidden p-3 relative flex flex-row gap-3 items-center text-sm" @click="(select=true)">
<svg class="opacity-90 h-7 w-7 p-1" width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 9C13 11.2091 11.2091 13 9 13C6.79086 13 5 11.2091 5 9C5 6.79086 6.79086 5 9 5C11.2091 5 13 6.79086 13 9Z" stroke="currentColor" stroke-width="2"/>
<path d="M17 9C17 13.4183 11 21 9 21C7 21 1 13.4183 1 9C1 4.58172 4.58172 1 9 1C13.4183 1 17 4.58172 17 9Z" stroke="currentColor" stroke-width="2"/>
</svg>
<strong>Верхне-Каменская улица, 9к1</strong>
<svg class="absolute top-0 bottom-0 right-4 my-auto" width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.33398 1L5.74473 5.41074C6.07017 5.73618 6.07017 6.26382 5.74473 6.58926L1.33398 11" stroke="#808080" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
<button class="bg-white rounded-md overflow-hidden p-3 relative flex flex-row gap-3 items-center text-sm" @click="(select=true)">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.45602 5.23996L2.31352 5.75446L1.45602 5.23996ZM3.06783 2.55361L3.92532 3.06811V3.06811L3.06783 2.55361ZM16.9322 2.55361L16.0747 3.06811L16.0747 3.06811L16.9322 2.55361ZM18.544 5.23996L17.6865 5.75446L18.544 5.23996ZM15.476 1.09479L15.1718 2.0474L15.1718 2.0474L15.476 1.09479ZM16.1883 1.49806L16.8486 0.747085L16.8486 0.747084L16.1883 1.49806ZM3.81171 1.49806L4.47205 2.24903V2.24903L3.81171 1.49806ZM4.52395 1.09479L4.21974 0.142189L4.21974 0.142189L4.52395 1.09479ZM18.9738 6.23113L17.9869 6.39255L17.9869 6.39256L18.9738 6.23113ZM18.8586 5.8153L19.7879 5.44597L19.7879 5.44596L18.8586 5.8153ZM17.908 18.782L17.454 17.891H17.454L17.908 18.782ZM18.782 17.908L17.891 17.454V17.454L18.782 17.908ZM1.21799 17.908L0.32698 18.362H0.326981L1.21799 17.908ZM2.09202 18.782L2.54601 17.891L2.54601 17.891L2.09202 18.782ZM1.02623 6.23113L0.0393409 6.06972L1.02623 6.23113ZM1.14141 5.8153L0.212111 5.44596H0.212111L1.14141 5.8153ZM2 5C1.44772 5 1 5.44772 1 6C1 6.55228 1.44772 7 2 7V5ZM18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5V7ZM8 9C7.44772 9 7 9.44771 7 10C7 10.5523 7.44772 11 8 11V9ZM12 11C12.5523 11 13 10.5523 13 10C13 9.44771 12.5523 9 12 9V11ZM9 6C9 6.55228 9.44771 7 10 7C10.5523 7 11 6.55228 11 6H9ZM11 1C11 0.447715 10.5523 0 10 0C9.44771 0 9 0.447715 9 1H11ZM0 6.88635V15.8H2V6.88635H0ZM4.2 20H15.8V18H4.2V20ZM20 15.8V6.88635H18V15.8H20ZM2.31352 5.75446L3.92532 3.06811L2.21034 2.03912L0.59853 4.72547L2.31352 5.75446ZM5.81181 2H14.1882V0H5.81181V2ZM16.0747 3.06811L17.6865 5.75446L19.4015 4.72547L17.7897 2.03912L16.0747 3.06811ZM14.1882 2C14.915 2 15.0586 2.01124 15.1718 2.0474L15.7803 0.142189C15.2998 -0.0112352 14.7828 0 14.1882 0V2ZM17.7897 2.03912C17.4837 1.52925 17.2274 1.08011 16.8486 0.747085L15.528 2.24903C15.6172 2.32752 15.7008 2.44492 16.0747 3.06811L17.7897 2.03912ZM15.1718 2.0474C15.3032 2.08934 15.4244 2.15799 15.528 2.24903L16.8486 0.747084C16.538 0.473961 16.1743 0.268016 15.7803 0.142188L15.1718 2.0474ZM3.92532 3.06811C4.29924 2.44492 4.38278 2.32752 4.47205 2.24903L3.15138 0.747085C2.77264 1.08011 2.51626 1.52925 2.21034 2.03912L3.92532 3.06811ZM5.81181 0C5.2172 0 4.70017 -0.0112351 4.21974 0.142189L4.82817 2.0474C4.9414 2.01124 5.08505 2 5.81181 2V0ZM4.47205 2.24903C4.57558 2.15799 4.69683 2.08934 4.82817 2.0474L4.21974 0.142189C3.82573 0.268016 3.46199 0.47396 3.15138 0.747085L4.47205 2.24903ZM20 6.88635C20 6.58786 20.003 6.32864 19.9607 6.06971L17.9869 6.39256C17.997 6.45433 18 6.52502 18 6.88635H20ZM17.6865 5.75446C17.8724 6.06429 17.9062 6.12646 17.9293 6.18464L19.7879 5.44596C19.691 5.20215 19.555 4.98142 19.4015 4.72547L17.6865 5.75446ZM19.9607 6.06972C19.9257 5.85618 19.8678 5.64705 19.7879 5.44597L17.9293 6.18462C17.9559 6.25166 17.9752 6.32137 17.9869 6.39255L19.9607 6.06972ZM15.8 20C16.3436 20 16.8114 20.0008 17.195 19.9694C17.5904 19.9371 17.9836 19.8658 18.362 19.673L17.454 17.891C17.4045 17.9162 17.3038 17.9539 17.0322 17.9761C16.7488 17.9992 16.3766 18 15.8 18V20ZM18 15.8C18 16.3766 17.9992 16.7488 17.9761 17.0322C17.9539 17.3038 17.9162 17.4045 17.891 17.454L19.673 18.362C19.8658 17.9836 19.9371 17.5904 19.9694 17.195C20.0008 16.8114 20 16.3436 20 15.8H18ZM18.362 19.673C18.9265 19.3854 19.3854 18.9265 19.673 18.362L17.891 17.454C17.7951 17.6422 17.6422 17.7951 17.454 17.891L18.362 19.673ZM0 15.8C0 16.3436 -0.000777721 16.8114 0.0305694 17.195C0.0628704 17.5904 0.134186 17.9836 0.32698 18.362L2.10899 17.454C2.0838 17.4045 2.04612 17.3038 2.02393 17.0322C2.00078 16.7488 2 16.3766 2 15.8H0ZM4.2 18C3.62345 18 3.25117 17.9992 2.96784 17.9761C2.69617 17.9539 2.59545 17.9162 2.54601 17.891L1.63803 19.673C2.01641 19.8658 2.40963 19.9371 2.80497 19.9694C3.18864 20.0008 3.65645 20 4.2 20V18ZM0.326981 18.362C0.6146 18.9265 1.07354 19.3854 1.63803 19.673L2.54601 17.891C2.35785 17.7951 2.20487 17.6422 2.10899 17.454L0.326981 18.362ZM2 6.88635C2 6.52502 2.00301 6.45433 2.01311 6.39255L0.0393409 6.06972C-0.00300884 6.32864 0 6.58786 0 6.88635H2ZM0.59853 4.72547C0.444959 4.98142 0.309011 5.20215 0.212111 5.44596L2.0707 6.18463C2.09382 6.12646 2.12761 6.06429 2.31352 5.75446L0.59853 4.72547ZM2.01311 6.39255C2.02476 6.32137 2.04407 6.25166 2.0707 6.18463L0.212111 5.44596C0.132195 5.64704 0.0742679 5.85618 0.0393409 6.06972L2.01311 6.39255ZM2 7H18V5H2V7ZM8 11H12V9H8V11ZM11 6V1H9V6H11Z" fill="currentColor"/>
</svg>
<strong>Курьером</strong>
<small class="text-gray-400">20 марта - 199 ₽</small>
</button>
</div>
</section>
<section id="reviews">
<h2 class="mt-4 font-semibold text-lg max-w-xs leading-tight">Отзывы</h2>
<article :each="review in [
{author:'Артем',rating:5,text:'Фрукт имеет средний размер и приятный аромат. Абрикосы краснощекие богаты витаминами А и С, а также содержат много калия, фолиевой кислоты и антиоксидантов. Они хорошо сочетаются с другими фруктами и являются отличным ингредиентом для десертов, салатов и коктейлей.'},
{author:'Павел',rating:4,text:'Фрукт имеет средний размер и приятный аромат. Абрикосы краснощекие богаты витаминами А и С, а также содержат много калия, фолиевой кислоты и антиоксидантов. Они хорошо сочетаются с другими фруктами и являются отличным ингредиентом для десертов, салатов и коктейлей.'},
{author:'Артем',rating:5,text:'Фрукт имеет средний размер и приятный аромат. Абрикосы краснощекие богаты витаминами А и С, а также содержат много калия, фолиевой кислоты и антиоксидантов. Они хорошо сочетаются с другими фруктами и являются отличным ингредиентом для десертов, салатов и коктейлей.'},
{author:'Павел',rating:4,text:'Фрукт имеет средний размер и приятный аромат. Абрикосы краснощекие богаты витаминами А и С, а также содержат много калия, фолиевой кислоты и антиоксидантов. Они хорошо сочетаются с другими фруктами и являются отличным ингредиентом для десертов, салатов и коктейлей.'}
]" class="flex flex-col bg-gray-50 rounded-lg p-3 mb-6 text-base gap-3 mt-3">
<div class="relative w-full flex flex-col p-3 bg-white rounded-md">
<h3 class="text-sm font-semibold" :text="review.author"></h3>
<div class="flex flex-row items-baseline mt-2 mb-3">
<strong class="text-3xl font-semibold" :text="review.rating.toLocaleString('ru-RU',{minimumFractionDigits: 1})"></strong>
<span class="text-xs text-gray-400 ml-2">из 5</span>
<div class="flex items-center justify-center text-center rounded-lg ml-3">
<svg :each="star in 5" aria-hidden="true" class="w-5 h-5" :class="star <= review.rating ? 'text-yellow-400' : 'text-gray-300'" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>First star</title><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
</div>
</div>
<p class="text-sm" :text="review.text"></p>
<footer class="flex flex-row items-center text-sm gap-2 my-3">
<span class="text-gray-500 mr-auto">Отзыв был полезен?</span>
<button class="flex flex-col px-2 items-center gap-1 text-gray-500">
<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 8.42981L1 15.4298M4.5 8.01721V14.5727C4.5 15.6772 5.39543 16.5727 6.5 16.5727H14.3902C15.3301 16.5727 16.1432 15.9182 16.344 15.0001L17.7345 8.6435C17.8709 8.01986 17.396 7.42981 16.7576 7.42981H13C11.8954 7.42981 11 6.53438 11 5.42981V4.04711C11 3.01157 10.5886 2.01844 9.8564 1.2862C9.41613 0.845936 8.68177 0.924837 8.34507 1.44858L4.81764 6.93569C4.61026 7.25829 4.5 7.63371 4.5 8.01721Z" stroke="#222222" stroke-width="2" stroke-linecap="round"/>
</svg>
Да
</button>
<button class="flex flex-col px-2 items-center gap-1 text-gray-500">
<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 9.1431L1 2.1431M4.5 9.5557V3.00025C4.5 1.89568 5.39543 1.00024 6.5 1.00024H14.3902C15.3301 1.00024 16.1432 1.65468 16.344 2.57285L17.7345 8.9294C17.8709 9.55305 17.396 10.1431 16.7576 10.1431H13C11.8954 10.1431 11 11.0385 11 12.1431V13.5258C11 14.5613 10.5886 15.5545 9.8564 16.2867C9.41613 16.727 8.68177 16.6481 8.34507 16.1243L4.81764 10.6372C4.61026 10.3146 4.5 9.9392 4.5 9.5557Z" stroke="#222222" stroke-width="2" stroke-linecap="round"/>
</svg>
Нет
</button>
</footer>
</div>
</article>
</section>
<section id="bundle" class="my-4">
<h2 class="mt-4 font-semibold text-lg max-w-xs leading-tight">Доступен комплект</h2>
<div class="flex flex-col bg-gray-50 rounded-lg p-3 mb-6 text-base gap-3 mt-3">
<header class="flex flex-row items-center gap-3">
<button class="button button-green button-lg tracking-tighter !font-semibold !text-3xl !px-3 !py-4">1 740 ₽</button>
<div class="flex flex-col text-gray-500">
<del class="text-lg font-semibold leading-snug">2 230 ₽</del>
<small class="text-sm">За комплект</small>
</div>
</header>
<button class="bg-white rounded-md overflow-hidden p-3 relative flex flex-row gap-3 items-center text-sm" @click="(select=true)">
<img class="h-10 w-9 bg-gray-200 rounded-lg border-none" /> NameNameNameNameName
</button>
<button class="bg-white rounded-md overflow-hidden p-3 relative flex flex-row gap-3 items-center text-sm" @click="(select=true)">
<img class="h-10 w-9 bg-gray-200 rounded-lg border-none" /> NameNameNameNameName
</button>
<button class="bg-white rounded-md overflow-hidden p-3 relative flex flex-row gap-3 items-center text-sm" @click="(select=true)">
<img class="h-10 w-9 bg-gray-200 rounded-lg border-none" /> NameNameNameNameName
</button>
</div>
</section>
<section id="services" class="my-3">
<h2 class="mt-4 font-semibold text-lg max-w-xs leading-tight">Услуги</h2>
<div class="flex flex-col bg-gray-50 rounded-lg p-3 mb-6 text-base gap-3 mt-3">
<button class="bg-white rounded-md overflow-hidden p-3 relative flex flex-row gap-3 items-center text-sm" @click="(select=true)">
<svg width="15" height="20" viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 19V15.6568C5 12.0348 6.43884 8.56113 9 5.99997M6 9.99998C4.83333 9.16664 2.9 6.89998 4.5 4.49998C6.01558 2.22661 10.3426 1.86739 12.6364 1.97746C12.854 1.9879 13.0346 2.14239 13.0776 2.35586C13.6694 5.28888 13.6068 10.6161 9 11M5 17C5 15.6666 4.2 13 1 13" stroke="#111111" stroke-width="2" stroke-linecap="round"/>
</svg>
<strong>Заказать садовника</strong>
</button>
<button class="bg-white rounded-md overflow-hidden p-3 relative flex flex-row gap-3 items-center text-sm" @click="(select=true)">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 15V19M8 19H12M9.66063 13.9352C8.75461 14.6035 7.62494 15 6.4 15C3.41766 15 1 12.6495 1 9.75C1 7.75046 2.14976 6.01201 3.84159 5.12547C4.43342 4.81534 4.92719 4.32747 5.2535 3.7444C6.16846 2.10956 7.95095 1 10 1C12.049 1 13.8315 2.10956 14.7465 3.7444C15.0728 4.32747 15.5666 4.81534 16.1584 5.12547C17.8502 6.01201 19 7.75047 19 9.75C19 12.6495 16.5823 15 13.6 15C12.3751 15 11.2454 14.6035 10.3394 13.9352C10.1386 13.7872 9.86138 13.7872 9.66063 13.9352Z" stroke="#111111" stroke-width="2" stroke-linecap="round"/>
</svg>
<strong>Посадить дерево</strong>
</button>
<button class="bg-white rounded-md overflow-hidden p-3 relative flex flex-row gap-3 items-center text-sm" @click="(select=true)">
<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 2L1.29289 1.70711C1.74565 1.25435 2.35971 1 3 1C3.64029 1 4.25435 1.25435 4.70711 1.70711L5.29289 2.29289C5.74565 2.74565 6.35971 3 7 3C7.64029 3 8.25435 2.74565 8.70711 2.29289L9.29289 1.70711C9.74565 1.25435 10.3597 1 11 1C11.6403 1 12.2544 1.25435 12.7071 1.70711L13.2929 2.29289C13.7456 2.74565 14.3597 3 15 3C15.6403 3 16.2544 2.74565 16.7071 2.29289L17 2M1 7L1.29289 6.70711C1.74565 6.25435 2.35971 6 3 6C3.64029 6 4.25435 6.25435 4.70711 6.70711L5.29289 7.29289C5.74565 7.74565 6.35971 8 7 8C7.64029 8 8.25435 7.74565 8.70711 7.29289L9.29289 6.70711C9.74565 6.25435 10.3597 6 11 6C11.6403 6 12.2544 6.25435 12.7071 6.70711L13.2929 7.29289C13.7456 7.74565 14.3597 8 15 8C15.6403 8 16.2544 7.74565 16.7071 7.29289L17 7M1 12L1.29289 11.7071C1.74565 11.2544 2.35971 11 3 11C3.64029 11 4.25435 11.2544 4.70711 11.7071L5.29289 12.2929C5.74565 12.7456 6.35971 13 7 13C7.64029 13 8.25435 12.7456 8.70711 12.2929L9.29289 11.7071C9.74565 11.2544 10.3597 11 11 11C11.6403 11 12.2544 11.2544 12.7071 11.7071L13.2929 12.2929C13.7456 12.7456 14.3597 13 15 13C15.6403 13 16.2544 12.7456 16.7071 12.2929L17 12" stroke="#111111" stroke-width="2" stroke-linecap="round"/>
</svg>
<strong>Ландшафтный дизайнер</strong>
</button>
<button class="bg-white rounded-md overflow-hidden p-3 relative flex flex-row gap-3 items-center text-sm" @click="(select=true)">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.18404 18.564L3.63803 17.673H3.63803L3.18404 18.564ZM1.43597 16.816L0.544967 17.27H0.544968L1.43597 16.816ZM16.816 1.43597L17.27 0.544968V0.544967L16.816 1.43597ZM18.564 3.18404L17.673 3.63803V3.63803L18.564 3.18404ZM3.18404 1.43597L3.63803 2.32698H3.63803L3.18404 1.43597ZM1.43597 3.18404L2.32698 3.63803V3.63803L1.43597 3.18404ZM18 9C18 9.55229 18.4477 10 19 10C19.5523 10 20 9.55229 20 9H18ZM9 20C9.55229 20 10 19.5523 10 19C10 18.4477 9.55229 18 9 18V20ZM6 5C5.44772 5 5 5.44772 5 6C5 6.55228 5.44772 7 6 7V5ZM14 7C14.5523 7 15 6.55228 15 6C15 5.44772 14.5523 5 14 5V7ZM6 9C5.44772 9 5 9.44771 5 10C5 10.5523 5.44772 11 6 11V9ZM14 11C14.5523 11 15 10.5523 15 10C15 9.44771 14.5523 9 14 9V11ZM6 13C5.44772 13 5 13.4477 5 14C5 14.5523 5.44772 15 6 15V13ZM10 15C10.5523 15 11 14.5523 11 14C11 13.4477 10.5523 13 10 13V15ZM12.2532 19.4966L13.2019 19.8128L13.2019 19.8128L12.2532 19.4966ZM12.716 18.1082L11.7673 17.792L11.7673 17.792L12.716 18.1082ZM13.1935 17.3356L13.9007 18.0427H13.9007L13.1935 17.3356ZM17.8054 12.7237L17.0983 12.0166L17.0983 12.0166L17.8054 12.7237ZM20.2763 15.1946L20.9834 15.9017L20.2763 15.1946ZM15.6644 19.8065L14.9573 19.0993L14.9573 19.0993L15.6644 19.8065ZM14.8918 20.284L15.208 21.2327H15.208L14.8918 20.284ZM13.5034 20.7468L13.8196 21.6955L13.8196 21.6955L13.5034 20.7468ZM15.4112 20.0429L16.0134 20.8412H16.0134L15.4112 20.0429ZM15.2165 20.1632L14.7718 19.2675H14.7718L15.2165 20.1632ZM20.2763 12.7237L19.5692 13.4308L20.2763 12.7237ZM20.8715 13.4106L21.7676 12.9666V12.9666L20.8715 13.4106ZM20.8715 14.5077L21.7676 14.9517V14.9517L20.8715 14.5077ZM18.4923 12.1285L18.9363 13.0245L18.4923 12.1285ZM19.5894 12.1285L19.1454 13.0245V13.0245L19.5894 12.1285ZM12.8368 17.7835L13.7325 18.2282L13.7325 18.2282L12.8368 17.7835ZM12.9571 17.5888L12.1588 16.9866L12.9571 17.5888ZM12.023 20.6026L12.9649 20.2668L12.023 20.6026ZM12.3974 20.977L12.0615 21.9189L12.3974 20.977ZM7.4 2H12.6V0H7.4V2ZM2 12.6V7.4H0V12.6H2ZM7.4 18C6.26339 18 5.47108 17.9992 4.85424 17.9488C4.24907 17.8994 3.90138 17.8072 3.63803 17.673L2.73005 19.455C3.32234 19.7568 3.96253 19.8826 4.69138 19.9422C5.40855 20.0008 6.2964 20 7.4 20V18ZM0 12.6C0 13.7036 -0.000777721 14.5914 0.0578178 15.3086C0.117367 16.0375 0.24318 16.6777 0.544967 17.27L2.32698 16.362C2.19279 16.0986 2.10062 15.7509 2.05118 15.1458C2.00078 14.5289 2 13.7366 2 12.6H0ZM3.63803 17.673C3.07354 17.3854 2.6146 16.9265 2.32698 16.362L0.544968 17.27C1.02433 18.2108 1.78924 18.9757 2.73005 19.455L3.63803 17.673ZM12.6 2C13.7366 2 14.5289 2.00078 15.1458 2.05118C15.7509 2.10062 16.0986 2.19279 16.362 2.32698L17.27 0.544967C16.6777 0.24318 16.0375 0.117367 15.3086 0.0578178C14.5914 -0.000777721 13.7036 0 12.6 0V2ZM20 7.4C20 6.2964 20.0008 5.40855 19.9422 4.69138C19.8826 3.96253 19.7568 3.32234 19.455 2.73005L17.673 3.63803C17.8072 3.90138 17.8994 4.24907 17.9488 4.85424C17.9992 5.47108 18 6.26339 18 7.4H20ZM16.362 2.32698C16.9265 2.6146 17.3854 3.07354 17.673 3.63803L19.455 2.73005C18.9757 1.78924 18.2108 1.02433 17.27 0.544968L16.362 2.32698ZM7.4 0C6.2964 0 5.40855 -0.000777721 4.69138 0.0578178C3.96253 0.117367 3.32234 0.24318 2.73005 0.544967L3.63803 2.32698C3.90138 2.19279 4.24907 2.10062 4.85424 2.05118C5.47108 2.00078 6.26339 2 7.4 2V0ZM2 7.4C2 6.26339 2.00078 5.47108 2.05118 4.85424C2.10062 4.24907 2.19279 3.90138 2.32698 3.63803L0.544967 2.73005C0.24318 3.32234 0.117367 3.96253 0.0578178 4.69138C-0.000777721 5.40855 0 6.2964 0 7.4H2ZM2.73005 0.544967C1.78924 1.02433 1.02433 1.78924 0.544967 2.73005L2.32698 3.63803C2.6146 3.07354 3.07354 2.6146 3.63803 2.32698L2.73005 0.544967ZM18 7.4V9H20V7.4H18ZM7.4 20H9V18H7.4V20ZM6 7H14V5H6V7ZM6 11H14V9H6V11ZM6 15H10V13H6V15ZM13.2019 19.8128L13.6647 18.4244L11.7673 17.792L11.3045 19.1804L13.2019 19.8128ZM13.9007 18.0427L18.5125 13.4308L17.0983 12.0166L12.4864 16.6284L13.9007 18.0427ZM19.5692 14.4875L14.9573 19.0993L16.3716 20.5136L20.9834 15.9017L19.5692 14.4875ZM14.5756 19.3353L13.1872 19.7981L13.8196 21.6955L15.208 21.2327L14.5756 19.3353ZM14.9573 19.0993C14.8922 19.1645 14.8571 19.1994 14.83 19.2251C14.8071 19.2468 14.8038 19.2484 14.8089 19.2446L16.0134 20.8412C16.1504 20.7378 16.2674 20.6177 16.3716 20.5136L14.9573 19.0993ZM15.208 21.2327C15.3478 21.1861 15.5075 21.1352 15.6612 21.0588L14.7718 19.2675C14.7775 19.2646 14.7746 19.2668 14.7449 19.2777C14.7099 19.2904 14.663 19.3061 14.5756 19.3353L15.208 21.2327ZM14.8089 19.2446C14.7973 19.2533 14.7849 19.261 14.7718 19.2675L15.6612 21.0588C15.7851 20.9973 15.903 20.9245 16.0134 20.8412L14.8089 19.2446ZM19.5692 13.4308C19.7456 13.6072 19.8483 13.7104 19.9205 13.7913C19.9881 13.867 19.9871 13.878 19.9755 13.8546L21.7676 12.9666C21.5863 12.6008 21.2631 12.2963 20.9834 12.0166L19.5692 13.4308ZM20.9834 15.9017C21.2631 15.622 21.5863 15.3175 21.7676 14.9517L19.9755 14.0637C19.9871 14.0403 19.9881 14.0513 19.9205 14.127C19.8483 14.2079 19.7456 14.3111 19.5692 14.4875L20.9834 15.9017ZM19.9755 13.8546C20.0082 13.9205 20.0082 13.9978 19.9755 14.0637L21.7676 14.9517C22.0775 14.3263 22.0775 13.592 21.7676 12.9666L19.9755 13.8546ZM18.5125 13.4308C18.6889 13.2544 18.7921 13.1517 18.873 13.0795C18.9487 13.0119 18.9597 13.0129 18.9363 13.0245L18.0483 11.2324C17.6825 11.4137 17.378 11.7369 17.0983 12.0166L18.5125 13.4308ZM20.9834 12.0166C20.7037 11.7369 20.3992 11.4137 20.0334 11.2324L19.1454 13.0245C19.122 13.0129 19.133 13.0119 19.2087 13.0795C19.2896 13.1517 19.3928 13.2544 19.5692 13.4308L20.9834 12.0166ZM18.9363 13.0245C19.0022 12.9918 19.0795 12.9918 19.1454 13.0245L20.0334 11.2324C19.408 10.9225 18.6737 10.9225 18.0483 11.2324L18.9363 13.0245ZM13.6647 18.4244C13.6938 18.337 13.7096 18.2901 13.7223 18.2551C13.7332 18.2253 13.7354 18.2225 13.7325 18.2282L11.9412 17.3388C11.8648 17.4925 11.8139 17.6522 11.7673 17.792L13.6647 18.4244ZM12.4864 16.6284C12.3823 16.7326 12.2622 16.8496 12.1588 16.9866L13.7554 18.1911C13.7516 18.1962 13.7532 18.1929 13.7749 18.17C13.8006 18.1429 13.8355 18.1078 13.9007 18.0427L12.4864 16.6284ZM13.7325 18.2282C13.739 18.2151 13.7467 18.2027 13.7554 18.1911L12.1588 16.9866C12.0755 17.097 12.0027 17.2149 11.9412 17.3388L13.7325 18.2282ZM11.3045 19.1804C11.2102 19.4632 11.1166 19.7409 11.0623 19.9719C11.0115 20.1881 10.9439 20.5537 11.0811 20.9385L12.9649 20.2668C12.9998 20.3647 13.0008 20.4408 12.9998 20.4681C12.9989 20.4906 12.9965 20.4839 13.0093 20.4295C13.0217 20.3768 13.0424 20.3033 13.0762 20.196C13.1097 20.0894 13.1508 19.9661 13.2019 19.8128L11.3045 19.1804ZM13.1872 19.7981C13.0339 19.8492 12.9106 19.8903 12.804 19.9238C12.6967 19.9576 12.6232 19.9783 12.5705 19.9907C12.5161 20.0035 12.5094 20.0011 12.5319 20.0002C12.5592 19.9992 12.6353 20.0002 12.7332 20.0351L12.0615 21.9189C12.4463 22.0561 12.8119 21.9884 13.0281 21.9377C13.2591 21.8834 13.5368 21.7898 13.8196 21.6955L13.1872 19.7981ZM11.0811 20.9385C11.2442 21.3959 11.6041 21.7558 12.0615 21.9189L12.7332 20.0351C12.8413 20.0736 12.9264 20.1587 12.9649 20.2668L11.0811 20.9385Z" fill="#111111"/>
</svg>
<strong>Услуги дендролога</strong>
</button>
</div>
</section>
<section id="you-may-like" :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}
]}">
<header class="flex flex-row items-baseline mb-3">
<h2 class="text-lg font-semibold leading-tight">С этим растением
покупают</h2>
<a class="ml-auto text-green-600 hover:text-green-500 active:text-green-400 text-sm whitespace-nowrap" href="/#see-all">Смотреть все</a>
</header>
<div :render="articlesTpl"></div>
</section>
</main>
{% include foot.html %}