<!--
 * @Author: haoqiuzhi
 * @Date: 2022-05-16 18:16:03
 * @LastEditors: haoqiuzhi
 * @LastEditTime: 2022-06-08 18:18:28
 * @Description:
-->
<template>
  <transition name="fade-transform" mode="out-in">
    <router-view :key="key" />
  </transition>
</template>

<script>
export default {
  name: 'mainContainer',
  computed: {
    key() {
      return this.$route.path;
    }
  }
};
</script>

<style lang="scss" scoped>
.main-container {
  // 40 = bread-crumb
  // 16 = margin-right

  height: calc(100% - 40px - 16px);
  width: calc(100% - 16px);
  position: relative;
  overflow: auto;
  background-color: #fff;
  margin: 0 16px 16px 0;
}
//滚动条的宽度
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: #e4e4e4;
  border-radius: 6px;
}

//滚动条的滑块
::-webkit-scrollbar-thumb {
  background-color: #a1a3a9;
  border-radius: 6px;
}
</style>
