Merge pull request 'zj' (#14) from zj into master

Reviewed-on: http://git.luyuan.tk/luyuan/beelink/pulls/14

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,48 @@
+<template>
+  <div class="logintab">
+      <div :class="selected==1?'tab tab1':'tab'" @click="tabchange(1)">手机号登录</div>
+      <div :class="selected==2?'tab tab1':'tab'" @click="tabchange(2)">账号密码登录</div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent , ref} from "vue";
+
+export default defineComponent({
+  name: "LoginTab",
+  components: {},
+ 
+
+  setup(prop,context) {
+    const selected=ref(1)
+    function tabchange(e: number): void{
+        selected.value=e
+        context.emit("sel",e)
+
+    }
+    return {
+      selected,
+      tabchange
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.logintab{
+    display: flex;
+    .tab{
+        width: 100px;
+        height: 29px;
+        border-radius: 14px;
+        cursor: pointer;
+        font-weight: bold;
+        text-align: center;
+        font-size: 11px;
+        line-height: 28px;
+    }
+    .tab1{
+        background: #08AE98;
+        color: white;
+    }
+}
+</style>

src/router/index.ts

@@ -1,4 +1,6 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import Home from '../views/Home.vue'
+import Login from "../views/login/Login.vue"
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -17,19 +19,25 @@ const routes: Array<RouteRecordRaw> = [
     name: 'Home',
     component: () => import(/* webpackChunkName: "about" */ '../components/NavTop.vue')
   },
-  {
+ 
-    path: '/about',
+  // {
-    name: 'About',
+  //   path: '/about',
-    // route level code-splitting
+  //   name: 'About',
-    // this generates a separate chunk (about.[hash].js) for this route
+  //   // route level code-splitting
-    // which is lazy-loaded when the route is visited.
+  //   // this generates a separate chunk (about.[hash].js) for this route
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  //   // which is lazy-loaded when the route is visited.
-  },
+  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  // }
   {
     path: '/archives',
     name: 'Archives',
     component: () => import('../views/mine/Archives.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/login/Login.vue

@@ -0,0 +1,214 @@
+<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 class="tab">
+          <LoginTab @sel="Selectnum"></LoginTab>
+        </div>
+
+        <div v-if="tabselected==1">
+          <a-form :layout="formLayout">
+            <a-form-item label="手机号" class="form-item">
+              <a-input-group compact>
+                <a-select default-value="Zhejiang" class="getcode">
+                  <a-select-option value="Zhejiang">
+                    中国+0086
+                  </a-select-option>
+                  <a-select-option value="Jiangsu"> Jiangsu </a-select-option>
+                </a-select>
+                <div class="line"></div>
+                <a-input style="width: 50%" placeholder="请输入您的手机号" />
+              </a-input-group>
+            </a-form-item>
+            <a-form-item label="验证码" class="form-item">
+              <a-input-group compact>
+                <div class="getcode" @click="getcode">点击获取验证码{{time==60?'':'('+time+')'}}</div>
+                <div class="line"></div>
+                <a-input style="width: 50%" placeholder="请输入您的验证码" />
+              </a-input-group>
+            </a-form-item>
+            <div class="submit">立即登录</div>
+          </a-form>
+        </div>
+
+           <div v-if="tabselected==2">
+          <a-form :layout="formLayout">
+            <a-form-item label="帐号" class="form-item">
+              <a-input-group compact>
+                <a-input style="width: 80%" placeholder="请输入您的邮箱或者手机号" />
+              </a-input-group>
+            </a-form-item>
+            <a-form-item label="密码" class="form-item">
+              <a-input-group compact>
+                <a-input style="width: 70% " placeholder="请输入您的密码"  type="password" class="shuru"/>
+                <div class="forget">忘记密码?</div>
+              </a-input-group>
+            </a-form-item>
+            <div class="submit">立即登录</div>
+          </a-form>
+        </div>
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import LoginTab from "@/components/login/LoginTab.vue";
+export default defineComponent({
+  name: "Login",
+  components: {
+    LoginTab,
+  },
+  setup() {
+    const formLayout = {
+      labelCol: 4,
+      wrapperCol: 14,
+    };
+    const tabselected= ref(1)
+    const time=ref(60)
+     const Selectnum: (val: number) => void = (val: number) => {
+      console.log("收到子组件事件", val)
+
+      tabselected.value=val
+    }
+    const getcode: () => void=() =>{
+      console.log(11111)
+      const timestep=setInterval(()=>{
+        console.log(11112)
+        time.value=time.value-1
+        if(time.value>0){
+          console.log()
+        }else{
+          time.value=60
+            clearInterval(timestep);
+        }
+      },1000)
+    }
+    return {
+      formLayout,
+      tabselected,
+      Selectnum,
+      getcode,
+      time
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.login /deep/ .ant-select-selection {
+  border: none;
+}
+.login /deep/ .ant-input {
+  border: none;
+}
+.ant-input:focus {
+  border: none;
+  border-bottom: 1px solid white !important;
+  box-shadow: none;
+}
+.login /deep/ .ant-form-item-label {
+  line-height: 14px;
+}
+.login /deep/ .ant-form-item /deep/ label {
+  color: #0dbba4;
+  font-size: 11px;
+  left:1px
+}
+.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: 314px;
+      .title {
+        font-size: 17px;
+        font-weight: bold;
+      }
+      .orgname {
+        font-size: 29px;
+        color: #0dbba4;
+        cursor: pointer;
+      }
+      .nosign {
+        font-size: 12px;
+        color: #666666;
+        margin-top: 17px;
+        margin-bottom: 35px;
+      }
+      .tosign {
+        color: #0dbba4;
+        cursor: pointer;
+      }
+      .tab {
+        margin-bottom: 30px;
+      }
+
+      .form-item {
+        border-bottom: 1px solid #e5e5e5;
+        font-size: 15px;
+        .shuru{
+          margin-right:30px
+        }
+      }
+      .line {
+        width: 1px;
+        height: 14px;
+        background: #e5e5e5;
+        margin-top: 10px;
+        position: relative;
+        z-index: 999;
+      }
+      .getcode {
+        font-size: 15px;
+        color: #08ae98;
+        width: 150px;
+        line-height: 30px;
+        cursor: pointer;
+      }
+      .submit {
+        width: 143px;
+        height: 35px;
+        background: linear-gradient(
+          90deg,
+          #00dac2,
+          #42de9e,
+          #88e062,
+          #d0eb3e,
+          #fffa18
+        );
+        border-radius: 18px;
+        font-size: 15px;
+        color: white;
+        font-weight: 800;
+        text-align: center;
+        line-height: 35px;
+        margin-top: 45px;
+      }
+      .forget{
+        color: #08AE98;
+        font-size: 12px;
+        margin-top:8px;
+        cursor: pointer;
+      }
+    }
+    .right {
+      width: 690px;
+    }
+  }
+}
+</style>

yarn.lock

@@ -7883,8 +7883,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"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.0.2.tgz#c7b73010848b264792dd45372eea0b87cba4401e"
-  integrity sha1-x7cwEISLJkeS3UU3LuoLh8ukQB4=
+  integrity sha512-wV6NDUVB8/iEYMalV/+139+vl2LaRFlZGEd5/xmdcdzQcgmis+npyco6NsDTVOlNA3y2NV9Gcz+vHyFMIT+ffg==
   dependencies:
     klona "^2.0.3"
     loader-utils "^2.0.0"