<template>
  <div class="cointan">
    <div class="title1">
      <div style="margin-left:25px;line-height: 22px;">宿舍出入人员信息</div>
    </div>
    <!-- 表格 -->
    <div class="xia-table">
      <el-table
        v-loading="loading"
        :data="tableData"  size="mini"
        :row-style="tableRowClassName"
        :header-cell-style="{ color: 'rgba(0, 218, 216, 1)',background: 'transparent',height:'32 !important',fontSize:'16' }"
      >
        <el-table-column prop="name" label="教室名称" align="center"/>
        <el-table-column prop="num" label="专业名称" align="center" />
        <el-table-column prop="zhuang" label="课名" align="center" />
        <el-table-column prop="name" label="上课教师" align="center"/>
        <el-table-column prop="num" label="上课人数" align="center" />
        <el-table-column prop="zhuang" label="时间" align="center" />
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'centerButtom',
  data() {
    return {
      loading:false,
      tableData:[
        {name:'人工智能1班',num:8,zhuang:3},
        {name:'人工智能1班',num:8,zhuang:3},
        {name:'人工智能1班',num:8,zhuang:3},
        {name:'人工智能1班',num:8,zhuang:3},
        {name:'人工智能1班',num:8,zhuang:3},
        {name:'人工智能1班',num:8,zhuang:3},
        {name:'人工智能1班',num:8,zhuang:3},
        {name:'人工智能1班',num:8,zhuang:3},
      ],
    }
  },
  props: {
    msg: String
  },
  created(){
    
  },
  mounted(){
    
  },
  methods:{
    tableRowClassName({row, rowIndex}) {
      let stylejson = {};
      if(rowIndex%2==1){
        return stylejson;
      }else{
        stylejson.background = "rgba(0, 72, 91, 0.4)";// 背景颜色
        return stylejson;
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.cointan{
  width: 913px;
  height: 318px;
  background-image: url('../assets/centerBottom/background.png');
  background-size: 100%;
}
.title1{
  position: absolute;
  margin: 9px 0 0 10px;
  font-size: 20px;
  font-family : '优设标题黑';
  color: rgba(255, 255, 255, 1);
  font-weight: 400;
}
// 表格
.xia-table{
  position: absolute;
  margin: 70px 0 0 28px;
  height: 228px;
  width: 857px;
  overflow-y: auto;
  // overflow-x: hidden;
}
/* eslint-disable */
  ::v-deep .el-table,
  ::v-deep .el-table__expanded-cell {
    background-color: transparent;
  }
  ::v-deep .el-table th,
  ::v-deep .el-table tr,
  ::v-deep .el-table td {
    color: #fff;
    background-color: transparent;
    font-size: 14px !important;
    height: 38px !important;
  }
  ::v-deep .el-table .cell {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
    padding-left: 0px;
    padding-right: 0px;
}
  // 鼠标悬停时背景颜色设置
  ::v-deep .el-table tbody tr:hover > td {
    background-color: rgba(0, 72, 91, 0.4) !important;
  }
  ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background:rgba(0, 72, 91, 0.4);
  }
  ::v-deep .el-table__header-wrapper {
    background-color: transparent;
  }
  // 斑马线隔行换色设置颜色
  ::v-deep
    .el-table--striped
    .el-table__body
    tr.el-table__row--striped.el-table__row--striped.el-table__row--striped
    td {
    background-color: rgba($color: #00485B, $alpha: 0.4);
  }
  // 表格间横线
  // 清除表格默认下边框
  ::v-deep .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
      border-bottom: 0px solid #EBEEF5;
  }
  ::v-deep .el-table__cell,
  ::v-deep .el-table th.el-table__cell.is-leaf {
    border-bottom: none;
  }
  ::v-deep .el-table::before {
    width: 0 !important;
  }
  ::v-deep .el-table__inner-wrapper::before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0px !important;
  }
  ::v-deep .el-input__icon {
    height: 100%;
    width: 25px;
    text-align: center;
    transition: all .3s;
    line-height: 30px !important;
}
// 加载中
>>>.el-loading-mask {
    position: absolute;
    z-index: 2000;
    background-color: rgba(255,255,255,0);
    margin: 0;
    top: 50px;
    right: 0;
    bottom: 0;
    left: 0;
    transition: opacity .3s;
}
::-webkit-scrollbar {
/*隐藏滚轮*/
display: none;
}
// 表格隔行颜色不同
>>>.el-table .warning-row {
    background: #f7faff;
  }
  >>>.el-table .success-row {
    background: #ebf1fb;
  }
</style>
