Ajustar diseño y cambiar proyecto a js #3
|
@ -1,3 +1,16 @@
|
|||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
import IconArrowCircleRight from '../icons/IconArrowCircleRight.vue';
|
||||
import LogoWhite from '../logo/LogoWhite.vue';
|
||||
import Container from '../ui/Container.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'footer-component',
|
||||
components: { Container, LogoWhite, IconArrowCircleRight },
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-footer class="custom-q-footer" elevated>
|
||||
<container class="footer-container">
|
||||
|
@ -29,8 +42,8 @@
|
|||
<RouterLink to="/">Ramos</RouterLink><br />
|
||||
<RouterLink to="/">Plantas</RouterLink><br />
|
||||
<RouterLink to="/">Nosotros</RouterLink><br />
|
||||
<RouterLink to="/faq">FAQs</RouterLink><br />
|
||||
<RouterLink to="/contacta">Contacta</RouterLink>
|
||||
<!-- <RouterLink to="/faq">FAQs</RouterLink><br /> -->
|
||||
<RouterLink to="/#question-section">Contacta</RouterLink>
|
||||
</li>
|
||||
|
||||
<li class="footer-list-item">
|
||||
|
@ -67,19 +80,6 @@
|
|||
</q-footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
import IconArrowCircleRight from '../icons/IconArrowCircleRight.vue';
|
||||
import LogoWhite from '../logo/LogoWhite.vue';
|
||||
import Container from '../ui/Container.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'footer-component',
|
||||
components: { Container, LogoWhite, IconArrowCircleRight },
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-q-footer {
|
||||
position: static;
|
||||
|
@ -100,18 +100,22 @@ a:hover {
|
|||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding-block: 66px 31px;
|
||||
|
||||
& .footer-body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: 86px;
|
||||
|
||||
& .footer-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&.footer-primary {
|
||||
gap: 56px;
|
||||
position: relative;
|
||||
flex: 0 0 min(100%, 560px);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
@ -130,8 +134,10 @@ a:hover {
|
|||
&.footer-secondary {
|
||||
gap: 79px;
|
||||
flex: 0 0 min(100%, 800px);
|
||||
|
||||
& .footer-list-item {
|
||||
flex: 0 0 min(100%, 250px);
|
||||
|
||||
&.list-links {
|
||||
flex: 0 0 min(100%, 133px);
|
||||
}
|
||||
|
@ -140,6 +146,7 @@ a:hover {
|
|||
|
||||
@media only screen and (max-width: $med-md) {
|
||||
justify-content: space-evenly;
|
||||
|
||||
&.footer-primary {
|
||||
flex: 1;
|
||||
gap: 20px;
|
||||
|
@ -152,6 +159,7 @@ a:hover {
|
|||
height: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
& .footer-list-item {
|
||||
flex: 1 0 min(100%, 150px);
|
||||
}
|
||||
|
@ -159,8 +167,10 @@ a:hover {
|
|||
|
||||
&.footer-secondary {
|
||||
gap: 59px;
|
||||
|
||||
& .footer-list-item {
|
||||
flex: 1;
|
||||
|
||||
&:last-child {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
|
@ -1,28 +1,3 @@
|
|||
<template>
|
||||
<q-header
|
||||
class="header-container transparent"
|
||||
:class="isOpenNav && 'mobile-nav'"
|
||||
>
|
||||
<send-banner
|
||||
left-text="ENVÍO GRATIS a partir de 60€ | Compra el sábado hasta 14h y entrega el domingo"
|
||||
right-text="Envíos 24-48 h a toda España, Portugal y sur de Francia"
|
||||
mobile-text="ENVÍO GRATIS a partir de 60€"
|
||||
v-if="!isOpenNav"
|
||||
/>
|
||||
|
||||
<div class="header-container-wrapper custom-container">
|
||||
<RouterLink to="/">
|
||||
<LogoWhite v-if="!isOpenNav" />
|
||||
<LogoGreenLight v-if="isOpenNav" />
|
||||
</RouterLink>
|
||||
|
||||
<nav-links />
|
||||
|
||||
<user-area />
|
||||
</div>
|
||||
</q-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
|
@ -48,15 +23,36 @@ export default defineComponent({
|
|||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-header class="header-container transparent" :class="isOpenNav && 'mobile-nav'">
|
||||
<send-banner left-text="ENVÍO GRATIS a partir de 60€ | Compra el sábado hasta 14h y entrega el domingo"
|
||||
right-text="Envíos 24-48 h a toda España, Portugal y sur de Francia" mobile-text="ENVÍO GRATIS a partir de 60€"
|
||||
v-if="!isOpenNav" />
|
||||
|
||||
<div class="header-container-wrapper custom-container">
|
||||
<RouterLink to="/">
|
||||
<LogoWhite v-if="!isOpenNav" />
|
||||
<LogoGreenLight v-if="isOpenNav" />
|
||||
</RouterLink>
|
||||
|
||||
<nav-links />
|
||||
|
||||
<user-area />
|
||||
</div>
|
||||
</q-header>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 23px;
|
||||
|
||||
&.mobile-nav {
|
||||
background-color: $primary !important;
|
||||
padding-block: 21px 15px;
|
||||
}
|
||||
|
||||
& .header-container-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
|
@ -1,26 +1,3 @@
|
|||
<template>
|
||||
<q-header class="header-container transparent">
|
||||
<send-banner
|
||||
left-text="ENVÍO GRATIS a partir de 60€ | Compra el sábado hasta 14h y entrega el domingo"
|
||||
right-text="Envíos 24-48 h a toda España, Portugal y sur de Francia"
|
||||
mobile-text="ENVÍO GRATIS a partir de 60€"
|
||||
class="remove-mobile"
|
||||
/>
|
||||
|
||||
<div class="header-menu">
|
||||
<div class="header-container-wrapper custom-container">
|
||||
<RouterLink to="/">
|
||||
<LogoWhite />
|
||||
</RouterLink>
|
||||
|
||||
<nav-links />
|
||||
|
||||
<user-area />
|
||||
</div>
|
||||
</div>
|
||||
</q-header>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
|
@ -44,6 +21,26 @@ export default defineComponent({
|
|||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-header class="header-container transparent">
|
||||
<send-banner left-text="ENVÍO GRATIS a partir de 60€ | Compra el sábado hasta 14h y entrega el domingo"
|
||||
right-text="Envíos 24-48 h a toda España, Portugal y sur de Francia" mobile-text="ENVÍO GRATIS a partir de 60€"
|
||||
class="remove-mobile" />
|
||||
|
||||
<div class="header-menu">
|
||||
<div class="header-container-wrapper custom-container">
|
||||
<RouterLink to="/">
|
||||
<LogoWhite />
|
||||
</RouterLink>
|
||||
|
||||
<nav-links />
|
||||
|
||||
<user-area />
|
||||
</div>
|
||||
</div>
|
||||
</q-header>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header-container {
|
||||
display: flex;
|
||||
|
|
|
@ -1,29 +1,3 @@
|
|||
<template>
|
||||
<div class="user-area">
|
||||
<!-- <dropdown-group class="user-area-lang" label="Idioma">
|
||||
<dropdown-item current-lang="en"> EN </dropdown-item>
|
||||
<dropdown-item current-lang="pt"> PT </dropdown-item>
|
||||
<dropdown-item current-lang="es"> ES </dropdown-item>
|
||||
</dropdown-group> -->
|
||||
|
||||
<RouterLink class="user-area-link user" to="/"><icon-user /></RouterLink>
|
||||
<RouterLink class="user-area-link cart" to="/checkout">
|
||||
<icon-cart />
|
||||
</RouterLink>
|
||||
|
||||
<q-btn
|
||||
class="user-area-hamburg"
|
||||
@click="handleOpenMobileNav"
|
||||
size="sm"
|
||||
color="white"
|
||||
flat
|
||||
round
|
||||
>
|
||||
<IconHamburger />
|
||||
</q-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { useMobileStore } from '../../stores/mobileNav';
|
||||
|
@ -38,8 +12,8 @@ export default defineComponent({
|
|||
components: {
|
||||
IconCart,
|
||||
IconUser,
|
||||
// DropdownGroup,
|
||||
// DropdownItem,
|
||||
// DropdownGroup,
|
||||
// DropdownItem,
|
||||
IconHamburger,
|
||||
},
|
||||
setup() {
|
||||
|
@ -50,6 +24,25 @@ export default defineComponent({
|
|||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="user-area">
|
||||
<!-- <dropdown-group class="user-area-lang" label="Idioma">
|
||||
<dropdown-item current-lang="en"> EN </dropdown-item>
|
||||
<dropdown-item current-lang="pt"> PT </dropdown-item>
|
||||
<dropdown-item current-lang="es"> ES </dropdown-item>
|
||||
</dropdown-group> -->
|
||||
|
||||
<RouterLink class="user-area-link user" to="/"><icon-user /></RouterLink>
|
||||
<RouterLink class="user-area-link cart" to="/checkout">
|
||||
<icon-cart />
|
||||
</RouterLink>
|
||||
|
||||
<q-btn class="user-area-hamburg" @click="handleOpenMobileNav" size="sm" color="white" flat round>
|
||||
<IconHamburger />
|
||||
</q-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.user-area {
|
||||
display: flex;
|
||||
|
@ -58,6 +51,7 @@ export default defineComponent({
|
|||
|
||||
& .user-area-link {
|
||||
color: $white;
|
||||
|
||||
&.user,
|
||||
&.cart {
|
||||
width: 16px;
|
||||
|
@ -71,6 +65,7 @@ export default defineComponent({
|
|||
|
||||
@media only screen and (max-width: $med-md) {
|
||||
gap: 27px;
|
||||
|
||||
& .user-area-link {
|
||||
&.help {
|
||||
display: none;
|
||||
|
|
|
@ -1,36 +1,3 @@
|
|||
<template>
|
||||
<div class="mobile-nav-container" :class="!isOpenNav && 'hide'">
|
||||
<header class="mobile-nav-links">
|
||||
<RouterLink @click="closeNav" class="mobile-link" to="/categoria/ramos"
|
||||
>Ramos</RouterLink
|
||||
>
|
||||
<RouterLink @click="closeNav" class="mobile-link" to="/categoria/plantas">
|
||||
Plantas
|
||||
</RouterLink>
|
||||
<RouterLink @click="closeNav" class="mobile-link" to="/"
|
||||
>Floranet</RouterLink
|
||||
>
|
||||
<RouterLink @click="closeNav" class="mobile-link" to="/">FAQs</RouterLink>
|
||||
<RouterLink @click="closeNav" class="mobile-link" to="/"
|
||||
>Contacta</RouterLink
|
||||
>
|
||||
</header>
|
||||
|
||||
<!--<div class="mobile-nav-lang">
|
||||
<p class="mobile-lang-paragraph">Idioma</p>
|
||||
<select class="mobile-lang-select" name="lang">
|
||||
<option value="">Español</option>
|
||||
</select>
|
||||
</div>-->
|
||||
|
||||
<footer class="mobile-nav-footer">
|
||||
<RouterLink to="/" class="btn outlined rounded sm-btn">
|
||||
¿Tienes dudas? hablemos <IconChatRoundedFill />
|
||||
</RouterLink>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { useMobileStore } from 'src/stores/mobileNav';
|
||||
|
||||
|
@ -68,6 +35,32 @@ export default defineComponent({
|
|||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mobile-nav-container" :class="!isOpenNav && 'hide'">
|
||||
<header class="mobile-nav-links">
|
||||
<RouterLink @click="closeNav" class="mobile-link" to="/categoria/ramos">Ramos</RouterLink>
|
||||
<RouterLink @click="closeNav" class="mobile-link" to="/categoria/plantas">Plantas</RouterLink>
|
||||
<RouterLink @click="closeNav" class="mobile-link" to="/">Floranet</RouterLink>
|
||||
<!-- <RouterLink @click="closeNav" class="mobile-link" to="/">FAQs</RouterLink> -->
|
||||
<RouterLink @click="closeNav" class="mobile-link" to="/">Contacta</RouterLink>
|
||||
</header>
|
||||
|
||||
<!--<div class="mobile-nav-lang">
|
||||
<p class="mobile-lang-paragraph">Idioma</p>
|
||||
<select class="mobile-lang-select" name="lang">
|
||||
<option value="">Español</option>
|
||||
</select>
|
||||
</div>-->
|
||||
|
||||
<footer class="mobile-nav-footer">
|
||||
<RouterLink to="/" class="btn outlined rounded sm-btn">
|
||||
¿Tienes dudas? hablemos
|
||||
<IconChatRoundedFill />
|
||||
</RouterLink>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mobile-nav-container {
|
||||
position: absolute;
|
||||
|
@ -83,20 +76,24 @@ export default defineComponent({
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 70px;
|
||||
|
||||
& .mobile-link {
|
||||
color: $text-muted;
|
||||
font-family: $font-roboto;
|
||||
line-height: 40px;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid $primary-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .mobile-nav-lang {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
margin-bottom: 42px;
|
||||
|
||||
& .mobile-lang-paragraph {
|
||||
color: $text-muted;
|
||||
}
|
||||
|
@ -108,11 +105,13 @@ export default defineComponent({
|
|||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid $primary-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .mobile-nav-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
Loading…
Reference in New Issue