You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.4 KiB
Vue
62 lines
1.4 KiB
Vue
<template>
|
|
<div class="layout-root">
|
|
<w-toolbar class="toolbar" />
|
|
<div v-if="dev" class="test-enter" @click="router.push({path:'/test'})"><w-icon icon-class="bug" /></div>
|
|
|
|
<div class="layout-top">
|
|
<div><w-logo style="font-size: .65rem; margin-left: 2rem;" /></div>
|
|
<div><w-main-title /></div>
|
|
<div><w-time style="transform: translateY(1em);" /></div>
|
|
</div>
|
|
<div style="height: calc(100vh - var(--top-height));">
|
|
<Transition name="fade" mode="out-in">
|
|
<router-view></router-view>
|
|
</Transition>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
const dev = import.meta.env.DEV;
|
|
const router = useRouter();
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.layout-root {
|
|
--top-height: 6rem;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: var(--w-bg);
|
|
|
|
.test-enter {
|
|
position: absolute;
|
|
right: 0;
|
|
top:50%;
|
|
padding: .5rem .5rem .6rem .8rem;
|
|
background-color: var(--w-main);
|
|
color: var(--w-bg-light);
|
|
border-top-left-radius: 10em;
|
|
border-bottom-left-radius: 10em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.toolbar {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.layout-top {
|
|
height: var(--top-height);
|
|
display: grid;
|
|
grid-template-columns: 1fr 2fr 1fr;
|
|
background-color: var(--w-bg-dark);
|
|
|
|
&>div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|