feat: MyCourseCard.vue beta

src/views/PortalPage/PortalPage.css

@@ -43,6 +43,5 @@
 .portal-my-card-main {
     display: grid;
     grid-template-columns: 1fr;
-    grid-row-gap: 0;
     min-width: 250px;
 }

src/views/PortalPage/components/MyCourseCard.vue

@@ -1,22 +1,30 @@
 <template>
-  <el-card shadow="hover" class="portal-my-card-item-body">
+  <el-card class="body" shadow="hover" @click="toCourseInfo">
     <el-row>
-      <el-col :span="8">
-        <img :src="imageUrl" alt="err" style="width: 100%; height: 100%;">
+      <el-col :span="7">
+        <img :src="imageUrl" alt="err" class="course-img">
       </el-col>
+
+      <el-col :span="1"/>
+
       <el-col :span="16">
+
         <el-row>
-          <el-col :span="16">{{ courseVO.name }}</el-col>
+          <el-col :span="18" class="title">{{ courseVO.name }}</el-col>
           <el-col :span="4">
             <el-tag v-if="state==='NOT_STARTED'" size="small" type="info">未开始</el-tag>
             <el-tag v-else-if="state==='RUNNING'" size="small">进行中</el-tag>
             <el-tag v-else-if="state==='OVER'" size="small" type="danger">已结束</el-tag>
           </el-col>
         </el-row>
-        <el-row style="font-weight: lighter; font-size: x-small; top: calc(100% - 60px)">
-          <el-col :span="12">开课时间: <br/>{{ courseTime }}</el-col>
-          <el-col :span="12">教师: {{ courseVO.teacher.name }}</el-col>
+
+        <el-row style="position: absolute; bottom: 0">
+          <el-col>
+            <el-row class="teacher">教师: {{ courseVO.teacher.name }}</el-row>
+            <el-row class="time">开课时间: {{ courseTime }}</el-row>
+          </el-col>
         </el-row>
+
       </el-col>
     </el-row>
   </el-card>
@@ -36,8 +44,8 @@ export default {
         return "OVER";
       } else if (new Date(this.courseVO.startTime) > new Date()) {
         return "NOT_STARTED";
-        // } else if (this.examVO.finished) {
-        //   return "FINISHED";
+      } else if (this.examVO.finished) {
+        return "FINISHED";
       } else {
         return "RUNNING";
       }
@@ -47,20 +55,54 @@ export default {
     },
     courseTime() {
       const date = new Date(this.courseVO.startTime);
-      return (date.getMonth() + 1) + "月" + date.getDate() + "日 ";
+      const Y = date.getFullYear() + "-";
+      const M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
+      const D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
+      // const h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
+      // const m = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes());
+      // const s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+      // return Y + M + D + h + m + s;
+      return Y + M + D;
+    },
+  },
+  methods: {
+    toCourseInfo() {
+      this.$router.push("/course/" + this.courseVO.id);
     },
   },
 };
 </script>
 
 <style scoped>
-.portal-my-card-item-body {
-  background-color: #f8f9fb;
-  border: 1px solid #e4e7ed;
-  border-radius: 4px;
+.body {
+  margin-bottom: 8px;
+  position: relative;
+}
+
+.body:hover {
+  cursor: pointer;
+}
+
+.course-img {
+  width: 100%;
+  height: 100%;
+  outline: solid 1px #aaaaaa;
+  border-radius: 2px;
+  object-fit: cover;
+}
+
+.title {
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.teacher {
+  font-size: x-small;
+  color: #888888;
 }
 
-:deep(.el-card__body) {
-  padding: 8px 1px;
+.time {
+  font-size: x-small;
+  color: #888888;
 }
 </style>

src/views/PortalPage/components/MyTestCard.vue

@@ -116,6 +116,7 @@ export default {
       const h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
       const m = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes());
       // const s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
+      // return Y + M + D + h + m + s;
       return Y + M + D + h + m;
     },
     toTestInfo() {
@@ -150,7 +151,7 @@ export default {
 
 .teacher {
   font-size: x-small;
-  color: #999999;
+  color: #888888;
 }
 
 .test-period {