valentin_le_moign/mahee-auffret
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cache des images resize

Browse Source
This commit is contained in:
Valentin
2024-04-16 14:19:14 +02:00
parent 5ae12fdc14
commit 4bd30ff772
10 changed files with 55 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/Header.vue
View File

@@ -131,6 +131,7 @@ export default {
width: 3rem;
z-index: 1;
img {
padding-top: 10px;
width: 100%;
transform: rotate(0deg);
transition: transform 0.3s ease-out;
@@ -156,6 +157,9 @@ export default {
}
}
}
> div > a > img {
padding: 10px;
}
}
}
</style>

19
components/Projects.vue
View File

@@ -1,9 +1,9 @@
<template>
<main>
<article v-for="content in contents" :key="content.id">
<article v-for="content in contents.slice().reverse()" :key="content.id">
<div>
<img
:src="`/small/${content.image ? content.image : content.shop_image}.webp`"
:src="`/imgs/small/${content.image ? content.image : content.shop_image}.webp`"
:alt="content.titre"
@click="displaySlider(content.id)"
/>
@@ -28,7 +28,7 @@
<swiper-slide v-for="content in contents" :key="content.id">
<div class="swiper-zoom-container">
<img
:src="`/large/${content.image ? content.image : content.shop_image}.webp`"
:src="`/imgs/large/${content.image ? content.image : content.shop_image}.webp`"
:alt="content.titre"
/>
</div>
@@ -135,6 +135,14 @@ export default {
img{
width: 60%;
}
> .swiper-zoom-container {
> img {
cursor: zoom-in;
}
}
}
.swiper-slide-zoomed > .swiper-zoom-container > img {
cursor: move;
}
}
.swiper-button-prev,
@@ -189,9 +197,10 @@ export default {
width: 15vw;
}
.swiper .swiper-wrapper .swiper-slide img {
width: 30%;
width: 60%;
padding-top: 2rem;
padding-bottom: 2rem;
}
}
}
</style>