63 lines
1.7 KiB
Vue
63 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
// inspiration https://vuejs.org/examples/#modal
|
|
import {Circle} from '@/services/circle';
|
|
|
|
const props = defineProps<{
|
|
circle: Circle,
|
|
show: boolean
|
|
}>()
|
|
|
|
const emits = defineEmits(['closemodal'])
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Transition mode="in-out">
|
|
<div
|
|
v-if="show"
|
|
class="circle-overview px-4 py-16 lg:px-16 lg:py-24 fixed top-0 overflow-y-scroll bg-white h-full w-full">
|
|
<button
|
|
type="button"
|
|
class="w-8 h-8 absolute right-4 top-4 cursor-pointer"
|
|
@click="$emit('closemodal')"
|
|
>
|
|
<it-icon-close></it-icon-close>
|
|
</button>
|
|
|
|
|
|
<h1 class="">Überblick: Circle "{{ circle.title }}"</h1>
|
|
|
|
<p class="mt-8 text-xl">Hier zeigen wir dir, was du in diesem Circle lernen wirst.</p>
|
|
|
|
<div class="mt-8 p-4 border border-gray-500">
|
|
<h3>Du wirst in der Lage sein, ... </h3>
|
|
|
|
<ul class="mt-4">
|
|
<li class="text-xl flex items-center" v-for="goal in circle.goals" :key="goal.id">
|
|
<it-icon-check class="mt-4 hidden lg:block w-12 h-12 text-sky-500 flex-none"></it-icon-check>
|
|
<div class="mt-4">{{ goal.value }}</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h3 class="mt-16">
|
|
Du wirst dein neu erworbenes Wissen auf folgenden berufstypischen Situation anwenden können:
|
|
</h3>
|
|
|
|
<ul class="grid grid-cols-1 lg:grid-cols-3 auto-rows-fr gap-6 mt-8">
|
|
<li
|
|
v-for="jobSituation in circle.job_situations"
|
|
:key="jobSituation.id"
|
|
class="job-situation border border-gray-500 p-4 text-xl flex items-center"
|
|
>
|
|
{{jobSituation.value}}
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<style scoped>
|
|
</style>
|