|
|
@@ -1,15 +1,224 @@
|
|
|
<template>
|
|
|
- <div class="curricula-manager-container"></div>
|
|
|
+<div class="curricula-manager">
|
|
|
+ <div class="curricula-manager-header">
|
|
|
+ <el-button>搜索</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="curricula-manager-body">
|
|
|
+ <el-button class="bgcolor" @click="taskstatus()">进行中</el-button>
|
|
|
+ <el-button class="bgcolor" @click="taskstatus()">待开始</el-button>
|
|
|
+ <el-button class="bgcolor" @click="taskstatus()">已结束</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="curricula-manager-body1">
|
|
|
+ <div class="paixu">
|
|
|
+ <span>排序:</span>
|
|
|
+
|
|
|
+ <div class="sortBtn" style="display: flex;">创建时间
|
|
|
+ <i class="el-icon-sort"></i>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="sortBtn" style="display: flex;">编辑时间
|
|
|
+ <i class="el-icon-sort"></i>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="sortBtn" style="display: flex;">开课时间
|
|
|
+ <i class="el-icon-sort"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="curricula-manager-body2" style="margin-left: 850px;">
|
|
|
+ <el-button class="bgcolor">新建课程</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="div1" style="max-height: 700px; overflow: scroll;">
|
|
|
+ <div v-for="item in obj" :key="item.id" class="xunhuan">
|
|
|
+ <div class="curricula-manager-foot">
|
|
|
+ <span>{{item.subject}}</span>
|
|
|
+ <span>{{item.status}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="curricula-manager-foot1" style="padding: 20px 0 0 0;">
|
|
|
+ <span>{{item.createtime}}</span>
|
|
|
+ <span style="margin-left: 10px;">{{item.onclasstime}}</span>
|
|
|
+ <span style="margin-left: 10px;">{{item.teacher}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+
|
|
|
+const obj={order:false}
|
|
|
+console.log(obj)
|
|
|
export default {
|
|
|
- name: 'CurriculaManager'
|
|
|
+ name: 'CurriculaManager',
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ ifShow:null,
|
|
|
+ obj: [
|
|
|
+ {
|
|
|
+ subject:'中文 轻松学中文初段 暑假 0813',
|
|
|
+ createtime:'2021/3/28',
|
|
|
+ onclasstime:'2021/4/25',
|
|
|
+ teacher:'张一三',
|
|
|
+ status:"进行中"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ subject:'中文 轻松学中文初段 暑假 0813',
|
|
|
+ createtime:'2021/3/12',
|
|
|
+ onclasstime:'2021/4/23',
|
|
|
+ teacher:'张一三',
|
|
|
+ status:"进行中"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ subject:'中文 轻松学中文初段 暑假 0813',
|
|
|
+ createtime:'2021/3/22',
|
|
|
+ onclasstime:'2021/4/17',
|
|
|
+ teacher:'张一三',
|
|
|
+ status:"进行中"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ subject:'中文 轻松学中文初段 暑假 0813',
|
|
|
+ createtime:'2021/3/2',
|
|
|
+ onclasstime:'2021/4/28',
|
|
|
+ teacher:'张一三',
|
|
|
+ status:"报名中"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ subject:'中文 轻松学中文初段 暑假 0813',
|
|
|
+ createtime:'2021/3/6',
|
|
|
+ onclasstime:'2021/4/1',
|
|
|
+ teacher:'张一三',
|
|
|
+ status:"报名中"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ subject:'中文 轻松学中文初段 暑假 0813',
|
|
|
+ createtime:'2021/3/19',
|
|
|
+ onclasstime:'2021/4/9',
|
|
|
+ teacher:'张一三',
|
|
|
+ status:"报名中"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ subject:'中文 轻松学中文初段 暑假 0813',
|
|
|
+ createtime:'2021/3/16',
|
|
|
+ onclasstime:'2021/4/25',
|
|
|
+ teacher:'张一三',
|
|
|
+ status:"报名中"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ subject:'中文 轻松学中文初段 暑假 0813',
|
|
|
+ createtime:'2021/3/21',
|
|
|
+ onclasstime:'2021/4/11',
|
|
|
+ teacher:'张一三',
|
|
|
+ status:"已结束"
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ sortType: null, // 数组对象中的哪一个属性进行排序
|
|
|
+ order: false, // 升序还是降序
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ // mounted() {
|
|
|
+ // jinxing().then(response => {
|
|
|
+ // console.log(456)
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ methods:{
|
|
|
+ taskstatus() {
|
|
|
+ console.log(123)
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // sort(type) { // 排序
|
|
|
+ // this.order = !this.order; // 更改为 升序或降序
|
|
|
+ // this.sortType = type;
|
|
|
+ // this.obj.sort(this.compare(type));
|
|
|
+ // },
|
|
|
+ // 调用下面 compare 方法 并传值
|
|
|
+ // compare(attr) { // 排序方法
|
|
|
+ // let that = this;
|
|
|
+ // return function(a,b){
|
|
|
+ // let val1 = a[attr];
|
|
|
+ // let val2 = b[attr];
|
|
|
+
|
|
|
+ // if(that.order){
|
|
|
+ // if(that.sortType == 'createtime'){ // 如果是时间就转换成时间格式
|
|
|
+ // return new Date(val2.replace(/-/,'/')) - new Date(val1.replace(/-/,'/'));
|
|
|
+ // }else{
|
|
|
+ // return val2 - val1;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // }else{
|
|
|
+ // if(that.sortType == 'createtime'){
|
|
|
+ // return new Date(val1.replace(/-/,'/')) - new Date(val2.replace(/-/,'/'));
|
|
|
+ // }else{
|
|
|
+ // return val1 - val2;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ }
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
-.curricula-manager-container {
|
|
|
- padding: 20px;
|
|
|
+<style lang="scss">
|
|
|
+//
|
|
|
+::-webkit-scrollbar {
|
|
|
+ //隐藏滚轮
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.paixu {
|
|
|
+ display: flex;
|
|
|
+ padding-left: 10px;
|
|
|
+ margin-left: -30px;
|
|
|
+ margin-bottom: -35px;
|
|
|
+}
|
|
|
+.xunhuan {
|
|
|
+ margin: 20px 0 20px 150px;
|
|
|
+ width: 800px;
|
|
|
+ height: 100px;
|
|
|
+ background-color: #eee;
|
|
|
+ padding: 20px 20px 0 20px;
|
|
|
+}
|
|
|
+.curricula-manager-foot {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.bgcolor {
|
|
|
+ display: flex;
|
|
|
+ background-color: #c4c4c4;
|
|
|
+ border: 1px solid #c4c4c4;
|
|
|
+ border-radius: 0;
|
|
|
+ color: #0c0c0c;
|
|
|
+}
|
|
|
+.curricula-manager-header .el-button {
|
|
|
+ width: 300px;
|
|
|
+ margin-top: 50px;
|
|
|
+ margin-left: 360px;
|
|
|
+}
|
|
|
+.curricula-manager-body {
|
|
|
+ display: flex;
|
|
|
+ padding-left: 0;
|
|
|
+ margin-top: 50px;
|
|
|
+ margin-left: 380px;
|
|
|
+}
|
|
|
+.el-button + .el-button {
|
|
|
+ margin-left: 0;
|
|
|
+}
|
|
|
+.curricula-manager-body1 {
|
|
|
+ margin-top: 50px;
|
|
|
+ margin-left: 150px;
|
|
|
+ margin-right: 500px;
|
|
|
+}
|
|
|
+.div1 {
|
|
|
+ overflow: auto;
|
|
|
+ height: 1000px;
|
|
|
+}
|
|
|
+.curricula-manager-body1 span {
|
|
|
+ padding-left: 20px;
|
|
|
}
|
|
|
</style>
|
|
|
+
|
赵仕锟