Parametrize the objective group component
This commit is contained in:
parent
e708f8e334
commit
0c8b5553df
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="objective-group">
|
||||
<h4>Gesellschaft</h4>
|
||||
<h4>{{group.title}}</h4>
|
||||
|
||||
<ul>
|
||||
<li class="objective-group__objective" v-for="objective in objectives" :key="objective.id">
|
||||
<ul class="objective-group__objective-list">
|
||||
<li class="objective-group__objective" v-for="objective in group.objectives" :key="objective.id">
|
||||
{{objective.text}}
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -13,22 +13,7 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
data: () => {
|
||||
return {
|
||||
objectives: [
|
||||
{
|
||||
id: 1,
|
||||
text: 'Ich kann wichtige personelle und organisatorische Strukturen der Berufsfachschule beschreiben.'
|
||||
},
|
||||
{id: 2, text: 'Ich kenne die Angebote und Regeln meiner Schule.'},
|
||||
{
|
||||
id: 3,
|
||||
text: 'Ich kenne den Aufbau des Schullehrplans ABU und können das Qualifikationsverfahren des allgemeinbildenden Unterrichts ABU beschreiben.'
|
||||
},
|
||||
{id: 4, text: 'Ich kann die drei Lernorte unterscheiden.'}
|
||||
]
|
||||
}
|
||||
}
|
||||
props: ['group']
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -36,11 +21,18 @@
|
|||
@import "@/styles/_variables.scss";
|
||||
|
||||
.objective-group {
|
||||
background-color: $grey-3;
|
||||
background-color: $color-lightgrey;
|
||||
padding: 17px;
|
||||
margin-bottom: 35px;
|
||||
|
||||
&__objective-list {
|
||||
padding-left: 20px;
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
&__objective {
|
||||
font-size: 1.2857142857142858rem;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,14 +3,17 @@
|
|||
<h2 class="module__meta-title">Modul 1</h2>
|
||||
<h1 class="module__title">Mein neues Umfeld</h1>
|
||||
<img src="https://picsum.photos/640/320" alt="" class="module__hero">
|
||||
<p class="module__intro">
|
||||
Sie stehen am Anfang eines neuen Lebensabschnitts. In Ihrer Rolle als Berufslernende oder Berufslernender haben Sie Verantwortung übernommen.
|
||||
|
||||
Wie erging es Ihnen am ersten Arbeits- und Schultag?
|
||||
</p>
|
||||
<div class="module__intro">
|
||||
<p>
|
||||
Sie stehen am Anfang eines neuen Lebensabschnitts. In Ihrer Rolle als Berufslernende oder Berufslernender haben Sie Verantwortung übernommen.
|
||||
</p>
|
||||
<p>
|
||||
Wie erging es Ihnen am ersten Arbeits- und Schultag?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h3>Lernziele</h3>
|
||||
<objective-group></objective-group>
|
||||
<objective-group v-for="group in objectiveGroups" :key="group.id" :group="group"></objective-group>
|
||||
|
||||
<h3>1.1 Lehrbeginn</h3>
|
||||
<h4>Auftrag 1</h4>
|
||||
|
|
@ -29,6 +32,46 @@
|
|||
export default {
|
||||
components: {
|
||||
ObjectiveGroup
|
||||
},
|
||||
|
||||
data: () => {
|
||||
return {
|
||||
objectiveGroups: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Gesellschaft',
|
||||
objectives: [
|
||||
{
|
||||
id: 1,
|
||||
text: 'Ich kann wichtige personelle und organisatorische Strukturen der Berufsfachschule beschreiben.'
|
||||
},
|
||||
{id: 2, text: 'Ich kenne die Angebote und Regeln meiner Schule.'},
|
||||
{
|
||||
id: 3,
|
||||
text: 'Ich kenne den Aufbau des Schullehrplans ABU und können das Qualifikationsverfahren des ' +
|
||||
'allgemeinbildenden Unterrichts ABU beschreiben.'
|
||||
},
|
||||
{id: 4, text: 'Ich kann die drei Lernorte unterscheiden.'}
|
||||
]
|
||||
}, {
|
||||
id: 2,
|
||||
title: 'Sprache und Kommunikation',
|
||||
objectives: [
|
||||
{
|
||||
id: 1,
|
||||
text: 'Ich kenne verschiedene Arten von Fragen.'
|
||||
},
|
||||
{id: 2, text: 'Ich kann ein Interview mit geeigneten Fragen vorbereiten.'},
|
||||
{
|
||||
id: 3,
|
||||
text: 'Ich kann ein Interview führen und auf interessante oder ausweichende Antworten näher eingehen.'
|
||||
},
|
||||
{id: 4, text: 'Ich kann ein mündlich geführtes Interview schriftlich in Standardsprache festhalten.'},
|
||||
{id: 5, text: 'Ich kann mein Arbeitsplatz genau beschreiben.'}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -42,6 +85,11 @@
|
|||
width: 640px;
|
||||
flex-direction: column;
|
||||
|
||||
&__hero {
|
||||
margin-bottom: 35px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
&__meta-title {
|
||||
font-size: 2.6rem;
|
||||
font-weight: 300;
|
||||
|
|
@ -50,6 +98,12 @@
|
|||
|
||||
&__intro {
|
||||
font-size: 1.5625rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 1em;
|
||||
|
||||
&> p {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,17 +18,20 @@ h1 {
|
|||
font-size: 4rem; // 64px
|
||||
font-weight: 800;
|
||||
color: $header-color;
|
||||
margin-bottom: 18px;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.625rem; // 42px
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2.1875rem; // 35px
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.3125rem; // 21px
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
max-width: 1440px;
|
||||
display: grid;
|
||||
grid-template-rows: 72px auto 50px;
|
||||
grid-row-gap: 20px;
|
||||
grid-row-gap: 32px;
|
||||
min-height: 100vh;
|
||||
grid-template-areas: "h" "c" "f";
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue