starwait/layouts/home.vue

58 lines
1.1 KiB
Vue

<script setup lang="ts">
</script>
<template>
<div class="homeLayout">
<HomeHeader class="homeHeader"/>
<div class="homeMain">
<div class="homeMainLeft" name="left"></div>
<main class="homeMainContent">
<slot class="homeMainContent"/>
</main>
<div class="homeMainRight" name="right"></div>
</div>
</div>
</template>
<style scoped>
.homeLayout {
position: relative;
height: 100vh;
width: 100vw;
overflow: hidden;
display: flex;
flex-direction: column;
.homeHeader {
flex-shrink: 0;
}
.homeMain {
flex: 1;
width: 100%;
overflow: hidden;
display: flex;
& > * {
position: relative;
overflow-y: auto;
}
& > div.homeMainLeft {
flex: 1;
}
& > main.homeMainContent {
flex-shrink: 0;
width: var(--main-width-auto);
background-color: var(--bg-color-be);
}
& > div.homeMainRight {
flex: 1;
}
}
}
</style>