166 lines
3.7 KiB
Vue
166 lines
3.7 KiB
Vue
<template>
|
|
<div :class="['split-view', { 'split-view--illustration': illustration }]">
|
|
<div :class="['split-view__illustration', illustrationAlignment]">
|
|
<component :is="illustration" />
|
|
</div>
|
|
<div class="split-view__content">
|
|
<router-view />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {defineAsyncComponent} from 'vue';
|
|
import flavorValues from '@/helpers/app-flavor';
|
|
const ContentsIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/ContentsIllustration'));
|
|
const PortfolioIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/PortfolioIllustration'));
|
|
const RoomsIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/RoomsIllustration'));
|
|
const HelloIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/HelloIllustration'));
|
|
const HelloMyKVIllustration = defineAsyncComponent(() => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/HelloMyKVIllustration'));
|
|
const Hello = flavorValues.appFlavor === 'my-kv' ? HelloMyKVIllustration : HelloIllustration;
|
|
|
|
export default {
|
|
components: {
|
|
contents: ContentsIllustration,
|
|
portfolio: PortfolioIllustration,
|
|
rooms: RoomsIllustration,
|
|
hello: Hello,
|
|
},
|
|
|
|
computed: {
|
|
illustration() {
|
|
return this.$route.meta.illustration;
|
|
},
|
|
illustrationAlignment() {
|
|
return this.$route.meta.illustrationAlign
|
|
? `split-view__illustration--${this.$route.meta.illustrationAlign}`
|
|
: '';
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '~styles/helpers';
|
|
|
|
.split-view {
|
|
background-color: $color-brand;
|
|
|
|
display: flex;
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
|
|
&--illustration {
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: 50%;
|
|
background: $color-brand-dark;
|
|
}
|
|
}
|
|
|
|
&__illustration {
|
|
width: 30vw;
|
|
min-width: 400px;
|
|
align-self: center;
|
|
background-color: $color-brand;
|
|
z-index: 1;
|
|
display: none;
|
|
|
|
&--top {
|
|
align-self: center;
|
|
margin-top: -400px;
|
|
}
|
|
|
|
& > svg {
|
|
max-width: 300px;
|
|
max-height: 400px;
|
|
}
|
|
|
|
@include desktop {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
background-color: $color-white;
|
|
padding: $medium-spacing;
|
|
display: flex;
|
|
flex-direction: column;
|
|
z-index: 1;
|
|
width: 100%;
|
|
|
|
@include desktop {
|
|
padding: 2 * $large-spacing;
|
|
}
|
|
}
|
|
|
|
&__logo {
|
|
width: 300px;
|
|
height: 50px;
|
|
margin-bottom: $large-spacing;
|
|
|
|
@include desktop {
|
|
margin-bottom: 70px;
|
|
}
|
|
}
|
|
|
|
&__page-subheading {
|
|
@include regular-text;
|
|
color: $color-brand;
|
|
margin-bottom: $small-spacing;
|
|
}
|
|
|
|
&__page-heading {
|
|
@include heading-2;
|
|
color: $color-brand;
|
|
margin-bottom: 2 * $large-spacing;
|
|
}
|
|
|
|
&__heading {
|
|
@include heading-2;
|
|
margin-bottom: $small-spacing;
|
|
}
|
|
|
|
&__claim {
|
|
@include heading-2;
|
|
margin-bottom: 70px;
|
|
}
|
|
|
|
&__paragraph {
|
|
@include regular-text;
|
|
margin-bottom: $medium-spacing;
|
|
|
|
&:last-of-type {
|
|
margin-bottom: 2 * $large-spacing;
|
|
}
|
|
}
|
|
|
|
&__button {
|
|
@include regular-text;
|
|
flex-grow: 0;
|
|
align-self: flex-start;
|
|
min-width: 150px;
|
|
display: inline-flex;
|
|
box-sizing: border-box;
|
|
justify-content: center;
|
|
margin-bottom: $large-spacing;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&__secondary-link {
|
|
@include inline-title;
|
|
cursor: pointer;
|
|
|
|
@include desktop {
|
|
margin-top: auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|