549 lines
14 KiB
Vue
549 lines
14 KiB
Vue
<template>
|
|
<q-page>
|
|
<!-- <p>{{ $route.params.id }}</p> -->
|
|
|
|
<Container class="product-container" tag="section">
|
|
<ProductCarousel>
|
|
<q-carousel-slide
|
|
:name="1"
|
|
img-src="https://cdn.quasar.dev/img/mountains.jpg"
|
|
class="product-gallery-item"
|
|
/>
|
|
<q-carousel-slide
|
|
:name="2"
|
|
img-src="https://cdn.quasar.dev/img/parallax1.jpg"
|
|
class="product-gallery-item"
|
|
/>
|
|
<q-carousel-slide
|
|
:name="3"
|
|
img-src="https://cdn.quasar.dev/img/parallax2.jpg"
|
|
class="product-gallery-item"
|
|
/>
|
|
<q-carousel-slide
|
|
:name="4"
|
|
img-src="https://cdn.quasar.dev/img/quasar.jpg"
|
|
class="product-gallery-item"
|
|
/>
|
|
</ProductCarousel>
|
|
|
|
<div class="product-content">
|
|
<header class="product-content-header">
|
|
<h3 class="product-content-title subtitle">Ramo Lucena</h3>
|
|
|
|
<div class="product-header-block">
|
|
<p class="product-content-paragraph">
|
|
SKU:
|
|
<span class="green-text">52G201</span>
|
|
</p>
|
|
|
|
<p class="product-content-paragraph">
|
|
Categoría:
|
|
<span class="green-text">Ramos</span>
|
|
</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="product-content-body">
|
|
<div class="product-content-paragraphs">
|
|
<p class="product-price green-text">30€</p>
|
|
<p class="product-delivery green-text">Envío Gratuito</p>
|
|
<p class="product-description">
|
|
Descripción del producto, nombrar las flores y verdes, productos
|
|
utilizados en único ramo. Lorem ipsum dolor sit amet,cosed do
|
|
eiusmode tempor incididu ut labore et dolo magna alic...
|
|
</p>
|
|
</div>
|
|
|
|
<form class="product-form" @submit.prevent="handleDedicationSubmit">
|
|
<div class="product-dedication">
|
|
<header class="product-dedication-header">
|
|
<IconPencilGreen />
|
|
<label class="product-dedication-paragraph" for="">
|
|
¿Deseas añadir una dedicatoria?
|
|
</label>
|
|
</header>
|
|
|
|
<div class="product-dedication-body">
|
|
<q-input
|
|
v-model="dedication"
|
|
bg-color="white"
|
|
standout
|
|
color="primary"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<q-btn type="submit" color="primary" class="btn sm-btn">
|
|
AÑADIR AL CARRITO
|
|
</q-btn>
|
|
</form>
|
|
</div>
|
|
|
|
<footer class="product-content-footer">
|
|
<p class="product-share-paragraph">Conmparte con tus amigos</p>
|
|
|
|
<div class="product-share-content">
|
|
<a href="#" class="product-share-item"><IconShare /></a>
|
|
<a href="#" class="product-share-item"><IconLinkedin /></a>
|
|
<a href="#" class="product-share-item"><IconTwitter /></a>
|
|
<a href="#" class="product-share-item"><IconEmail /></a>
|
|
<a href="#" class="product-share-item"><IconWhatsapp /></a>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<div class="product-pag-block">
|
|
<q-btn
|
|
color="white"
|
|
class="btn outlined rounded sm-btn product-pag-item product-prev-btn"
|
|
to="/"
|
|
>
|
|
<IconArrowCircleFilledLeft />
|
|
|
|
<div class="btn-pag-paragraphs">
|
|
<p class="btn-paragraph-top green-text">Produto anterior</p>
|
|
<p class="product-paragraph-bottom">Ramo Leticia</p>
|
|
</div>
|
|
</q-btn>
|
|
|
|
<q-btn
|
|
color="white"
|
|
class="btn outlined rounded sm-btn product-pag-item product-next-btn"
|
|
to="/"
|
|
>
|
|
<div class="btn-pag-paragraphs">
|
|
<p class="btn-paragraph-top green-text">Siguiente producto</p>
|
|
<p class="product-paragraph-bottom">Ramo Rosas</p>
|
|
</div>
|
|
|
|
<IconArrowCircleFilledRight />
|
|
</q-btn>
|
|
</div>
|
|
</Container>
|
|
|
|
<DudasSection isWhite />
|
|
|
|
<Container class="like-another-container gray-bg" tag="section">
|
|
<header class="like-another-header">
|
|
<h3 class="like-another-title subtitle">
|
|
Quizás también te gusten estos ramos
|
|
</h3>
|
|
|
|
<p class="like-another-paragraph">
|
|
Descripción SEO: Lorem ipsum dolor sit amet, consectetur adipiscing
|
|
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
|
aliqua.
|
|
</p>
|
|
</header>
|
|
|
|
<Container cardContainer>
|
|
<template
|
|
v-for="({ imgSrc, discount, isNew, title, value, id }, i) in cardMock"
|
|
>
|
|
<card
|
|
v-if="i < 4"
|
|
:productValue="value"
|
|
:productName="title"
|
|
:discount="discount.toString()"
|
|
:imgSrc="imgSrc"
|
|
:isNew="isNew"
|
|
:key="i"
|
|
:id="id"
|
|
/>
|
|
</template>
|
|
</Container>
|
|
</Container>
|
|
</q-page>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { fakerES } from '@faker-js/faker';
|
|
import { storeToRefs } from 'pinia';
|
|
import { useMeta } from 'quasar';
|
|
import { MetaOptions } from 'quasar/dist/types/meta';
|
|
import { defineComponent, ref } from 'vue';
|
|
|
|
import IconArrowCircleFilledLeft from 'src/components/icons/IconArrowCircleFilledLeft.vue';
|
|
import IconArrowCircleFilledRight from 'src/components/icons/IconArrowCircleFilledRight.vue';
|
|
import IconPencilGreen from 'src/components/icons/IconPencilGreen.vue';
|
|
import IconEmail from 'src/components/icons/social/IconEmail.vue';
|
|
import IconLinkedin from 'src/components/icons/social/IconLinkedin.vue';
|
|
import IconShare from 'src/components/icons/social/IconShare.vue';
|
|
import IconTwitter from 'src/components/icons/social/IconTwitter.vue';
|
|
import IconWhatsapp from 'src/components/icons/social/IconWhatsapp.vue';
|
|
import ProductCarousel from 'src/components/quasar-components/carousel/ProductCarousel.vue';
|
|
import DudasSection from 'src/components/sections/DudasSection.vue';
|
|
import Card from 'src/components/ui/Card.vue';
|
|
import Container from 'src/components/ui/Container.vue';
|
|
// import { cardMock } from 'src/mock/cards';
|
|
import { useTextInputStore } from 'src/stores/textInput';
|
|
|
|
const metaData: MetaOptions = {
|
|
title: 'Product',
|
|
titleTemplate: (title) => `${title} - FloraNet`,
|
|
meta: {
|
|
description: { name: 'description', content: 'Page 1' },
|
|
keywords: { name: 'keywords', content: 'Quasar website' },
|
|
equiv: {
|
|
'http-equiv': 'Content-Type',
|
|
content: 'text/html; charset=UTF-8',
|
|
},
|
|
ogTitle: {
|
|
property: 'og:title',
|
|
template(ogTitle) {
|
|
return `${ogTitle} - FloraNet`;
|
|
},
|
|
},
|
|
noscript: {
|
|
default: 'This is content for browsers with no JS (or disabled JS)',
|
|
},
|
|
},
|
|
};
|
|
|
|
export default defineComponent({
|
|
name: 'ProductPage',
|
|
components: {
|
|
IconPencilGreen,
|
|
// IconSearchGray,
|
|
IconWhatsapp,
|
|
IconLinkedin,
|
|
IconTwitter,
|
|
IconShare,
|
|
IconEmail,
|
|
DudasSection,
|
|
Container,
|
|
Card,
|
|
IconArrowCircleFilledRight,
|
|
IconArrowCircleFilledLeft,
|
|
ProductCarousel,
|
|
},
|
|
setup() {
|
|
useMeta(metaData);
|
|
const textInputStore = useTextInputStore();
|
|
const { dedication } = storeToRefs(textInputStore);
|
|
const { handleDedicationSubmit } = textInputStore;
|
|
|
|
const cardMock = Array.from({ length: 4 }, (_, i) => ({
|
|
id: i + 1,
|
|
title: fakerES.lorem.word(),
|
|
attributes: [''],
|
|
imgSrc: `../assets/flowers/flower-${i + 1}.png`,
|
|
value: fakerES.commerce.price({ symbol: '€', min: 15, max: 200 }),
|
|
isNew: fakerES.datatype.boolean(),
|
|
discount: fakerES.number.int({ min: 5, max: 25 }),
|
|
}));
|
|
|
|
return {
|
|
cardMock,
|
|
slide: ref(1),
|
|
fullscreen: ref(false),
|
|
handleDedicationSubmit,
|
|
dedication,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.product-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 136px;
|
|
margin-bottom: 100px;
|
|
& .product-gallery {
|
|
/* flex: 1 0 min(100%, 562px); */
|
|
height: 622px;
|
|
flex: 1 0 min(100%, 500px);
|
|
overflow: initial;
|
|
& .q-carousel__slides-container .q-panel {
|
|
border-radius: 15px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
& .q-carousel__navigation {
|
|
bottom: -127px;
|
|
left: 0;
|
|
right: 0;
|
|
& .q-carousel__navigation-inner {
|
|
justify-content: flex-start;
|
|
gap: 19px;
|
|
& .q-carousel__thumbnail {
|
|
width: 97px;
|
|
height: 107px;
|
|
object-fit: cover;
|
|
border-radius: 10px;
|
|
opacity: 1;
|
|
flex: 0 0 97px;
|
|
position: relative;
|
|
&.q-carousel__thumbnail--active {
|
|
border: 1px solid $primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: $med-md) {
|
|
height: 396px;
|
|
& .q-carousel__navigation {
|
|
bottom: -83px;
|
|
& .q-carousel__navigation-inner {
|
|
gap: 12px;
|
|
& .q-carousel__thumbnail {
|
|
width: 61px;
|
|
height: 68px;
|
|
flex: 0 0 61px;
|
|
&::after {
|
|
content: '';
|
|
}
|
|
|
|
&.q-carousel__thumbnail--active {
|
|
border: 1px solid $primary;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& .product-content {
|
|
flex: 1 0 min(100%, 466px);
|
|
margin-bottom: 27px;
|
|
& .product-content-header {
|
|
margin-bottom: 20px;
|
|
& .product-content-title {
|
|
margin-bottom: 14px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
& .product-header-block {
|
|
& .product-content-paragraph {
|
|
font-size: $font-14;
|
|
line-height: 21px;
|
|
letter-spacing: 0.28px;
|
|
color: $text-gray;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: $med-md) {
|
|
margin-bottom: 30px;
|
|
}
|
|
}
|
|
|
|
& .product-content-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 36px;
|
|
gap: 60px;
|
|
& .product-content-paragraphs {
|
|
& .product-price {
|
|
font-weight: 500;
|
|
letter-spacing: 0.8px;
|
|
line-height: 21px;
|
|
font-family: $font-lora;
|
|
font-size: $font-40;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
& .product-delivery {
|
|
font-size: $font-14;
|
|
line-height: 24px;
|
|
letter-spacing: 0.28px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
& .product-description {
|
|
font-size: $font-14;
|
|
line-height: 21px;
|
|
letter-spacing: 0.28px;
|
|
color: $text-gray;
|
|
}
|
|
}
|
|
|
|
& .product-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 22px;
|
|
& .product-dedication {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 22px;
|
|
background-color: $secondary-10;
|
|
border-radius: 10px;
|
|
padding: 18px 31px 28px;
|
|
& .product-dedication-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
& .product-dedication-body {
|
|
border: 1px solid $secondary-40;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: $med-md) {
|
|
margin-bottom: 30px;
|
|
gap: 24px;
|
|
& .product-content-paragraphs {
|
|
& .product-price {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
& .product-delivery {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
& .product-form .product-dedication {
|
|
padding: 18px 26px 28px;
|
|
}
|
|
}
|
|
}
|
|
|
|
& .product-content-footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
& .product-share-paragraph {
|
|
color: $text-muted-one;
|
|
font-size: $font-14;
|
|
line-height: 21px;
|
|
letter-spacing: 0.28px;
|
|
}
|
|
|
|
& .product-share-content {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
@media only screen and (max-width: $med-md) {
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
& .product-pag-block {
|
|
flex: 1 0 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 6px;
|
|
& .product-pag-item {
|
|
margin-top: 76px;
|
|
&::before {
|
|
content: '';
|
|
display: none;
|
|
}
|
|
|
|
& .q-focus-helper {
|
|
display: none;
|
|
}
|
|
|
|
& .q-btn__content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: start;
|
|
gap: 14px;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
&.product-prev-btn {
|
|
padding: 10px 55px 10px 20px;
|
|
}
|
|
|
|
&.product-next-btn {
|
|
padding: 10px 20px 10px 55px;
|
|
& .q-btn__content {
|
|
text-align: end;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: $med-md) {
|
|
display: block;
|
|
gap: 130px;
|
|
& .product-gallery {
|
|
margin-bottom: 130px;
|
|
}
|
|
|
|
& .product-pag-block {
|
|
flex: initial;
|
|
& .product-pag-item {
|
|
margin: initial;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px 29px 14px 20px !important;
|
|
|
|
& .q-btn__content {
|
|
gap: 12px;
|
|
|
|
& > svg {
|
|
flex: 0 0 23px;
|
|
}
|
|
}
|
|
|
|
&.product-prev-btn,
|
|
&.product-next-btn {
|
|
padding: 17px 29px 14px 20px;
|
|
}
|
|
|
|
& .btn-pag-paragraphs {
|
|
font-size: $font-14;
|
|
& p {
|
|
font-size: inherit;
|
|
}
|
|
|
|
& .product-paragraph-bottom {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.like-another-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 82px;
|
|
padding-block: 129px 126px;
|
|
text-align: center;
|
|
|
|
& .like-another-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 25px;
|
|
|
|
& .like-another-title {
|
|
font-weight: 500;
|
|
font-size: $font-35;
|
|
line-height: 30px;
|
|
}
|
|
|
|
& .like-another-paragraph {
|
|
color: $text-default;
|
|
line-height: 26px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: $med-md) {
|
|
gap: 61px;
|
|
padding-block: 62px 108px;
|
|
|
|
& .like-another-header {
|
|
& .like-another-title {
|
|
font-size: $font-24;
|
|
}
|
|
|
|
& .like-another-paragraph {
|
|
font-size: $font-14;
|
|
line-height: 18px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|