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

<template>
  <div>
    <div class="curricula-manager-header">
      <el-button>搜索</el-button>
    </div>
    <div class="curricula-manager-body">
      <el-button
        v-for="item in completion"
        :key="item.status"
        class="bgcolor"
        @click="taskstatus(item.status)"
        >{{ item.val }}</el-button
      >
    </div>
    <div class="sort">
      <span>排序:</span>
      <div class="sort-body" v-for="item in time" :key="item.id">
        {{ item.createTime }}
        {{ item.editTime }}
        {{ item.onclassTime }}
        <i class="el-icon-sort"></i>
      </div>
    </div>
    <div class="curricula-manager-body_">
      <el-button class="bgcolor">新建课程</el-button>
    </div>
    <div>
      <div v-for="(item, index) in obj" :key="index" class="circulation">
        <div class="curricula-manager-foot">
          <span>{{ item.subject }}</span>
          <span>{{ item.status }}</span>
        </div>
        <div class="_curricula-manager-foot">
          <span>{{ item.createTime }}</span>
          <span class="curricula-manager-foot_">{{ item.onclassTime }}</span>
          <span class="curricula-manager-foot_">授课教师：{{ item.teacher }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CurriculaManager',
  data() {
    return {
      time: [
        {
          id: '1',
          createTime: '创建时间',
        },
        {
          id: '2',
          editTime: '编辑时间',
        },
        {
          id: '3',
          onclassTime: '开课时间',
        },
      ],
      sort: [
        {
          sortType: 'createtime', // 数组对象中的哪一个属性进行排序
          order: false, //升序还是降序
        },
        {
          sortType: 'editTime',
          order: false,
        },
        {
          sortType: 'onclasstime',
          order: false,
        },
      ],
      completion: [
        {
          status: '1',
          val: '进行中',
        },
        {
          status: '2',
          val: '报名中',
        },
        {
          status: '3',
          val: '已结束',
        },
      ],
      obj: [
        {
          subject: '中文 轻松学中文初段 暑假 0813',
          createTime: '2021/3/28',
          onclassTime: '2021/4/25',
          teacher: '张一三',
          status: '1',
        },
        {
          subject: '中文 轻松学中文初段 暑假 0813',
          createTime: '2021/3/12',
          onclassTime: '2021/4/23',
          teacher: '张一三',
          status: '1',
        },
        {
          subject: '中文 轻松学中文初段 暑假 0813',
          createTime: '2021/3/22',
          onclassTime: '2021/4/17',
          teacher: '张一三',
          status: '2',
        },
        {
          subject: '中文 轻松学中文初段 暑假 0813',
          createTime: '2021/3/2',
          onclassTime: '2021/4/28',
          teacher: '张一三',
          status: '3',
        },
        {
          subject: '中文 轻松学中文初段 暑假 0813',
          createTime: '2021/3/6',
          onclassTime: '2021/4/1',
          teacher: '张一三',
          status: '2',
        },
        {
          subject: '中文 轻松学中文初段 暑假 0813',
          createTime: '2021/3/19',
          onclassTime: '2021/4/9',
          teacher: '张一三',
          status: '2',
        },
        {
          subject: '中文 轻松学中文初段 暑假 0813',
          createTime: '2021/3/16',
          onclassTime: '2021/4/25',
          teacher: '张一三',
          status: '3',
        },
        {
          subject: '中文 轻松学中文初段 暑假 0813',
          createTime: '2021/3/21',
          onclassTime: '2021/4/11',
          teacher: '张一三',
          status: '1',
        },
      ],
    };
  },
  methods: {
    taskstatus(status) {
      console.log(status);
    },
  },
};
</script>

<style>
.curricula-manager-header .el-button {
  width: 300px;
  margin-top: 50px;
  margin-left: 360px;
}
.curricula-manager-body .el-button {
  width: 120px;
  margin-top: 50px;
  margin-left: 330px;
}
.bgcolor {
  background-color: #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_ {
  margin-top: 5px;
  margin-left: 930px;
}
.curricula-manager-foot {
  display: flex;
  justify-content: space-between;
}
._curricula-manager-foot {
  padding: 20px 0 0 0;
}
.curricula-manager-foot_ {
  margin-left: 20px;
}
.circulation {
  margin: 0 0 20px 0;
  width: 1030px;
  height: 100px;
  background-color: #eee;
  padding: 20px 20px 0 20px;
}
</style>