79 lines
1.7 KiB
Vue
79 lines
1.7 KiB
Vue
<template>
|
|
<div class="section-block" @click="navigate()" :class="{'section-block--navigatable': route}">
|
|
<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">
|
|
<a class="subsection__content small-emph" v-if="route">
|
|
{{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%;
|
|
border: solid 1px $color-lightgrey-2;
|
|
box-shadow: 5px 5px 21px 0px rgba(219, 219, 219, 1);
|
|
overflow: hidden;
|
|
|
|
&--navigatable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&__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;
|
|
|
|
&--disabled {
|
|
color: $color-grey;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|