登录跳转

src/router/index.ts

@@ -2,7 +2,7 @@ import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
 
 const routes: RouteRecordRaw[] = [
   {
-    path: "/login",
+    path: "/",
     name: "login",
     component: () => import("../viwe/login.vue"),
   },

src/viwe/login.vue

@@ -1,6 +1,18 @@
 <template>
   <div class="box">
-   登录页
+   <div class="title">
+    <div class="title-text">指挥员（长）及消防员综合作战能力培养评定平台</div>
+    <img class="bgimg" src="../assets/icon/titlebg.png" alt="">
+    <img class="ferr" src="../assets/icon/ferr.png" alt="">
+   </div>
+   <div class="buttonbox">
+    <div class="button" @click="lesson" tabindex="1">
+      战术教训系统
+    </div>
+    <div class="button" @click="examine" tabindex="1">
+      单位信息考核系统
+    </div>
+   </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -10,10 +22,90 @@ import { onMounted } from "vue";
 onMounted(()=>{
   
 })
-
+const lesson=()=>{
+  console.log('lesson');
+  return "axpx://startup"
+}
+const examine=()=>{
+  console.log('examine');
+  window.open('http://121.36.37.70:8216/login')
+}
 </script>
 <style lang="less" scoped>
+@font-face {
+    font-family: 'youshe';
+    src: url('../assets/font/优设标题黑.TTF');
+         
+}
+@font-face {
+    font-family: 'zhengrui';
+    src: url('../assets/font/联盟起艺卢帅正锐黑体.ttf');
+         
+}
 .box {
- color: black;
+  width: 100vw;
+  height: 100vh;
+ background-image: url('../assets/icon/background.png');
+ .title{
+  width: 100%;
+  height: 277px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  color: #fff;
+  // background-image: url('../assets/icon/titlebg2.png');
+  // background-size: 100% ;
+  .title-text{
+    text-align: center;
+    font-family: 'zhengrui';
+    font-size: 48px;
+    letter-spacing:5px;
+    position: absolute;
+    z-index: 10;
+  }
+  .bgimg{
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  .ferr{
+    position: absolute;
+    left: calc(50%-276px);
+    top: 0;
+    z-index: 0;
+  }
+ }
+ .buttonbox{
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin-top: 170px;
+  .button{
+    width: 25%;
+    min-width: 420px;
+    height: 180px;
+    display: flex;
+    font-size: 36px;
+
+    justify-content: center;
+    align-items: center;
+    color: #00DCFF;
+    background-image: url('../assets/icon/button.png');
+    font-family: 'youshe';
+    background-repeat:no-repeat;
+    margin: 20px 100px;
+    background-size: 100% ;
+    cursor: pointer;
+  }
+  
+ }
+ .button:focus{
+    background-image: url('../assets/icon/button2.png');
+  }
 }
 </style>