<template>
  <section class="layout-container">
    <admin-header @toViewer="toViewer"></admin-header>
    <section class="layout-container">
      <transition name="slide-fade">
        <router-view></router-view>
      </transition>
    </section>
    <alarmmessage></alarmmessage>
  </section>
</template>

<script>
import AdminHeader from '@/components/AdminHeader'
import NavMenu from '@/components/NavMenu'
import alarmmessage from "./alert/alarmMessagePopue";

export default {
  name: 'home',
  data()
  {
    return {
    }
  },
  mounted()
  {
  },
  methods: {
    toViewer(topath)
    {
      this.$router.push({
        path: '/home/viewer?path=' + topath,
      })
    },
  },
  components: {
    'admin-header': AdminHeader,
    'nav-menu': NavMenu,
    alarmmessage
  }
}

</script>
<style lang="less" scoped>
.layout-container {
  position: relative;
  height: 100%;
}
.aside {
  width: 200px !important;
  position: fixed;
  top: 60px;
  height: 100%;
  z-index: 99;
}
.main-container {
  //padding-top: 80px;
  // margin-left: 200px;
  width: 100%;
  height: 100%;
}
.set-hover-color {
  font-weight: 700 !important;
  cursor: pointer !important;
  &:hover {
    color: #409eff !important;
  }
}
.slide-fade-enter-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-leave-active {
  transition: all 0s ease;
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>