下载页

src/router/index.js

@@ -228,6 +228,12 @@ const routes = [
     component: () =>
       import(/* webpackChunkName: "Login" */ "../features/Login/Login.vue"),
   },
+  {
+    path: "/download",
+    name: "Download",
+    component: () =>
+      import(/* webpackChunkName: "download" */ "../views/Download.vue"),
+  },
   {
     path: "*",
     name: "404",

src/views/Download.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="download">
+    <div class="download-bg"></div>
+    <div class="download-body">
+      <div class="download-content">
+        <div class="school-logo">
+          <img :src="schoolLogo" alt="学校logo" />
+        </div>
+        <h1 class="text-center login-title">在线考试客户端</h1>
+        <el-button type="primary" @click="toDownload">点击下载</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ORG_CODE } from "@/constant/constants";
+import { getLogo } from "@/api/login";
+
+export default {
+  name: "download",
+  data() {
+    return {
+      schoolLogo: "",
+    };
+  },
+  async created() {
+    const res = await getLogo(ORG_CODE);
+    this.schoolLogo = res.data.data.logo;
+  },
+  methods: {
+    toDownload() {},
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.download {
+  .download-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-size: cover;
+    background-image: url(../features/Login/login-bg.png);
+  }
+
+  .download-body {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 400px;
+    transform: translate(-50%, -50%);
+    z-index: 99;
+    border: 6px solid rgba(0, 0, 0, 0.1);
+    border-radius: 20px;
+  }
+
+  .download-content {
+    background-color: #fff;
+    padding: 55px 56px 50px;
+    border-radius: 20px;
+    text-align: center;
+  }
+
+  .school-logo {
+    height: 60px;
+    position: relative;
+
+    > img {
+      display: block;
+      position: absolute;
+      margin: auto;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      max-height: 100%;
+      max-width: 100%;
+    }
+  }
+}
+</style>