From 3a1f28667b7ef4cb293f74c2e002db23d5d61ede Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Sat, 6 Nov 2021 19:47:57 +0800
Subject: [PATCH] perf: login page

---
 src/style/login.css |  2 +-
 src/views/login.vue | 68 ++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 65 insertions(+), 5 deletions(-)

diff --git a/src/style/login.css b/src/style/login.css
index d775330c8..827ada1e1 100644
--- a/src/style/login.css
+++ b/src/style/login.css
@@ -40,10 +40,10 @@
 }
 
 .login-form h2 {
-  font-size: 2.9rem;
   text-transform: uppercase;
   margin: 15px 0;
   color: #999;
+  font: bold 200% Consolas, Monaco, monospace;
 }
 
 .input-group {
diff --git a/src/views/login.vue b/src/views/login.vue
index a46736e95..5d4b6e72d 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -51,8 +51,37 @@ function onPwdBlur() {
     <div class="login-box">
       <div class="login-form">
         <img src="/@/assets/login/avatar.svg" class="avatar" />
-        <h2>Pure Admin</h2>
-        <div class="input-group user focus">
+        <h2
+          v-motion
+          :initial="{
+            opacity: 0,
+            y: 100
+          }"
+          :enter="{
+            opacity: 1,
+            y: 0,
+            transition: {
+              delay: 100
+            }
+          }"
+        >
+          Pure Admin
+        </h2>
+        <div
+          class="input-group user focus"
+          v-motion
+          :initial="{
+            opacity: 0,
+            y: 100
+          }"
+          :enter="{
+            opacity: 1,
+            y: 0,
+            transition: {
+              delay: 200
+            }
+          }"
+        >
           <div class="icon">
             <i class="fa fa-user"></i>
           </div>
@@ -67,7 +96,21 @@ function onPwdBlur() {
             />
           </div>
         </div>
-        <div class="input-group pwd focus">
+        <div
+          class="input-group pwd focus"
+          v-motion
+          :initial="{
+            opacity: 0,
+            y: 100
+          }"
+          :enter="{
+            opacity: 1,
+            y: 0,
+            transition: {
+              delay: 300
+            }
+          }"
+        >
           <div class="icon">
             <i class="fa fa-lock"></i>
           </div>
@@ -82,7 +125,24 @@ function onPwdBlur() {
             />
           </div>
         </div>
-        <button class="btn" @click="onLogin">登录</button>
+        <button
+          class="btn"
+          v-motion
+          :initial="{
+            opacity: 0,
+            y: 10
+          }"
+          :enter="{
+            opacity: 1,
+            y: 0,
+            transition: {
+              delay: 400
+            }
+          }"
+          @click="onLogin"
+        >
+          登录
+        </button>
       </div>
     </div>
   </div>