goelia-ai-admin/src/layout/MenuSingleLayer.vue

<template>
  <el-container>
    <el-aside :width="sidebar.opened ? '230px' : '64px'">
      <sidebarA class="sidebar-container" />
    </el-aside>
    <el-container>
      <el-header
        class="header"
        :style="{ width: `calc(100% - ${sidebar.opened ? '230px' : '64px'})` }"
      >
        <!-- 头部 导航 -->
        <navbar :nameshow="nameshow" />
      </el-header>
      <el-main>
        <div :class="{ hasTagsView: needTagsView }" class="main-container">
          <div :class="{ 'fixed-header': fixedHeader }">
            <div style="margin: 10px 0 0 10px">
              <tags-view v-if="needTagsView" />
              <app-main />
            </div>
          </div>
        </div>
      </el-main>
      <right-panel v-if="showSettings">
        <settings />
      </right-panel>
    </el-container>
  </el-container>
</template>

<script>
import RightPanel from "@/components/RightPanel";
import { AppMain, Navbar, Settings, Sidebar, TagsView } from "./components";
import SubSidebar from "./components/subSidebar";
import ResizeMixin from "./mixin/ResizeHandler";
import sidebarA from "./components/SidebarA";
import { mapState } from "vuex";

export default {
  name: "Layout",
  components: {
    AppMain,
    Navbar,
    RightPanel,
    Settings,
    Sidebar,
    SubSidebar,
    TagsView,
    sidebarA
  },
  mixins: [ResizeMixin],
  computed: {
    ...mapState({
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      showSettings: state => state.settings.showSettings,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === "mobile"
      };
    }
  },
  data() {
    return {
      sidebarType: 1,
      currRouter: null,
      nameshow: false,
      showhelped: false
    };
  },

  methods: {
    handleClickOutside() {
      this.$store.dispatch("app/closeSideBar", {
        withoutAnimation: false
      });
    },
    byChildByParent(currRouter) {
      this.currRouter = currRouter;
      if (currRouter === null) {
        this.nameshow = false;
      } else {
        this.nameshow = true;
      }
    },
    showhelp(data) {
      this.showhelped = data;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/mixin.scss";
@import "../styles/variablesSingleLayer.scss";
::v-deep .el-main {
  padding: 0;
}

.el-header {
  padding: 0;
  position: fixed;
  transition: width 0.3s;
  top: 0;
  z-index: 1000;
  transition: width 0.3s;

  &.hideSidebar {
    width: calc(100% - 64px);
  }
}

.el-main {
  margin-top: 50px;
}

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}

.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$sideBarWidth});
  transition: width 0.28s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px);
}

.mobile .fixed-header {
  width: 100%;
}

.helpcenter {
  flex: 1.5;
  margin-left: 10px;
  margin-right: -20px;
  margin-top: 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(100, 100, 100, 0.2);
}

.min_width {
  width: calc(100vw - 250px);
}

.max_width {
  width: calc(100vw - 130px);
}

.left_main {
  display: flex;
  padding: 0px 20px;
  background-color: #f8f8f8;
  height: calc(100vh - 50px);
  overflow: hidden;
  padding-right: 10px;
}

#main_work {
  margin-top: 10px;
  /*overflow-y: scroll;*/
  height: calc(100vh - 100px);
}
</style>