site_logiciels/components/Layout/UI/ContainerVideo.vue

<template>
  <div id="Presentation">
    <LayoutContainer>
      <v-row class="container-green mt-12">
        <v-row>
          <v-col cols="6">
            <LayoutUISubTitle
              class="mt-6"
              :iconSize="5"
              :iconColor="iconColor"
              :titleText="titleText"
              :titleColor="'#ffffff'"
            />
            <p class="citation-school">
              {{ currentCitation }}
            </p>
          </v-col>
        </v-row>

        <v-col cols="6">
          <div class="screen-img-3"></div>
        </v-col>
      </v-row>
    </LayoutContainer>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const titleText = computed(() => {
  if (/^\/opentalent_school(\/|$)/.test(route.path)) {
    return "Logiciel OpenTalent School";
  } else if (/^\/opentalent_artist(\/|$)/.test(route.path)) {
    return "Logiciel OpenTalent Artist";
  } else if (/^\/opentalent_manager(\/|$)/.test(route.path)) {
    return "Logiciel OpenTalent Manager";
  }
});


const currentCitation = computed(() => {
  if (/^\/opentalent_school(\/|$)/.test(route.path)) {
    return "Pour les petits comme pour les grands établissements d’enseignement artistique.";
  } else if (/^\/opentalent_artist(\/|$)/.test(route.path)) {
    return "Le logiciel de gestion et communication au service de votre passion";
  } else if (/^\/opentalent_manager(\/|$)/.test(route.path)) {
    return "“ Une solution unique, collaborative et innovante pour une gestion optimale de votre réseau culturel.“.";
  } else {
    return "Citation par défaut";
  }
});

const iconColor = computed(() => {
  if (/^\/opentalent_school(\/|$)/.test(route.path)) {
    return "rgba(32, 147, 190, 0.6)";
  } else if (/^\/opentalent_artist(\/|$)/.test(route.path)) {
    return "#fac20a";
  } else if (/^\/opentalent_manager(\/|$)/.test(route.path)) {
    return "rgb(216, 5, 11)";
  } else {
    return "rgba(32, 147, 190, 0.6)"; 
  }
});

</script>

<style scoped>
.screen-img-3 {
  background-image: url("/images/logiciels/school/screen2.png");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
}

.citation-school {
  font-style: italic;
  font-weight: 300;
  font-size: 2rem;
  width: 38rem;
  line-height: 40px;
  color: #ffffff;
  font-style: italic;
  margin-top: 27rem;
  margin-left: 2rem;
}

.icon-logiciel {
  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;
}
</style>