|
@@ -1,122 +0,0 @@
|
|
|
-<!-- TODO: delete -->
|
|
|
|
|
-<template>
|
|
|
|
|
- <Carousel>
|
|
|
|
|
- <Slide v-for="slide in carouselItems" :key="slide" :items-to-show="1">
|
|
|
|
|
- <v-row>
|
|
|
|
|
- <v-col cols="12">
|
|
|
|
|
- <v-img :src="slide.logo" class="logo ml-12" />
|
|
|
|
|
- <div
|
|
|
|
|
- class="description ml-12"
|
|
|
|
|
- style="text-align: justify"
|
|
|
|
|
- v-html="slide.description"
|
|
|
|
|
- ></div>
|
|
|
|
|
- </v-col>
|
|
|
|
|
- </v-row>
|
|
|
|
|
- <v-row class="image-row">
|
|
|
|
|
- <div
|
|
|
|
|
- class="background-rectangle"
|
|
|
|
|
- :style="{ backgroundColor: slide.color }"
|
|
|
|
|
- />
|
|
|
|
|
- <v-img :src="slide.image" class="image" />
|
|
|
|
|
- </v-row>
|
|
|
|
|
- </Slide>
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- <template #addons>
|
|
|
|
|
- <Navigation />
|
|
|
|
|
- <Pagination />
|
|
|
|
|
- </template>
|
|
|
|
|
- </Carousel>
|
|
|
|
|
-</template>
|
|
|
|
|
-
|
|
|
|
|
-<script setup>
|
|
|
|
|
-import { Carousel, Navigation, Pagination, Slide } from "vue3-carousel";
|
|
|
|
|
-import "vue3-carousel/dist/carousel.css";
|
|
|
|
|
-
|
|
|
|
|
-const carouselItems = ref([
|
|
|
|
|
- {
|
|
|
|
|
- logo: "/images/logo/logiciels/School-noir.png",
|
|
|
|
|
- description:
|
|
|
|
|
- "Pour les petits comme pour les GRANDS établissements d’enseignement artistique tels que les écoles de musique, de danse, de théâtre, d'art, de cirque et conservatoire.",
|
|
|
|
|
- buttonClass: "btn-school",
|
|
|
|
|
- buttonClassMobile: "btn-school-mobile",
|
|
|
|
|
- image:
|
|
|
|
|
- "/images/Home_logiciel/Logiciel_Opentalent_School-eleve-Conservatoire_de_Musique.png",
|
|
|
|
|
- color: "rgba(32, 147, 190, 0.4)",
|
|
|
|
|
- link: "/opentalent_school",
|
|
|
|
|
- name: "Cindy Blanchard",
|
|
|
|
|
- school: "Conservatoire de Musique",
|
|
|
|
|
- status: "élève",
|
|
|
|
|
- avatar: "/images/carousel/school/avatar.png",
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- logo: "/images/logo/logiciels/Artist-noir.png",
|
|
|
|
|
- description:
|
|
|
|
|
- "Pour les structures culturelles pratiquantes telles que les orchestres, les chorales, les compagnies de danse, théâtre et cirque.",
|
|
|
|
|
- buttonClass: "btn-artist",
|
|
|
|
|
- image:
|
|
|
|
|
- "/images/Home_logiciel/Logiciel_Opentalent_Artist-administrateur-Orchestre_d_harmonie.png",
|
|
|
|
|
- color: "rgba(250, 194, 10, 0.4)",
|
|
|
|
|
- link: "opentalent_artist",
|
|
|
|
|
- name: "Thierry Dupont ",
|
|
|
|
|
- school: "Orchestre d’harmonie",
|
|
|
|
|
- status: "Admin",
|
|
|
|
|
- avatar: "/images/carousel/artist/avatar.png",
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- logo: "/images/logo/logiciels/Manager-noir.png",
|
|
|
|
|
- description: "La solution de mise en réseau des organisations culturelles.",
|
|
|
|
|
- buttonClass: "btn-manager",
|
|
|
|
|
- image:
|
|
|
|
|
- "/images/Home_logiciel/Logiciel_Opentalent_Managerl-Administrateur_Federation.png",
|
|
|
|
|
- color: "rgba(216, 5, 11, 0.4)",
|
|
|
|
|
- link: "opentalent_manager",
|
|
|
|
|
- name: "Marie Voisin",
|
|
|
|
|
- school: "Réseau d'organisations culturelles ",
|
|
|
|
|
- status: "ADMIN",
|
|
|
|
|
- avatar: "/images/carousel/manager/avatar.png",
|
|
|
|
|
- },
|
|
|
|
|
-]);
|
|
|
|
|
-</script>
|
|
|
|
|
-
|
|
|
|
|
-<style>
|
|
|
|
|
-.background-rectangle {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- width: 70%;
|
|
|
|
|
- height: 20rem;
|
|
|
|
|
- left: 72%;
|
|
|
|
|
- top: 50%;
|
|
|
|
|
- transform: translate(-50%, -50%);
|
|
|
|
|
- border-radius: 200px 0px 0px 15rem;
|
|
|
|
|
- z-index: -1;
|
|
|
|
|
-
|
|
|
|
|
- /* ============= LOGO =============== */
|
|
|
|
|
-}
|
|
|
|
|
-.carousel {
|
|
|
|
|
- height: 100vh;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.logo {
|
|
|
|
|
- width: 200px;
|
|
|
|
|
- height: 100px;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.desccription-md {
|
|
|
|
|
- width: 20rem;
|
|
|
|
|
- margin-top: 10px;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.carousel__slide {
|
|
|
|
|
- padding: 10px;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.carousel__prev,
|
|
|
|
|
-.carousel__next {
|
|
|
|
|
- display: none;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.image {
|
|
|
|
|
- width: 20rem;
|
|
|
|
|
- height: 100%;
|
|
|
|
|
-}
|
|
|
|
|
-</style>
|
|
|