106 lines
2.2 KiB
Vue
106 lines
2.2 KiB
Vue
<template>
|
|
<div class="section-block">
|
|
<div
|
|
:class="{'section-block--navigatable': route}"
|
|
class="section-block__illustration"
|
|
@click="navigate()">
|
|
<slot/>
|
|
</div>
|
|
|
|
<div
|
|
:class="{'section-block--navigatable': route}"
|
|
class="section-block__title block-title"
|
|
@click="navigate()">
|
|
<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">
|
|
<a
|
|
:class="{'section-block--navigatable': route}"
|
|
class="subsection__content button button--primary"
|
|
v-if="route"
|
|
@click="navigate()">
|
|
{{ linkText }}
|
|
</a>
|
|
<span
|
|
class="subsection__content subsection__content--disabled"
|
|
v-if="!route">Noch nicht verfügbar</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ['title', 'subtitle', 'route', 'link-text'],
|
|
methods: {
|
|
navigate() {
|
|
if (this.route) {
|
|
this.$router.push(this.route);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_functions.scss";
|
|
|
|
.section-block {
|
|
border-radius: $default-border-radius;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
|
|
&--navigatable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&__title {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
|
|
.block-title {
|
|
&__title, &__subtitle {
|
|
color: $color-charcoal-dark;
|
|
font-family: $sans-serif-font-family;
|
|
}
|
|
|
|
&__title {
|
|
font-size: toRem(29px);
|
|
text-transform: uppercase;
|
|
margin-bottom: 8px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
&__subtitle {
|
|
font-size: toRem(14px);
|
|
font-weight: $font-weight-regular;
|
|
min-height: 2rem;
|
|
}
|
|
}
|
|
|
|
.section-content {
|
|
padding: 15px 15px 15px;
|
|
|
|
&__subsection {
|
|
padding-bottom: 15px;
|
|
}
|
|
}
|
|
|
|
.subsection {
|
|
&__content {
|
|
font-family: $sans-serif-font-family;
|
|
font-weight: 600;
|
|
|
|
&--disabled {
|
|
color: $color-silver-dark;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|