OpenVisor-Website/src/components/row3.vue

<template>
  <div class="row3-row3 character-row">
    <section class="card">
      <div class="character-header">
        <img :alt="image_alt" :src="image_src" class="row3-image" />
        <div class="character-description">
          <h1 class="row3-header">{{ Header }}</h1>
          <h1 class="row3-header1">
            <span>Wärter/in &amp; Zeugwart</span>
            <br />
          </h1>
        </div>
        <div></div>
      </div>
      <p class="row3-trigger">
        <span>OT-Trigger:  Tod</span>
        <br />
      </p>
      <p class="row3-themes">
        <span>Themes: Paranoia, Macht, Ängste, Verlust, Hass</span>
        <br />
      </p>
      <span class="character-summary">{{ text2 }}</span>
      <span class="character-summary">{{ text }}</span>
    </section>
    <section class="card">
      <div class="character-header">
        <img :alt="image_alt1" :src="image_src1" class="row3-image1" />
        <div class="character-description">
          <h1 class="row3-header2">{{ Header1 }}</h1>
          <h1 class="row3-header3">
            <span>dienstälteste/r Wärter/in</span>
            <br />
          </h1>
        </div>
        <div></div>
      </div>
      <p class="row3-trigger1">
        <span>OT-Trigger:  Tod</span>
        <span>, Drogen</span>
        <br />
      </p>
      <p class="row3-themes1">
        <span>Themes: Gerechtigkeit, Gewalt, Druck, Hass</span>
        <br />
      </p>
      <span class="character-summary">{{ text11 }}</span>
      <span class="character-summary">{{ text1 }}</span>
    </section>
  </div>
</template>

<script>
export default {
  name: 'Row3',
  props: {
    text1: {
      type: String,
      default:
        'Hagiro ist bekannt für einen konsequenten Gerechtigkeitssinn und für einen Raucherhusten. Hagiro ist streng zu den Häftlingen und freundlich zu den anderen.',
    },
    image_src1: {
      type: String,
      default: '/Charaktere/hagiro-200h.png',
    },
    text11: {
      type: String,
      default:
        'Hagiro ist mit 7 Jahren Dienst am längsten im Gefängnis Schwarzbach. Hagiro setzt die Massnahmen von Fortier rigoros durch, zögert aber auch nicht die Meinung zu äussern, wenn Hagiro etwas missfällt. Da Hagiro mehr als doppelt so lang im Gefängnis arbeitete hilft Hagiro Fortier mit Wissen, das in den Akten nicht zu finden ist.',
    },
    image_alt1: {
      type: String,
      default: 'image',
    },
    text: {
      type: String,
      default:
        'Schmidt ist bekannt dafür, unangenehme Fragen zu stellen und geht eher grob mit den Häftlingen um. Dafür hat niemand die Aufgaben des Zeugwarts besser im Griff als Schmidt.',
    },
    image_src: {
      type: String,
      default: '/Charaktere/schmidt-min-200h.png',
    },
    image_alt: {
      type: String,
      default: 'image',
    },
    text2: {
      type: String,
      default:
        'Wärter Schmidt arbeitet seit 3 Jahren im Gefängnis Schwarzbach. Schmidt kam ziemlich zeitgleich mit Fortier zu der Stelle. Schmidt ist Zeugwart und damit verantwortlich für die Lagerung und Wartung der Materialien, Werkzeuge, Geräte und Waffen des Gefängnisses. Schmidt nutzt die Häftlinge um diese zu warten und zu reinigen. Wenn Krüger mit Häftlingen etwas an der Elektrik arbeiten möchte braucht Krüger die Werkzeuge von Schmidt.',
    },
    Header: {
      type: String,
      default: 'Schmidt',
    },
    Header1: {
      type: String,
      default: 'Hagiro',
    },
  },
}
</script>

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