<template>
  <!-- App 根容器 -->
  <div id="app" class="">
    <!-- 路由视图出口，所有页面内容将在此处动态渲染 -->
    <router-view></router-view>
  </div>
</template>

<script>
// 定义根组件 App
export default {
  // 组件名称为 "app"
  name: "app",
};
</script>

<style lang="scss">
/* 全局样式重置 */
* {
  padding: 0;
  margin: 0;
}

/* 设置 html 和 body 占满整个窗口 */
html, body {
  width: 100%;
  height: 100%;
}

/* 让 #app 容器也占满整个浏览器窗口 */
#app {
  height: 100%;
}

/* 再次设置 body 的内外边距（防止某些浏览器默认样式影响） */
body {
  padding: 0;
  margin: 0;
}
</style>
