<template>
  <a-layout id="components-layout-demo-top-side">
    <a-layout-header>
      <LayoutHeader />
    </a-layout-header>
    <a-layout>
      <a-layout-sider width="200" style="background:#fff">
        <LayoutSider />
      </a-layout-sider>
      <div class="center-splitter">
        <div class="x-collapse">&nbsp;</div>
      </div>
      <a-layout-content :style="{ background:'#fff',margin: 0}">
        <LayoutTabs />
        <LayoutMain />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import LayoutHeader from "@/components/layout/components/LayoutHeader";
import LayoutSider from "@/components/layout/components/LayoutSider";
import LayoutNavbar from "@/components/layout/components/LayoutNavbar";
import LayoutTabs from "@/components/layout/components/LayoutTabs";
import LayoutMain from "@/components/layout/components/LayoutMain";
export default {
  name: "Layout",
  components: { LayoutHeader, LayoutSider, LayoutNavbar, LayoutTabs, LayoutMain },
  data () {
    return {

    };
  },
  created () {

  },
  computed: {

  },
  methods: {
  }
};
</script>

<style lang="less" scoped>
.ant-layout-header {
  padding: 0 !important;
  // height: 50px !important;
  // line-height: 50px !important;
  overflow: hidden;
  position: relative;
  // background: linear-gradient(to top, #e8e8e8 0, #ffffff 85%)!important;
  background: #fff !important;
  box-shadow: #e8e8e8 0px 1px 5px;
}
.ant-layout-has-sider {
  height: calc(100vh - 65px);
  margin: 5px 0px 0px 0px;
}

.center-splitter {
  width: 4px;
  height: 100%;
  margin: 0px;
}

.x-collapse {
  position: absolute;
  cursor: pointer;
  background-color: transparent;
  background-repeat: no-repeat !important;
  background: no-repeat top right;
  background-image: url(../../../static/images/mini-left.gif);
  top: 50%;
  margin-top: -17px;
  width: 4px;
  height: 35px;
}

.ant-layout-sider {
  overflow-y: auto;
  overflow-x: hidden;
}
.ant-menu-root {
  border: 1px solid #dedede;
  height: 100%;
  border-radius: 0px 2px 0px 0px;
}
.ant-layout-content {
  border: 1px solid #dedede;
  height: 100%;
}
.ant-menu .ant-menu-submenu-selected .ant-menu-submenu-title {
  border-left: 3px solid #1890ff;
}
</style>
<style scoped lang="less">
</style>