页面 LayOut 布局

布局模式

• 左边打通,右边分上下两部分

• v-bind 动态绑定 css

• 变量使用#{xxx}作为插入符

• 这里引入三个组件 SideBar,NavBar,AppMain

<template>
  <div class="app-wrapper">
    <!--左侧-->
    <SideBar id="guide-sidebar" class="sidebarleft"></SideBar>
    <!--左侧-->
    <!--右侧-->
    <div class="main-containerall">
      <div class="fixed-header">
        <!--顶部的navbar-->
        <NavBar></NavBar>
        <!--tags-->

        <!--tags-->
      </div>
      <!--内容区域-->
      <div class="content">
        <AppMain></AppMain>
      </div>

      <!--内容区域-->
    </div>
    <!--右侧-->
  </div>
</template>

<script setup>
  const sidebarwidth = ref("210px");
</script>

<style lang="scss" scoped>
  .app-wrapper {
    display: flex;
    min-height: 100vh;
    width: 100%;
    flex-flow: row nowrap;
    .sidebarleft {
      flex: 0 0 v-bind(sidebarwidth);
      min-height: 100vh;
      background: #{$menuBg};
    }
    .main-containerall {
      flex: 1;
      display: flex;
      min-height: 100vh;
      flex-flow: column nowrap;
      .fixed-header {
        position: sticky;
        top: 0px;
        z-index: 10;
        flex: 0 0 105px;
        width: 100%;
        border-bottom: 1px solid #d8dce5;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
      }
      .content {
        flex: 1;
        width: 100%;
      }
    }
  }
</style>

AppMain

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped></style>

SideBar,NavBar 后面在讲