|
@@ -1,9 +1,13 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <v-container class="container">
|
|
|
|
|
|
|
+ <LayoutContainer>
|
|
|
<v-carousel
|
|
<v-carousel
|
|
|
|
|
+ v-if="lgAndUp"
|
|
|
|
|
+ ref="carousel"
|
|
|
|
|
+ v-model="activeIndex"
|
|
|
:show-arrows="false"
|
|
:show-arrows="false"
|
|
|
class="carousel"
|
|
class="carousel"
|
|
|
:hide-delimiter-background="true"
|
|
:hide-delimiter-background="true"
|
|
|
|
|
+ :show-delimiters="false"
|
|
|
>
|
|
>
|
|
|
<v-carousel-item v-for="(item, index) in carouselItems" :key="index">
|
|
<v-carousel-item v-for="(item, index) in carouselItems" :key="index">
|
|
|
<v-row>
|
|
<v-row>
|
|
@@ -27,7 +31,7 @@
|
|
|
class="background-rectangle"
|
|
class="background-rectangle"
|
|
|
:style="{ backgroundColor: item.color }"
|
|
:style="{ backgroundColor: item.color }"
|
|
|
></div>
|
|
></div>
|
|
|
- <v-card class="card">
|
|
|
|
|
|
|
+ <v-card class="card" elevation="5">
|
|
|
<v-img
|
|
<v-img
|
|
|
class="profile-image"
|
|
class="profile-image"
|
|
|
src="/images/carousel/school/avatar.png"
|
|
src="/images/carousel/school/avatar.png"
|
|
@@ -47,12 +51,28 @@
|
|
|
</v-col>
|
|
</v-col>
|
|
|
</v-row>
|
|
</v-row>
|
|
|
</v-carousel-item>
|
|
</v-carousel-item>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="custom-controls">
|
|
|
|
|
+ <div
|
|
|
|
|
+ v-for="(item, index) in carouselItems"
|
|
|
|
|
+ :key="index"
|
|
|
|
|
+ :class="{ 'active-control': index === activeIndex }"
|
|
|
|
|
+ @click="changeSlide(index)"
|
|
|
|
|
+ ></div>
|
|
|
|
|
+ </div>
|
|
|
</v-carousel>
|
|
</v-carousel>
|
|
|
- </v-container>
|
|
|
|
|
|
|
+ </LayoutContainer>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
<script setup>
|
|
|
-import { ref } from "vue";
|
|
|
|
|
|
|
+import { useDisplay } from "vuetify";
|
|
|
|
|
+const { mdAndDown, mdAndUp, lgAndUp } = useDisplay();
|
|
|
|
|
+
|
|
|
|
|
+let activeIndex = ref(0); // initialise avec le premier item affiché
|
|
|
|
|
+
|
|
|
|
|
+const changeSlide = (index) => {
|
|
|
|
|
+ activeIndex.value = index;
|
|
|
|
|
+};
|
|
|
|
|
|
|
|
const carouselItems = ref([
|
|
const carouselItems = ref([
|
|
|
{
|
|
{
|
|
@@ -66,7 +86,7 @@ const carouselItems = ref([
|
|
|
{
|
|
{
|
|
|
logo: "/images/carousel/artist/artist.png",
|
|
logo: "/images/carousel/artist/artist.png",
|
|
|
description:
|
|
description:
|
|
|
- "Pour les petits comme pour les grans établissements d’enseignement artistique...",
|
|
|
|
|
|
|
+ "Pour les structures culturelles pratiquantes telles que les orchestres, les chorales, les compagnies de cirque, théâtre et danse.Gérez votre activité avec un logiciel de gestion et communication au service de votre passion.",
|
|
|
buttonClass: "btn-artist",
|
|
buttonClass: "btn-artist",
|
|
|
image: "/images/carousel/artist/musician.png",
|
|
image: "/images/carousel/artist/musician.png",
|
|
|
color: "rgba(250, 194, 10, 0.4)",
|
|
color: "rgba(250, 194, 10, 0.4)",
|
|
@@ -74,7 +94,7 @@ const carouselItems = ref([
|
|
|
{
|
|
{
|
|
|
logo: "/images/carousel/manager/manager.png",
|
|
logo: "/images/carousel/manager/manager.png",
|
|
|
description:
|
|
description:
|
|
|
- "Pour les structures culturelles pratiquantes telles que les orchestres...",
|
|
|
|
|
|
|
+ "La solution de mise en réseau des organisations culturelles. Fédérations, confédérations et collectivités, utilisez une solution collaborative innovante et unique spécialement développée pour les réseaux culturels.",
|
|
|
buttonClass: "btn-manager",
|
|
buttonClass: "btn-manager",
|
|
|
image: "/images/carousel/manager/fédération.png",
|
|
image: "/images/carousel/manager/fédération.png",
|
|
|
color: "rgba(216, 5, 11, 0.4)",
|
|
color: "rgba(216, 5, 11, 0.4)",
|
|
@@ -83,49 +103,52 @@ const carouselItems = ref([
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
|
|
|
+::v-deep .v-carousel__controls {
|
|
|
|
|
+ display: none;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.carousel,
|
|
|
|
|
+.v-carousel__item {
|
|
|
|
|
+ height: 900% !important;
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
-.card{
|
|
|
|
|
- height: 250px;
|
|
|
|
|
- left: 150px;
|
|
|
|
|
- border-radius: 20px;
|
|
|
|
|
|
|
+.card {
|
|
|
|
|
+ height: 20%;
|
|
|
|
|
+ width: 27%;
|
|
|
|
|
+ border-radius: 1rem;
|
|
|
|
|
+ margin-top: 1rem;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.profile-image {
|
|
.profile-image {
|
|
|
- width: 100px;
|
|
|
|
|
- height: 100px;
|
|
|
|
|
- margin: 0 auto;
|
|
|
|
|
|
|
+ width: 40%;
|
|
|
|
|
+ margin: auto;
|
|
|
|
|
+ height: 12vh;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.name {
|
|
.name {
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
- font-size: 18px;
|
|
|
|
|
|
|
+ font-size: 100%;
|
|
|
font-weight: bold;
|
|
font-weight: bold;
|
|
|
- margin-bottom: 8px;
|
|
|
|
|
|
|
+ margin-bottom: 1vh;
|
|
|
font-family: "Barlow";
|
|
font-family: "Barlow";
|
|
|
font-style: normal;
|
|
font-style: normal;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
-.school {
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- font-size: 14px;
|
|
|
|
|
- color: #888888;
|
|
|
|
|
- margin-bottom: 8px;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
|
|
+.school,
|
|
|
.status {
|
|
.status {
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
- font-size: 14px;
|
|
|
|
|
|
|
+ font-size: 80%;
|
|
|
color: #888888;
|
|
color: #888888;
|
|
|
|
|
+ margin-bottom: 1vh;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.background-rectangle {
|
|
.background-rectangle {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- width: 801px;
|
|
|
|
|
- height: 326px;
|
|
|
|
|
- left: 72%; /* Ajustez cette valeur pour déplacer le rectangle horizontalement */
|
|
|
|
|
|
|
+ width: 60%;
|
|
|
|
|
+ height: 20rem;
|
|
|
|
|
+ left: 72%;
|
|
|
top: 50%;
|
|
top: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
transform: translate(-50%, -50%);
|
|
|
- border-radius: 200px 0px 0px 200px;
|
|
|
|
|
|
|
+ border-radius: 200px 0px 0px 15rem;
|
|
|
z-index: -1;
|
|
z-index: -1;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -133,95 +156,102 @@ const carouselItems = ref([
|
|
|
align-items: flex-start;
|
|
align-items: flex-start;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+.carousel {
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ margin-top: 10vh;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
.description {
|
|
.description {
|
|
|
text-align: left;
|
|
text-align: left;
|
|
|
|
|
+ width: 30%;
|
|
|
|
|
+ margin-bottom: 2rem;
|
|
|
|
|
+}
|
|
|
|
|
+.logo-school {
|
|
|
|
|
+ max-width: 35vw;
|
|
|
|
|
+ height: 25vh;
|
|
|
|
|
+ margin-top: 10px;
|
|
|
|
|
+ margin-bottom: 5vh;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.logo-row,
|
|
|
|
|
-.text-row,
|
|
|
|
|
-.btn-row {
|
|
|
|
|
- justify-content: flex-start;
|
|
|
|
|
|
|
+.image {
|
|
|
|
|
+ width: 20rem;
|
|
|
|
|
+ margin-top: 6rem;
|
|
|
|
|
+ right: 20%;
|
|
|
}
|
|
}
|
|
|
-.container {
|
|
|
|
|
- max-width: 1900px;
|
|
|
|
|
- height: 800px;
|
|
|
|
|
- margin-top: 90px;
|
|
|
|
|
|
|
+
|
|
|
|
|
+.description {
|
|
|
|
|
+ text-align: left;
|
|
|
|
|
+ margin-right: 9vw;
|
|
|
|
|
+ margin-left: 7vw;
|
|
|
|
|
+ width: 25vw;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.logo-school {
|
|
|
|
|
- width: 370px;
|
|
|
|
|
- height: 199px;
|
|
|
|
|
- margin-right: 299px;
|
|
|
|
|
- margin-bottom: 30px;
|
|
|
|
|
|
|
+.custom-controls {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 50%;
|
|
|
|
|
+ right: 1vw;
|
|
|
|
|
+ transform: translateY(-50%);
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ gap: 1vh;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.image {
|
|
|
|
|
- width: 529px;
|
|
|
|
|
- height: 566px;
|
|
|
|
|
|
|
+.custom-controls div {
|
|
|
|
|
+ width: 1vh;
|
|
|
|
|
+ height: 1vh;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ background-color: grey;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
|
|
+.custom-controls .active-control {
|
|
|
|
|
+ background-color: #000;
|
|
|
|
|
+ margin-right: 2rem;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.btn-school {
|
|
.btn-school {
|
|
|
- margin-top: 20px;
|
|
|
|
|
- margin-left: 20px;
|
|
|
|
|
- margin-bottom: 20px;
|
|
|
|
|
background: rgba(32, 147, 190, 0.4);
|
|
background: rgba(32, 147, 190, 0.4);
|
|
|
- border-radius: 6px;
|
|
|
|
|
- margin-left: 100px;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
|
|
+ border-radius: 0.5rem;
|
|
|
|
|
+ margin-left: 7vw;
|
|
|
padding: 25px;
|
|
padding: 25px;
|
|
|
gap: 9px;
|
|
gap: 9px;
|
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
|
font-size: 10px;
|
|
font-size: 10px;
|
|
|
line-height: 15px;
|
|
line-height: 15px;
|
|
|
- width: 200px;
|
|
|
|
|
- height: 56px;
|
|
|
|
|
|
|
+ width: 10rem;
|
|
|
|
|
+ height: 4rem;
|
|
|
|
|
+ font-family: "Barlow";
|
|
|
|
|
+ font-style: normal;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.btn-artist {
|
|
.btn-artist {
|
|
|
- font-family: "Barlow";
|
|
|
|
|
- font-style: normal;
|
|
|
|
|
- border-radius: 6px;
|
|
|
|
|
background: rgba(250, 194, 10, 0.4);
|
|
background: rgba(250, 194, 10, 0.4);
|
|
|
- margin-left: 100px;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
|
|
+ border-radius: 0.5rem;
|
|
|
|
|
+ margin-left: 7vw;
|
|
|
padding: 25px;
|
|
padding: 25px;
|
|
|
gap: 9px;
|
|
gap: 9px;
|
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
|
font-size: 10px;
|
|
font-size: 10px;
|
|
|
line-height: 15px;
|
|
line-height: 15px;
|
|
|
- width: 200px;
|
|
|
|
|
- height: 56px;
|
|
|
|
|
|
|
+ width: 10rem;
|
|
|
|
|
+ height: 4rem;
|
|
|
|
|
+ font-family: "Barlow";
|
|
|
|
|
+ font-style: normal;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.btn-manager {
|
|
.btn-manager {
|
|
|
- margin-top: 20px;
|
|
|
|
|
- margin-left: 20px;
|
|
|
|
|
- margin-bottom: 20px;
|
|
|
|
|
background: rgba(216, 5, 11, 0.4);
|
|
background: rgba(216, 5, 11, 0.4);
|
|
|
- border-radius: 6px;
|
|
|
|
|
- margin-left: 100px;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
|
|
+ border-radius: 0.5rem;
|
|
|
|
|
+ margin-left: 7vw;
|
|
|
padding: 25px;
|
|
padding: 25px;
|
|
|
gap: 9px;
|
|
gap: 9px;
|
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
|
font-size: 10px;
|
|
font-size: 10px;
|
|
|
line-height: 15px;
|
|
line-height: 15px;
|
|
|
- width: 200px;
|
|
|
|
|
- height: 56px;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.description {
|
|
|
|
|
- text-align: left;
|
|
|
|
|
- margin-right: 290px;
|
|
|
|
|
- margin-left: 100px;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.justify-center {
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.justify-end {
|
|
|
|
|
- justify-content: flex-end;
|
|
|
|
|
|
|
+ width: 10rem;
|
|
|
|
|
+ height: 4rem;
|
|
|
|
|
+ font-family: "Barlow";
|
|
|
|
|
+ font-style: normal;
|
|
|
}
|
|
}
|
|
|
</style>
|
|
</style>
|