<!--
 * @Author: haoqiuzhi
 * @Date: 2022-05-16 18:16:03
 * @LastEditors: haoqiuzhi
 * @LastEditTime: 2022-06-29 21:42:02
 * @Description:
-->
<template>
  <section class="main-container">
    <transition name="fade-transform" mode="out-in">
      <router-view :key="key" />
    </transition>
  </section>
</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;
}
</style>
