suppression des contenus du dossiers pages
This commit is contained in:
Valentin
parent
dce2819468
commit
3f261a4509
|
|
@ -22,6 +22,8 @@ Work with
|
|||
npm run dev
|
||||
```
|
||||
|
||||
Create and populate the `pages`, `public`, `components` and `assets` folders.
|
||||
|
||||
Build the site in `.output/public` directory
|
||||
|
||||
```bash
|
||||
|
|
|
|||
|
|
@ -1,73 +0,0 @@
|
|||
<template>
|
||||
<main id="contact">
|
||||
<div>
|
||||
<img
|
||||
:src="`/imgs/small/${globalData.contact_image}.webp`"
|
||||
:alt="globalData.contact_image_titre"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p>{{ globalData.contact_text }}</p>
|
||||
<a :href="'mailto:' + globalData.email">{{ globalData.email }}</a>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
async setup() {
|
||||
|
||||
let globalData = await useFetchGlobalData();
|
||||
globalData = globalData.globalData._object.$sglobalData;
|
||||
|
||||
return {
|
||||
globalData
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#contact {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> div:first-of-type {
|
||||
width: 40vw;
|
||||
> img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
> div:last-of-type {
|
||||
margin-top: 2rem;
|
||||
> p {
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
#contact {
|
||||
flex-direction: row;
|
||||
> div:first-of-type {
|
||||
width: 30vw;
|
||||
}
|
||||
> div:last-of-type {
|
||||
width: 40vw;
|
||||
margin-left: 2rem;
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
#contact {
|
||||
> div:first-of-type {
|
||||
width: 15vw;
|
||||
}
|
||||
> div:last-of-type {
|
||||
width: 30vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
<template>
|
||||
<Projects :contents="galerie" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Projects from '@/components/Projects.vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const galerie = ref([]);
|
||||
|
||||
const { data: itemsData } = useFetch('/api/items/galerie', { server: true });
|
||||
|
||||
onMounted(async () => {
|
||||
if (itemsData.value) {
|
||||
galerie.value = itemsData.value.data;
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
galerie
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Projects
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,95 +0,0 @@
|
|||
<template>
|
||||
<main>
|
||||
<div class="indexImg" v-for="image in itemsAccueil" :key="image.id">
|
||||
<img
|
||||
:src="`/imgs/large/${image.image_accueil}.webp`"
|
||||
:alt="image.titre"
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
setup() {
|
||||
const itemsAccueil = ref([]);
|
||||
|
||||
const { data: itemsData } = useFetch('/api/items/images_accueil', { server: true });
|
||||
|
||||
onMounted(async () => {
|
||||
if (itemsData.value) {
|
||||
itemsAccueil.value = itemsData.value.data;
|
||||
setTimeout(() => {
|
||||
startSlider();
|
||||
}, 1);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
return {
|
||||
itemsAccueil,
|
||||
};
|
||||
|
||||
|
||||
function startSlider() {
|
||||
const imgs = document.querySelectorAll('.indexImg img');
|
||||
|
||||
const showingTime = 5000, transitionTime = 2000;
|
||||
|
||||
for (let img of imgs) {
|
||||
img.addEventListener('click', function() {
|
||||
nextSlide();
|
||||
resetTimer();
|
||||
});
|
||||
img.style.transition = `opacity ${transitionTime / 1000}s ease-out`;
|
||||
}
|
||||
|
||||
imgs[0].style.opacity = 1;
|
||||
|
||||
let diapoTimer = setInterval(nextSlide, showingTime + transitionTime);
|
||||
|
||||
let index = 1;
|
||||
|
||||
function nextSlide() {
|
||||
if (index === 0) {
|
||||
imgs[imgs.length - 1].style.opacity = 0;
|
||||
imgs[index].style.opacity = 1;
|
||||
} else {
|
||||
imgs[index - 1].style.opacity = 0;
|
||||
imgs[index].style.opacity = 1;
|
||||
}
|
||||
|
||||
if (index === imgs.length - 1) {
|
||||
index = 0;
|
||||
} else {
|
||||
index ++;
|
||||
}
|
||||
}
|
||||
|
||||
function resetTimer() {
|
||||
clearInterval(diapoTimer);
|
||||
diapoTimer = setInterval(nextSlide, showingTime + transitionTime);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.indexImg {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<template>
|
||||
<main>
|
||||
<p>{{ globalData.magasin_explication }}</p>
|
||||
<Projects :contents="magasin" />
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Projects from '@/components/Projects.vue';
|
||||
|
||||
export default {
|
||||
async setup() {
|
||||
const magasin = ref([]);
|
||||
|
||||
const { data: itemsData } = useFetch('/api/items/magasin', { server: true });
|
||||
|
||||
onBeforeMount(async () => {
|
||||
if (itemsData.value) {
|
||||
magasin.value = itemsData.value.data;
|
||||
}
|
||||
});
|
||||
|
||||
let globalData = await useFetchGlobalData();
|
||||
globalData = globalData.globalData._object.$sglobalData;
|
||||
|
||||
return {
|
||||
globalData,
|
||||
magasin
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Projects
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue