initial commit
This commit is contained in:
María
53
components/ButtonCTA.vue
Normal file
53
components/ButtonCTA.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<button type="button" class="flex items-center justify-center cursor-pointer"
|
||||
:disabled="disabled" :class="buttonClasses" @click="handleClick">
|
||||
<slot></slot>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: "transparent",
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
buttonClasses() {
|
||||
return {
|
||||
"transparent": this.color === "transparent",
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick($ev) {
|
||||
if (this.disabled) {
|
||||
$ev.stopPropagation();
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.transparent {
|
||||
background: transparent;
|
||||
padding: 1rem;
|
||||
border: 1px solid $color-button;
|
||||
border-radius: 12px;
|
||||
color: $color-button;
|
||||
width: fit-content;
|
||||
text-transform: uppercase;
|
||||
&:hover {
|
||||
background: $color-button;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,212 +1,297 @@
|
||||
<template>
|
||||
<div>
|
||||
<hr />
|
||||
<div>
|
||||
<img class="bolsa" src="@/assets/img/footer-bolsa.svg" alt="" />
|
||||
</div>
|
||||
<hr />
|
||||
<div class="social">
|
||||
<a href="https://www.facebook.com/coceta" target="_blank">
|
||||
<img
|
||||
class="social-logo"
|
||||
src="@/assets/img/footer-facebook.svg"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<a href="https://twitter.com/Coopsdetrabajo" target="_blank">
|
||||
<img class="social-logo" src="@/assets/img/footer-twitter.svg" alt="" />
|
||||
</a>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="organization">
|
||||
<div class="organization-image-container">
|
||||
<img
|
||||
class="organization-image"
|
||||
src="@/assets/img/footer-coceta.svg"
|
||||
alt=""
|
||||
/>
|
||||
<footer>
|
||||
<div class="footer-container">
|
||||
<div class="media-container">
|
||||
<img src="/assets/img/logo-consumo-cuidado.png" alt="Kit-ECO.SOCIAL Logo" class="logo-kit">
|
||||
|
||||
<p>Síguenos y entérate de los próximos eventos, novedades y recursos.</p>
|
||||
<ul class="social-list">
|
||||
<li class="social-item">
|
||||
<NuxtLink to="#" class="social-link">
|
||||
<img src="/assets/img/instagram.svg" alt="Instagram" />
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="social-item">
|
||||
<NuxtLink to="#" class="social-link">
|
||||
<img src="/assets/img/facebook.svg" alt="Facebook" />
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="social-item">
|
||||
<NuxtLink to="#" class="social-link">
|
||||
<img src="/assets/img/linkedin.svg" alt="LinkedIn" />
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="social-item">
|
||||
<NuxtLink to="#" class="social-link">
|
||||
<img src="/assets/img/x.svg" alt="X-Twitter" />
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
|
||||
<div class="footer-links">
|
||||
<div class="footer-column">
|
||||
<h3>Herramientas</h3>
|
||||
<ul>
|
||||
<li><NuxtLink to="/es/consumo-cuidado">Consumo Cuidado</NuxtLink></li>
|
||||
<li><NuxtLink to="/es/aula-virtual">Aula Virtual</NuxtLink></li>
|
||||
<li><NuxtLink to="/es/iguales">Iguales</NuxtLink></li>
|
||||
<li><NuxtLink to="/es/objetivo2030">Objetivo 2030</NuxtLink></li>
|
||||
<li><NuxtLink to="/es/certifica-t">Certifica-T</NuxtLink></li>
|
||||
<li><NuxtLink to="/es/enlazados">Enlazados</NuxtLink></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-column">
|
||||
<h3>Enlaces rápidos</h3>
|
||||
<ul>
|
||||
<li><a href="#">Nosotras</a></li>
|
||||
<li><a href="#">Contactanos</a></li>
|
||||
<li><a href="#">Términos y condiciones</a></li>
|
||||
<li><a href="#">Política de privacidad</a></li>
|
||||
<li><a href="#">Aviso legal</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="organization-image-container">
|
||||
<img
|
||||
class="organization-image"
|
||||
src="@/assets/img/footer-ministerio.svg"
|
||||
alt=""
|
||||
/>
|
||||
|
||||
<div class="footer-logos">
|
||||
<h3>Proyecto financiado por:</h3>
|
||||
<div class="logos-grid">
|
||||
<img src="/assets/img/uelogo 1.png" alt="Unión Europea">
|
||||
<img src="/assets/img/logotipo_ministerio.png" alt="Gobierno de España">
|
||||
<img src="/assets/img/logotipo_PRTR.png" alt="Plan de Recuperación">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<ul class="link-list">
|
||||
<li>
|
||||
<small>2021 La Tienda.Coop</small>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://coceta.coop/" class="footer-link" target="_blank">
|
||||
<small>Coceta</small>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<NuxtLink to="/page/terminos">
|
||||
<small>Términos y condiciones</small>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<NuxtLink to="/page/legal">
|
||||
<small>Política de privacidad</small>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<NuxtLink to="/page/cookies">
|
||||
<small>Cookies</small>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a
|
||||
href="http://enreda.coop/"
|
||||
class="footer-link enreda"
|
||||
target="_blank"
|
||||
>
|
||||
<small
|
||||
><mark class="highlight">Sitio desarrollado por Enreda</mark></small
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="made-by">
|
||||
<p><span>{{ year }}</span> © kit-ECO.SOCIAL | Diseñado y desarrollado por Enreda Coop</p>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getCurrentYear } from "@/utils/dates.js";
|
||||
export default {
|
||||
name: 'Footer',
|
||||
}
|
||||
computed: {
|
||||
year() {
|
||||
return getCurrentYear();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
hr {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.bolsa {
|
||||
width: 50px;
|
||||
height: auto;
|
||||
margin: 4.375rem auto;
|
||||
display: block;
|
||||
@include mobile {
|
||||
width: 35px;
|
||||
margin: 3rem auto;
|
||||
}
|
||||
}
|
||||
.social {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 3.125rem auto;
|
||||
&-logo {
|
||||
height: 1.25rem;
|
||||
margin: auto 1.875rem;
|
||||
footer {
|
||||
background: linear-gradient($color-button, $color-bg-dark-2);
|
||||
display: flex;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
border-top-left-radius: 1.5rem;
|
||||
border-top-right-radius: 1.5rem;
|
||||
color: white;
|
||||
@media (min-width: 768px) {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.organization {
|
||||
.footer-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4rem;
|
||||
justify-content: space-between;
|
||||
@media (min-width: 768px) {
|
||||
gap: 3rem;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
flex-direction: row;
|
||||
gap: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.media-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
@media (min-width: 768px) {
|
||||
align-items: flex-start;
|
||||
width: 33.333333%;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
width: 16.666667%;
|
||||
}
|
||||
|
||||
logo-kit {
|
||||
height: 15px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
@media (min-width: 768px) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.made-by {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
&-image {
|
||||
width: 18rem;
|
||||
margin: 3.125rem;
|
||||
@include mobile {
|
||||
width: 6rem;
|
||||
margin: 0.8rem;
|
||||
border-top: 1px solid white;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.social-list {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.social-item {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
border-radius: 9999px;
|
||||
border: 1px solid white;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: white;
|
||||
color: var(--background-dark);
|
||||
}
|
||||
}
|
||||
|
||||
.social-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 66.6667%;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 50%;
|
||||
|
||||
h3 {
|
||||
font-weight: 600; // font-semibold
|
||||
font-size: 1.125rem; // text-lg
|
||||
margin-bottom: 1.5rem; // mb-6
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
|
||||
li {
|
||||
margin-bottom: 0.75rem; // space-y-3
|
||||
|
||||
a,
|
||||
.nuxt-link {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
font-weight: 600; // hover:font-semibold
|
||||
text-decoration: underline; // para "Enlaces rápidos"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dot {
|
||||
height: 3px;
|
||||
width: 3px;
|
||||
background-color: #bbb;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
margin: 7px;
|
||||
.footer-logos {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
@include mobile {
|
||||
height: 2px;
|
||||
width: 2px;
|
||||
margin: 5px;
|
||||
@media (min-width: 768px) {
|
||||
align-items: flex-end;
|
||||
width: 33.3333%; // md:w-1/3
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
width: 50%; // lg:w-1/2
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 600;
|
||||
font-size: 1.125rem;
|
||||
margin-bottom: 1rem; // mb-4
|
||||
}
|
||||
|
||||
.logos-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
gap: 0.75rem 0; // gap-y-3
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
height: 3rem; // h-12
|
||||
grid-column: span 12;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
height: 3.5rem; // h-14
|
||||
}
|
||||
|
||||
&:nth-child(1),
|
||||
&:nth-child(2) {
|
||||
grid-column: span 6;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
grid-column: span 12;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.link-list {
|
||||
font-family: 'Noto Sans';
|
||||
font-size: $xs;
|
||||
color: $color-grey-darker;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 3.125rem;
|
||||
a {
|
||||
text-decoration: none;
|
||||
list-style-type: none;
|
||||
|
||||
@include mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
flex-direction: row;
|
||||
font-size: $xxs;
|
||||
}
|
||||
|
||||
& small {
|
||||
margin: auto 1.25rem;
|
||||
text-align: center;
|
||||
color: $color-grey-darker;
|
||||
:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
li:nth-child(1):after,
|
||||
li:nth-child(2):after,
|
||||
li:nth-child(3):after,
|
||||
li:nth-child(4):after,
|
||||
li:nth-child(5):after {
|
||||
color: $color-grey-darker;
|
||||
content: '|';
|
||||
margin: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-link {
|
||||
.enreda {
|
||||
padding: 1.25em;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background: $color-greylighter;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
cursor: pointer;
|
||||
color: $color-light;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="row container">
|
||||
<ClientOnly placerholder="Loading...">
|
||||
<!-- <div class="arrow-left-wrapper col-2 col-sm-1">
|
||||
<img
|
||||
@@ -9,23 +9,24 @@
|
||||
@click="slideCarousel('prev')"
|
||||
/>
|
||||
</div> -->
|
||||
|
||||
<Carousel
|
||||
ref="productDetails"
|
||||
class="col-8 col-sm-10"
|
||||
:items-to-show="3"
|
||||
:gap="5"
|
||||
class="carousel"
|
||||
:items-to-show="4"
|
||||
:gap="1"
|
||||
:pagination-enabled="false"
|
||||
:wrap-around="false"
|
||||
:mouse-wheel="true"
|
||||
:breakpoints-enabled="true"
|
||||
>
|
||||
<Slide v-for="item in items" :key="item.id">
|
||||
<Slide v-for="item in items" :key="item.id" class="slide-container">
|
||||
<NuxtLink :to="formattedItem(item).url" class="slide">
|
||||
<div class="image-container">
|
||||
<img class="image" :src="formattedItem(item).image" alt="" />
|
||||
</div>
|
||||
<span>{{ formattedItem(item).name }}</span>
|
||||
<div class="details-container">
|
||||
<p>{{ formattedItem(item).name }}</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</Slide>
|
||||
<template #addons>
|
||||
@@ -121,29 +122,53 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.row {
|
||||
padding: 0 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center
|
||||
}
|
||||
|
||||
.slide-container {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.slide {
|
||||
width: 237px;
|
||||
height: 316px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: stretch;
|
||||
padding: 0.3rem;
|
||||
span {
|
||||
padding: 0.5rem;
|
||||
background-color: #FDFCFB;
|
||||
border: 5px solid white;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
|
||||
text-decoration: none;
|
||||
p {
|
||||
text-align: center;
|
||||
display: -webkit-box;
|
||||
--webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
width: 25vw;
|
||||
max-width: 110px;
|
||||
font-weight: $regular;
|
||||
font-size: $s;
|
||||
width: 100%;
|
||||
font-weight: $medium;
|
||||
font-size: $m;
|
||||
}
|
||||
}
|
||||
|
||||
.image-container {
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
margin-bottom: 0.7rem;
|
||||
height: 11rem;
|
||||
flex-shrink: 0;
|
||||
align-self: stretch;
|
||||
border-radius: 24px 24px 0 0;
|
||||
@include mobile {
|
||||
max-height: 10rem;
|
||||
max-width: 10rem;
|
||||
@@ -151,7 +176,17 @@ export default {
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
object-fit: cover;
|
||||
border-radius: 24px 24px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.details-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
border-radius: 0 0 24px 24px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,31 +4,43 @@
|
||||
<div class="navmenu-container">
|
||||
<NavMenu @handle-logout="handleLogout" />
|
||||
</div>
|
||||
<!-- isAdmin: {{ isAdmin }} <br>
|
||||
isAuthenticated: {{ isAuthenticated }} <br> -->
|
||||
<nav>
|
||||
<NuxtLink to="/">
|
||||
<img
|
||||
class="logo"
|
||||
src="@/assets/img/latienda-logo.png"
|
||||
src="@/assets/img/logo-consumo-cuidado.png"
|
||||
alt="latienda.coop"
|
||||
/>
|
||||
</NuxtLink>
|
||||
<SearchInput v-if="$route.name == 'index'" class="search-input"/>
|
||||
<div class="nav-buttons">
|
||||
<NuxtLink to="/page/info">
|
||||
<!-- <NuxtLink to="/page/info">
|
||||
<img
|
||||
class="nav-buttons-info nav-icon"
|
||||
src="@/assets/img/latienda-info.svg"
|
||||
alt="latienda.coop"
|
||||
/>
|
||||
</NuxtLink> -->
|
||||
<NuxtLink to="/" class="nuxt-link">
|
||||
<p class="nav-text">Inicio</p>
|
||||
</NuxtLink>
|
||||
<div class="nav-buttons-dots"></div>
|
||||
<NuxtLink to="/" class="nuxt-link">
|
||||
<p class="nav-text">Catálogo</p>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/" class="nuxt-link">
|
||||
<p class="nav-text">Productoras</p>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/" class="nuxt-link">
|
||||
<p class="nav-text">Únete</p>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/" class="nuxt-link">
|
||||
<p class="nav-text">kit-eco.social</p>
|
||||
</NuxtLink>
|
||||
<div class="nav-buttons-line"></div>
|
||||
<NuxtLink v-if="isAuthenticated & !isAdmin" to="/editar/perfil">
|
||||
<div class="nav-buttons-acceso">
|
||||
<img
|
||||
class="nav-icon"
|
||||
src="@/assets/img/latienda-acceder.svg"
|
||||
src="@/assets/img/circle-user-round.svg"
|
||||
alt="latienda.coop"
|
||||
/>
|
||||
<div class="nav-text">{{ name }}</div>
|
||||
@@ -38,7 +50,7 @@
|
||||
<div class="nav-buttons-acceso">
|
||||
<img
|
||||
class="nav-icon"
|
||||
src="@/assets/img/latienda-acceder.svg"
|
||||
src="@/assets/img/circle-user-round.svg"
|
||||
alt="latienda.coop"
|
||||
/>
|
||||
<div class="nav-text">{{ name }}</div>
|
||||
@@ -48,20 +60,12 @@
|
||||
<div class="nav-buttons-acceso">
|
||||
<img
|
||||
class="nav-icon"
|
||||
src="@/assets/img/latienda-acceder.svg"
|
||||
src="@/assets/img/circle-user-round.svg"
|
||||
alt="latienda.coop"
|
||||
/>
|
||||
<div class="nav-text">Acceder</div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- <nuxt-link to="/">Búsqueda</nuxt-link>
|
||||
<nuxt-link to="/auth/registro">Registrarse</nuxt-link>
|
||||
<nuxt-link to="/auth/login">Login</nuxt-link>
|
||||
<nuxt-link to="/editar">{{ $store.state.auth.email }}</nuxt-link>
|
||||
<nuxt-link to="/admin" v-if="isAdmin">Panel de administración</nuxt-link> -->
|
||||
<!-- <button @click="logout">Logout</button> -->
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
@@ -103,7 +107,7 @@ export default {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
background-color: $color-green;
|
||||
background-color: white;
|
||||
padding: 10px;
|
||||
|
||||
@include mobile {
|
||||
@@ -167,11 +171,11 @@ nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-info {
|
||||
&-line {
|
||||
cursor: pointer;
|
||||
}
|
||||
&-dots:after {
|
||||
color: $color-navy;
|
||||
&-line:after {
|
||||
color: $color-consumo-base;
|
||||
content: '\22EE';
|
||||
margin: 0.5rem;
|
||||
@include mobile {
|
||||
@@ -183,6 +187,7 @@ nav {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
.nav-buttons-info {
|
||||
@include mobile {
|
||||
@@ -191,10 +196,27 @@ nav {
|
||||
}
|
||||
}
|
||||
|
||||
.nuxt-link {
|
||||
text-decoration: none;
|
||||
:hover {
|
||||
color: $color-consumo-base;
|
||||
}
|
||||
@include desktop {
|
||||
padding: 12px;
|
||||
margin: 0 1rem;
|
||||
}
|
||||
@include tablet {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
font-size: $xs;
|
||||
color: $color-navy;
|
||||
margin: 0.5rem;
|
||||
color: $color-primary;
|
||||
text-transform: uppercase;
|
||||
margin: 0 0.1rem;
|
||||
font-weight: $medium;
|
||||
|
||||
@include mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -129,7 +129,7 @@
|
||||
</NuxtLink>
|
||||
</ul>
|
||||
<div class="credits">
|
||||
<span>2021 La Tienda.Coop</span>
|
||||
<span>2025 Consumo Cuidado</span>
|
||||
<a href="http://enreda.coop/" target="_blank"
|
||||
>Sitio desarrollado por Enreda</a
|
||||
>
|
||||
@@ -195,7 +195,7 @@ export default {
|
||||
.nav-menu {
|
||||
font-family: $font-primary;
|
||||
padding: 30px 0 0 20px;
|
||||
background-color: $color-green;
|
||||
background-color: $color-consumo-base;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -237,7 +237,7 @@ export default {
|
||||
|
||||
.section-list {
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid $color-navy;
|
||||
border-bottom: 1px solid $color-primary;
|
||||
}
|
||||
|
||||
.section-text {
|
||||
@@ -257,7 +257,7 @@ ul {
|
||||
a {
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: $color-navy;
|
||||
color: $color-primary;
|
||||
}
|
||||
|
||||
.link-list,
|
||||
@@ -275,7 +275,7 @@ a {
|
||||
span,
|
||||
a {
|
||||
display: block;
|
||||
color: $color-navy;
|
||||
color: $color-primary;
|
||||
font-size: $xs;
|
||||
padding: 0.3em 0;
|
||||
}
|
||||
|
||||
@@ -1,18 +1,6 @@
|
||||
<template>
|
||||
<div class="container wrapper">
|
||||
<form class="search-container" @submit.prevent="search" >
|
||||
<div class="categorias-wrapper">
|
||||
<select v-model="selectedCategory" class="categorias">
|
||||
<option selected value="">Todas las categorías</option>
|
||||
<option
|
||||
v-for="(category, key) in categories"
|
||||
:key="key"
|
||||
:value="category"
|
||||
>
|
||||
{{ category }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<input
|
||||
id="searchbox"
|
||||
v-model="searchText"
|
||||
@@ -153,7 +141,6 @@ export default {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -165,13 +152,13 @@ export default {
|
||||
.search-container {
|
||||
background-color: $color-light;
|
||||
height: 60px;
|
||||
border-radius: 40px;
|
||||
overflow: hidden;
|
||||
max-width: 490px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 15px 0 50px;
|
||||
margin-top: 48px;
|
||||
-webkit-box-shadow: 0px 0px 20px 0px #d1d1d1; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
|
||||
box-shadow: 0px 0px 20px 0px #d1d1d1;
|
||||
@include mobile {
|
||||
@@ -201,36 +188,37 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.categorias-wrapper {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #1aceb8, #0bbfba);
|
||||
padding: 0.4em 0.5em 0.4em 1.2em;
|
||||
// .categorias-wrapper {
|
||||
// height: 100%;
|
||||
// background: linear-gradient(90deg, #1aceb8, #0bbfba);
|
||||
// padding: 0.4em 0.5em 0.4em 1.2em;
|
||||
|
||||
@include mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// @include mobile {
|
||||
// display: none;
|
||||
// }
|
||||
// }
|
||||
|
||||
.categorias {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: $color-light;
|
||||
height: 100%;
|
||||
width: 18rem;
|
||||
-moz-appearance: none;
|
||||
text-align: center;
|
||||
// .categorias {
|
||||
// cursor: pointer;
|
||||
// outline: none;
|
||||
// background: transparent;
|
||||
// color: $color-light;
|
||||
// height: 100%;
|
||||
// width: 18rem;
|
||||
// -moz-appearance: none;
|
||||
// text-align: center;
|
||||
|
||||
@include mobile {
|
||||
display: none;
|
||||
}
|
||||
@include tablet {
|
||||
width: 14rem;
|
||||
}
|
||||
}
|
||||
// @include mobile {
|
||||
// display: none;
|
||||
// }
|
||||
// @include tablet {
|
||||
// width: 14rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
.search-icon {
|
||||
cursor: pointer;
|
||||
width: 1.8rem;
|
||||
@include mobile {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user