登录页

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
+    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
     <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
   </div>
 </template>

src/views/login/Login.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="login">
+    <div class="box">
+      <div class="left">
+        <div class="title">
+          您好，欢迎来到 <span class="orgname">Beelink</span>
+        </div>
+        <div class="nosign">还没有账号？ <span class="tosign"> 成为一名Beelink老师 </span></div>
+        <div>
+          <LoginTab></LoginTab>
+        </div>
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import LoginTab from '@/components/login/LoginTab.vue'; 
+export default defineComponent({
+  name: "Login",
+  components: {
+    LoginTab
+  },
+  setup() {
+  const panes: Array<any>=[
+     { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
+      { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
+  ]
+    return {
+      panes
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.login {
+  min-width: 100vw;
+  height: 100vh;
+  background: url("../../../static/loginbg.png");
+  background-size: 100% 130%;
+  background-repeat: no-repeat;
+  padding-top: 145px;
+  .box {
+    display: flex;
+    justify-content: space-around;
+    .left {
+      width: 313px;
+      .title {
+        font-size: 17px;
+        font-weight: bold;
+      }
+      .orgname {
+        font-size: 20px;
+        color: #0dbba4;
+      }
+      .nosign{
+        font-size:11px;
+        color: #666666;
+        margin-top: 16px;
+      }
+      .tosign{
+        color: #0DBBA4;
+      }
+    }
+    .right {
+      width: 690px;
+    }
+  }
+}
+</style>