feat：add login box top owl animation effect (#162)

Co-authored-by: pany <939630029@qq.com>
Co-authored-by: pany <panyang@mafengwo.com>

src/views/login/components/Owl.vue

@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+interface Props {
+  closeEyes: boolean
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div class="owl" :class="{ 'owl-password': props.closeEyes }">
+    <div class="hand-down-left" />
+    <div class="hand-down-right" />
+    <div class="hand-up-left" />
+    <div class="hand-up-right" />
+    <div class="close-eyes" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@mixin backgroundImage($url) {
+  background-image: url($url);
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+
+.owl {
+  position: relative;
+  width: 120px;
+  height: 95px;
+  transform: translateY(12%);
+  @include backgroundImage("@/assets/login/face.png");
+  .hand-down-left,
+  .hand-down-right {
+    z-index: 2;
+    position: absolute;
+    width: 45px;
+    height: 25px;
+    transition: transform 0.2s linear;
+  }
+  .hand-down-left {
+    bottom: 3px;
+    left: -35px;
+    @include backgroundImage("@/assets/login/hand-down-left.png");
+  }
+  .hand-down-right {
+    bottom: 3px;
+    right: -40px;
+    @include backgroundImage("@/assets/login/hand-down-right.png");
+  }
+  .hand-up-left,
+  .hand-up-right {
+    z-index: 3;
+    position: absolute;
+    width: 50px;
+    height: 40px;
+    opacity: 0;
+    transition: opacity 0.1s linear 0.1s;
+  }
+  .hand-up-left {
+    bottom: 11px;
+    left: -5px;
+    @include backgroundImage("@/assets/login/hand-up-left.png");
+  }
+  .hand-up-right {
+    bottom: 11px;
+    right: 5px;
+    @include backgroundImage("@/assets/login/hand-up-right.png");
+  }
+  .close-eyes {
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 0.1s linear 0.1s;
+    @include backgroundImage("@/assets/login/close-eyes.png");
+  }
+}
+
+.owl-password {
+  .hand-down-left {
+    transform: translateX(30px) scale(0) translateY(-10px);
+  }
+  .hand-down-right {
+    transform: translateX(-40px) scale(0) translateY(-10px);
+  }
+  .hand-up-left,
+  .hand-up-right,
+  .close-eyes {
+    opacity: 1;
+  }
+}
+</style>

src/views/login/hooks/useFocus.ts

@@ -0,0 +1,17 @@
+import { ref } from "vue"
+
+export function useFocus() {
+  /** 是否有焦点 */
+  const isFocus = ref<boolean>(false)
+
+  /** 失去焦点 */
+  const handleBlur = () => {
+    isFocus.value = false
+  }
+  /** 获取焦点 */
+  const handleFocus = () => {
+    isFocus.value = true
+  }
+
+  return { isFocus, handleBlur, handleFocus }
+}

src/views/login/index.vue

@@ -7,8 +7,11 @@ import { User, Lock, Key, Picture, Loading } from "@element-plus/icons-vue"
 import { getLoginCodeApi } from "@/api/login"
 import { type LoginRequestData } from "@/api/login/types/login"
 import ThemeSwitch from "@/components/ThemeSwitch/index.vue"
+import Owl from "./components/Owl.vue"
+import { useFocus } from "./hooks/useFocus"
 
 const router = useRouter()
+const { isFocus, handleBlur, handleFocus } = useFocus()
 
 /** 登录表单元素的引用 */
 const loginFormRef = ref<FormInstance | null>(null)
@@ -72,6 +75,7 @@ createCode()
 <template>
   <div class="login-container">
     <ThemeSwitch class="theme-switch" />
+    <Owl :close-eyes="isFocus" />
     <div class="login-card">
       <div class="title">
         <img src="@/assets/layouts/logo-text-2.png" />
@@ -97,6 +101,8 @@ createCode()
               :prefix-icon="Lock"
               size="large"
               show-password
+              @blur="handleBlur"
+              @focus="handleFocus"
             />
           </el-form-item>
           <el-form-item prop="code">
@@ -135,6 +141,7 @@ createCode()
 <style lang="scss" scoped>
 .login-container {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 100%;