登录页

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="nav">
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
+    <!-- <router-link to="/">Home</router-link> |
+    <router-link to="/about">About</router-link> -->
   </div>
   <router-view/>
 </template>

src/api/index.ts

@@ -18,3 +18,4 @@ export function getinfo(): Promise<AxiosPromise>{
 export function seninfo(data: object): Promise<AxiosPromise>{
     return post("b",data)
 }
+

src/components/login/LoginTab.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="logintab">
+      <div class="tab">手机号登录</div>
+      <div class="tab ">账号密码登录</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "LoginTab",
+  components: {},
+  setup() {
+    const selected: number =1
+    return {
+      selected
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.logintab{
+    display: flex;
+    .tab{
+        width: 100px;
+        height: 28px;
+        border-radius: 14px;
+        
+        font-weight: bold;
+        text-align: center;
+        font-size: 11px;
+        line-height: 28px;
+    }
+    .tab1{
+        background: #08AE98;
+        color: white;
+    }
+}
+</style>

src/router/index.ts

@@ -1,20 +1,26 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import Home from '../views/Home.vue'
-
+import Login from "../views/login/Login.vue"
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'Home',
     component: Home
   },
+ 
+  // {
+  //   path: '/about',
+  //   name: 'About',
+  //   // route level code-splitting
+  //   // this generates a separate chunk (about.[hash].js) for this route
+  //   // which is lazy-loaded when the route is visited.
+  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  // }
   {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  }
+    path: '/login',
+    name: 'Login',
+    component:Login
+  },
 ]
 
 const router = createRouter({

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>

yarn.lock

@@ -7876,8 +7876,8 @@ sass-graph@2.2.5:
 
 sass-loader@^10.0.2:
   version "10.0.2"
-  resolved "https://registry.npm.taobao.org/sass-loader/download/sass-loader-10.0.2.tgz?cache=0&sync_timestamp=1599136698634&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsass-loader%2Fdownload%2Fsass-loader-10.0.2.tgz#c7b73010848b264792dd45372eea0b87cba4401e"
-  integrity sha1-x7cwEISLJkeS3UU3LuoLh8ukQB4=
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.0.2.tgz#c7b73010848b264792dd45372eea0b87cba4401e"
+  integrity sha512-wV6NDUVB8/iEYMalV/+139+vl2LaRFlZGEd5/xmdcdzQcgmis+npyco6NsDTVOlNA3y2NV9Gcz+vHyFMIT+ffg==
   dependencies:
     klona "^2.0.3"
     loader-utils "^2.0.0"