123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- <template>
- <div v-if="state.ready && $route.name !== 'NotFound'">
- <NavBar
- v-if="showNavBar"
- :show-nav-icons="!/^\/password/.test($route.path)"
- :fixed="true"
- />
- <div class="main-container" :class="{ 'white-down-md': state.bgWhite }">
- <router-view
- :class="[
- 'main-wrapper',
- { 'main-wrapper-fluid': $route.path === '/invite' },
- ]"
- />
- </div>
- <PageFooter v-if="$route.path !== '/'" />
- </div>
- </template>
- <script setup lang="ts">
- import { computed, watch, onMounted } from 'vue'
- import { useRoute } from 'vue-router'
- import { state } from './store'
- import NavBar from './components/nav-bar/index.vue'
- import PageFooter from './components/footer/index.vue'
- import getLocation from './utils/getLocation'
- const route = useRoute()
- const navBarIgnore = ['/login', '/register']
- const showNavBar = computed(() => !navBarIgnore.includes(route.path))
- watch(
- () => route.path,
- () => (state.bgWhite = false)
- )
- onMounted(getLocation)
- </script>
- <style lang="scss">
- .main-container {
- min-height: 100vh;
- padding-bottom: 160px;
- background: #f7f7f7;
- overflow: hidden;
- &:first-child {
- background: $primary-color url(@img/bg-sm.png) no-repeat;
- background-size: contain;
- @include media-breakpoint-up(md) {
- background-image: url(@img/bg-lg.jpeg);
- background-size: cover;
- }
- }
- &.white-down-md {
- @include media-breakpoint-down(md) {
- background: #fff;
- }
- }
- @include media-breakpoint-up(md) {
- min-height: auto;
- }
- @include media-breakpoint-only(md) {
- padding-bottom: 0;
- }
- @include media-breakpoint-up(lg) {
- padding-bottom: 64px;
- }
- .nav-bar + & {
- padding-top: var(--nav-bar-height);
- }
- }
- .main-wrapper {
- margin: auto;
- overflow: hidden;
- @include media-breakpoint-up(lg) {
- width: 768px * 2;
- }
- @include media-breakpoint-up(xl) {
- width: 999px * 2;
- }
- &-fluid {
- width: 100%;
- }
- .white-down-md & {
- background: #fff;
- @include media-breakpoint-up(lg) {
- margin-top: 64px;
- }
- }
- }
- .contents {
- padding-top: 50px;
- text-align: center;
- line-height: 74px;
- font-size: 36px;
- a {
- color: $primary-color;
- text-decoration: underline;
- }
- }
- </style>
|