<template>
  <div id="TPcontainer">
    <el-container style="height: 100%">
      <el-aside class="MyAside">
        <el-menu
          background-color="#F7F8F1"
          text-color="rgb(38,70,114)"
          active-text-color="#3A87F9"
          :default-active="this.$route.path"
          router
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-folder-opened"></i>任务管理
            </template>
            <el-menu-item-group>
              <el-menu-item :index="'/main'">任务管理</el-menu-item>
              <el-menu-item :index="'/datamanage'">数据管理</el-menu-item>
              <el-menu-item :index="'/taskmanage'">任务分配</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item
            :index="'/usermanage'"
            style="padding-left: 10px !important"
          >
            <i class="el-icon-user-solid"></i>用户管理
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main class="tpcontent">
          <router-view class="view" style="padding: 20px"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  method: {},
};
</script>
<style scoped>
.MyAside {
  width: 255px !important;
  opacity: 0.9;
  background-color: #f7f8f1;
  color: #333;
  text-align: left;
  line-height: 200px;
  z-index: 10;
  bottom: 0;
  position: absolute;
  top: 0;
}
.tpcontent {
  position: absolute;
  left: 255px;
  right: 0px;
  width: calc(100% - 255px);
  padding: 0px;
  background: #fff;
}
.MyAside .usermp {
  padding-left: 10px !important;
}

@media screen and (min-width: 840px) and (max-width: 1401px) {
  .tpcontent {
    position: absolute;
    left: 255px;
    width: calc(100% - 255px);
  }
}

@media (min-width: 420px) and (max-width: 840px) {
  .MyAside {
    width: 160px !important;
  }
  .tpcontent {
    position: absolute;
    left: 160px;
    width: calc(100% - 160px);
  }
}
@media all and (max-width: 420px) {
  .MyAside {
    width: 120px !important;
  }
  .tpcontent {
    position: absolute;
    left: 120px;
    width: calc(100% - 120px);
  }
}
</style>
