This commit is contained in:
@ -4,11 +4,11 @@
|
||||
<template v-if="!route.params.titlesSlug">
|
||||
<!--верхний блок-->
|
||||
<section
|
||||
class="flex flex-row relative z-40 before:content-[''] before:absolute before:top-[-140px] before:bg-top before:left-0 before:w-[1280px] before:h-[1000px] before:bg-[url(/assets/img/webp/vino-galante.webp)] before:bg-no-repeat before:bg-contain mt-40"
|
||||
class="flex min-h-[600px] flex-row relative z-40 before:content-[''] before:absolute before:top-[-140px] before:bg-top before:left-0 before:w-[1280px] before:h-[1000px] before:bg-[url(/assets/img/webp/vino-galante.webp)] before:bg-no-repeat before:bg-contain mt-40"
|
||||
>
|
||||
<!--левый блок контента-->
|
||||
<section class="relative top-[-20px] min-w-[570px]">
|
||||
<div class="flex flex-col items-center">
|
||||
<section class="relative top-[-30px] min-w-[570px]">
|
||||
<div class="flex flex-col items-center h-[600px]">
|
||||
<img :src="book.img" :alt="book.buttonText" />
|
||||
</div>
|
||||
</section>
|
||||
@ -33,15 +33,15 @@
|
||||
</section>
|
||||
</section>
|
||||
<!--средний блок-->
|
||||
<section class="flex flex-row items-center ml-20 justify-between">
|
||||
<section class="flex flex-row items-center ml-12 gap-24">
|
||||
<!--левый-->
|
||||
<div class="flex flex-col items-center min-h-[310px]">
|
||||
<div class="flex flex-row">
|
||||
<UiParagraph class="[&]:text-6xl">{{ book.price }} </UiParagraph>
|
||||
<img src="/img/svg/books/ruble.svg" alt="ruble" />
|
||||
</div>
|
||||
<div class="mr-10 flex items-center flex-col gap-3">
|
||||
<UiButton class="max-w-[380px] !font-normal !px-2 !py-4 mt-24">
|
||||
<div class="flex items-center flex-col gap-3">
|
||||
<UiButton class="max-w-[440px] !font-normal !px-2 !py-4 mt-16">
|
||||
{{ book.buttonText }}
|
||||
</UiButton>
|
||||
<UiParagraph size="200">
|
||||
@ -50,24 +50,29 @@
|
||||
</div>
|
||||
</div>
|
||||
<!--правый-->
|
||||
<div class="min-h-[310px]">
|
||||
<div class="min-h-[310px] pt-6">
|
||||
<!--о книге-->
|
||||
<div>
|
||||
<ul class="flex flex-row mr-14 items-center justify-between lg:whitespace-nowrap">
|
||||
<li class="flex flex-row mr-14 gap-3 items-center">
|
||||
<img src="/img/svg/books/book-pages.svg" alt="страниц" />
|
||||
<img src="/img/svg/books/book-pages.svg" alt="страниц" width="24" height="24" />
|
||||
<UiParagraph size="250" as="span">
|
||||
{{ book.pages }}
|
||||
</UiParagraph>
|
||||
</li>
|
||||
<li class="flex flex-row mr-14 gap-3 items-center">
|
||||
<img src="/img/svg/books/book-illustrations.svg" alt="иллюстраций" />
|
||||
<li class="flex flex-row mr-14 gap-3 items-center shrink-0">
|
||||
<img
|
||||
src="/img/svg/books/book-illustrations.svg"
|
||||
alt="иллюстраций"
|
||||
width="24"
|
||||
height="24"
|
||||
/>
|
||||
<UiParagraph size="250" as="span">
|
||||
{{ book.illust }}
|
||||
</UiParagraph>
|
||||
</li>
|
||||
<li class="flex flex-row mr-14 gap-3 items-center">
|
||||
<img src="/img/svg/books/book-formats.svg" alt="формат" />
|
||||
<img src="/img/svg/books/book-formats.svg" alt="формат" width="24" height="24" />
|
||||
<UiParagraph size="250" as="span">
|
||||
{{ book.format }}
|
||||
</UiParagraph>
|
||||
@ -76,44 +81,33 @@
|
||||
</div>
|
||||
|
||||
<!--навигация по книге-->
|
||||
<div class="mt-24">
|
||||
<ul class="flex flex-row mr-32 items-end justify-between lg:whitespace-nowrap">
|
||||
<li class="flex flex-row items-center">
|
||||
<NuxtLink to="#" class="flex flex-col items-center cursor-pointer">
|
||||
<div class="w-[62px] h-[58px]">
|
||||
<img
|
||||
src="/img/svg/books/read.svg"
|
||||
alt="Читай отрывок"
|
||||
width="62"
|
||||
height="53"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-28 pt-2">
|
||||
<ul class="flex flex-row mr-32 items-baseline justify-between lg:whitespace-nowrap">
|
||||
<li class="flex flex-row h-24 w-[105px] items-center">
|
||||
<NuxtLink to="#" class="flex flex-col gap-8 items-center cursor-pointer">
|
||||
<img src="/img/svg/books/read.svg" alt="Читай отрывок" width="62" height="53" />
|
||||
|
||||
<UiParagraph size="250" as="span"> Читай отрывок </UiParagraph>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="flex flex-row gap-3 items-center">
|
||||
<NuxtLink to="#" class="flex flex-col items-center gap-4 cursor-pointer">
|
||||
<div class="w-[62px] h-[53px]">
|
||||
<img
|
||||
src="/img/svg/books/download.svg"
|
||||
alt="Скачай отрывок"
|
||||
width="62"
|
||||
height="53"
|
||||
/>
|
||||
</div>
|
||||
<li class="flex flex-row items-center h-24 w-[105px]">
|
||||
<NuxtLink to="#" class="flex flex-col items-center gap-8 cursor-pointer">
|
||||
<img
|
||||
src="/img/svg/books/download.svg"
|
||||
alt="Скачай отрывок"
|
||||
width="62"
|
||||
height="53"
|
||||
/>
|
||||
|
||||
<UiParagraph size="250" as="span"> Скачай отрывок </UiParagraph>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="flex flex-row gap-3 items-center">
|
||||
<li class="flex flex-row items-center h-24 w-[105px]">
|
||||
<NuxtLink
|
||||
:to="`/books/${route.params.slug}/${book.hrefTitles}`"
|
||||
class="flex flex-col items-center gap-3 cursor-pointer"
|
||||
class="flex flex-col items-center gap-8 cursor-pointer"
|
||||
>
|
||||
<div class="w-[62px] h-[53px]">
|
||||
<img src="/img/svg/books/down2.svg" alt="Содержание" width="62" height="53" />
|
||||
</div>
|
||||
<img src="/img/svg/books/down2.svg" alt="Содержание" width="62" height="53" />
|
||||
|
||||
<UiParagraph size="250" as="span"> Содержание </UiParagraph>
|
||||
</NuxtLink>
|
||||
|
Reference in New Issue
Block a user