verdnatura/floranet
verdnatura
/
floranet
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

vertical carousel

This commit is contained in:
Jaume Solís 2023-12-19 11:51:41 +01:00
parent 4c4e04a182
commit 177bc3f495
1 changed files with 22 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/quasar-components/carousel/VerticalCarouselImgs.vue
View File

@ -44,14 +44,12 @@
<PostalCode /> <PostalCode />
</div> </div>
<button class="btn carousel-content-item"> <q-btn to="/categoria/ramos" class="btn carousel-content-item">
<IconSearch /> ver disponibilidad <IconSearch /> ver disponibilidad
</button> </q-btn>
</div> </div>
<footer class="carousel-content-footer"> <!-- <footer class="carousel-content-footer"></footer> -->
<IconMouse />
</footer>
</div> </div>
</div> </div>
</template> </template>
@ -63,7 +61,6 @@ import { PropType, defineComponent, ref } from 'vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import Calendar from 'src/components/@inputs/Calendar.vue'; import Calendar from 'src/components/@inputs/Calendar.vue';
import PostalCode from 'src/components/@inputs/PostalCode.vue'; import PostalCode from 'src/components/@inputs/PostalCode.vue';
import IconMouse from 'src/components/icons/IconMouse.vue';
import IconSearch from 'src/components/icons/IconSearch.vue'; import IconSearch from 'src/components/icons/IconSearch.vue';
import { useMobileStore } from 'src/stores/mobileNav'; import { useMobileStore } from 'src/stores/mobileNav';
@ -93,7 +90,7 @@ export default defineComponent({
screenWidth, screenWidth,
}; };
}, },
components: { IconMouse, IconSearch, Calendar, PostalCode }, components: { IconSearch, Calendar, PostalCode },
}); });
</script> </script>
@ -138,10 +135,27 @@ export default defineComponent({
flex-wrap: wrap; flex-wrap: wrap;
border-radius: 10px 0 0 10px; border-radius: 10px 0 0 10px;
overflow: hidden; overflow: hidden;
margin-bottom: 82px; /* margin-bottom: 82px; */
min-height: 150px;
& .carousel-content-item { & .carousel-content-item {
display: flex;
align-items: center;
padding: 27px 53px 34px 48px; padding: 27px 53px 34px 48px;
flex: 1; flex: 1;
position: relative;
&:first-child::after {
content: '';
position: absolute;
width: 1px;
opacity: 0.2;
background-color: $text-normal-100;
right: 0;
top: 27px;
bottom: 29px;
@media only screen and (max-width: $med-md) {
display: none;
}
}
&.btn { &.btn {
&:focus, &:focus,
&:focus-visible { &:focus-visible {