<template>
  <div class="layout">
    <div class="sidebar">
      <Sidebar></Sidebar>
    </div>
    <div class="subject">
      <Subject></Subject>
    </div>
  </div>
</template>

<script>
import Sidebar from "./components/Sidebar.vue";
import Subject from "./components/Subject";

export default {
  components: {
    Sidebar,
    Subject,
  },
};
</script>

<style lang="stylus" scoped>
.layout {
  display: flex;

  .sidebar {
    width: 200px;
    background-color: pink;
    height: 100vh;
    overflow-y: hidden;
    // overflow: auto;
    background: #ffffff;
    box-shadow: 4px 0px 15px 0px rgba(27, 42, 66, 0.1);
    // border-radius: 0px 24px 24px 0px;
  }

  .subject {
    width: calc(100vw - 200px);
    height: 100vh;
    .layoutContent{
      width 100%;
      height 100%;
    }
  }
}
</style>