vue-ptc/src/App.vue

<template>
  <NavBar
    v-if="showNavBar"
    :show-nav-icons="$route.path !== '/password'"
    :fixed="true"
  />
  <div
    class="main-container"
    :style="$route.path === '/' ? 'min-height: auto; padding-bottom: 0;' : ''"
  >
    <router-view :key="$route.fullPath" class="main-wrapper" />
  </div>

  <ul v-if="$route.path === '/'" class="contents">
    <li><router-link to="/login">登录</router-link></li>
    <li><router-link to="/account">账号信息</router-link></li>
    <li><router-link to="/password">密码找回</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 } from 'vue'
import { useRoute } from 'vue-router'

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

<style lang="scss">
.main-container {
  min-height: 100vh;
  padding-bottom: 48px;
  background: #f7f7f7;
  overflow: hidden;

  @include media-breakpoint-up(md) {
    min-height: auto;
  }

  .nav-bar-wrap + & {
    padding-top: $nav-bar-height;
  }
}
.main-wrapper {
  overflow: hidden;

  @include media-breakpoint-up(lg) {
    margin: auto;
    width: 768px * 2;
  }
  @include media-breakpoint-up(xl) {
    margin: auto;
    width: 1998px;
  }
}

.contents {
  margin-top: $nav-bar-height + 50px;
  text-align: center;
  line-height: 74px;
  font-size: 36px;

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