|
|
@@ -70,8 +70,54 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { onMounted, ref } from "vue";
|
|
|
+import { computed } from "vue";
|
|
|
import { useRoute } from "vue-router";
|
|
|
+
|
|
|
+const route = useRoute();
|
|
|
+
|
|
|
+const pricingAmount = computed(() => {
|
|
|
+ if (/^\/opentalent_artist(\/|$)/.test(route.path)) {
|
|
|
+ return "20€";
|
|
|
+ } else if (/^\/opentalent_school(\/|$)/.test(route.path)) {
|
|
|
+ return "14€";
|
|
|
+ }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)";
|
|
|
+ }
|
|
|
+});
|
|
|
const props = defineProps({
|
|
|
pictoImages: {
|
|
|
type: Array,
|
|
|
@@ -91,7 +137,7 @@ const props = defineProps({
|
|
|
},
|
|
|
logoSrc: {
|
|
|
type: String,
|
|
|
- default: "/images/logo_school_white.png",
|
|
|
+ default: "",
|
|
|
},
|
|
|
pricingFromText: {
|
|
|
type: String,
|
|
|
@@ -116,31 +162,7 @@ const props = defineProps({
|
|
|
},
|
|
|
});
|
|
|
|
|
|
-const route = useRoute();
|
|
|
-
|
|
|
-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)";
|
|
|
- }
|
|
|
-});
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
@@ -159,8 +181,6 @@ const iconColor = computed(() => {
|
|
|
font-weight: 400;
|
|
|
line-height: 38px;
|
|
|
}
|
|
|
-.row-custom {
|
|
|
-}
|
|
|
.pricing-details {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
@@ -189,14 +209,6 @@ const iconColor = computed(() => {
|
|
|
.smaller-text {
|
|
|
font-size: 0.6em;
|
|
|
}
|
|
|
-.presentation-title {
|
|
|
- color: #071b1f;
|
|
|
- font-size: 1rem;
|
|
|
- line-height: 15px;
|
|
|
- letter-spacing: 1.8px;
|
|
|
- text-transform: uppercase;
|
|
|
-}
|
|
|
-
|
|
|
.black-circle {
|
|
|
border-radius: 3rem;
|
|
|
background: #091d20;
|
|
|
@@ -204,17 +216,10 @@ const iconColor = computed(() => {
|
|
|
height: 6rem;
|
|
|
}
|
|
|
|
|
|
-.devis {
|
|
|
- font-weight: 500;
|
|
|
- font-size: 1rem;
|
|
|
- margin-left: 9rem;
|
|
|
- margin-top: -1rem;
|
|
|
- width: 7rem;
|
|
|
-}
|
|
|
|
|
|
.logo-manager {
|
|
|
top: 0.2rem;
|
|
|
- z-index: 1;
|
|
|
+ z-index: 5;
|
|
|
}
|
|
|
.rectangle-4 {
|
|
|
width: 20rem;
|
|
|
@@ -244,67 +249,17 @@ const iconColor = computed(() => {
|
|
|
align-items: center;
|
|
|
margin-left: -4rem;
|
|
|
}
|
|
|
-
|
|
|
-.icon-title {
|
|
|
- margin-right: 0.7rem;
|
|
|
- color: rgba(32, 147, 190, 0.6);
|
|
|
-}
|
|
|
-
|
|
|
-.text-square {
|
|
|
- margin-left: 2rem;
|
|
|
- margin-right: 2rem;
|
|
|
- margin-top: 0.9rem;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
-.icon {
|
|
|
- margin-top: 1rem;
|
|
|
-}
|
|
|
-.outil-title {
|
|
|
- font-weight: 600;
|
|
|
- font-size: 2.2rem;
|
|
|
- line-height: 18px;
|
|
|
- color: #091d20;
|
|
|
- margin-bottom: 4rem;
|
|
|
-}
|
|
|
-
|
|
|
-.outil-ul {
|
|
|
-}
|
|
|
-
|
|
|
.outil-list {
|
|
|
margin-left: 1rem;
|
|
|
font-weight: 300;
|
|
|
font-size: 1rem;
|
|
|
line-height: 1.5rem;
|
|
|
}
|
|
|
-
|
|
|
-.icon-logiciel {
|
|
|
- color: rgba(32, 147, 190, 0.6);
|
|
|
- margin-right: 1rem;
|
|
|
-}
|
|
|
-.container-green {
|
|
|
- background: linear-gradient(180deg, rgba(14, 45, 50, 0) 26.84%, #0e2d32 100%),
|
|
|
- rgba(7, 27, 31, 0.3);
|
|
|
- height: 40rem;
|
|
|
-}
|
|
|
-
|
|
|
.picto-container {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
}
|
|
|
|
|
|
-.title {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 1.5rem;
|
|
|
- line-height: 18px;
|
|
|
- color: #091d20;
|
|
|
- width: 25rem;
|
|
|
- margin-left: 2rem;
|
|
|
-}
|
|
|
-
|
|
|
.screen-img {
|
|
|
margin-top: 2rem;
|
|
|
margin-left: 3rem;
|