3. 给页面添加样式

tips: 不要在手机上使用fixed
用flex布局
如果多个页面有相同的HTML结构和CSS样式，
新建一个Layout组件，把相同的HTML和CSS样式都放Layout组件里
其他页面内容用slot引入

<template>
  <div class="nav-wrapper">
    <div class="content">
      <slot />
    </div>
    <Nav />
  </div>
</template>
<script lang="ts">
export default {
name: "Layout"
}
</script>
<style lang="scss" scoped>
.nav-wrapper {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  height: 100vh;
}
.content {
  border: 1px solid green;
  flex-grow: 1;
  overflow: auto;
}
</style>

其他页面

<template>
  <Layout>
    money.vue
  </Layout>
</template>
<script lang="ts">
export default {
name: "Money",
}
</script>
<style lang="scss" scoped>
</style>