vue-ptc/src/App.vue

<template>
  <NavBar
    v-if="showNavBar"
    :show-nav-icons="!/^\/password/.test($route.path)"
    :fixed="true"
  />
  <div
    class="main-container"
    :class="{ 'white-down-md': state.bgWhite }"
    :style="$route.path === '/' ? 'min-height: auto; padding-bottom: 0;' : ''"
  >
    <router-view
      :key="$route.fullPath"
      :class="[
        'main-wrapper',
        { 'main-wrapper-fluid': $route.path === '/invite' },
      ]"
    />
  </div>
  <PageFooter v-if="$route.path !== '/'" />

  <ul v-else class="contents">
    <li><router-link to="/login">登录</router-link></li>
    <li><router-link to="/account">账号信息</router-link></li>
    <li><router-link to="/password/reset">密码找回</router-link></li>
    <li><router-link to="/order">我的订单</router-link></li>
    <li><router-link to="/gift-card">我的礼品卡</router-link></li>
    <li><router-link to="/benefits">会员权益</router-link></li>
    <li><router-link to="/renewal">续费管理</router-link></li>
    <li><router-link to="/mailing/fill">邮寄商品</router-link></li>
    <li><router-link to="/fill-order">购买下单</router-link></li>
    <li><router-link to="/pay-result/success">支付成功</router-link></li>
    <li><router-link to="/pay-result/fail">支付失败</router-link></li>
    <li><router-link to="/imei/bind">绑定IMEI</router-link></li>
    <li><router-link to="/appointment">维修预约</router-link></li>
    <li><router-link to="/appointment-list">维修记录</router-link></li>
    <li><router-link to="/invite">邀请好友</router-link></li>
  </ul>
</template>

<script setup lang="ts">
import { computed, watch } 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'

const route = useRoute()
const navBarIgnore = ['/login', '/register']
const showNavBar = computed(() => !navBarIgnore.includes(route.path))

watch(
  () => route.path,
  () => (state.bgWhite = false)
)
</script>

<style lang="scss">
.main-container {
  min-height: 100vh;
  padding-bottom: 48px;
  background: #f7f7f7;
  overflow: hidden;
  &:first-child {
    background: lightblue;
  }
  &.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 {
  margin-top: var(--nav-bar-height);
  padding-top: 50px;
  text-align: center;
  line-height: 74px;
  font-size: 36px;

  a {
    color: $primary-color;
    text-decoration: underline;
  }
}
</style>