|
|
@@ -1,279 +1,252 @@
|
|
|
+<!--
|
|
|
+Section "Présentation" d'une page Logiciel
|
|
|
+-->
|
|
|
<template>
|
|
|
<div id="Presentation">
|
|
|
<LayoutContainer>
|
|
|
- <v-row class="custom-row" >
|
|
|
+ <v-row>
|
|
|
+
|
|
|
+ <!-- Colonne 1 (sous-titre, illustration logiciels, prix) -->
|
|
|
<v-col cols="5">
|
|
|
- <LayoutUISubTitle
|
|
|
- :iconSize="5"
|
|
|
- :iconColor="iconColor"
|
|
|
- :titleText="titleText"
|
|
|
- class="ml-8"
|
|
|
+ <LayoutUISubTitle class="ml-8" >
|
|
|
+ {{ title }}
|
|
|
+ </LayoutUISubTitle>
|
|
|
+
|
|
|
+ <v-img
|
|
|
+ src="/images/logiciels/Opentalent-disponible-su-Multi-support.png"
|
|
|
+ class="w-100"
|
|
|
/>
|
|
|
- <!-- <div class="screen-img"></div> -->
|
|
|
- <v-img src="/images/logiciels/Opentalent-disponible-su-Multi-support.png" class="screen-img" />
|
|
|
|
|
|
- <div
|
|
|
- :style="{ backgroundColor: backgroundColor }"
|
|
|
- class="rectangle-4 ml-6"
|
|
|
- >
|
|
|
- <div :style="{ backgroundColor: circleColor }" class="black-circle">
|
|
|
- <div class="content-flex ml-6">
|
|
|
- <v-img :src="logoSrc" class="logo-manager" />
|
|
|
- <div class="pricing-details">
|
|
|
- <p class="pricing-small-text">{{ pricingFromText }}</p>
|
|
|
- <p class="pricing-big-text">
|
|
|
- {{ pricingAmount }}
|
|
|
- <span class="smaller-text">{{ pricingPeriodText }}</span>
|
|
|
- </p>
|
|
|
- <p class="pricing-small-text">
|
|
|
- {{ pricingAnnouncementText }}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
+ <div class="pricing-rectangle rectangle-4 ml-6">
|
|
|
+ <div class="logo-circle">
|
|
|
+ <div class="content-flex ml-6">
|
|
|
+ <v-img
|
|
|
+ :src="logoSrc"
|
|
|
+ class="software-logo"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <div v-if="pricingAmount" class="details">
|
|
|
+ <p class="small-text">
|
|
|
+ {{ pricingFromText }}
|
|
|
+ </p>
|
|
|
+ <p class="big-text">
|
|
|
+ {{ pricingAmount }}
|
|
|
+ <span class="smaller-text">
|
|
|
+ {{ pricingPeriodText }}
|
|
|
+ </span>
|
|
|
+ </p>
|
|
|
+ <p class="small-text">
|
|
|
+ {{ pricingAnnouncementText }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div v-else class="details medium-text">
|
|
|
+ {{ pricingAltText }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</v-col>
|
|
|
|
|
|
+ <!-- Colonne 2 (présentation, pictogrammes des fonctionnalités) -->
|
|
|
<v-col cols="6">
|
|
|
- <LayoutUITitle :title="presentationText.toolTitle" />
|
|
|
- <ul class="outil-ul ml-12 mt-6">
|
|
|
+ <h3>
|
|
|
+ {{ section1title }}
|
|
|
+ </h3>
|
|
|
+
|
|
|
+ <ul class="ml-12 mt-6">
|
|
|
<li
|
|
|
- class="outil-list"
|
|
|
- v-for="item in presentationText.toolList"
|
|
|
+ v-for="item in features"
|
|
|
:key="item"
|
|
|
>
|
|
|
{{ item }}
|
|
|
</li>
|
|
|
</ul>
|
|
|
- <h2 class="mt-12 ml-6 presentation-caracteristique">
|
|
|
- {{ presentationText.characteristicsTitle }}
|
|
|
- </h2>
|
|
|
- <div class="picto-container">
|
|
|
- <div
|
|
|
- class="picto-group"
|
|
|
- v-for="picto in pictoImages"
|
|
|
- :key="picto.text"
|
|
|
- >
|
|
|
- <div
|
|
|
- :style="{ backgroundImage: 'url(' + picto.src + ')' }"
|
|
|
- class="picto-img"
|
|
|
- ></div>
|
|
|
- <p class="picto-text" :style="{ color: pictoColor }">
|
|
|
- {{ picto.text }}
|
|
|
- </p>
|
|
|
- </div>
|
|
|
+
|
|
|
+ <h3 class="mt-12 ml-6">
|
|
|
+ {{ section2title }}
|
|
|
+ </h3>
|
|
|
+
|
|
|
+ <div class="d-flex flex-row">
|
|
|
+ <div
|
|
|
+ v-for="picto in pictos"
|
|
|
+ :key="picto.text"
|
|
|
+ class="picto"
|
|
|
+ >
|
|
|
+ <v-img :src="picto.src" class="img" />
|
|
|
+
|
|
|
+ <p class="text">
|
|
|
+ {{ picto.text }}
|
|
|
+ </p>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</v-col>
|
|
|
</v-row>
|
|
|
</LayoutContainer>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
-<script setup>
|
|
|
-import { computed } from "vue";
|
|
|
-import { useRoute } from "vue-router";
|
|
|
+<script setup lang="ts">
|
|
|
+import { PropType } from "@vue/runtime-core";
|
|
|
+import { FeaturePicto } from "~/types/interface";
|
|
|
|
|
|
const route = useRoute();
|
|
|
|
|
|
-const pricingAmount = computed(() => {
|
|
|
- if (/^\/opentalent_artist(\/|$)/.test(route.path)) {
|
|
|
- return "14€";
|
|
|
- } else if (/^\/opentalent_school(\/|$)/.test(route.path)) {
|
|
|
- return "20€";
|
|
|
- }else {
|
|
|
- return "Sur devis";
|
|
|
- }
|
|
|
-});
|
|
|
-
|
|
|
-const logoSrc = computed(() => {
|
|
|
- if (/^\/opentalent_artist(\/|$)/.test(route.path)) {
|
|
|
- return "/images/logo/logiciels/OT_Artist-BLANC.png";
|
|
|
- } else if (/^\/opentalent_school(\/|$)/.test(route.path)) {
|
|
|
- return "/images/logo/logiciels/OT_School-blanc.png";
|
|
|
- } else if (/^\/opentalent_manager(\/|$)/.test(route.path)) {
|
|
|
- return "/images/logo/logiciels/OT_Manager-BLANC.png";
|
|
|
- }
|
|
|
-});
|
|
|
-
|
|
|
-const titleText = computed(() => {
|
|
|
- if (/^\/opentalent_artist(\/|$)/.test(route.path)) {
|
|
|
- return "Présentation d'Opentalent Artist";
|
|
|
- } else if (/^\/opentalent_school(\/|$)/.test(route.path)) {
|
|
|
- return "Présentation d'Opentalent School";
|
|
|
- } else if (/^\/opentalent_manager(\/|$)/.test(route.path)) {
|
|
|
- return "Présentation d'Opentalent Manager";
|
|
|
- } else {
|
|
|
- return "Titre par défaut";
|
|
|
- }
|
|
|
-});
|
|
|
-
|
|
|
-const iconColor = computed(() => {
|
|
|
- if (/^\/opentalent_artist(\/|$)/.test(route.path)) {
|
|
|
- return "#fac20a";
|
|
|
- } else if (/^\/opentalent_school(\/|$)/.test(route.path)) {
|
|
|
- return "rgba(32, 147, 190, 0.6)";
|
|
|
- } else if (/^\/opentalent_manager(\/|$)/.test(route.path)) {
|
|
|
- return "#d8050b";
|
|
|
- } else {
|
|
|
- return "rgba(32, 147, 190, 0.6)";
|
|
|
- }
|
|
|
-});
|
|
|
-
|
|
|
-// on affiche " à partir de" sur opentalent_school et artist
|
|
|
-const pricingFromText = computed(() => {
|
|
|
- if (/^\/opentalent_artist(\/|$)/.test(route.path) || /^\/opentalent_school(\/|$)/.test(route.path)) {
|
|
|
- return "à partir de";
|
|
|
- }else{
|
|
|
- return ''
|
|
|
- }
|
|
|
-
|
|
|
-})
|
|
|
const props = defineProps({
|
|
|
- pictoImages: {
|
|
|
- type: Array,
|
|
|
- default: () => [],
|
|
|
+ title: {
|
|
|
+ type: String,
|
|
|
+ required: true
|
|
|
},
|
|
|
- pictoColor: {
|
|
|
+ section1title: {
|
|
|
type: String,
|
|
|
- default: "#000000",
|
|
|
+ required: false,
|
|
|
+ default: "Un outil complet en ligne"
|
|
|
+ },
|
|
|
+ section2title: {
|
|
|
+ type: String,
|
|
|
+ required: false,
|
|
|
+ default: "Des caractéristiques uniques & dédiée"
|
|
|
+ },
|
|
|
+ features: {
|
|
|
+ type: Object as PropType<Array<string>>,
|
|
|
+ required: true
|
|
|
},
|
|
|
- presentationText: {
|
|
|
- type: Object,
|
|
|
- default: () => ({
|
|
|
- toolTitle: "Default Title",
|
|
|
- toolList: [],
|
|
|
- characteristicsTitle: "Default Characteristics Title",
|
|
|
- }),
|
|
|
+ pictos: {
|
|
|
+ type: Array as PropType<Array<FeaturePicto>>,
|
|
|
+ required: true
|
|
|
},
|
|
|
logoSrc: {
|
|
|
type: String,
|
|
|
default: "",
|
|
|
},
|
|
|
pricingFromText: {
|
|
|
- type: String
|
|
|
+ type: String,
|
|
|
+ required: false,
|
|
|
+ default: "à partir de"
|
|
|
},
|
|
|
pricingAmount: {
|
|
|
type: String,
|
|
|
- default: "sur devis",
|
|
|
- class: "pricing-big-text",
|
|
|
+ default: ""
|
|
|
},
|
|
|
pricingPeriodText: {
|
|
|
type: String,
|
|
|
+ required: false,
|
|
|
+ default: "mois"
|
|
|
},
|
|
|
pricingAnnouncementText: {
|
|
|
type: String,
|
|
|
+ required: false,
|
|
|
+ default: "payable annuellement"
|
|
|
},
|
|
|
- backgroundColor: {
|
|
|
- type: String,
|
|
|
- default: "rgba(32, 147, 190, 0.2)",
|
|
|
- },
|
|
|
- circleColor: {
|
|
|
- type: String,
|
|
|
- default: "#091d20",
|
|
|
- },
|
|
|
+ pricingAltText: {
|
|
|
+ required: false,
|
|
|
+ default: ""
|
|
|
+ }
|
|
|
});
|
|
|
-
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-
|
|
|
-.custom-row {
|
|
|
+<style scoped lang="scss">
|
|
|
+.v-row {
|
|
|
width: 90%;
|
|
|
margin-left: auto;
|
|
|
margin-right: auto;
|
|
|
}
|
|
|
-.picto-img {
|
|
|
- width: 200px;
|
|
|
- height: 200px;
|
|
|
- background-size: contain;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center;
|
|
|
-}
|
|
|
|
|
|
-.presentation-caracteristique {
|
|
|
- color: #071b1f;
|
|
|
- font-size: 34px;
|
|
|
- font-style: normal;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 38px;
|
|
|
-}
|
|
|
-.pricing-details {
|
|
|
+.pricing-rectangle {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- height: 100%;
|
|
|
- color: black;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 1rem;
|
|
|
- margin-left: 7rem;
|
|
|
- margin-top: -3rem;
|
|
|
- width: 10rem;
|
|
|
-}
|
|
|
+ flex-direction: row;
|
|
|
+ background-color: var(--secondary-color);
|
|
|
+ width: 380px;
|
|
|
+ height: 6rem;
|
|
|
+ border-radius: 3rem;
|
|
|
+ margin-top: 2rem;
|
|
|
|
|
|
-.pricing-small-text {
|
|
|
- font-size: 0.6em;
|
|
|
-}
|
|
|
+ .logo-circle {
|
|
|
+ background-color: var(--on-primary-color);
|
|
|
+ border-radius: 3rem;
|
|
|
+ width: 7rem;
|
|
|
+ height: 6rem;
|
|
|
+ }
|
|
|
|
|
|
-.pricing-big-text {
|
|
|
- font-size: 2.5rem;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 2rem;
|
|
|
- margin-left: 1rem;
|
|
|
-}
|
|
|
+ .software-logo {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ top:1rem;
|
|
|
+ right: .5rem;
|
|
|
+ }
|
|
|
|
|
|
-.smaller-text {
|
|
|
- font-size: 0.6em;
|
|
|
-}
|
|
|
-.black-circle {
|
|
|
- border-radius: 3rem;
|
|
|
- background: #091d20;
|
|
|
- width: 7rem;
|
|
|
- height: 6rem;
|
|
|
-}
|
|
|
+ .details {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ color: black;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 1rem;
|
|
|
+ width: 10rem;
|
|
|
+ margin-left: 18px;
|
|
|
+ }
|
|
|
|
|
|
+ .small-text {
|
|
|
+ font-size: 0.6em;
|
|
|
+ }
|
|
|
|
|
|
-.logo-manager {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- top:1rem;
|
|
|
- right: .5rem;
|
|
|
-}
|
|
|
-.rectangle-4 {
|
|
|
- width: 380px;
|
|
|
- height: 6rem;
|
|
|
- background: rgba(32, 147, 190, 0.2);
|
|
|
- border-radius: 3rem;
|
|
|
- margin-top: 2rem;
|
|
|
-}
|
|
|
-.picto-text {
|
|
|
- font-weight: 300;
|
|
|
- font-size: 0.9rem;
|
|
|
- margin-top: -3rem;
|
|
|
- text-align: center;
|
|
|
- width: 60%;
|
|
|
- margin-right: auto;
|
|
|
- margin-left: auto;
|
|
|
-}
|
|
|
-.picto-container {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
+ .big-text {
|
|
|
+ font-size: 2.5rem;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 2rem;
|
|
|
+ margin-left: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .smaller-text {
|
|
|
+ font-size: 0.6em;
|
|
|
+ }
|
|
|
+
|
|
|
+ .medium-text {
|
|
|
+ font-size: 1.5rem;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
}
|
|
|
-.picto-group {
|
|
|
+
|
|
|
+.picto {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
margin-left: -4rem;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-weight: 300;
|
|
|
+ font-size: 0.9rem;
|
|
|
+ margin-top: -3rem;
|
|
|
+ text-align: center;
|
|
|
+ width: 60%;
|
|
|
+ margin-right: auto;
|
|
|
+ margin-left: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-.picto-container {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
+h3 {
|
|
|
+ color: var(--on-primary-color);
|
|
|
+ font-size: 34px;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 38px;
|
|
|
}
|
|
|
|
|
|
-.screen-img {
|
|
|
- width: 100%;
|
|
|
+h3:first-child {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 3rem;
|
|
|
+ line-height: 3rem;
|
|
|
+ margin-left: 1rem;
|
|
|
+ width: 35rem;
|
|
|
}
|
|
|
</style>
|
Olivier Massot