58 lines
819 B
Vue
58 lines
819 B
Vue
<template>
|
|
<PageHeader />
|
|
<main :class="[darkMode ? 'main-darkmode' : 'main-lightmode']">
|
|
<Navigationbar />
|
|
<slot />
|
|
<Actionbar />
|
|
</main>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import PageHeader from "./PageHeader.vue";
|
|
import Navigationbar from "./Navigationbar.vue";
|
|
import Actionbar from "./Actionbar.vue";
|
|
|
|
export default {
|
|
name: "Page",
|
|
components: {
|
|
PageHeader,
|
|
Navigationbar,
|
|
Actionbar,
|
|
},
|
|
data() {
|
|
return {
|
|
darkMode: true,
|
|
};
|
|
},
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
padding: 0.625rem;
|
|
gap: 0.625rem;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.main-darkmode {
|
|
background-color: #212121;
|
|
}
|
|
|
|
.main-lightmode {
|
|
background-color: #EBEBEB;
|
|
}
|
|
</style> |