<template>
|
|
<div class="login-block">
|
<div class="login-animate ">
|
<div class="left-ear"></div>
|
<div class="right-ear"></div>
|
<div class="head">
|
<div class="left-eye"></div>
|
<div class="right-eye"></div>
|
<div class="face">
|
<div class="nose"></div>
|
<div class="mouth"></div>
|
</div>
|
</div>
|
<div class="body"></div>
|
<div class="left-arm"></div>
|
<div class="right-arm"></div>
|
</div>
|
|
<div class="login-form">
|
<div class="username">
|
<input type="text" name="username" autocomplete="off">
|
</div>
|
<div class="password ">
|
<input type="password" name="password">
|
<div class="pwd-eye" data-flag="hide"></div>
|
</div>
|
<div class="login">
|
<button id="focus" @click="myLogin">SIGN IN</button>
|
</div>
|
</div>
|
</div>
|
|
</template>
|
|
<script>
|
import $ from 'jquery'
|
export default {
|
components: {},
|
props: {},
|
data() {
|
return {}
|
},
|
mounted() {
|
$(".pwd-eye").hide();
|
$(".pwd-eye").click(function() {
|
var flag = $(this).attr('data-flag');
|
|
$(this).attr('data-flag', flag == 'show' ? 'hide' : 'show');
|
if (flag == 'show') {
|
$(this).addClass('pwd-eye-show');
|
$(this).removeClass('pwd-eye-hide');
|
} else {
|
$(this).removeClass('pwd-eye-show');
|
$(this).addClass('pwd-eye-hide');
|
}
|
|
$('input[name="password"]').attr('type', flag == 'show' ? 'password' : 'text');
|
|
if (flag != 'show' && $('input[name="password"]').val() != '') {
|
$('.left-arm').addClass('show');
|
$('.mouth').addClass('show');
|
$('.right-arm').addClass('show');
|
} else {
|
$('.left-arm').removeClass('show');
|
$('.mouth').removeClass('show');
|
$('.right-arm').removeClass('show');
|
}
|
});
|
|
$('input[name="username"]').focus(function() {
|
$(".login-animate").addClass('username-animate');
|
$(".login-animate").removeClass('password-animate');
|
var length = $(this).val().length;
|
getposition(length);
|
});
|
|
$('input[name="username"]').bind('input', function() {
|
var length = $(this).val().length;
|
getposition(length);
|
});
|
|
function getposition(length) {
|
//计算当前输入字节长度
|
var face = parseFloat(1.5 / 36 * length);
|
var nose = parseFloat(1 / 36 * length);
|
var mouth = parseFloat(1 / 36 * length);
|
var left_eye = parseFloat(2 / 36 * length);
|
var right_eye = parseFloat(2 / 36 * length);
|
var left_ear = parseFloat(1 / 36 * length);
|
var right_ear = parseFloat(2 / 36 * length);
|
|
//头部旋转
|
if (length >= 0 && length <= 25) {
|
$('.head').css('-webkit-transform', "rotate(" + (10 - length / 2) + "deg)");
|
}
|
|
//左边为初始值
|
$('.face').css('left', 0.8 + (face > 0.5 ? 0.5 : face) + 'em');
|
$('.nose').css('left', 1.4 + (nose > 0.6 ? 0.6 : nose) + 'em');
|
$('.mouth doe').css('left', 0.8 + (mouth > 0.8 ? 0.8 : mouth) + 'em');
|
|
$('.left-eye').css('left', 0.9 + (left_eye > 0.8 ? 0.8 : left_eye) + 'em');
|
$('.right-eye').css('left', 4.3 + (right_eye > 0.7 ? 0.7 : right_eye) + 'em');
|
|
$('.left-ear').css('left', 1.9 - (left_ear > 0.5 ? 0.5 : left_ear) + 'em');
|
$('.right-ear').css('left', 7.2 - (right_ear > 0.5 ? 0.5 : right_ear) + 'em');
|
$('.right-ear').css('bottom', 3.9 + (right_ear > 0.7 ? 0.7 : right_ear) + 'em');
|
|
if (length >= 2) {
|
$('.left-eye').addClass('doe');
|
$('.right-eye').addClass('doe');
|
$('.mouth').addClass('doe');
|
} else {
|
$('.left-eye').removeClass('doe');
|
$('.right-eye').removeClass('doe');
|
$('.mouth').removeClass('doe');
|
}
|
}
|
|
|
//失去焦点
|
$('input[name="username"]').blur(function() {
|
var length = $(this).val().length;
|
|
if (length > 2) {
|
$(".left-eye").addClass('height-eys-doe');
|
$(".right-eye").addClass('height-eys-doe');
|
} else {
|
$(".left-eye").removeClass('height-eys-doe');
|
$(".right-eye").removeClass('height-eys-doe');
|
}
|
|
$(".login-animate").removeClass('username-animate');
|
$(".login-animate").removeClass('password-animate');
|
|
$('.head').css('-webkit-transform', "rotate(0deg)"); //回正头部
|
|
|
$('.face').attr('style', '');
|
$('.nose').attr('style', '');
|
$('.left-eye').attr('style', '');
|
$('.right-eye').attr('style', '');
|
$('.left-ear').attr('style', '');
|
$('.right-ear').attr('style', '');
|
|
//如果账号和密码都不为空,呈嘴巴张开,眼睛发光 && $('input[name="password"]').val().length > 0
|
if ($('input[name="username"]').val().length > 0) {
|
// $(".login-animate").addClass('username-animate');
|
// $(".left-eye").addClass('doe');
|
}
|
|
});
|
|
$('input[name="password"]').focus(function() {
|
$(".pwd-eye").show();
|
$(".login-animate").removeClass('username-animate');
|
$(".login-animate").addClass('password-animate');
|
});
|
|
$('input[name="password"]').blur(function() {
|
if ($(this).val() == '') {
|
$(".pwd-eye").hide();
|
$(".login-animate").removeClass('username-animate');
|
$(".login-animate").removeClass('password-animate');
|
}
|
});
|
},
|
methods: {
|
myLogin() {
|
this.$message.info("口令错误啦..")
|
}
|
}
|
}
|
</script>
|
|
<style scoped="">
|
@import url("../../assets/main.css");
|
|
button:active {
|
transform: scale(1.23);
|
}
|
|
button:focus {
|
outline: none;
|
}
|
|
button.ghost {
|
background: transparent;
|
border-color: #fff;
|
}
|
|
button {
|
border-radius: 20px;
|
border: 1px solid #fff;
|
/*background: #3dceba;*/
|
background: #00b69d;
|
color: #fff;
|
font-size: 12px;
|
font-weight: bold;
|
padding: 12px 45px;
|
letter-spacing: 1px;
|
text-transform: uppercase;
|
transition: transform 80ms ease-in;
|
cursor: pointer;
|
/*margin-left: calc(25%);
|
position: relative;*/
|
}
|
|
.login {
|
-webkit-animation: free_download 1s linear alternate infinite;
|
animation: free_download 1s linear alternate infinite;
|
padding: 0px 15px 0px;
|
}
|
|
@-webkit-keyframes free_download {
|
0% {
|
-webkit-transform: scale(0.9);
|
}
|
|
100% {
|
-webkit-transform: scale(1);
|
}
|
}
|
|
@keyframes free_download {
|
0% {
|
transform: scale(0.9);
|
}
|
|
100% {
|
transform: scale(1);
|
}
|
}
|
</style>
|
