GCLS_Page_Learn/src/views/teacher/main/CurriculaManager.vue

<template>
  <div class="curricula-manager">
    <div class="curricula-manager-header">
      <el-input v-model="input" placeholder="请输入" suffix-icon="el-icon-search"> </el-input>
    </div>
    <div class="curricula-manager-body">
      <div class="curricula-manager-body1">
        <el-button
          @click="click(item.status, index)"
          :class="background == index ? 'changeColor' : 'bgcolor'"
          v-for="(item, index) in statusList"
          :key="index"
        >
          {{ item.val }}
        </el-button>
      </div>
      <div class="sort">
        <span>排序:</span>
        <div class="sort-body" v-for="item in sortList" :key="item.id">
          {{ item.name }}
          <i class="el-icon-sort"></i>
        </div>
      </div>
      <div class="curricula-manager-body2">
        <el-button class="bgcolor" @click="add()">新建课程</el-button>
      </div>
    </div>
    <div class="curricula-manager-foot">
      <div v-for="(item, inx) in taskList" :key="inx">
        <div v-if="item.status == isstatus" class="circulation">
          <div class="curricula-manager-foot1">
            <span>{{ item.subject }}</span>
            <span>{{ item.val }}</span>
          </div>
          <div class="curricula-manager-foot2">
            <span>{{ item.createTime }}</span>
            <span class="curricula-manager-foot3">{{ item.onclassTime }}</span>
            <span class="curricula-manager-foot3">授课教师：{{ item.teacher }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CurriculaManager',
  data() {
    return {
      input: '',
      background: 0,
      isstatus: 1,
      sortList: [
        {
          id: '1',
          name: '创建时间',
          sortType: 'createTime', // 数组对象中的哪一个属性进行排序
          order: false //升序还是降序
        },
        {
          id: '2',
          name: '编辑时间',
          sortType: 'editTime',
          order: false
        },
        {
          id: '3',
          name: '开课时间',
          sortType: 'onclassTime',
          order: false
        }
      ],
      statusList: [
        {
          status: '1',
          val: '进行中'
        },
        {
          status: '2',
          val: '待开始'
        },
        {
          status: '3',
          val: '已结束'
        }
      ],
      taskList: [
        {
          subject: '中文 轻松学中文初段 暑假 0813',
          createTime: '2021/3/28',
          onclassTime: '2021/4/25',
          teacher: '张一三',
          val: '进行中',
          status: '1'
        },
        {
          subject: '中文 轻松学中文初段 暑假 0813',
          createTime: '2021/3/12',
          onclassTime: '2021/4/23',
          teacher: '张一三',
          val: '进行中',
          status: '1'
        },
        {
          subject: '中文 轻松学中文初段 暑假 0813',
          createTime: '2021/3/22',
          onclassTime: '2021/4/17',
          teacher: '张一三',
          val: '已结束',
          status: '3'
        },
        {
          subject: '中文 轻松学中文初段 暑假 0813',
          createTime: '2021/3/2',
          onclassTime: '2021/4/28',
          teacher: '张一三',
          val: '待开始',
          status: '2'
        },
        {
          subject: '中文 轻松学中文初段 暑假 0813',
          createTime: '2021/3/6',
          onclassTime: '2021/4/1',
          teacher: '张一三',
          val: '进行中',
          status: '1'
        },
        {
          subject: '中文 轻松学中文初段 暑假 0813',
          createTime: '2021/3/19',
          onclassTime: '2021/4/9',
          teacher: '张一三',
          val: '已结束',
          status: '3'
        },
        {
          subject: '中文 轻松学中文初段 暑假 0813',
          createTime: '2021/3/16',
          onclassTime: '2021/4/25',
          teacher: '张一三',
          val: '待开始',
          status: '2'
        },
        {
          subject: '中文 轻松学中文初段 暑假 0813',
          createTime: '2021/3/21',
          onclassTime: '2021/4/11',
          teacher: '张一三',
          val: '进行中',
          status: '1'
        }
      ]
    };
  },
  methods: {
    click(status, index) {
      this.isstatus = status;
      this.background = index;
      console.log(status);
      console.log(index);
    },
    add() {
      console.log(123);
    }
  }
};
</script>

<style lang="scss">
.curricula-manager {
  .changeColor {
    background: #e5e5e5;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    color: #0c0c0c;
    margin-bottom: 20px;
  }
  .curricula-manager-header .el-input {
    width: 365px;
    margin-top: 50px;
    margin-left: 359px;
  }
  .curricula-manager-body1 .el-button {
    width: 145px;
    height: 75px;
    font-size: 20px;
    margin-top: 50px;
    margin-left: 325px;
  }
  .bgcolor {
    background: #c4c4c4;
    border: 1px solid #c4c4c4;
    border-radius: 0;
    color: #0c0c0c;
    margin-bottom: 20px;
  }
  .el-button + .el-button {
    margin-left: 0;
  }
  .sort {
    display: flex;
    margin-top: 30px;
    margin-bottom: -35px;
    .sort-body {
      margin-left: 20px;
    }
  }
  .curricula-manager-body {
    .curricula-manager-body2 {
      margin-top: 5px;
      margin-left: 930px;
    }
  }

  .curricula-manager-foot {
    .circulation {
      margin: 0 0 20px 0;
      width: 1030px;
      height: 100px;
      background-color: #eee;
      padding: 20px 20px 0 20px;
    }
    .curricula-manager-foot1 {
      display: flex;
      justify-content: space-between;
    }
    .curricula-manager-foot2 {
      padding: 20px 0 0 0;
    }
    .curricula-manager-foot3 {
      margin-left: 20px;
    }
  }
}
</style>