feat: add portal test card, footer needs to be fixed

src/global/register-element.js

@@ -20,6 +20,10 @@ import {
   ElRadioButton,
   ElRadioGroup,
   ElPopover, ElCarousel, ElCarouselItem, ElOption, ElTable, ElTableColumn, ElDescriptionsItem, ElDescriptions,
+  ElCard,
+  ElRow,
+  ElCol,
+  ElTag
 } from "element-plus";
 
 // NOTE 使用到的组件列表，请确保 import 和 component 的一致性
@@ -51,7 +55,11 @@ const components = [
   ElCarousel,
   ElCarouselItem,
   ElDescriptions,
-  ElDescriptionsItem
+  ElDescriptionsItem,
+  ElCard,
+  ElRow,
+  ElCol,
+  ElTag
 ];
 
 export default function (app) {

src/views/PortalPage/PortalPage.css

@@ -4,7 +4,7 @@
     grid-template-columns: 2fr 1fr;
     grid-template-rows: auto auto auto;
     grid-gap: 10px 20px;
-    background: ghostwhite;
+    background: #f8f9fb;
     padding: 10px 20px 0 20px;
 }
 
@@ -40,18 +40,18 @@
 #portal-test-card-title {
     display: flex;
     justify-content: space-between;
-    margin-right: 5%;
+    /*margin-right: 5%;*/
     align-items: baseline;
-    margin-bottom: 20px;
+    margin-bottom: 10px;
 }
 
 #portal-test-card-main {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
+    /*display: grid;*/
+    /*grid-template-columns: 1fr 1fr 1fr;*/
 }
 
 #portal-test-card-title-1 {
     font-weight: bold;
     font-size: larger;
     margin: 0 10px 0 0;
-}
+}

src/views/PortalPage/PortalPage.vue

@@ -17,16 +17,25 @@
     <div :style="{height:(this.extending?'650px':'350px'), transition: 'height 0.5s'}">我的课程
       <img alt="err" src="@/assets/myCourse.png" style="width: 100%; height: 80%">
     </div>
-    <div id="portal-test-card-body" :style="{height:(this.extending?'650px':'350px'), transition: 'height 0.5s'}" style="cursor: pointer" @click="toTest">
+    <div id="portal-test-card-body" :style="{height:(this.extending?'650px':'350px'), transition: 'height 0.5s'}" style="cursor: pointer">
       <div id="portal-test-card-title">
         <div id="portal-test-card-title-1">智能测试</div>
         <ElButton type="primary" plain @click="toCourse">查看全部测试</ElButton>
       </div>
-      <div id="portal-test-card-main">
-        <div v-for="(index) in devTemp_1" :key="index" class="cItem">
-          <CourseItem/>
-        </div>
-      </div>
+      <el-card id="portal-test-card-main">
+        <el-tabs v-model="activeTestName" @tab-click="changeTestPane">
+          <el-tab-pane label="评测题" name="eval">
+            <el-row justify="space-around">
+              <el-col :span="7" v-for="i in devTemp_1" :key="i">
+                <EvalCard :examVO="evalExamVOList[0]"></EvalCard>
+              </el-col>
+            </el-row>
+          </el-tab-pane>
+          <el-tab-pane label="代码题" name="coder">
+            coder测试
+          </el-tab-pane>
+        </el-tabs>
+      </el-card>
     </div>
     <div :style="{height:(this.extending?'650px':'350px'), transition: 'height 0.5s'}">我的测试
       <img alt="err" src="@/assets/myTest.png" style="width: 100%; height: 80%">
@@ -41,15 +50,27 @@ import CarouselCard from "@/views/PortalPage/components/CarouselCard";
 import InfoCard from "@/views/PortalPage/components/InfoCard";
 import CourseItem from "@/components/CourseItem";
 import GlobalFooter from "@/components/GlobalFooter";
+import EvalCard from "@/views/PortalPage/components/EvalCard";
 
 export default {
   //属性
   name: "PortalPage",
-  components: { GlobalFooter, CourseItem, InfoCard, CarouselCard, GlobalHeader },
+  components: { GlobalFooter, CourseItem, InfoCard, CarouselCard, GlobalHeader, EvalCard },
   data() {
     return {
       extending: false,
       devTemp_1: 3,
+      activeTestName: "eval",
+      evalExamVOList: [{
+        id: 10,
+        name: "软件工程测试1软件工程测试1",
+        startTime: "2022-02-20 00:00:00",
+        endTime: "2022-02-28 23:59:59",
+        teacher: "刘钦",
+        invigilate: false,
+        finished: false,
+        comment: "    主要考察软件工程的基本概念，一些基本算法，以及对面向对象基本思想的理解，掌握类图、用例图的画法"
+      }]
     };
   },
 
@@ -79,8 +100,11 @@ export default {
         this.devTemp_1 = 3;
       }
     },
+    changeTestPane(tab, event) {
+      console.log(tab, event);
+    }
   }
 };
 </script>
 
-<style scoped src="./PortalPage.css"/>
+<style scoped src="./PortalPage.css"/>

src/views/PortalPage/components/EvalCard.vue

@@ -0,0 +1,98 @@
+<template>
+  <el-card class="eval" shadow="hover">
+    <el-row>
+      <el-col class="name" :span="16">
+        {{examVO.name}}
+      </el-col>
+      <el-col class="status" :span="8">
+        <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==='FINISHED'" size="small" type="success">已完成</el-tag>
+        <el-tag v-else-if="state==='OVER'" size="small" type="danger">已结束</el-tag>
+      </el-col>
+    </el-row>
+    <el-row class="teacher">
+      教师: {{examVO.teacher}}
+    </el-row>
+    <el-row class="time">
+      {{timeToCHN(examVO.startTime)}} 至 {{timeToCHN(examVO.endTime)}}
+    </el-row>
+    <el-row class="comment">
+      {{examVO.comment}}
+    </el-row>
+    <el-row class="button">
+      <el-col :span="24">
+        <el-button v-if="state==='FINISHED'" size="small" type="success" plain>结果报告</el-button>
+        <el-button v-else size="small" type="primary" plain>查看详情</el-button>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: "EvalCard",
+  props: {
+    examVO: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  computed: {
+    state: function () {
+      if(new Date(this.examVO.endTime) < new Date()){
+        return "OVER";
+      } else if(new Date(this.examVO.startTime) > new Date()){
+        return "NOT_STARTED";
+      } else if(this.examVO.finished){
+        return "FINISHED";
+      } else {
+        return "RUNNING";
+      }
+    }
+  },
+  methods: {
+    timeToCHN: function (time) {
+      const date = new Date(time);
+      const hours = date.getHours()>9?date.getHours():"0" + date.getHours();
+      const minutes = date.getMinutes()>9?date.getMinutes():"0" + date.getMinutes();
+      return (date.getMonth()+1) + "月" + date.getDate() + "日 " +
+          hours + ":" + minutes;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.eval{
+  background-color: #f8f9fb;
+  margin-top: 20px;
+  border: 0;
+  border-radius: 12px;
+}
+.name{
+  font-weight: bold;
+}
+.status{
+  text-align: right;
+}
+.teacher{
+  font-size: 10px;
+  margin-top: 10px;
+}
+.time{
+  margin-top: 4px;
+  font-size: 10px;
+}
+.comment{
+  background-color: #ffffff;
+  margin-top: 10px;
+  border-radius: 12px;
+  padding: 10px;
+  font-size: 10px;
+}
+.button{
+  margin-top: 12px;
+  text-align: center;
+}
+</style>