添加在线练习和离线考试UI。登录UI增加学校logo和产品名称。

src/features/OfflineExam/OfflineExamHome.vue

@@ -0,0 +1,86 @@
+<template>
+  <main-layout>
+    <Breadcrumb style="text-align: left; padding-left: 20px; height: 40px; line-height: 40px; background-color: #fafafa;">
+      当前所在位置：
+      <BreadcrumbItem>离线考试</BreadcrumbItem>
+    </Breadcrumb>
+
+    <div class="home">
+      <i-table border :columns="columns" :data="courses"></i-table>
+
+    </div>
+  </main-layout>
+</template>
+
+<script>
+export default {
+  name: "OnlineExamHome",
+  data() {
+    return {
+      columns: [
+        {
+          title: "课程",
+          key: "courseName"
+        },
+        {
+          title: "专业",
+          key: "specialtyName"
+        },
+        {
+          title: "考试开放时间",
+          key: "start2end"
+        },
+        {
+          title: "状态",
+          key: "fileUrl",
+          render: (h, params) => {
+            if (params.row.fileUrl) {
+              return h(
+                "a",
+                {
+                  attrs: {
+                    href: params.row.fileUrl
+                  },
+                  style: { fontSize: "16px" }
+                },
+                [
+                  h("Icon", {
+                    props: {
+                      type: "ios-cloud-download"
+                    }
+                  }),
+                  h("strong", "下载")
+                ]
+              );
+            } else {
+              return h("div", [h("strong", "未上传")]);
+            }
+          }
+        },
+        {
+          title: "操作",
+          key: "operations"
+        }
+      ],
+      courses: []
+    };
+  },
+  async mounted() {
+    const res = await this.$http.get("/api/offline_exam/getOfflineCourse");
+
+    this.courses = res.data.map(c => ({
+      courseName: c.courseName,
+      specialtyName: c.specialtyName,
+      start2end: c.startTime + " ~ " + c.endTime,
+      fileUrl: c.studentSubjectiveHtml,
+      operations: ""
+    }));
+  }
+};
+</script>
+
+<style scoped>
+.home {
+  margin: 20px;
+}
+</style>

src/features/OnlineExam/OnlineExamHome.vue

@@ -57,4 +57,7 @@ export default {
 </script>
 
 <style scoped>
+.home {
+  margin: 20px;
+}
 </style>

src/features/OnlinePractice/OnlinePracticeHome.vue

@@ -0,0 +1,70 @@
+<template>
+  <main-layout>
+    <Breadcrumb style="text-align: left; padding-left: 20px; height: 40px; line-height: 40px; background-color: #fafafa;">
+      当前所在位置：
+      <BreadcrumbItem>在线练习</BreadcrumbItem>
+    </Breadcrumb>
+
+    <div class="home">
+
+      <div style="margin-bottom: 20px; width: 320px; display: flex; justify-content: space-between">
+        <i-button size="small" :class="courseType === 'active' ? 'qm-primary-button' : 'qm-secondary-button'" @click="courseType='active'">进行中</i-button>
+        <i-button size="small" :class="courseType !== 'active' ? 'qm-primary-button' : 'qm-secondary-button'" @click="courseType='inactive'">已过期</i-button>
+      </div>
+
+      <i-table border :columns="columns" :data="courses"></i-table>
+
+    </div>
+  </main-layout>
+</template>
+
+<script>
+export default {
+  name: "OnlinePracticeHome",
+  data() {
+    return {
+      courseType: "active",
+      columns: [
+        {
+          title: "课程",
+          key: "courseName"
+        },
+        {
+          title: "专业",
+          key: "specialtyName"
+        },
+        {
+          title: "考试开放时间",
+          key: "start2end"
+        },
+        {
+          title: "剩余考试次数",
+          key: "times"
+        },
+        {
+          title: "操作",
+          key: "operations"
+        }
+      ],
+      courses: []
+    };
+  },
+  async mounted() {
+    const res = await this.$http.get("/api/online_exam_course");
+
+    this.courses = res.data.map(c => ({
+      courseName: c.courseName,
+      specialtyName: c.specialtyName,
+      start2end: c.startTime + " ~ " + c.endTime,
+      times: c.allowExamCount,
+      operations: ""
+    }));
+  }
+};
+</script>
+
+<style scoped>
+.home {
+  margin: 20px;
+}
+</style>

src/features/login/Login.vue

@@ -2,7 +2,8 @@
   <div class="home">
 
     <div class="header">
-      <div class="school-logo">school logo</div>
+      <div class="school-logo"><img :src="this.logoPath" alt="school logo"></img>
+      </div>
       <a class="close">关闭</a>
     </div>
 
@@ -50,6 +51,9 @@
 export default {
   data() {
     return {
+      logoPath:
+        "/api/ecs_core/org/logo?domain=" + process.env.VUE_APP_LOGIN_DOMAIN,
+      productName: "远程教育网络考试",
       loginType: "STUDENT_CODE",
       errorInfo: "",
       loginForm: {
@@ -74,7 +78,17 @@ export default {
       }
     };
   },
-  created() {
+  async created() {
+    try {
+      const res = await this.$http.get(
+        "/api/ecs_core/org/getRootOrgByCode?code=" +
+          process.env.VUE_APP_LOGIN_DOMAIN
+      );
+      const productName = res.data.examSysName;
+      this.productName = productName || "远程教育网络考试";
+    } catch {
+      this.productName = "远程教育网络考试";
+    }
     window.localStorage.removeItem("token");
     window.localStorage.removeItem("key");
   },
@@ -123,8 +137,14 @@ export default {
   height: 100vh;
 }
 
+.school-logo {
+  margin-left: -300px;
+}
+
 .header {
   min-height: 120px;
+  display: grid;
+  place-items: center;
 }
 
 .center {

src/router.js

@@ -3,6 +3,8 @@ import Router from "vue-router";
 
 import NotFoundComponent from "./views/NotFoundComponent.vue";
 import OnlineExamHome from "./features/OnlineExam/OnlineExamHome.vue";
+import OfflineExamHome from "./features/OfflineExam/OfflineExamHome.vue";
+import OnlinePracticeHome from "./features/OnlinePractice/OnlinePracticeHome.vue";
 import Login from "./features/Login/Login.vue";
 import Password from "./features/Password/Password.vue";
 
@@ -25,6 +27,16 @@ let router = new Router({
       name: "OnlineExamHome",
       component: OnlineExamHome
     },
+    {
+      path: "/online-practice",
+      name: "OnlinePracticeHome",
+      component: OnlinePracticeHome
+    },
+    {
+      path: "/offline-exam",
+      name: "OfflineExamHome",
+      component: OfflineExamHome
+    },
     {
       path: "/password",
       name: "password",

src/styles/global.css

@@ -58,3 +58,24 @@
   line-height: 36px;
   overflow: hidden;
 }
+
+.qm-primary-button:hover {
+  color: #ffffff;
+  background-color: #13bb8a;
+}
+
+.qm-secondary-button {
+  height: 36px;
+  font-size: 14px;
+  color: #999999;
+  background-color: #ffffff;
+  border-radius: 6px;
+  padding: 0 50px;
+  line-height: 36px;
+  overflow: hidden;
+}
+
+.qm-secondary-button:hover {
+  color: #999999;
+  background-color: #ffffff;
+}