vue-ptc/src/App.vue

<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>