<template>
  <section class="mainContent">
    <ai-nav-tab/>
    <div class="fill">
      <router-view/>
      <ai-empty v-if="isHome">欢迎使用村微产品库</ai-empty>
    </div>
  </section>
</template>

<script>
import AiNavTab from "dui/packages/basic/AiNavTab";

export default {
  name: "mainContent",
  components: {AiNavTab},
  computed: {
    isHome: v => v.$route.path == '/',
  },
}
</script>

<style lang="scss" scoped>
.mainContent {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  :deep(.layout ) {
    background: #F5F6F9;
    display: flex;
    flex-direction: column;

    & > .el-tabs__header {
      margin-bottom: 0;
      background: linear-gradient(180deg, #FCFCFC 0%, #E0E2E4 100%);
      height: 40px;
      display: flex;
      align-items: flex-end;
      border: none;

      .el-tabs__nav {
        border: none;
      }

      .el-tabs__item {
        padding: 0 8px 0 12px !important;
        text-align: left;
        min-width: 130px;
        height: 36px;
        line-height: 36px;
        border: none;
        color: #555;
        font-size: 12px;

        & + .el-tabs__item {
          margin-left: 2px;
        }

        .el-icon-close {
          float: right;
          width: auto;
          height: 100%;
          line-height: 36px;
          background: transparent;
          font-size: 16px;
          color: #89b;

          &:hover {
            color: #000;
          }
        }

        &.is-active {
          border: 1px solid #D8DCE3;
          border-bottom: none;
          border-radius: 4px 4px 0 0;
          background: #F5F6F9;
          color: #222;

          &:after {
            display: none;
          }
        }

        &:after {
          position: absolute;
          right: 0;
          content: " ";
          width: 1px;
          background: #D8DCE3;
          height: 24px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
}
</style>
