mirror of https://github.com/halo-dev/halo
refactor: weaken the animation of the login page #359 (halo-dev/console#369)
Ryan Wang
GitHub
parent
287668fa85
commit
02dea4e3af
|
|
@ -2342,11 +2342,6 @@ i.trigger:hover {
|
|||
border-radius: 2px;
|
||||
color: #fff;
|
||||
}
|
||||
.logo {
|
||||
}
|
||||
.logo h1 {
|
||||
color: white;
|
||||
}
|
||||
.sider {
|
||||
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
|
||||
}
|
||||
|
|
@ -2358,9 +2353,6 @@ i.trigger:hover {
|
|||
background: white;
|
||||
box-shadow: 1px 1px 0 0 #e8e8e8;
|
||||
}
|
||||
.sider.light .logo h1 {
|
||||
color: @primary-color;
|
||||
}
|
||||
.sider.light :global(.ant-menu-light) {
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
|
@ -2386,9 +2378,6 @@ i.trigger:hover {
|
|||
.head.light {
|
||||
background-color: #fff;
|
||||
}
|
||||
.logo h1 {
|
||||
color: #fff;
|
||||
}
|
||||
.light h1 {
|
||||
color: #002140;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,37 +7,22 @@
|
|||
layout="vertical"
|
||||
@keyup.enter.native="form.needAuthCode ? handleLogin() : handleLoginClick()"
|
||||
>
|
||||
<a-form-model-item
|
||||
v-if="!form.needAuthCode"
|
||||
:style="{ 'animation-delay': '0.1s' }"
|
||||
class="animated fadeInUp"
|
||||
prop="username"
|
||||
>
|
||||
<a-form-model-item v-if="!form.needAuthCode" prop="username">
|
||||
<a-input v-model="form.model.username" placeholder="用户名/邮箱">
|
||||
<a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="user" />
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item
|
||||
v-if="!form.needAuthCode"
|
||||
:style="{ 'animation-delay': '0.2s' }"
|
||||
class="animated fadeInUp"
|
||||
prop="password"
|
||||
>
|
||||
<a-form-model-item v-if="!form.needAuthCode" prop="password">
|
||||
<a-input v-model="form.model.password" placeholder="密码" type="password">
|
||||
<a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="lock" />
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item
|
||||
v-if="form.needAuthCode"
|
||||
:style="{ 'animation-delay': '0.1s' }"
|
||||
class="animated fadeInUp"
|
||||
prop="authcode"
|
||||
>
|
||||
<a-form-model-item v-if="form.needAuthCode" prop="authcode">
|
||||
<a-input v-model="form.model.authcode" :maxLength="6" placeholder="两步验证码">
|
||||
<a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="safety-certificate" />
|
||||
</a-input>
|
||||
</a-form-model-item>
|
||||
<a-form-model-item :style="{ 'animation-delay': '0.3s' }" class="animated fadeInUp">
|
||||
<a-form-model-item>
|
||||
<a-button
|
||||
:block="true"
|
||||
:loading="form.logging"
|
||||
|
|
|
|||
|
|
@ -41,39 +41,6 @@
|
|||
animation-name: fadeInRight;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInUp {
|
||||
-webkit-animation-name: fadeInUp;
|
||||
animation-name: fadeInUp;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -18,23 +18,18 @@
|
|||
}
|
||||
|
||||
.halo-logo {
|
||||
margin-bottom: 20px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
vertical-align: text-bottom;
|
||||
font-size: 38px;
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
color: #1790fe;
|
||||
background-image: linear-gradient(-20deg, #6e45e2 0%, #88d3ce 100%);
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
small {
|
||||
margin-left: 5px;
|
||||
font-size: 35%;
|
||||
}
|
||||
img {
|
||||
width: 78px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,43 +1,35 @@
|
|||
<template>
|
||||
<div class="container-wrapper">
|
||||
<div class="halo-logo animated fadeInUp">
|
||||
<span
|
||||
>Halo
|
||||
<small v-if="apiForm.visible">API 设置</small>
|
||||
</span>
|
||||
<div class="container-wrapper animated fadeIn">
|
||||
<div class="halo-logo">
|
||||
<img src="/images/logo.svg" alt="Halo Logo" />
|
||||
<span v-if="apiForm.visible">API 设置</span>
|
||||
</div>
|
||||
<div v-show="!apiForm.visible" class="login-form animated">
|
||||
<div v-show="!apiForm.visible" class="login-form">
|
||||
<LoginForm @success="onLoginSucceed" />
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<router-link :to="{ name: 'ResetPassword' }">
|
||||
<a v-if="resetPasswordButtonVisible" class="tip animated fadeInRight" href="javascript:void(0);">
|
||||
找回密码
|
||||
</a>
|
||||
</router-link>
|
||||
<a :style="{ 'animation-delay': '0.4s' }" class="tip animated fadeInUp" @click="handleToggleShowApiForm">
|
||||
<a-icon type="setting" />
|
||||
</a>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<router-link v-if="resetPasswordButtonVisible" class="tip" :to="{ name: 'ResetPassword' }">
|
||||
找回密码
|
||||
</router-link>
|
||||
<a class="tip" @click="handleToggleShowApiForm">
|
||||
<a-icon type="setting" />
|
||||
</a>
|
||||
</div>
|
||||
<div v-show="apiForm.visible" class="api-form animated">
|
||||
<div v-show="apiForm.visible" class="api-form">
|
||||
<a-form layout="vertical">
|
||||
<a-form-item :style="{ 'animation-delay': '0.1s' }" class="animated fadeInUp">
|
||||
<a-form-item>
|
||||
<a-tooltip placement="top" title="如果 Admin 不是独立部署，请不要更改此 API" trigger="click">
|
||||
<a-input v-model="apiForm.apiUrl" placeholder="API 地址">
|
||||
<a-icon slot="prefix" style="color: rgba(0,0,0,.25)" type="api" />
|
||||
</a-input>
|
||||
</a-tooltip>
|
||||
</a-form-item>
|
||||
<a-form-item :style="{ 'animation-delay': '0.2s' }" class="animated fadeInUp">
|
||||
<a-form-item>
|
||||
<a-button :block="true" @click="handleRestoreApiUrl">恢复默认</a-button>
|
||||
</a-form-item>
|
||||
<a-form-item :style="{ 'animation-delay': '0.3s' }" class="animated fadeInUp">
|
||||
<a-form-item>
|
||||
<a-button :block="true" type="primary" @click="handleModifyApiUrl">保存设置</a-button>
|
||||
</a-form-item>
|
||||
<a-row>
|
||||
<a :style="{ 'animation-delay': '0.4s' }" class="tip animated fadeInUp" @click="handleToggleShowApiForm">
|
||||
<a class="tip" @click="handleToggleShowApiForm">
|
||||
<a-icon type="rollback" />
|
||||
</a>
|
||||
</a-row>
|
||||
|
|
|
|||
|
|
@ -1,33 +1,34 @@
|
|||
<template>
|
||||
<div class="container-wrapper">
|
||||
<div class="halo-logo animated fadeInUp">
|
||||
<span>Halo<small>重置密码</small></span>
|
||||
<div class="container-wrapper animated fadeIn">
|
||||
<div class="halo-logo">
|
||||
<img src="/images/logo.svg" alt="Halo Logo" />
|
||||
<span>重置密码</span>
|
||||
</div>
|
||||
<div class="animated">
|
||||
<div>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item class="animated fadeInUp" :style="{ 'animation-delay': '0.1s' }">
|
||||
<a-form-item>
|
||||
<a-input placeholder="用户名" v-model="resetParam.username">
|
||||
<a-icon slot="prefix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item class="animated fadeInUp" :style="{ 'animation-delay': '0.2s' }">
|
||||
<a-form-item>
|
||||
<a-input placeholder="邮箱" v-model="resetParam.email">
|
||||
<a-icon slot="prefix" type="mail" style="color: rgba(0, 0, 0, 0.25)" />
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item class="animated fadeInUp" :style="{ 'animation-delay': '0.3s' }">
|
||||
<a-form-item>
|
||||
<a-input v-model="resetParam.code" type="password" placeholder="验证码">
|
||||
<a-icon slot="prefix" type="safety-certificate" style="color: rgba(0, 0, 0, 0.25)" />
|
||||
<a href="javascript:void(0);" slot="addonAfter" @click="handleSendCode"> 获取 </a>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item class="animated fadeInUp" :style="{ 'animation-delay': '0.4s' }">
|
||||
<a-form-item>
|
||||
<a-input v-model="resetParam.password" type="password" placeholder="新密码" autocomplete="new-password">
|
||||
<a-icon slot="prefix" type="lock" style="color: rgba(0, 0, 0, 0.25)" />
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item class="animated fadeInUp" :style="{ 'animation-delay': '0.5s' }">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
v-model="resetParam.confirmPassword"
|
||||
type="password"
|
||||
|
|
@ -37,16 +38,13 @@
|
|||
<a-icon slot="prefix" type="lock" style="color: rgba(0, 0, 0, 0.25)" />
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item class="animated fadeInUp" :style="{ 'animation-delay': '0.6s' }">
|
||||
<a-form-item>
|
||||
<a-button type="primary" :block="true" @click="handleResetPassword">重置密码</a-button>
|
||||
</a-form-item>
|
||||
|
||||
<a-row>
|
||||
<router-link :to="{ name: 'Login' }">
|
||||
<a class="tip animated fadeInUp" :style="{ 'animation-delay': '0.7s' }"> 返回登录 </a>
|
||||
</router-link>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<router-link class="tip" :to="{ name: 'Login' }">
|
||||
返回登录
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue