<template>
  <!-- 跳转详情页面 -->
  <div>
    <commonNav></commonNav>
    <el-card>
      123
      <div class="workBtn">
        <el-button type="primary" size="mini" @click="todowork">布置作业</el-button>
      </div>
    </el-card>

    <!-- 布置作业弹窗 -->
    <el-dialog title="布置作业" :visible.sync="todoworkVisible" width="60%" :before-close="handleClose">
      <span>
        作业名称:
        <el-input v-model="input" placeholder  style="width:30%;margin: 0 10px"></el-input>
      作业时间：
      <el-date-picker v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
      
          <div class="todoName">
              <div><el-checkbox v-model="checked">六年级三班</el-checkbox></div>
              <div>
                  <li><el-checkbox v-model="checked">张三</el-checkbox></li>
                  <li><el-checkbox v-model="checked">张三</el-checkbox></li>
                  <li><el-checkbox v-model="checked">张三</el-checkbox></li>
                  <li><el-checkbox v-model="checked">张三</el-checkbox></li>
                  <li><el-checkbox v-model="checked">张三</el-checkbox></li>
                  <li><el-checkbox v-model="checked">张三</el-checkbox></li>
                  <li><el-checkbox v-model="checked">张三</el-checkbox></li>
                  <li><el-checkbox v-model="checked">张三</el-checkbox></li>
             </div>
          </div>
        
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="todoworkVisible = false">取 消</el-button>
        <el-button type="primary" @click="todoworkVisible = false"  class="sureName">布置作业 </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      todoworkVisible: false
    };
  },
  methods: {
    //点击布置作业弹窗
    todowork() {
      this.todoworkVisible = true;
    }
  }
};
</script>
<style lang="less" scoped>
li {
    list-style: none;
    padding:0;
    margin: 0;
    height: 48px;
    line-height: 48px;
}
.el-card {
  position: relative;
  width: 1200px;
  height: 100%;
  margin: 15px auto;
}
.todoName {
    width: 100%;
    overflow: hidden;
   border: 1px solid #ccc;
    margin-top: 10px;
    div:nth-child(1){
        height: 240px;
        float: left;
        width: 20%;
        background-color: #ccc;
        line-height:240px; 
        text-align: center;
    }
    div:nth-child(2){
        float: left;
        width: 80%;
        display: flex;
        justify-content: space-around;
        li {
            width: 10%;
            
        }
    }
}
.sureName {
    
    
    border-top: 1px solid #ccc;
}
.workBtn {
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>