OpenVisor-Website/src/components/row1.vue

<template>
  <div class="row1-row1 character-row">
    <section class="card">
      <div class="character-header">
        <img :alt="image_alt" :src="image_src" class="row1-image" />
        <div class="character-description">
          <h1 class="row1-header">{{ Header }}</h1>
          <h1 class="row1-header1">
            <span>
              Leitung der Justizvollzugsanstalt
              <span v-html="raw7cpj"></span>
            </span>
            <br />
          </h1>
        </div>
        <div></div>
      </div>
      <p class="row1-trigger">
        <span>OT-Trigger:  Tod</span>
        <br />
      </p>
      <p class="row1-themes">{{ Themes }}</p>
      <p class="row1-description">
        <span>
          Fortier (gesprochen &quot;Fortjeeh&quot;) übernahm vor 3 Jahren das
          Gefängnis Schwarzbach, nachdem die vorherige Leitung aus ungeklärten
          Gründen zurücktrat.
          <span v-html="rawr5kv"></span>
        </span>
        <span>
          Kurz nach Fortiers Übernahme kam es im Gefängnis zum Mord des Häftlings
          Sadowski durch Rodriguez.
        </span>
        <br />
        <br />
        <span>
          Fortier leitete den Bunker anfangs autoritär. Fortier erteilte nur Wm
          Sartre keine Befehle. Über die Wochen wirkt Fortier mehr zurückgezogen.
          Immer mehr berät Fortier sich mit Dr. Bellucci und Dr. Jankovic darüber,
          welche Massnahmen für das Überleben zu treffen sind.
        </span>
        <br />
        <br />
        <span>
          Fortier ist bekannt dafür, schnell irritiert und sehr direkt zu sein.
        </span>
        <br />
      </p>
    </section>
    <section class="card">
      <div class="character-header">
        <img :alt="image_alt1" :src="image_src1" class="row1-image1" />
        <div class="character-description">
          <h1 class="row1-header2">
            <span>Dr. Bellucci</span>
            <br />
          </h1>
          <h1 class="row1-header3">
            <span>Psychologische Sachverständigung</span>
            <br />
          </h1>
        </div>
        <div></div>
      </div>
      <p class="row1-trigger1">
        <span>OT-Trigger:  Kindertod</span>
        <br />
      </p>
      <p class="row1-themes1">{{ Themes1 }}</p>
      <p class="row1-description1">
        <span>
          Dr. Bellucci (gesprochen &quot;Beluhtschi&quot;) wurde vor 2 Jahren
          psychologische Sachverständigung im Gefängnis, als Rodriguez Sadowski
          ermordete. Belluccis Aufgabe war langfristige Massnahmen zu entwickeln,
          um dies in Zukunft zu verhindern.
        </span>
        <br />
        <br />
        <span>
          Bellucci führt verschiedene Therapien mit den Bunkerinsassen durch um
          diese bei Verstand zu halten. Bellucci führt mit Dr. Jankovic täglich
          Checkups an allen Bewohnern durch, auch gegenseitig. Bellucci berät
          Fortier mit Jankovic.
        </span>
        <br />
        <br />
        <span>
          Bellucci ist
          <span v-html="rawuflu"></span>
        </span>
        <span>
          bekannt dafür, etwas sozial unbeholfen zu sein und äusserst akademisch
          vorzugehen.
        </span>
        <br />
      </p>
    </section>
  </div>
</template>

<script>
export default {
  name: 'Row1',
  props: {
    Themes: {
      type: String,
      default: 'Themes: Macht, Gewissensbisse, Ängste',
    },
    Themes1: {
      type: String,
      default: 'Themes: Trauma, Manipulation, Suche, Schuld',
    },
    image_src: {
      type: String,
      default: '/playground_assets/aubert-200h.png',
    },
    image_alt: {
      type: String,
      default: 'image',
    },
    image_src1: {
      type: String,
      default: '/playground_assets/bellucci-200h.png',
    },
    image_alt1: {
      type: String,
      default: 'image',
    },
    Header: {
      type: String,
      default: 'Fortier',
    },
  },
  data() {
    return {
      raw7cpj: ' ',
      rawr5kv: ' ',
      rawuflu: ' ',
    }
  },
}
</script>

<style scoped>
.row1-row1 {
  position: relative;
}
.row1-image {
  width: 160px;
  object-fit: cover;
}
.row1-header {
  color: rgb(255, 255, 255);
  font-size: 24px;
  font-style: normal;
  font-family: Poppins;
  font-weight: 600;
  line-height: 36px;
}
.row1-header1 {
  color: rgb(255, 255, 255);
  font-size: 18px;
  font-style: normal;
  text-align: center;
  font-family: Poppins;
  font-weight: 500;
}
.row1-trigger {
  color: rgb(255, 255, 255);
  font-size: 20px;
  font-family: Poppins;
  line-height: 28px;
}
.row1-themes {
  color: rgb(255, 255, 255);
  font-size: 20px;
  font-family: Poppins;
  line-height: 28px;
}
.row1-description {
  color: rgb(255, 255, 255);
  font-size: 18px;
  font-family: Poppins;
  line-height: 28px;
}
.row1-image1 {
  width: 160px;
  object-fit: cover;
}
.row1-header2 {
  color: rgb(255, 255, 255);
  font-size: 24px;
  font-style: normal;
  font-family: Poppins;
  font-weight: 600;
  line-height: 36px;
}
.row1-header3 {
  color: rgb(255, 255, 255);
  font-size: 18px;
  font-style: normal;
  text-align: center;
  font-family: Poppins;
  font-weight: 500;
}
.row1-trigger1 {
  color: rgb(255, 255, 255);
  font-size: 20px;
  font-family: Poppins;
  line-height: 28px;
}
.row1-themes1 {
  color: rgb(255, 255, 255);
  font-size: 20px;
  font-family: Poppins;
  line-height: 28px;
}
.row1-description1 {
  color: rgb(255, 255, 255);
  font-size: 18px;
  font-family: Poppins;
  line-height: 28px;
}
@media(max-width: 991px) {
  .row1-description {
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-family: Poppins;
    line-height: 28px;
  }
}
@media(max-width: 767px) {
  .row1-description {
    color: rgb(255, 255, 255);
  }
  .row1-description1 {
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-family: Poppins;
    line-height: 28px;
  }
}
@media(max-width: 479px) {
  .row1-trigger {
    font-size: 18px;
  }
  .row1-themes {
    font-size: 18px;
  }
  .row1-description {
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-family: Poppins;
    line-height: 28px;
  }
  .row1-trigger1 {
    font-size: 18px;
  }
  .row1-themes1 {
    font-size: 18px;
  }
  .row1-description1 {
    color: rgb(255, 255, 255);
    font-size: 18px;
    font-family: Poppins;
    line-height: 28px;
  }
}
</style>