|
|
@@ -1,150 +1,74 @@
|
|
|
<template>
|
|
|
- <div id="Nos logiciels">
|
|
|
- <LayoutContainer>
|
|
|
- <v-row class="mb-6">
|
|
|
- <LayoutUISubTitle titleText="Ce qui nous anime" />
|
|
|
- <LayoutUITitle title="Nos logiciels dédiés à chaque acteur culturel" />
|
|
|
- </v-row>
|
|
|
+ <v-app>
|
|
|
+ <v-app-bar-nav-icon @click="drawer = true">
|
|
|
+ </v-app-bar-nav-icon>
|
|
|
|
|
|
- <v-row no-gutters="">
|
|
|
- <v-col cols="3">
|
|
|
- Découvrez notre gamme de logiciels de gestion & de communication
|
|
|
- adapté au secteur culturel. Des fonctionnalités complètes:
|
|
|
- <ul class="custom-list-style">
|
|
|
- <li v-for="(feature, index) in features" :key="index">{{ feature }}</li>
|
|
|
- </ul>
|
|
|
- </v-col>
|
|
|
- <v-col cols="3" v-for="(item, index) in items" :key="index">
|
|
|
- <div
|
|
|
- class="container-image"
|
|
|
- :style="{ backgroundImage: 'url(' + item.imageUrl + ')' }"
|
|
|
- >
|
|
|
- <div class="overlay"></div>
|
|
|
- <div class="footer-container">
|
|
|
- <v-img class="logo" :src="item.logoUrl"></v-img>
|
|
|
- <nuxt-link :to="item.link">
|
|
|
- <v-btn
|
|
|
- :style="{ backgroundColor: item.buttonColor }"
|
|
|
- class="plus-button"
|
|
|
- >
|
|
|
- <v-icon>fas fa-plus</v-icon>
|
|
|
- </v-btn>
|
|
|
- </nuxt-link>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </v-col>
|
|
|
- </v-row>
|
|
|
- </LayoutContainer>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
|
|
|
-<script setup>
|
|
|
-const features = [
|
|
|
- "Une gestion de vos contacts",
|
|
|
- "un agenda collaboratif et interactif",
|
|
|
- "Une gestion du matériel et du stock",
|
|
|
- "Une communication simplifiée",
|
|
|
- "Un rapport d'activité complet",
|
|
|
- "Un site internet intégré",
|
|
|
- "Et bien plus encore..."
|
|
|
-];
|
|
|
+ <v-navigation-drawer v-model="drawer" app>
|
|
|
+ <v-list nav dense>
|
|
|
+ <v-list-item v-for="(item, index) in items" :key="item">
|
|
|
+ <v-list-item-title @click="selectMenu(item)">
|
|
|
+ {{ item }}
|
|
|
+ </v-list-item-title>
|
|
|
+ </v-list-item>
|
|
|
+ </v-list>
|
|
|
+ </v-navigation-drawer>
|
|
|
|
|
|
-const items = [
|
|
|
- {
|
|
|
- imageUrl: "/images/solutions/artist.jpg",
|
|
|
- logoUrl: "/images/logo/logiciels/Artist-Blanc.png",
|
|
|
- buttonColor: "#FAC20A",
|
|
|
- link: "/opentalent_artist",
|
|
|
- },
|
|
|
- {
|
|
|
- imageUrl: "/images/solutions/school.jpg",
|
|
|
- logoUrl: "/images/logo/logiciels/School-Blanc.png",
|
|
|
- buttonColor: "rgba(32, 147, 190)",
|
|
|
- link: "/opentalent_school",
|
|
|
- },
|
|
|
+ <!-- Tiroir de navigation pour les sous-menus -->
|
|
|
+ <v-navigation-drawer v-model="subMenuDrawer" app right temporary>
|
|
|
+ <v-list nav dense>
|
|
|
+ <!-- Bouton de retour -->
|
|
|
+ <v-list-item @click="closeSubMenu">
|
|
|
+ <v-list-item-title>Retour</v-list-item-title>
|
|
|
+ </v-list-item>
|
|
|
+
|
|
|
+ <!-- Éléments du sous-menu -->
|
|
|
+ <v-list-item
|
|
|
+ v-for="(subItem, subIndex) in subMenus[currentMenu]"
|
|
|
+ :key="subIndex"
|
|
|
+ >
|
|
|
+ <v-list-item-title>{{ subItem }}</v-list-item-title>
|
|
|
+ </v-list-item>
|
|
|
+ </v-list>
|
|
|
+ </v-navigation-drawer>
|
|
|
|
|
|
- {
|
|
|
- imageUrl: "/images/solutions/manager.png",
|
|
|
- logoUrl: "/images/logo/logiciels/Artist-Blanc.png",
|
|
|
- buttonColor: "#D8050B",
|
|
|
- link: "/opentalent_manager",
|
|
|
+ <!-- Contenu principal -->
|
|
|
+ </v-app>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ drawer: false,
|
|
|
+ subMenuDrawer: false, // État du tiroir de navigation des sous-menus
|
|
|
+ currentMenu: "",
|
|
|
+ items: ["web", "shopping", "videos", "images", "news"],
|
|
|
+ subMenus: {
|
|
|
+ web: ["Sous-menu Web 1", "Sous-menu Web 2"],
|
|
|
+ shopping: ["Sous-menu Shopping 1", "Sous-menu Shopping 2"],
|
|
|
+ // Ajoutez d'autres sous-menus ici
|
|
|
+ },
|
|
|
+ };
|
|
|
},
|
|
|
-];
|
|
|
+ methods: {
|
|
|
+ selectMenu(item) {
|
|
|
+ this.currentMenu = item;
|
|
|
+ this.subMenuDrawer = true; // Ouvre le tiroir de navigation des sous-menus
|
|
|
+ },
|
|
|
+ closeSubMenu() {
|
|
|
+ this.subMenuDrawer = false;
|
|
|
+ this.drawer = true; // Réouvre le menu principal
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.container {
|
|
|
- max-width: 1700px;
|
|
|
-}
|
|
|
-.container-image {
|
|
|
- position: relative;
|
|
|
- background-image: url("/images/solutions/school.jpg");
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-size: cover;
|
|
|
- background-position: center;
|
|
|
- width: 300px;
|
|
|
- height: 400px;
|
|
|
- z-index: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.overlay {
|
|
|
+.nav-menu {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
- left: 0;
|
|
|
right: 0;
|
|
|
- bottom: 0;
|
|
|
- background-color: rgba(0, 0, 0, 0.5);
|
|
|
- z-index: 1;
|
|
|
+ z-index: 999;
|
|
|
}
|
|
|
-
|
|
|
-.footer-container {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.logo {
|
|
|
- width: 100px;
|
|
|
- z-index: 2;
|
|
|
- margin-right: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.plus-button {
|
|
|
- background-color: #fac20a;
|
|
|
- height: 70px;
|
|
|
- z-index: 3;
|
|
|
- border-bottom-right-radius: none !important;
|
|
|
-}
|
|
|
-
|
|
|
-.v-btn {
|
|
|
- height: 80px !important;
|
|
|
- border-bottom-right-radius: none !important;
|
|
|
-}
|
|
|
-
|
|
|
-.plus-button .v-icon {
|
|
|
- color: #ffffff;
|
|
|
- font-size: 2rem;
|
|
|
-}
|
|
|
-
|
|
|
-.plus-button,
|
|
|
-.v-btn {
|
|
|
- border-radius: 0 !important;
|
|
|
- box-shadow: none !important;
|
|
|
- border-top-left-radius: 10% !important;
|
|
|
-}
|
|
|
-
|
|
|
-ul.custom-list-style {
|
|
|
- list-style-type: none;
|
|
|
- padding-left: 0;
|
|
|
-}
|
|
|
-
|
|
|
-ul.custom-list-style li:before {
|
|
|
- content: '- ';
|
|
|
- padding-right: 5px;
|
|
|
-}
|
|
|
-
|
|
|
</style>
|
Maha Bouchiba