<template>
    <div class="fle bgColor">
        <transition name="fade" mode="out-in">
            <router-view class="fleHeight"></router-view>
        </transition>
        <div class="section2">
            <router-link to="/main/indes" class="link" active-class="active">
                <i class="iconfont icon-shouyexian"></i>
                <span>首页</span>
            </router-link>
            <router-link to="/main/incidentList/all" class="link" active-class="active">
                <i class="iconfont icon-baoxiuxian"></i>
                <span>事件</span>
            </router-link>
             <router-link to="/main/inspection" class="link" active-class="active">
                <i class="iconfont icon-shouyexian"></i>
                <span>巡检</span>
            </router-link>
            <router-link to="/main/my" class="link" active-class="active">
                <i class="iconfont icon-wodexian"></i>
                <span>我的</span>
            </router-link>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{

        }
    },
    methods:{

    },
    mounted(){
    }
}
</script>
<style scoped>
.bgColor{
    background-color: white
}
.fle{
    display: flex;
    flex-direction:column;
    height: 100vh;
}
.fleHeight{
    height: 100%;
    width: 100%;
    overflow: hidden;
    overflow-y: scroll
}
.section2{
    width: 100%;
    background-color: rgb(247,247,250);
    border-top: .01rem rgb(239,239,240) solid;
    height: .96rem;
    display: flex
}
.section2 .link{
    flex: 1;
    display: flex;
    flex-direction:column;
    justify-content:center;
    align-items:center
}
.section2 i{
    font-size: .48rem
}
.section2 span{
    font-size: .24rem;
    display: inline-block;
    margin-top: .08rem
}
.section2 .active{
    color:#005395
}
.fade-leave-active{
    transition: all .2s ease;
}
.fade-enter,
.fade-leave-active{
    opacity: 0;
}
</style>
