|
@@ -16,7 +16,7 @@ onMounted(() => {
|
|
avatar.style.opacity = '1'
|
|
avatar.style.opacity = '1'
|
|
avatar.style.zIndex = '2'
|
|
avatar.style.zIndex = '2'
|
|
avatar.style.transform = 'scale(1.2)'
|
|
avatar.style.transform = 'scale(1.2)'
|
|
- avatar.style.transition = 'all 1s'
|
|
|
|
|
|
+ avatar.style.transition = 'all .5s'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
function avatar_leave() {
|
|
function avatar_leave() {
|
|
@@ -24,7 +24,7 @@ onMounted(() => {
|
|
avatar.style.top = '80px'
|
|
avatar.style.top = '80px'
|
|
avatar.style.opacity = '0'
|
|
avatar.style.opacity = '0'
|
|
avatar.style.transform = 'scale(1.1)'
|
|
avatar.style.transform = 'scale(1.1)'
|
|
- avatar.style.transition = 'all 1s'
|
|
|
|
|
|
+ avatar.style.transition = 'all .5s'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
register.addEventListener('mouseenter', avatar_move)
|
|
register.addEventListener('mouseenter', avatar_move)
|
|
@@ -36,11 +36,11 @@ onMounted(() => {
|
|
})
|
|
})
|
|
function card_move(e: MouseEvent) {
|
|
function card_move(e: MouseEvent) {
|
|
const target = e.target as HTMLElement
|
|
const target = e.target as HTMLElement
|
|
- target.style.transform = 'translateX(30px)'
|
|
|
|
|
|
+ target.style.transform = 'translateX(25px)'
|
|
}
|
|
}
|
|
function card_leave(e: MouseEvent) {
|
|
function card_leave(e: MouseEvent) {
|
|
const target = e.target as HTMLElement
|
|
const target = e.target as HTMLElement
|
|
- target.style.transform = 'translateX(15px)'
|
|
|
|
|
|
+ target.style.transform = 'translateX(10px)'
|
|
}
|
|
}
|
|
login.addEventListener('mouseenter', card_move)
|
|
login.addEventListener('mouseenter', card_move)
|
|
login.addEventListener('mouseleave', card_leave)
|
|
login.addEventListener('mouseleave', card_leave)
|
|
@@ -52,7 +52,7 @@ onMounted(() => {
|
|
target.removeEventListener('mouseenter', card_move)
|
|
target.removeEventListener('mouseenter', card_move)
|
|
target.removeEventListener('mouseleave', card_leave)
|
|
target.removeEventListener('mouseleave', card_leave)
|
|
target.style.transform = 'translateX(0px)'
|
|
target.style.transform = 'translateX(0px)'
|
|
- register.style.transform = 'translateX(30px)'
|
|
|
|
|
|
+ register.style.transform = 'translateX(20px)'
|
|
register.style.paddingRight = '30px'
|
|
register.style.paddingRight = '30px'
|
|
target.style.paddingRight = '20px'
|
|
target.style.paddingRight = '20px'
|
|
register.addEventListener('mouseenter', card_move)
|
|
register.addEventListener('mouseenter', card_move)
|
|
@@ -66,7 +66,7 @@ onMounted(() => {
|
|
target.removeEventListener('mouseenter', card_move)
|
|
target.removeEventListener('mouseenter', card_move)
|
|
target.removeEventListener('mouseleave', card_leave)
|
|
target.removeEventListener('mouseleave', card_leave)
|
|
target.style.transform = 'translateX(0px)'
|
|
target.style.transform = 'translateX(0px)'
|
|
- login.style.transform = 'translateX(30px)'
|
|
|
|
|
|
+ login.style.transform = 'translateX(20px)'
|
|
login.style.paddingRight = '30px'
|
|
login.style.paddingRight = '30px'
|
|
target.style.paddingRight = '20px'
|
|
target.style.paddingRight = '20px'
|
|
login.addEventListener('mouseenter', card_move)
|
|
login.addEventListener('mouseenter', card_move)
|
|
@@ -82,6 +82,9 @@ onMounted(() => {
|
|
login.click()
|
|
login.click()
|
|
avatar_leave()
|
|
avatar_leave()
|
|
})
|
|
})
|
|
|
|
+ document.getElementById('to_register')?.addEventListener('click', () => {
|
|
|
|
+ register.click()
|
|
|
|
+ })
|
|
})
|
|
})
|
|
</script>
|
|
</script>
|
|
|
|
|
|
@@ -113,13 +116,13 @@ onMounted(() => {
|
|
.login {
|
|
.login {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 0;
|
|
top: 0;
|
|
- transform: translateX(15px);
|
|
|
|
|
|
+ padding-right: 25px;
|
|
z-index: -1;
|
|
z-index: -1;
|
|
- transition: all 1s;
|
|
|
|
|
|
+ transition: all 0.5s;
|
|
}
|
|
}
|
|
.register {
|
|
.register {
|
|
position: relative;
|
|
position: relative;
|
|
- transition: all 1s;
|
|
|
|
|
|
+ transition: all 0.5s;
|
|
}
|
|
}
|
|
|
|
|
|
#avatar {
|
|
#avatar {
|
|
@@ -133,7 +136,7 @@ onMounted(() => {
|
|
}
|
|
}
|
|
.box-card {
|
|
.box-card {
|
|
min-width: 400px;
|
|
min-width: 400px;
|
|
- height: 500px;
|
|
|
|
|
|
+ min-height: 570px;
|
|
margin-top: 50px;
|
|
margin-top: 50px;
|
|
padding-top: 50px;
|
|
padding-top: 50px;
|
|
}
|
|
}
|