modified: src/views/teacher/main/CurriculaManager.vue

src/views/teacher/main/CurriculaManager.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="curricula-manager">
+  <div>
     <div class="curricula-manager-header">
       <el-button>搜索</el-button>
     </div>
@@ -12,31 +12,28 @@
         >{{ item.val }}</el-button
       >
     </div>
-    <div class="curricula-manager-body1">
-      <div class="paixu">
-        <span>排序:</span>
-        <div class="sortBtn" v-for="item in time" :key="item.id">
-          <div>{{ item.createtime }}</div>
-          <div>{{ item.bianjitime }}</div>
-          <div>{{ item.onclasstime }}</div>
-          <i class="el-icon-sort"></i>
-        </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-body2">
+    <div class="curricula-manager-body_">
       <el-button class="bgcolor">新建课程</el-button>
     </div>
-
-    <div class="div1">
-      <div v-for="(item, index) in obj" :key="index" class="xunhuan">
+    <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-foot1">
-          <span>{{ item.createtime }}</span>
-          <span class="curricula-manager-foot2">{{ item.onclasstime }}</span>
-          <span class="curricula-manager-foot2">{{ item.teacher }}</span>
+        <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>
@@ -51,174 +48,161 @@ export default {
       time: [
         {
           id: '1',
-          createtime: '创建时间',
-          sortType: 'createtime', // 数组对象中的哪一个属性进行排序
-          order: false //升序还是降序
+          createTime: '创建时间',
         },
         {
           id: '2',
-          bianjitime: '编辑时间',
-          sortType: 'bianjitime',
-          order: false
+          editTime: '编辑时间',
         },
         {
           id: '3',
-          onclasstime: '开课时间',
+          onclassTime: '开课时间',
+        },
+      ],
+      sort: [
+        {
+          sortType: 'createtime', // 数组对象中的哪一个属性进行排序
+          order: false, //升序还是降序
+        },
+        {
+          sortType: 'editTime',
+          order: false,
+        },
+        {
           sortType: 'onclasstime',
-          order: false
-        }
+          order: false,
+        },
       ],
       completion: [
         {
           status: '1',
-          val: '进行中'
+          val: '进行中',
         },
         {
           status: '2',
-          val: '报名中'
+          val: '报名中',
         },
         {
           status: '3',
-          val: '已结束'
-        }
+          val: '已结束',
+        },
       ],
       obj: [
         {
           subject: '中文 轻松学中文初段 暑假 0813',
-          createtime: '2021/3/28',
-          onclasstime: '2021/4/25',
+          createTime: '2021/3/28',
+          onclassTime: '2021/4/25',
           teacher: '张一三',
-          status: '1'
+          status: '1',
         },
         {
           subject: '中文 轻松学中文初段 暑假 0813',
-          createtime: '2021/3/12',
-          onclasstime: '2021/4/23',
+          createTime: '2021/3/12',
+          onclassTime: '2021/4/23',
           teacher: '张一三',
-          status: '1'
+          status: '1',
         },
         {
           subject: '中文 轻松学中文初段 暑假 0813',
-          createtime: '2021/3/22',
-          onclasstime: '2021/4/17',
+          createTime: '2021/3/22',
+          onclassTime: '2021/4/17',
           teacher: '张一三',
-          status: '2'
+          status: '2',
         },
         {
           subject: '中文 轻松学中文初段 暑假 0813',
-          createtime: '2021/3/2',
-          onclasstime: '2021/4/28',
+          createTime: '2021/3/2',
+          onclassTime: '2021/4/28',
           teacher: '张一三',
-          status: '3'
+          status: '3',
         },
         {
           subject: '中文 轻松学中文初段 暑假 0813',
-          createtime: '2021/3/6',
-          onclasstime: '2021/4/1',
+          createTime: '2021/3/6',
+          onclassTime: '2021/4/1',
           teacher: '张一三',
-          status: '2'
+          status: '2',
         },
         {
           subject: '中文 轻松学中文初段 暑假 0813',
-          createtime: '2021/3/19',
-          onclasstime: '2021/4/9',
+          createTime: '2021/3/19',
+          onclassTime: '2021/4/9',
           teacher: '张一三',
-          status: '2'
+          status: '2',
         },
         {
           subject: '中文 轻松学中文初段 暑假 0813',
-          createtime: '2021/3/16',
-          onclasstime: '2021/4/25',
+          createTime: '2021/3/16',
+          onclassTime: '2021/4/25',
           teacher: '张一三',
-          status: '3'
+          status: '3',
         },
         {
           subject: '中文 轻松学中文初段 暑假 0813',
-          createtime: '2021/3/21',
-          onclasstime: '2021/4/11',
+          createTime: '2021/3/21',
+          onclassTime: '2021/4/11',
           teacher: '张一三',
-          status: '1'
-        }
-      ]
+          status: '1',
+        },
+      ],
     };
   },
   methods: {
     taskstatus(status) {
       console.log(status);
-    }
-  }
+    },
+  },
 };
 </script>
 
-<style lang="scss">
-.paixu {
-  display: flex;
-  padding-left: 10px;
-  margin-left: -30px;
-  margin-bottom: -35px;
-}
-.sortBtn {
-  display: flex;
-}
-.xunhuan {
-  margin: 0 0 20px 150px;
-  width: 800px;
-  height: 100px;
-  background-color: #eee;
-  padding: 20px 20px 0 20px;
+<style>
+.curricula-manager-header .el-button {
+  width: 300px;
+  margin-top: 50px;
+  margin-left: 360px;
 }
-.curricula-manager-foot {
-  display: flex;
-  justify-content: space-between;
+.curricula-manager-body .el-button {
+  width: 120px;
+  margin-top: 50px;
+  margin-left: 330px;
 }
 .bgcolor {
-  display: flex;
   background-color: #c4c4c4;
   border: 1px solid #c4c4c4;
   border-radius: 0;
   color: #0c0c0c;
   margin-bottom: 20px;
 }
-.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: 385px;
-}
 .el-button + .el-button {
   margin-left: 0;
 }
-.curricula-manager-body1 {
-  margin-top: 50px;
-  margin-left: 150px;
-  margin-right: 500px;
+.sort {
+  display: flex;
+  margin-top: 30px;
+  margin-bottom: -35px;
 }
-.curricula-manager-body2 {
-  margin-left: 850px;
+.sort-body {
+  margin-left: 20px;
 }
-.curricula-manager-body1 span {
-  padding-left: 20px;
+.curricula-manager-body_ {
+  margin-top: 5px;
+  margin-left: 930px;
 }
-.curricula-manager-foot1 {
+.curricula-manager-foot {
+  display: flex;
+  justify-content: space-between;
+}
+._curricula-manager-foot {
   padding: 20px 0 0 0;
 }
-.curricula-manager-foot2 {
+.curricula-manager-foot_ {
   margin-left: 20px;
 }
-
-/**
-  1. flex 不是那么用的!
-  2. 不要使用无意义的数字命名
-  3. 排序那的for循环重写
-  4. 没用的class删除
-  5. 不要使用拼音来命名，并且 js 命名规范 使用 小驼峰式命名法 例： bianjitime => editTime
-  6. 样式看设计稿，重写
-  7. 样式使用 scss
-  8. 命名要有意义且符合实际作用，排序命名了个 time ？？？
-*/
+.circulation {
+  margin: 0 0 20px 0;
+  width: 1030px;
+  height: 100px;
+  background-color: #eee;
+  padding: 20px 20px 0 20px;
+}
 </style>