课程管理页面

src/views/teacher/main/CurriculaManager.vue

@@ -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>
+