dml_frontend/pages/projekt/[link].vue

<template>
  <section class="project topSpace">
    <!-- SideBarNaviSlider mit dynamischem Link und i18n-Label -->
    <SideBarNaviSlider :link="localePath('references')">
     {{ t('referenceoverview') }}
   </SideBarNaviSlider>

   <div class="container">
     <div class="row">
       <div class="col-md-9">
         <h1>{{ t('project.detail.title', 'Kundenprojektvorstellung') }}</h1>
         <h2>{{ project.projectTitle }}</h2>
       </div>
       <div class="col-md-3">
         <div class="customerBox">
           <NuxtImg
             :src="customer.logo.url"
             :alt="customer.logo.alternativeText"
             provider="strapi"
           />
           {{  }}
           <h4>
             {{ project.customer.company }} |
             {{ project.customer.city }}
           </h4>
         </div>
       </div>
     </div>
     <div class="row detailBox">
       <div class="col-lg-4">
         <transition name="fade" mode="out-in">
          <NuxtImg
            v-if="currentImage"
            id="currentImage"
            :src="currentImage.url"
            :alt="currentImage.alternativeText || project.projectTitle"
            provider="strapi"
          />
         </transition>
         <div class="preview">
           <h3>{{ t('project.detail.moreViews', 'Weitere Ansichten') }}</h3>
           <div class="imageNavigation">
            <NuxtImg
              v-for="(img, index) in project.projectImages"
              :key="index"
              :src="img.url"
              :alt="img.alternativeText"
              provider="strapi"
              @click="setCurrentImage(img)"
              :class="{ active: currentImage?.url === img.url }"
            />
          </div>
         </div>
       </div>


       <div class="col-lg-8 pt-4">
         <span v-html="htmlContent(project.projectDescription)"></span>


         <h4>{{ t('project.detail.technologies', 'Verwendete Technologien') }}</h4>
         <div class="techChipsBox">
           <span
             v-for="(tech, index) in project.technologies"
             :key="index"
             class="techChip"
           >
             {{ tech.titel }}
           </span>
         </div>
         <div class="row" v-if="project.webpage">
           <div class="col-12 text-end">
             <a
               class="webPageBtn"
               :href="project.webpage"
               target="_blank"
               rel="noopener noreferrer"
             >
               <svg>
                 <use xlink:href="/assets/icons/collection.svg#desktop" />
               </svg>
               {{ t('project.detail.visitProject', 'Projekt live erleben') }}
             </a>
           </div>
         </div>

    </div>
    </div>
    </div>
  </section>


</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue"
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const localePath = useLocalePath()

import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

import { storeToRefs } from 'pinia'
import { useMainStore } from '@/stores/main'
const mainStore = useMainStore()
const { cmsUrl, projects, dataFetched } = storeToRefs(mainStore)
const project = computed(() => mainStore.getProjectByLink(route.params.link))
const customer = computed(() => {
  if (!project.value || !project.value.customer) return null
  return mainStore.getCustomerById(project.value.customer.id)
})
const currentImage = ref(null)

if (project.value && project.value.projectImages?.length > 0) {
  currentImage.value = project.value.projectImages[0]
}

watch(project, (newProject) => {
  if (newProject && newProject.projectImages?.length > 0) {
    currentImage.value = newProject.projectImages[0]
  } else {
    currentImage.value = null
  }
})



import { useHtmlConverter } from '@/composables/useHTMLConverter'
const { convertToHTML } = useHtmlConverter()
const htmlContent = (data: string) => {
 return convertToHTML(data)
}

// Setze das aktuelle Bild
const setCurrentImage = (image: any) => {
 currentImage.value = image
}


</script>

<style lang="sass">
.project
  h1
    color: $pink //adjust-color($darkgrey, $lightness: 40%)
    font-size: 1.1rem
    text-transform: uppercase
    margin-bottom: 0
    letter-spacing: .08rem
  h2
    margin-top: 0
  img
    width: 100%
  .preview
    h3
      font-size: 1rem
      color: adjust-color($darkgrey, $lightness: 40%)
    img
      width: 100px
      margin: 0
      cursor: pointer
      transition: .6s
      padding: 1.2rem
      border: 2px solid transparent
      &.active
        border: 2px solid $lightgrey
        padding: .5rem
        border-radius: .5rem
  .customerBox
    width: 100%
    max-width: 50vw
    text-align: center
    background-image: linear-gradient(to left bottom, rgba($lightgrey, .6), transparent, transparent)
    border-top-right-radius: 20px
    padding: 1rem
    border-top: 1px solid rgba($lightgrey, .3)
    border-right: 1px solid rgba($lightgrey, .3)
    margin: 1rem 0
    img
      min-height: 2rem
      width: 50%
      max-width: 200px
      margin: 1rem
    h4
      font-size: .8rem
    @media(max-width: $breakPointLG)
      background-image: linear-gradient(to left, rgba($lightgrey, .6), transparent, transparent)
      margin-top: 0
  .detailBox
    h4
      font-size: 1rem
      margin-top: 2.5rem
      color: adjust-color($darkgrey, $lightness: 20%)
      font-family: 'Mainfont-Bold'
  .webPageBtn
    font-size: .8rem
    margin-top: 2rem
    margin-right: 6%
    text-decoration: none
    border: 1px solid adjust-color($darkgrey, $lightness: 20%)
    padding: .5rem 1rem
    border-radius: 5px
    display: inline-block
    color: adjust-color($darkgrey, $lightness: 30%)
    transition: .6s
    &:hover
      transform: scale(1.1)
    svg
      height: .8rem
      width: .9rem
      margin-right: .3rem
      fill: adjust-color($darkgrey, $lightness: 20%)
.ctaBox
  padding: 3rem 0
  h2
    margin-bottom: .5rem
  h3
    margin-bottom: .5rem
.navigationBox
  margin-top: 2rem
  width: 100%
  color: adjust-color($darkgrey, $lightness: 35%)
  font-size: .85rem

  &:hover
    cursor: pointer
  .navBtn
    transition: .6s
    &:hover
      transform: scale(1.05)
    span
      display: inline-block
  svg
    fill: adjust-color($lightgrey, $lightness: -10%)
    width: 80%
    max-width: 50px
.techChipsBox
  display: block
  width: 100%
  .techChip
    background-color: $lightgrey
    padding: .2rem 1rem
    margin: .3rem
    border-radius: .6rem
    font-size: .9rem
    display: inline-block
    color: adjust-color($darkgrey, $lightness: 25%)
</style>