<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <!--<keep-alive :include="cachedViews">-->
        <router-view :key="key" />
      <!--</keep-alive>-->
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      // this.$store.dispatch("getMessageNum", {}).then((res) => {}).catch(() => {});
      return this.$route.path
    }
  },
  data() {
    return {

    }
  },
  created() {

  },
  mounted(){

  },
  methods:{

  },
}
</script>

<style lang="scss" scoped>
.app-main {
  font-weight: bold;
  width: 100%;
  position: relative;
  overflow: hidden;
  flex:1;
  display: flex;
  flex-direction: column;
  .perform-evacuation-app-main-box{
    background: rgba(255,0,0,0.2);
    margin:0 20px 0 10px;
    border-radius:10px;
    padding:0 0 0 20px;
    display: flex;
    /*height:40px;*/
    /*margin:0 20px 0 10px;*/
    /*display: flex;*/
    p:nth-child(1){
      flex:1;
      line-height:40px;
      color:red;
      /*单行省略号*/
      display:block;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    p:nth-child(2){
      line-height:40px;
      width:80px;
      color:#0045AF;
      cursor: pointer;
      text-align: center;
    }
  }
}
.work-color-a{
  background: rgba(30,144,255,0.2);
  p{
    color:#0045AF;
  }
}
.work-color-b{
  background: rgba(255,0,0,0.2);
  p{
    color:#FF0000;
  }
}
.fixed-header+.app-main {
  padding-top: 50px;
}

.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    /*min-height: calc(100vh - 84px);*/
  }

  .fixed-header+.app-main {
    padding-top: 84px;
  }
}
</style>

<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
  .fixed-header {
    padding-right: 15px;
  }
}
</style>
