<template>
    <div class="main" :class="isHome?'main-home':'main-other'">
        <transition name="fade-transform" mode="out-in">
            <!-- <keep-alive> -->
                <router-view />
            <!-- </keep-alive> -->
        </transition>
    </div>
</template>

<script>
export default {
    name: 'Main',
    watch:{
        '$route'(to,from){
            document.getElementsByClassName('main')[0].scrollTop = 0;
        }
    },
    computed: {
        isHome() {
            return this.$route.name == 'Home'
        },
    }
}
</script>

<style lang="scss" scoped>
.main {
    background-color: #F5F5F5;
}
.main-home {
    overflow: hidden;
    height: calc(100% - 50px);
}
.main-other {
    padding: 15px;
    height: calc(100% - 70px);
    overflow: auto;
}
</style>