TEMP

src/api/mock.js

@@ -147,7 +147,7 @@ const getAllCourses = function () {
           },
           "semester": "2022春",
           "imageUrl": null,
-          "description": "minim eu sit Lorem as minim eu sit Lorem as minim eu sit Lorem as",
+          "description": "minim eu sit Lorem as minim eu sit Lorem as minim eu sit Lorem as ",
           "startTime": "2022-02-28T11:08:07.608+08:00",
           "endTime": "2022-02-28T11:08:07.608+08:00",
           "invitationCode": "3117-4",

src/components/CourseCard.vue

@@ -74,10 +74,10 @@ export default {
 <style scoped>
 .course-card {
   background-color: #f8f9fb;
-  margin: 10px 0 0 10px;
   border: 1px solid #e4e7ed;
-  border-radius: 8px;
-  height: calc(100% - 14px);
+  margin-bottom: 10px;
+  border-radius: 4px;
+  height: calc(100% - 10px);
 }
 
 .course-card :hover {

src/views/AuthPage/AuthPage.vue

@@ -13,6 +13,7 @@
 <script>
 import GlobalHeader from "@/components/GlobalHeader";
 import AuthCard from "@/views/AuthPage/components/AuthCard";
+
 export default {
   name: "AuthPage",
   components: { AuthCard, GlobalHeader }
@@ -33,4 +34,25 @@ export default {
   right: 15vw;
   padding-bottom: 50px;
 }
+
+@media screen and (max-width: 1260px) {
+  #auth-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  #auth-card {
+    position: static;
+    margin-top: 15vh;
+    padding: 0;
+  }
+
+  #auth-img {
+    position: static;
+    transform: scale(0.6);
+    order: 2;
+  }
+}
 </style>

src/views/PortalPage/PortalPage.css

@@ -26,7 +26,7 @@
 }
 
 :deep(.portal-card-divider) {
-    margin: 8px 0 0 0;
+    margin: 8px 0 8px 0;
 }
 
 .portal-card-main {
@@ -40,24 +40,8 @@
     display: none;
 }
 
-.portal-my-course-card-item {
-    min-height: 90px;
-    max-height: 90px;
-    background-color: #f8f9fb;
-    margin: 10px 0 10px 0;
-    border: 1px solid #e4e7ed;
-    border-radius: 8px;
-}
-
-.portal-my-course-card-item-main {
-    flex-grow: 1;
+.portal-my-card-main {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    grid-gap: 10px 10px;
-    font-size: 10px;
-}
-
-.portal-my-course-card-item:hover {
-    cursor: pointer;
-}
+    grid-template-columns: 1fr;
+    grid-row-gap: 10px;
+}

src/views/PortalPage/PortalPage.vue

@@ -12,22 +12,12 @@
           <div class="portal-card-title-main">我的课程</div>
         </div>
         <el-divider class="portal-card-divider"/>
-        <div v-if="isLogin" class="portal-card-main" :style="{height: (courseRowHeight - 63) + 'px'}">
-          <el-card v-for="i in 6" :key="i" class="portal-my-course-card-item" shadow="hover">
-            <div class="portal-my-course-card-item-body">
-              <div style="width: 50px; height: 50px;margin-right: 10px;flex-shrink: 0">
-                <img alt="err" src="@/assets/myTest.png" style="width: 100%; height: 100%;">
-              </div>
-              <div class="portal-my-course-card-item-main">
-                <div>软件工程与计算</div>
-                <div>未开始</div>
-                <div>开课时间：2000-1-1</div>
-                <div>刘钦</div>
-              </div>
-            </div>
-          </el-card>
+        <div v-if="isLogin" :style="{height: (courseRowHeight - 63) + 'px'}" class="portal-card-main">
+          <div class="portal-my-card-main">
+            <MyCourseCard :courseVO="course" v-for="course in myCourseList" :key="course.id"/>
+          </div>
         </div>
-        <div v-else class="portal-card-main" :style="{height: (courseRowHeight - 63) + 'px'}">
+        <div v-else :style="{height: (courseRowHeight - 63) + 'px', marginTop: (courseRowHeight / 2 - 120) + 'px'}" class="portal-card-main">
           <div>
             <svg class="icon" height="128" viewBox="0 0 1024 1024" width="128" xmlns="http://www.w3.org/2000/svg">
               <path
@@ -65,7 +55,7 @@
           <div class="portal-card-title-main">我的测试</div>
         </div>
         <el-divider class="portal-card-divider"/>
-        <div v-if="isLogin" class="portal-card-main" :style="{height: (testRowHeight - 63) + 'px'}">
+        <div v-if="isLogin" :style="{height: (testRowHeight - 63) + 'px'}" class="portal-card-main">
           <el-card v-for="i in 6" :key="i" class="portal-my-course-card-item" shadow="hover">
             <div class="portal-my-course-card-item-body">
               <div style="width: 50px; height: 50px;margin-right: 10px;flex-shrink: 0">
@@ -80,7 +70,7 @@
             </div>
           </el-card>
         </div>
-        <div v-else class="portal-card-main" :style="{height: (testRowHeight - 63) + 'px'}">
+        <div v-else :style="{height: (testRowHeight - 63) + 'px', marginTop: (testRowHeight / 2 - 120) + 'px'}" class="portal-card-main">
           <div>
             <svg class="icon" height="128" viewBox="0 0 1024 1024" width="128" xmlns="http://www.w3.org/2000/svg">
               <path
@@ -137,11 +127,12 @@ import CourseCard from "@/components/CourseCard";
 import GlobalFooter from "@/components/GlobalFooter";
 import EvalCard from "@/components/EvalCard";
 import CoderCard from "@/components/CoderCard";
+import MyCourseCard from "@/views/PortalPage/components/MyCourseCard";
 
 export default {
   //属性
   name: "PortalPage",
-  components: {CoderCard, GlobalFooter, CourseCard, InfoCard, CarouselCard, GlobalHeader, EvalCard},
+  components: { CoderCard, GlobalFooter, CourseCard, InfoCard, CarouselCard, GlobalHeader, EvalCard, MyCourseCard },
   data() {
     return {
       isLogin: this.$store.state.user.token !== undefined,
@@ -151,6 +142,8 @@ export default {
       evalExamList: [],
       courseList: [],
       coderExamList: [],
+      myCourseList: [],
+      myTestList: [],
       courseRowHeight: 0,
       testRowHeight: 0,
     };
@@ -168,8 +161,6 @@ export default {
       })();
     };
 
-    console.log(this.isLogin);
-
     // await this.$apis.getAllCourses().then(res => {
     //   this.courseList = res.data.data;
     // });
@@ -188,6 +179,12 @@ export default {
     // });
     this.coderExamList = this.$apis.getAllCoderExams().data.data["res"];
 
+    if (this.isLogin) {
+      this.myCourseList = this.$apis.getStudentCourses({ "studentId": this.$store.state.user.id }).then(res => {
+        this.myCourseList = res.data.data;
+      });
+    }
+
     await this.$nextTick(() => {
       that.handleResize();
     });
@@ -226,7 +223,10 @@ export default {
       this.testRowHeight = this.$refs.portalTestCardBodyMain.$el.clientHeight;
     },
     changeTestPane(tab, event) {
-      // console.log(tab, event);
+      const that = this;
+      this.$nextTick(() => {
+        that.handleResize();
+      });
     }
   }
 };

src/views/PortalPage/components/MyCourseCard.vue

@@ -0,0 +1,66 @@
+<template>
+  <el-card shadow="hover" class="portal-my-card-item-body">
+    <el-row>
+      <el-col :span="8">
+        <img :src="imageUrl" alt="err" style="width: 100%; height: 100%;">
+      </el-col>
+      <el-col :span="16">
+        <el-row>
+          <el-col :span="16">{{ 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>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: "MyCourseCard",
+  props: {
+    courseVO: {
+      type: Object
+    }
+  },
+  computed: {
+    state: function () {
+      if (new Date(this.courseVO.endTime) < new Date()) {
+        return "OVER";
+      } else if (new Date(this.courseVO.startTime) > new Date()) {
+        return "NOT_STARTED";
+        // } else if (this.examVO.finished) {
+        //   return "FINISHED";
+      } else {
+        return "RUNNING";
+      }
+    },
+    imageUrl() {
+      return this.courseVO.imageUrl === null ? "https://mjh1.oss-cn-hangzhou.aliyuncs.com/hci/no-image.png" : this.courseVO.imageUrl;
+    },
+    courseTime() {
+      const date = new Date(this.courseVO.startTime);
+      return (date.getMonth() + 1) + "月" + date.getDate() + "日 ";
+    },
+  },
+};
+</script>
+
+<style scoped>
+.portal-my-card-item-body {
+  background-color: #f8f9fb;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+}
+
+:deep(.el-card__body) {
+  padding: 8px 1px;
+}
+</style>