site_logiciels/components/Common/ContainerVideo.vue

<template>
  <div id="Presentation">
    <LayoutContainer>
      <div class="container-green">
        <v-row class="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-col cols="6">
              <div class="screen-img-3"></div>
              <div class="play-icon-container">
                <i class="fas fa-play"></i>
              </div>
            </v-col>
          </v-row>
        </v-row>
      </div>
    </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>

.play-icon-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem; 
  color: white; 
  cursor: pointer;
}


.v-row {
  width: 90% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.v-container {
  padding: 0 !important;
}
.screen-img-3 {
  background-image: url("/images/logiciels/school/screen2.png");
  background-size: cover;
  background-position: center;
  width: 650px;
  height: 650px;
}

.citation-school {
  font-style: italic;
  font-weight: 300;
  font-size: 2rem;
  width: 35rem;
  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>