Leonezhurui 编写首页Coder部分

src/assets/close.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1645865724930" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2754" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z" fill="#444444" p-id="2755"></path></svg>

src/views/ManagePage/ManagePage.vue

@@ -32,7 +32,7 @@
       <div class="header">
         <span class="title">评测题</span>
         <div>
-          <el-select v-model="data.value" class="m-2" placeholder="Select">
+          <el-select v-model="data.value" class="m-2" placeholder="全部评测题">
             <el-option
                 v-for="item in data.options"
                 :key="item.value"
@@ -62,9 +62,9 @@
       <div class="header">
         <span class="title">代码题</span>
         <div>
-          <el-select v-model="data.value" class="m-2" placeholder="Select">
+          <el-select ref="value" v-model="data.coder_value" placeholder="全部代码题">
             <el-option
-                v-for="item in data.options"
+                v-for="item in data.coder_options"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
@@ -179,7 +179,6 @@ import {reactive, ref} from "vue";
 import {Plus} from "@element-plus/icons";
 import CoderItem from "@/components/CoderItem";
 
-
 const dialogVisible = ref(false);
 const selectMooc = ref(false);
 let courseInfo = reactive({
@@ -260,8 +259,8 @@ let data = reactive({
       introduction: "主要考察软件工程的基本概念，一些基本算法，以及对面向对象基本思想的理解，掌握类图、用例图的画法",
     }
   ],
-  value: "",
-  options: [
+  coder_value: "",
+  coder_options: [
     {
       value: "xiaosu",
       label: "小苏",

src/views/PortalPage/PortalPage.vue

@@ -93,6 +93,8 @@ export default {
 .test-grid{
   grid-area: 3/1/span 1/span 1;
 
+  background: #53C300;
+
 }
 
 </style>

src/views/TestPage/TestPage.vue

@@ -9,15 +9,26 @@
   </div>
 
 
+  <div class="big_title">
+    <div>全部测评</div>
+    <div class="close-tag" @click="go_back"><img src="@/assets/close.svg" alt="kong"></div>
+  </div>
+  <div class="test_list2">
+    <div v-for="(item, index) in test_list" :key="index" class="coderItem">
+      <coder-card :coder_item="item"></coder-card>
+    </div>
+  </div>
+
 </template>
 
 
 <script>
 import GlobalHeader from "@/components/GlobalHeader";
 import TestCard from "@/views/TestPage/components/TestCoderItem";
+import CoderCard from "@/views/TestPage/components/CoderCard";
 export default {
   name: "TestPage",
-  components: {TestCard, GlobalHeader },
+  components: {CoderCard, TestCard, GlobalHeader },
   data(){
     return{
       test_list: [
@@ -96,10 +107,33 @@ export default {
       ],
     };
   },
+  methods: {
+    go_back(){
+      this.$router.go(-1);
+    }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
+.big_title{
+  font-size: 30px;
+  height: 50px;
+  margin: 20px 60px;
+  position: relative;
+
+  .close-tag{
+    img {
+      width: 40px;
+      height: 40px;
+      cursor: pointer;
+    }
+    position: absolute;
+    top: 5px;
+    right: 25px;
+  }
+
+}
 .test_list{
   display: flex;
   flex-wrap: wrap;
@@ -123,7 +157,31 @@ export default {
   .coderItem:nth-child(4n) {
     margin-right: 0;
   }
+}
+
+.test_list2 {
+  display: flex;
+  flex-wrap: wrap;
+  overflow: hidden;
+  margin: 20px 60px;
+
+  .coderItem {
+    display: inline-block;
+    margin-right: 130px;
+    margin-bottom: 60px;
+    transition: all ease-in 0.2s;
+    border-radius: 8px;
+  }
 
+  .coderItem:hover {
+    /*hover可以作用于子元素，故不能在组件中定义hover伪类
+    这会导致组件中的每个元素均受到影响*/
+    box-shadow: 0 4px 16px 0 rgb(0 0 0 / 12%);
+  }
+
+  .coderItem:nth-child(2n) {
+    margin-right: 0;
+  }
 }
 
 </style>

src/views/TestPage/components/CoderCard.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="container">
+    <div class="header">
+      <div class="title">{{coder_item.name}}</div>
+      <div :class="['state', color_type]">{{coder_item.state}}</div>
+    </div>
+    <div class="info">
+      <div class="basic-info">
+        <div class="info1"><span style="color: #999999">所属课程: </span>{{coder_item.course}}</div>
+        <div><span style="color: #999999">归类: {{coder_item.type}}</span></div>
+      </div>
+      <div class="info-operation">
+        <div><span style="color: #999999">起止时间: </span>{{coder_item.start_time}}至{{coder_item.end_time}}</div>
+        <div class="button-position">
+          <el-button type="primary" :class="background_color">{{further_operation}}</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+
+</template>
+
+<script>
+export default {
+  name: "CoderCard",
+  props: {
+    coder_item: Object
+  },
+  data(){
+    return {
+      test: {
+        name: "软件工程测试题",
+        state: "正在进行",
+        course: "软件工程与计算",
+        creator: "kenny67NJU",
+        type: "Coder",
+        start_time: "2022/2/23 13:45",
+        end_time: "2022/2/24 13:45",
+      },
+    };
+  },
+  computed: {
+    further_operation(){
+      if (this.coder_item.state === "正在进行"){
+        return "继续测试";
+      }else if (this.coder_item.state === "未参加"){
+        return "添加测试";
+      } else if (this.coder_item.state === "已结束"){
+        return "查看详情";
+      } else if (this.coder_item.state === "已完成"){
+        return "结果报告";
+      }
+      return "";
+    },
+    color_type(){
+      if (this.coder_item.state === "正在进行"){
+        return "color_blue";
+      }else if (this.coder_item.state === "已结束"){
+        return "color_red";
+      } else if (this.coder_item.state === "未参加"){
+        return "color_orange";
+      } else if (this.coder_item.state === "已完成"){
+        return "color_green";
+      }
+      return "";
+    },
+    background_color(){
+      if (this.coder_item.state === "正在进行"){
+        return "background_blue";
+      }else if (this.coder_item.state === "已结束"){
+        return "background_red";
+      } else if (this.coder_item.state === "未参加"){
+        return "background_orange";
+      } else if (this.coder_item.state === "已完成"){
+        return "background_green";
+      }
+      return "";
+    }
+
+  }
+
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 670px;
+  height: 120px;
+  background: #F8F9FB;
+  border-radius: 20px;
+  padding: 20px 16px;
+
+  .header {
+    position: relative;
+    height: 36px;
+    margin-bottom: 10px;
+
+    .title {
+      font-weight: bold;
+      font-size: 20px;
+    }
+    .state {
+      position: absolute;
+      right: 45px;
+      top: 0px;
+      font-size: 22px;
+      line-height: 36px;
+    }
+  }
+
+  .info {
+    font-size: 20px;
+
+    .basic-info {
+      display: flex;
+      flex-wrap: nowrap;
+
+
+      .info1 {
+        margin-right: 20px;
+        margin-bottom: 8px;
+      }
+    }
+
+    .info-operation {
+      position: relative;
+
+      .button-position {
+        position: absolute;
+        right: 30px;
+        bottom: 0px;
+      }
+    }
+  }
+
+  .color_blue{
+    color: #1989FA;
+  }
+  .color_red{
+    color: #F56C6C;
+  }
+  .color_orange{
+    color: #E38800;
+  }
+  .color_green{
+    color: #67C23A;
+  }
+
+  .el-button--primary.background_blue{
+    background: #1989FA;
+    border-color: #1989FA;
+  }
+  .el-button--primary.background_red{
+    background: #F56C6C;
+    border-color: #F56C6C;
+  }
+  .el-button--primary.background_orange{
+    background: #E38800;
+    border-color: #E38800;
+  }
+  .el-button--primary.background_green{
+    background: #67C23A;
+    border-color: #67C23A;
+  }
+
+}
+
+</style>

src/views/TestPage/components/TestCoderItem.vue

@@ -71,7 +71,6 @@ export default {
   background: #F8F9FB;
   border-radius: 12px;
   padding: 4px 13px;
-  font-family: Roboto;
 
   .header{
     height: 30px;