Gyyq-Upstairs/src/layout/index.vue

<template>
  <div :class="classObj" class="app-wrapper">
    <!-- 头部区域，独占一行 -->
    <div class="header-container">
      <navbar /> <!-- 导航栏组件 -->
    </div>

    <!-- 主内容区域 -->
    <div class="main-container">
      <!-- 左侧边栏 -->
      <sidebar class="sidebar-container" />
      <div style="display: flex;flex-direction: column;width: 100%;">
        <!-- 面包屑 -->
        <div class="breadword-container">
          <Breadword></Breadword>
        </div>

        <!-- 右侧内容区域 -->
        <div class="content-container">
          <app-main style="background-color: #FAFAFA;" />
        </div>
        <!-- <el-backtop target=".content-container" :visibility-height = "0"></el-backtop> -->
      </div>
    </div>


    <right-panel>
      <settings />
    </right-panel>

  </div>
</template>

<script>
import RightPanel from '@/components/RightPanel'
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import { mapState } from 'vuex'
import variables from '@/assets/styles/variables.scss'
import Breadword from './components/breadword.vue'

export default {
  name: 'Layout',
  components: {
    AppMain,
    Navbar,
    RightPanel,
    Settings,
    Sidebar,
    TagsView,
    Breadword
  },
  mixins: [ResizeMixin],
  computed: {
    ...mapState({
      theme: state => state.settings.theme,
      sideTheme: state => state.settings.sideTheme,
      sidebar: state => state.app.sidebar,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader
    }),
    classObj() {
      return {
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation
      }
    },
    variables() {
      return variables;
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-image: url("../../src/assets/images/bg@2x.png");
  background-size: 100% 100%;
}

.header-container {
  width: 100%;
  // height: $base-header-height;
  background-image: url("../../src/assets/images/top@1x.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 1000;
}

.main-container {
  display: flex;
  border-radius: 1rem 1rem 0 0;
  margin-right: .3rem;
  flex: 1;
  // overflow: hidden;
  overflow-y: auto;
  background-color: #FAFAFA;
}

.sidebar-container {
  width: $base-sidebar-width;
  height: calc(100% - 60px);
  transition: width 0.28s;
  margin-top: 60px;
  background-color: #f0f2f5;
}

.breadword-container {
  background-color: #fff;
  border-radius: 1rem 1rem 0 0;
}

.content-container {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  background-color: #f0f2f5;
  transition: margin-left 0.28s;

  &.sidebarHide {
    margin-left: 0;
  }
}
</style>