refactor:refactor course list layout in ManagePage.vue

src/views/ManagePage/ManagePage.vue

@@ -1,30 +1,31 @@
 <template>
   <GlobalHeader/>
-  <div class="page">
-    <div class="container">
-      <div class="header">
-        <span class="title">课程列表</span>
-        <div>
-          <el-select v-model="value" class="m-2" placeholder="Select">
-            <el-option
-                v-for="item in options"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-            >
-            </el-option>
-          </el-select>
-          <el-button class="ml-16" plain type="primary" @click="dialogVisible=true">{{ dialogTitle }}</el-button>
+  <div class="container">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <span>全部课程</span>
+          <div class="course-type-selector">
+            <el-select v-model="courseType" class="m-2" placeholder="课程类型">
+              <el-option
+                  v-for="item in courseTypeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+              />
+            </el-select>
+            <el-button class="ml-16" plain type="primary" @click="dialogVisible=true">{{ dialogTitle }}</el-button>
+          </div>
         </div>
-      </div>
-      <div class="courseList">
-        <div v-for="(item,index) in courseListExample" :key="index" class="cItem">
-          <CourseCard :courseVO="item"></CourseCard>
+        <div class="course-card-list-container mt-16">
+          <div v-for="(item,index) in courseListExample" :key="index" class="cItem">
+            <CourseCard :courseVO="item"></CourseCard>
+          </div>
         </div>
-      </div>
-    </div>
+      </template>
+    </el-card>
   </div>
-  <el-dialog v-model="dialogVisible" :before-close="handleFormCancel" title="新增课程" width="50%">
+  <el-dialog v-model="dialogVisible" :before-close="handleFormCancel" :width="600" title="新增课程">
     <el-form ref="formRef" :model="form" label-width="120px">
       <el-form-item label="课程名称">
         <el-input v-model="form.name" placeholder="请输入课程名称"></el-input>
@@ -113,6 +114,64 @@ const form = reactive({
 });
 
 const courseListExample = [
+  {
+    "id": 37,
+    "name": "2022-2",
+    "teacher": {
+      "id": 3117,
+      "phone": "13382405535",
+      "username": "PortalTestTeacher",
+      "name": "PortalTestTeacher",
+      "email": "m15256072859@163.com",
+      "photo": null,
+      "role": "TEACHER",
+      "signature": "无",
+      "createdTime": "2022-02-21T13:21:26.171+08:00",
+      "valid": true
+    },
+    "semester": "2022春",
+    "imageUrl": null,
+    "description": "minim eu sit Lorem",
+    "startTime": "2022-02-28T11:08:07.608+08:00",
+    "endTime": "2022-02-28T11:08:07.608+08:00",
+    "invitationCode": "3117-4",
+    "moocUrl": null,
+    "evalId": null,
+    "coderId": 12,
+    "helperId": null,
+    "createdTime": "2022-02-20T11:54:34.084+08:00",
+    "price": 0,
+    "courseState": "NORMAL"
+  },
+  {
+    "id": 37,
+    "name": "2022-2",
+    "teacher": {
+      "id": 3117,
+      "phone": "13382405535",
+      "username": "PortalTestTeacher",
+      "name": "PortalTestTeacher",
+      "email": "m15256072859@163.com",
+      "photo": null,
+      "role": "TEACHER",
+      "signature": "无",
+      "createdTime": "2022-02-21T13:21:26.171+08:00",
+      "valid": true
+    },
+    "semester": "2022春",
+    "imageUrl": null,
+    "description": "minim eu sit Lorem",
+    "startTime": "2022-02-28T11:08:07.608+08:00",
+    "endTime": "2022-02-28T11:08:07.608+08:00",
+    "invitationCode": "3117-4",
+    "moocUrl": null,
+    "evalId": null,
+    "coderId": 12,
+    "helperId": null,
+    "createdTime": "2022-02-20T11:54:34.084+08:00",
+    "price": 0,
+    "courseState": "NORMAL"
+  },
   {
     "id": 37,
     "name": "2022-2",
@@ -200,6 +259,22 @@ const courseListExample = [
     "price": 0,
     "courseState": "NORMAL"
   },
+  {
+    "id": 3,
+    "name": "提象何角众交",
+    "teacher": {
+      "id": 1481,
+      "phone": "17301585267",
+      "username": "seecoder",
+      "name": "root",
+      "email": "seecoder@163.com",
+      "photo": null,
+      "role": "ADMIN",
+      "signature": "无",
+      "createdTime": "2021-08-26T14:24:37.859+08:00",
+      "valid": true
+    }
+  },
   {
     "id": 3,
     "name": "提象何角众交",
@@ -273,8 +348,13 @@ const handleFormConfirm = async () => {
 };
 
 
-const value = ref("");
-const options = ref("");
+const courseType = ref("all");
+const courseTypeOptions = ref([
+  {value: "all", label: "全部课程"},
+  {value: "pending", label: "未开始"},
+  {value: "start", label: "正在进行"},
+  {value: "end", label: "已结束"},
+]);
 
 
 //取消新增课程，弹窗确认
@@ -327,57 +407,4 @@ const clearForm = function () {
 
 <style scoped>
 @import "managePage.css";
-
-.el-input {
-  width: 200px;
-}
-
-.flex-around :deep(.el-date-editor.el-input) {
-  width: 200px;
-}
-
-
-.upLoad :deep(.avatar-uploader .el-upload) {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  background-color: whitesmoke;
-}
-
-.upLoad :deep(.avatar-uploader .el-upload:hover) {
-  border-color: #409eff;
-}
-
-.upLoad :deep(.avatar-uploader-icon ) {
-  font-size: 28px;
-  color: #8c939d;
-  width: 178px;
-  height: 178px;
-  text-align: center;
-  line-height: 178px;
-}
-
-.upLoad :deep(.avatar) {
-  width: 178px;
-  height: 178px;
-  display: block;
-}
-
-.confirm-cancel-dialog :deep(.el-dialog) {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-
-.confirm-cancel-dialog:deep(.el-dialog__header) {
-  display: none;
-}
-
-.saveNewCourse .el-button {
-  width: 88px;
-}
 </style>

src/views/ManagePage/managePage.css

@@ -1,26 +1,29 @@
-.page {
-    min-height: 100vh;
-}
-
 
 .container {
     box-sizing: border-box;
-    margin-top: 32px;
+    padding: 32px 64px 0;
+
 }
 
-.header {
+.card-header {
     display: flex;
     justify-content: space-between;
-    height: 40px;
     align-items: center;
 }
 
-.title {
-    color: #333333;
+.card-header:first-child {
     font-weight: 500;
-    font-size: 24px;
+    font-size: 20px;
 }
 
+.course-type-selector {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.course-card-list-container {
+
+}
 
 .ml-16 {
     margin-left: 16px;
@@ -51,56 +54,33 @@
     margin-top: 40px;
 }
 
-.cItem {
-    display: inline-block;
-    margin-right: 150px;
-    margin-bottom: 40px;
-    transition: all ease-in 0.2s;
-    border-radius: 8px;
-}
-
-
-.cItem:nth-child(4n) {
-    margin-right: 0;
-}
-
-.pagination {
-    margin-top: 32px;
-}
-
-
-.el-dialog__title {
-    font-size: 24px;
-}
-
-.createCourseCard {
-    min-height: 400px;
-    display: flex;
-    justify-content: space-between;
-}
 
-.newCourseInfo {
-    width: 50%;
-    min-width: 50%;
-    font-size: 20px;
-    color: #666666;
-}
-
-.checkBoxContainer {
-    display: inline-block;
+.el-input {
     width: 200px;
 }
 
+@media screen and (min-width: 1350px) {
+    .cItem {
+        display: inline-block;
+        width: 22%;
+        transition: all ease-in 0.2s;
+        margin-right: 4%;
+    }
 
-.newCoursePic {
-    width: 40%;
-    font-size: 20px;
-    color: #666666;
-
+    .cItem:nth-child(4n) {
+        margin-right: 0;
+    }
 }
 
-.saveNewCourse {
-    width: 220px;
-    display: flex;
-    justify-content: space-between;
+@media screen and (max-width: 1350px) {
+    .cItem {
+        display: inline-block;
+        width: 30%;
+        transition: all ease-in 0.2s;
+        margin-right: 5%;
+    }
+
+    .cItem:nth-child(3n) {
+        margin-right: 0;
+    }
 }