主页面布局

介绍

整个主页面以自上而下，从左到右形式布局，上部分为 HeaderBar 头部信息区，下部分为内容区。内容区从左到右，依次为 LeftBar、 MiddleBar、 ContainerLayout 三块区域。

文件目录

└─ src
   ├─ components
   │  ├─ Bar                  # 页面布局组件
   │  └─ Layout
   │     └─ ContainerLayout   # 内容区
   └─ pages
      └─ Layout               # 页面布局入口组件

主页面布局如下图

源码解析

<template>
  <div class="frame-wrapper">
    <!-- 顶部导航栏 -->
    <header-bar />

    <div class="frame-body">
      <!-- 左侧导航栏 -->
      <left-bar />

			<!-- 左侧子导航栏 -->
      <middle-bar />

      <!-- 内容区域 -->
      <div class="frame-container">
        <!-- 将所有列表页面缓存 -->
        <keep-alive
          include="MovieList,ActorList,RoleList,VideoList,UserList,ArticleList,DataSummary,DataMovie,DataActor"
        >
          <router-view />
        </keep-alive>
      </div>
    </div>
  </div>
</template>

import HeaderBar from "@/components/Bar/HeaderBar";
import LeftBar from "@/components/Bar/LeftBar";
import MiddleBar from "@/components/Bar/MiddleBar";

export default {
  name: "Layout",
  components: {
    HeaderBar,
    LeftBar,
    MiddleBar,
  },
};

.frame-wrapper {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .frame-body {
    display: flex;
    flex-shrink: 0;	// 防止菜单空间被压缩
    /* 内容区域 */
    .frame-container {
      position: relative;
      flex: 1;
      height: calc(100vh - 50px);
      overflow: auto;
    }
  }
}