47 lines
811 B
Vue
47 lines
811 B
Vue
<template>
|
|
<v-app>
|
|
<div class="shell-container">
|
|
|
|
<div class="shell-side">
|
|
<side-bar></side-bar>
|
|
</div>
|
|
|
|
<div class="shell-view">
|
|
<router-view></router-view>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</v-app>
|
|
</template>
|
|
|
|
<script async setup>
|
|
import SideBar from "@/views/main/SideBar.vue";
|
|
</script>
|
|
|
|
<style scoped>
|
|
.shell-container {
|
|
@apply flex flex-col lg:flex-row;
|
|
@apply font-sans;
|
|
@apply bg-hBackground text-hOnBackground;
|
|
@apply h-screen;
|
|
@apply bg-red-300;
|
|
}
|
|
|
|
.shell-side {
|
|
@apply border border-[#3d3d3d];
|
|
@apply lg:h-screen;
|
|
@apply lg:fixed;
|
|
@apply border-b lg:border-b-0 lg:border-r;
|
|
@apply flex-shrink-0;
|
|
}
|
|
|
|
.shell-view {
|
|
@apply flex-grow;
|
|
@apply flex justify-center items-center;
|
|
@apply w-full;
|
|
@apply lg:ml-64;
|
|
@apply bg-red-500;
|
|
}
|
|
</style>
|