<template>
    <div class="evaluation">
        
        <Loading :top="100" v-show="dataLoading" type="3"></Loading>
        <vuescroll ref="evScroll" id="evScroll">
            <div class="ev-body">
                <div class="ev-content">
                    <router-view />
                </div>
            </div>
        </vuescroll>
    </div>

</template>
<script>

  export default {
    data() {
      return {
        syllabusTitle: ' 评测模块',
        identitydata: [
          { 'id': 1, 'name': '成都紫藤小学', 'rolename': '管理员', status: '1' },
          { 'id': 2, 'name': '成都七中小学', 'rolename': '班主任', status: '2' }
        ],
        treeData: [],
        schoolInfo: {},
        evSubjectList: [],
        evPeriodsList: [],
        evVolumesList: [],
        evSubjectSelect: '',
        evPeriodSelect: '',
        evVolumeSelect: '',
        dataLoading: false
      }
    },
    created() {
      
    },
    methods: {
        goRouter(name) {
            this.$router.push({
              name: name
            })
      },

      
    },
    mounted() {
    }

  }
</script>
<style scoped>
  .evaluation {
    background:rgb(43,43,46);
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;
  }

  .ev-body {
    /*width:98%;*/
    /* min-width:1200px; */
    min-height:700px;
    margin:auto;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
  }
    .ev-body .ev-slide {
      width:20%;
      max-width:300px;
      margin-left:20px;
      height:auto;
      padding:0;
      background:#fff;
      border-radius:5px 5px 0 0;
    }

    .ev-body .ev-slide .ev-slide-header{
      width:104%;
      height:45px;
      background:#10abe7;
      text-align:center;
      line-height:45px;
      color:white;
      font-size:16px;
      border-radius:5px;
      margin:20px -5px;
      box-shadow: 0px 1px 8px 5px #dedede;
    }

      .ev-body .ev-slide .ev-slide-select {
        padding:0 10px;
        /*background:#10abe7;*/
      }

      .ev-body .ev-slide .ev-slide-school {
          height:40px;
          line-height:40px;
          text-align:center;
          padding-top:10px;
          font-size:14px;
          font-weight:bold;
          padding-right:5px;
      }

      .ev-slide /deep/ .ev-slide-select .ivu-select-selection {
        margin-top:8px;
        height:40px;
      }

      .ev-slide /deep/ .ev-slide-select .ivu-select-selected-value {
        line-height:40px;
      }

      .ev-slide .ev-slide-select-volumes /deep/ .ivu-select-selection {
          background:transparent;
          border:none;
          color:#fff;
          width:140px;
          margin:0 auto;
          padding-right:10px;
          font-size:14px;
      }
    .ev-slide .ev-slide-select-volumes /deep/ .ivu-select-arrow {
        color: #fff;
    }

    .ev-slide .ev-slide-select-volumes /deep/ .ivu-select-dropdown {
        left: unset !important;
    }
      .ev-slide .ev-slide-select-volumes /deep/ .ivu-select-placeholder {
          color:#fff;
          font-size:14px;
      }
      .ev-slide .ev-slide-select-volumes /deep/ .ivu-select-selected-value {
          color:#fff;
          font-size:14px;
      }

  .ev-body .ev-content {
      width:100%;
      margin:0 auto;
      }

  .slide-menu {
    width:150px;
    background:#191919;
    position:fixed;
    top:100px;
    left:-140px;
    border-radius: 0 10px 10px 0;
    z-index:9999;
  }

    .slide-menu ul {
      height:100%;
      width:100%;
      padding:20px 0;
    }

      .slide-menu ul li {
        width:100%;
        height:70px;
        font-size:16px;
        text-align:center;
        line-height:70px;
        color:#fff;
        font-weight:bold;
        cursor:pointer;
        z-index: 1;
        position: relative;
        outline: none;
        border: none;
        overflow: hidden;
         transition: color 0.4s ease-in-out;
      }

    .slide-menu .ivu-icon {
      position:absolute;
      top:170px;
      right:-44px;
      color:#477fd8;
      font-size:44px;
    }

      .slide-menu ul li::before {
          content: '';
          z-index: -1;
          position: absolute;
          bottom: 100%;
          right: 100%;
          width: 1em;
          height: 1em;
          border-radius: 50%;
          background:#a28f5c;
          transform-origin: center;
          transform: translate3d(50%, 50%, 0) scale3d(0, 0, 0);
          transition: transform 0.45s ease-in-out;
        }

        .slide-menu:hover{
          cursor: pointer;
          transform:translate(140px, 0);
          transition:1s  ease  0s;
        }

        .slide-menu ul li:hover::before {
          transform: translate3d(120%, 50%, 0) scale3d(25, 15, 15);
        }

</style>
