assets/css/course-card.scss

@@ -1,14 +1,17 @@
 .course-card{
   cursor: pointer;
-  width: 320px;
-  height: 280px;
-  padding: 0;
+  width: 340px;
+  height: 328px;
   border-radius: 5px;
   margin-bottom: 20px;
+  background-color: #F8F9FB;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
   &__picture{
-    width: 320px;
-    height: 160px;
+    width: 100%;
+    height: 180px;
   }
 
   &__header{
@@ -18,6 +21,17 @@
   &__title{
     display: block;
     color: $common-color;
+    font-weight: 500;
+    font-size: 18px;
+  }
+  &__info{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  &__status{
+    color: #666666;
+
   }
 
   &__origin{
@@ -28,9 +42,14 @@
 
   &__description{
     color: $note-color;
-    width: 100%;
+    width: 90%;
     padding: 5px 20px;
-    font-size: 12px;
+    font-size: 14px;
+    background-color: #FFFFFF;
+    border-radius: 24px;
+    height: 66px;
+
+
   }
 
   .el-card__body{

assets/css/home.scss

@@ -41,3 +41,9 @@ a{
   width: 1200px;
   margin: 0 auto;
 }
+.test-list{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 30px;
+}

assets/css/test-card.css

@@ -0,0 +1,55 @@
+.test-card {
+  height: 180px;
+}
+
+.test-container {
+  width: 40%;
+}
+
+.test-card__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+}
+
+.test-card__name {
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.test-card__status {
+  font-size: 16px;
+}
+
+.test-card__option{
+  display: flex;
+  justify-content: space-between;
+}
+
+.test-card__time {
+  margin-top: 16px;
+  font-size: 16px;
+  color: #999999;
+}
+
+.test-card__btn{
+  margin-top: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 90px;
+  justify-content: space-between;
+}
+
+.test-card__btn >>> .el-button{
+  margin-left: 0;
+}
+
+.test-card__invigilate{
+  color: #333333;
+  font-weight: 400;
+  font-size: 18px;
+  margin-top: 16px;
+}
+

components/CourseCard.vue

@@ -2,10 +2,14 @@
   <el-card class="course-card" @click.native="checkCourseDetail" shadow="hover" :body-style="bodyStyle">
     <img :src="picture" class="course-card__picture"/>
     <div class="course-card__header">
-      <h4 class="course-card__title">{{title}}</h4>
-      <p class="course-card__origin">{{origin}}</p>
+      <div class="course-card__info">
+        <div class="course-card__title">{{ title }}</div>
+      </div>
+      <p class="course-card__origin">{{ origin }}</p>
+    </div>
+    <div class="contentCenter">
+      <div class="course-card__description">{{ description }}</div>
     </div>
-    <div class="course-card__description">{{description}}</div>
   </el-card>
 </template>
 
@@ -40,12 +44,24 @@ export default {
   },
   data () {
     return {
-      bodyStyle: { padding: '0' }
+      bodyStyle: {
+        padding: '0',
+        backgroundColor: '#F8F9FB'
+      }
     }
   },
   methods: {
     checkCourseDetail () {
-      window.location.href = this.url
+      const token = this.$store.state.token
+      if (token === null) {
+        this.$message({
+          showClose: true,
+          message: '请先登录',
+          type: 'error'
+        })
+      } else {
+        window.location.href = this.url
+      }
     }
   }
 
@@ -53,5 +69,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  @import '~/assets/css/course-card.scss';
+@import '~/assets/css/course-card.scss';
+
+.contentCenter{
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  margin-top: 8px;
+}
 </style>

components/Navi.vue

@@ -7,17 +7,17 @@
         <li class="nav__item nav__item-left" id="v-step-1"><a href="http://coder.seecoder.cn" target="_self">CODER</a></li>
         <li class="nav__item nav__item-left" id="v-step-2"><a href="http://developer.seecoder.cn" target="_self">DEVELOPER</a></li>
       </ul>
-      <el-input placeholder="搜索课程" class="nav__search" disabled>
-        <el-button slot="append" icon="el-icon-search" disabled></el-button>
-      </el-input>
+<!--      <el-input placeholder="搜索课程" class="nav__search" disabled>-->
+<!--        <el-button slot="append" icon="el-icon-search" disabled></el-button>-->
+<!--      </el-input>-->
       <ul class="nav__list nav__list-right" v-if="isLogin">
         <li class="nav__item">
           <router-link to="/person/info" v-if="!isAdmin" id="v-step-3">个人中心</router-link>
           <router-link to="/admin/checkApplications" v-else>平台管理</router-link>
         </li>
-        <li class="nav__item">
-          <router-link to="/rookie/first" v-if="!isAdmin" id="v-step-4">通关模式</router-link>
-        </li>
+<!--        <li class="nav__item">-->
+<!--          <router-link to="/rookie/first" v-if="!isAdmin" id="v-step-4">通关模式</router-link>-->
+<!--        </li>-->
         <li class="nav__item">
           <el-popover
             placement="bottom-start"
@@ -45,7 +45,7 @@
         <li class="nav__item"><router-link to="/login">登录</router-link></li>
         <li class="nav__item"><router-link to="/register">注册</router-link></li>
       </ul>
-      <v-tour class="v-tour-style" name="myTour" :steps="steps" :options="myOptions"></v-tour>
+<!--      <v-tour class="v-tour-style" name="myTour" :steps="steps" :options="myOptions"></v-tour>-->
     </div>
   </nav>
 </template>
@@ -60,43 +60,43 @@ export default {
       isAdmin: this.$store.state.user.role === 'ADMIN',
       userName: this.$store.state.user.name,
       userPhone: this.$store.state.user.phone,
-      myOptions:{
-            useKeyboardNavigation: false,    //不使用←、→和ESC键来导航tour
-            startTimeout: 1000,   //1秒后执行
-            labels: {
-                buttonSkip: '跳过',
-                buttonPrevious: '上一步',
-                buttonNext: '下一步',
-                buttonStop: '关闭'
-            }
+      myOptions: {
+        useKeyboardNavigation: false, // 不使用←、→和ESC键来导航tour
+        startTimeout: 1000, // 1秒后执行
+        labels: {
+          buttonSkip: '跳过',
+          buttonPrevious: '上一步',
+          buttonNext: '下一步',
+          buttonStop: '关闭'
+        }
+      },
+      steps: [
+        {
+          target: '#v-step-0', // We're using document.querySelector() under the hood
+          content: '这里是帮助，里面会有一些帮助你的文档'
+        },
+        {
+          target: '#v-step-1',
+          content: '这里是做题系统，可以在上面进行做题编程'
         },
-        steps: [
-          {
-            target: '#v-step-0',  // We're using document.querySelector() under the hood
-            content: `这里是帮助，里面会有一些帮助你的文档`
-          },
-          {
-            target: '#v-step-1',
-            content: '这里是做题系统，可以在上面进行做题编程'
-          },
-          {
-            target: '#v-step-2',
-            content: '这里是开发平台',
-          },
-          {
-            target: '#v-step-3',
-            content: '这里是个人中心，里面会有你的基本信息、学习数据等',
-          },
-          {
-            target: '#v-step-4',
-            content: '这里是通关模式，你可以获取题库的推荐，进行每日一题的训练',
-          }
-        ]
+        {
+          target: '#v-step-2',
+          content: '这里是开发平台'
+        },
+        {
+          target: '#v-step-3',
+          content: '这里是个人中心，里面会有你的基本信息、学习数据等'
+        },
+        {
+          target: '#v-step-4',
+          content: '这里是通关模式，你可以获取题库的推荐，进行每日一题的训练'
+        }
+      ]
     }
   },
-  mounted () {
-    this.$tours.myTour.start()
-  },
+  // mounted () {
+  //   this.$tours.myTour.start()
+  // },
 
   methods: {
     logout () {

components/TestCard.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="test-container">
+    <el-card class="test-card" shadow="hover">
+      <div class="test-card__header">
+        <div class="test-card__name">{{ examName }}</div>
+        <!--   和style绑定     -->
+        <div class="test-card__status">{{status}}</div>
+      </div>
+      <div class="test-card__option">
+        <div class="test-card__time">
+          <div class="test-card__startTime">开始时间：{{ startTime }}</div>
+          <div class="test-card__endTime">结束时间：{{ endTime }}</div>
+          <div class="test-card__invigilate">监考：{{ antiCheating }}</div>
+        </div>
+        <div class="test-card__btn">
+          <el-button type="primary" plain @click.native="getTestDetail">查看详情</el-button>
+          <el-button type="warning" plain @click.native="getReport">结果报告</el-button>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TestCard',
+  props: {
+    startTime: {
+      type: String,
+      default: ''
+    },
+    endTime: {
+      type: String,
+      default: ''
+    },
+    examName: {
+      type: String,
+      default: ''
+    },
+    antiCheating: {
+      type: String,
+      default: ''
+    },
+    status: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+@import '~/assets/css/test-card.css';
+</style>

layouts/default.vue

@@ -7,7 +7,6 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
 import Navi from '~/components/Navi'
 import Foot from '~/components/Foot'
 

layouts/person.vue

@@ -14,22 +14,22 @@
           <i class="el-icon-document"></i>
           <span slot="title">身份认证</span>
         </el-menu-item>
-        <el-menu-item index="3">
-          <i class="el-icon-data-line"></i>
-          <span slot="title">学习数据</span>
-        </el-menu-item>
-        <el-menu-item index="4">
-          <i class="el-icon-reading"></i>
-          <span slot="title">我的课程</span>
-        </el-menu-item>
-        <el-menu-item index="5">
-          <i class="el-icon-document"></i>
-          <span slot="title">待办事项</span>
-        </el-menu-item>
-        <el-menu-item index="6">
-          <i class="el-icon-s-order"></i>
-          <span slot="title">历史订单</span>
-        </el-menu-item>
+<!--        <el-menu-item index="3">-->
+<!--          <i class="el-icon-data-line"></i>-->
+<!--          <span slot="title">学习数据</span>-->
+<!--        </el-menu-item>-->
+<!--        <el-menu-item index="4">-->
+<!--          <i class="el-icon-reading"></i>-->
+<!--          <span slot="title">我的课程</span>-->
+<!--        </el-menu-item>-->
+<!--        <el-menu-item index="5">-->
+<!--          <i class="el-icon-document"></i>-->
+<!--          <span slot="title">待办事项</span>-->
+<!--        </el-menu-item>-->
+<!--        <el-menu-item index="6" disabled>-->
+<!--          <i class="el-icon-s-order"></i>-->
+<!--          <span slot="title">历史订单</span>-->
+<!--        </el-menu-item>-->
       </el-menu>
       <el-card class="main-card">
         <nuxt />

nuxt.config.js

@@ -84,8 +84,8 @@ module.exports = {
   },
   proxy: {
     '/api/': {
-      target: 'http://localhost:8080' // 代理地址
-      // target: 'https://p-server.seec.seecoder.cn' // 代理地址
+      // target: 'http://localhost:8080' // 代理地址
+      target: 'https://p-server.seec.seecoder.cn' // 代理地址
       // changeOrigin: true,
       // pathRewrite: {
       //   '^/api': ''

package.json

@@ -21,6 +21,7 @@
     "axios": "^0.19.2",
     "cookie-universal-nuxt": "^2.1.3",
     "cross-env": "^5.2.0",
+    "dayjs": "^1.10.7",
     "debug": "^4.1.1",
     "echarts": "^4.7.0",
     "element-ui": "^2.4.11",
@@ -54,6 +55,7 @@
     "sass": "^1.32.8",
     "sass-loader": "^8.0.2",
     "supertest": "^4.0.2",
-    "vue-jest": "^4.0.0-0"
+    "vue-jest": "^4.0.0-0",
+    "vuex": "^3.6.2"
   }
 }

pages/index.vue

@@ -2,17 +2,10 @@
   <div>
     <!--<img class="home-banner" src="/image/SEEC_banner3.png"/>-->
     <h1 class="title">热门测试</h1>
-    <div class="course-list">
-      <course-card
-        v-for="(item,index) in courses"
-        v-bind:key="index"
-        :picture="item.picture"
-        :title="item.title"
-        :description="item.description"
-        :url="item.url"
-        :origin="item.origin"
-      >
-      </course-card>
+    <div class="test-list">
+      <test-card :start-time="examList.startTime" :end-time="examList.endTime"
+                 :exam-name="examList.examName" :anti-cheating="examList.antiCheating===false? '无':'有'"
+                 :status="examList.status"></test-card>
     </div>
     <h1 class="title">热门课程</h1>
     <div class="course-list">
@@ -28,32 +21,35 @@
       </course-card>
     </div>
 
-    <h1 class="title">推荐专栏</h1>
-    <div class="course-list">
-      <column-card
-        v-for="(item,index) in columns"
-        v-bind:key="index"
-        :picture="item.picture"
-        :title="item.title"
-        :description="item.description"
-        :url="item.url"
-      >
-      </column-card>
-    </div>
+    <!--    <h1 class="title">推荐专栏</h1>-->
+    <!--    <div class="course-list">-->
+    <!--      <column-card-->
+    <!--        v-for="(item,index) in columns"-->
+    <!--        v-bind:key="index"-->
+    <!--        :picture="item.picture"-->
+    <!--        :title="item.title"-->
+    <!--        :description="item.description"-->
+    <!--        :url="item.url"-->
+    <!--      >-->
+    <!--      </column-card>-->
+    <!--    </div>-->
   </div>
 </template>
 
 <script>
 import CourseCard from '~/components/CourseCard'
-import ColumnCard from '~/components/ColumnCard'
+import TestCard from '~/components/TestCard'
+import { computeExamStatusText } from '~/plugins/util'
 
 export default {
   components: {
     CourseCard,
-    ColumnCard
+    TestCard
   },
   data () {
     return {
+      token: '',
+      examList: [],
       courses: [
         {
           title: '基于Java的面向对象编程范式',
@@ -76,33 +72,23 @@ export default {
           url: 'http://developer.seecoder.cn',
           description: '基于DevOps培养团队开发中小规模软件系统的能力'
         }
-      ],
-      columns: [
-        {
-          title: '深度学习入门',
-          picture: '/image/deep_learning.png',
-          url: 'http://developer.seecoder.cn',
-          description: '掌握深度学习基础数学知识，理解深度学习有关算法和原理，了解和使用深度学习工具'
-        },
-        {
-          title: 'JVM简要入门',
-          picture: '/image/JVM.jpg',
-          url: 'http://developer.seecoder.cn',
-          description: '了解Java字节码,理解字节码在JVM的执行过程和面向对象编程语言的实现机制'
-        },
-        {
-          title: '区块链底层开发入门',
-          picture: '/image/block_chain.jpg',
-          url: 'http://developer.seecoder.cn',
-          description: '介绍区块链专业术语和工作原理，结合模拟器带你步步实现区块链交易、加密、共识等算法。'
-        }
-
       ]
     }
+  },
+  mounted () {
+    this.$api.$get('https://eval-test.seec.seecoder.cn/api/exam/list?pageSize=5&pageNum=1').then(res => {
+      this.examList = res.result.examVOList[0]
+      const startTime = this.examList.startTime
+      const endTime = this.examList.endTime
+      this.examList.status = computeExamStatusText({
+        startTime: startTime,
+        endTime: endTime
+      })
+    })
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  @import '~/assets/css/home.scss';
+@import '~/assets/css/home.scss';
 </style>

pages/login.vue

@@ -146,7 +146,7 @@ export default {
             localStorage.removeItem('password')
             localStorage.removeItem('rememberPassword')
           }
-
+          console.log(res.data)
           this.$message({
             showClose: true,
             message: '欢迎回来，' + res.data.name,

pages/register.vue

@@ -19,7 +19,6 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
 
 export default {
   name: 'register',

plugins/api.js

@@ -33,12 +33,12 @@ export default function ({ $axios, redirect, app, store }, inject) {
     // },
     baseURL: '/api',
     timeout: 10000,
-    withCredentials: true
+    // withCredentials: true
   })
 
   api.onRequest(config => {
     if (store.state.token) {
-      config.headers.authorization = 'Bearer ' + store.state.token
+      config.headers.authorization = store.state.token
     } else {
       delete config.headers.authorization
     }

plugins/util.js

@@ -0,0 +1,19 @@
+import dayjs from 'dayjs'
+
+// export const TIME_FORAMT = 'YYYY-MM-DD HH:mm:ss'
+export const computeExamStatusText = params => {
+  const {
+    startTime,
+    endTime
+  } = params
+  const now = dayjs()
+  const formattedStartTime = dayjs(startTime)
+  const formattedEndTime = dayjs(endTime)
+  if (formattedEndTime < now) {
+    return '已结束'
+  }
+  if (formattedStartTime > now) {
+    return '未开始'
+  }
+  return '进行中'
+}