nailart/na-frontend/src/pages/HomePage.vue

<template>
  <div class="homepage">
    <!-- 固定顶部导航栏 -->
    <NavBar class="nav-bar" />
    <div class="images">
      <h1>轮播图区域</h1>
    </div>
    <div class="info">
      <h1>信息展示区，包含店名，营业时间，状态，地址，电话图标，微信图标</h1>
    </div>
    <div class="new">
      <h1>新品展示</h1>
    </div>
    <div class="navigation">
      <h1>暂定导航组件</h1>
    </div>
    <!-- 固定底部TabBar -->
    <TabBar class="tab-bar" />
  </div>
</template>

<script>
import TabBar from '@/components/TabBar.vue';
import NavBar from '@/components/NavBar.vue';
export default {
  name: 'HomePage',
  components: {
    TabBar,
    NavBar
  },
  props: {},
  data() {
    return {

    };
  },
  watch: {},
  computed: {},
  methods: {},
  created() { },
  mounted() { }
};
</script>
<style lang="less" scoped>
.homepage {
  width: 100vw;
  height: 100vh;
  overflow: auto;
  .images {
    width: 100%;
    height: 25vh;
  }

  .info {
    width: 100%;
    height: 20vh;
  }

  .new {
    width: 100%;
  }

  .navigation {
    width: 100%;
  }


}
</style>