70 lines
1.6 KiB
Vue
70 lines
1.6 KiB
Vue
<template>
|
|
<div class="section-block">
|
|
<div class="section-block__title block-title">
|
|
<h2 class="block-title__title">{{title}}</h2>
|
|
<h3 class="block-title__subtitle small-emph">{{subtitle}}</h3>
|
|
</div>
|
|
<div class="section-block__content section-content">
|
|
<div class="section-content__subsection subsection">
|
|
<h4 class="subsection__title small-emph">Zuletzt bearbeitet</h4>
|
|
<p class="subsection__content small-emph">
|
|
{{lastModified}}
|
|
</p>
|
|
</div>
|
|
<div class="section-content__subsection">
|
|
<h4 class="subsection_title small-emph">Aktivität</h4>
|
|
<p class="subsection__content small-emph">
|
|
{{lastModified}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ['title', 'subtitle', 'lastModified', 'activities']
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_functions.scss";
|
|
|
|
.section-block {
|
|
border-radius: $default-border-radius;
|
|
width: 100%;
|
|
border: solid 1px $color-lightgrey-2;
|
|
box-shadow: 5px 5px 21px 0px rgba(219,219,219,1);
|
|
overflow: hidden;
|
|
|
|
&__title {
|
|
background-color: $color-brand;
|
|
padding: 20px;
|
|
}
|
|
}
|
|
|
|
.block-title {
|
|
&__title, &__subtitle {
|
|
color: $color-white;
|
|
}
|
|
}
|
|
|
|
.section-content {
|
|
padding: 60px 15px 15px;
|
|
|
|
&__subsection {
|
|
padding-bottom: 15px;
|
|
}
|
|
}
|
|
|
|
.subsection {
|
|
&__content {
|
|
font-family: $sans-serif-font-family;
|
|
font-weight: 600;
|
|
color: $color-brand;
|
|
}
|
|
}
|
|
|
|
</style>
|