From e5c2470a5091747762c147b910968cc202dede57 Mon Sep 17 00:00:00 2001
From: wente <329538422@qq.com>
Date: 星期五, 15 十二月 2023 15:39:01 +0800
Subject: [PATCH] 登录页
---
web/src/views/pages/login.vue | 138 +++++++++++++++++++++++++++++-----------------
1 files changed, 87 insertions(+), 51 deletions(-)
diff --git a/web/src/views/pages/login.vue b/web/src/views/pages/login.vue
index fb5be8d..c17f8cb 100644
--- a/web/src/views/pages/login.vue
+++ b/web/src/views/pages/login.vue
@@ -4,15 +4,15 @@
<div class="aui-content__wrapper">
<div class="clear"></div>
<main class="aui-content">
- <img class="login-left-bg" src="../../assets/img/vis-map2.png"/>
+<!-- <img class="login-left-bg" src="../../assets/img/vis-map2.png"/>-->
<div class="login-content">
- <div class="login-header">
- <!--<h3 class="login-title">{{ $t('login.title') }}</h3>-->
- </div>
+<!-- <div class="login-header">-->
+<!-- <!–<h3 class="login-title">{{ $t('login.title') }}</h3>–>-->
+<!-- </div>-->
<div class="login-body">
- <h3 class="login-title">{{ $t('login.title') }}</h3>
+<!-- <h3 class="login-title">{{ $t('login.title') }}</h3>-->
<el-form :model="dataForm" ref="dataForm" @keyup.enter.native="formSubmit()" status-icon>
- <zt-form-item class="login-form-margin" prop="username" rules="required">
+ <zt-form-item class="login-form-margin" style="margin-top:35px" prop="username" rules="required">
<el-input v-model="dataForm.username" :placeholder="$t('login.username')">
<span slot="prefix" class="el-input__icon">
<svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
@@ -26,6 +26,11 @@
</span>
</el-input>
</zt-form-item>
+<!-- <zt-form-item class="login-form-margin" prop="password" rules="required">-->
+<!-- <span slot="prefix" class="el-input__icon">-->
+<!-- <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-lock"></use></svg>-->
+<!-- </span>-->
+<!-- </zt-form-item>-->
<zt-form-item prop="captcha" rules="required" v-if="$config.IS_LOGIN_NEED_CAPTURE">
<el-row :gutter="20">
<el-col :span="14">
@@ -41,11 +46,13 @@
</el-row>
</zt-form-item>
<el-form-item class="login-form-margin">
- <el-button style="margin-bottom:0;" type="primary" @click="formSubmit()">{{
- $t('login.clickTitle') }}
+ <el-button class="btn" style="margin-bottom:0;float: left" type="primary" @click="changePassword()">淇敼瀵嗙爜</el-button>
+ <el-button class="btn" style="margin-bottom:0;float: right" @click="register">鐢ㄦ埛娉ㄥ唽
</el-button>
- <el-button style="margin-bottom:0;" type="primary" @click="changePassword()">淇敼瀵嗙爜</el-button>
- <el-button style="margin-bottom:0;" @click="register">鐢ㄦ埛娉ㄥ唽
+ </el-form-item>
+ <el-form-item class="login-form-margin">
+ <el-button class="btn" style="margin-bottom:0;width: 100%" type="primary" @click="formSubmit()">{{
+ $t('login.clickTitle') }}
</el-button>
</el-form-item>
</el-form>
@@ -53,11 +60,11 @@
<!-- <UserChangePassword ref="changePassword"/>-->
</div>
</div>
- <div class="login-time">
- <span v-text="day"></span>
- <br/>
- <span v-text="time"></span>
- </div>
+<!-- <div class="login-time">-->
+<!-- <span v-text="day"></span>-->
+<!-- <br/>-->
+<!-- <span v-text="time"></span>-->
+<!-- </div>-->
</main>
</div>
</div>
@@ -242,16 +249,15 @@
</script>
<style>
.login__h2 {
- float: left;
margin: 0;
- margin-left: 35.5%;
+ position: absolute;
+ left:50%;
+ top:3%;
+ transform: translateX(-50%);
color: rgba(123, 224, 244, 1);
font-size: 40px;
- margin-top: 20px;
font-weight: 400;
letter-spacing: 8px;
- text-align: center;
- margin-bottom: -80px;
}
.clear {
@@ -279,11 +285,15 @@
.login-content {
position: absolute;
+ border-radius: 20px;
+ top:50%;
+ left:50%;
+ transform: translate(-50%,-50%);
width: 25%;
- border: 15px solid transparent;
- border-image: url(../../assets/img/page-border.png) 20 stretch;
- right: 7%;
- top: 20%;
+ background:#ecf0f3;
+ box-shadow: 0 3px 6px 0 rgb(72 119 232 / 14%);
+ //border: 15px solid transparent;
+ //border-image: url(../../assets/img/page-border.png) 20 stretch;
}
.login-h6 {
@@ -292,27 +302,65 @@
margin-top: -6px;
margin-bottom: 25px;
}
-
- .login-body .el-input__inner {
+ .login-body {
+ position: relative;
+ }
+ .login-body .el-input{
border-radius: 3px;
height: 60px;
- font-size: 17px;
- color: rgba(123, 224, 244, 1);
- background: transparent;
- border: 1px solid rgba(123, 224, 244, 0.3);
+ color: #000;
+ background-color: #fff !important;
+ outline: none; /* 绉婚櫎鑱氱劍鏃剁殑澶栬竟妗嗘牱寮� */
+ border: none; /* 绉婚櫎榛樿鐨勮竟妗嗘牱寮� */
+ box-shadow: 20px 20px 30px rgba(0,0,0,0.2),
+ -20px -20px 30px rgba(255,255,255,1);
+ transition: all 0.4s ease-out;
+ }
+ .login-title{
+ box-shadow: 20px 20px 30px rgba(0,0,0,0.2),
+ -20px -20px 30px rgba(255,255,255,1);
+ transition: all 0.4s ease-out;
+ }
+ .login-body .el-input:hover{
+ box-shadow:
+ 0 0 0 rgba(0,0,0,0.2),
+ 0 0 0 rgba(255,255,255,0.8),
+ inset 10px 10px 20px rgba(0,0,0,0.1),
+ inset -10px -10px 20px rgba(255,255,255,1);
+ }
+ .login-body .el-input__inner{
+ font-size: 18px;
+ height: inherit;
+ transition: all 0.4s ease-out;
+ border: none; /* 绉婚櫎榛樿鐨勮竟妗嗘牱寮� */
+ }
+ .login-body .el-input__inner:hover{
+ font-size: 16px;
}
- .aui-page__login__border .el-input {
- border: 1px solid rgba(123, 224, 244, 0.3);
- border-radius: 4px;
+ .login-form-margin .btn{
+ border: none !important;
+ box-shadow: 20px 20px 30px rgba(0,0,0,0.2),
+ -20px -20px 30px rgba(255,255,255,1);
+ transition: all 0.4s ease-out;
}
-
- .aui-page__login__border .el-input:hover,
- .aui-page__login__border .el-input:active {
- border-radius: 4px;
- border: 1px solid rgba(123, 224, 244, 1);
+ .login-form-margin .btn:hover{
+ box-shadow:
+ 0 0 0 rgba(0,0,0,0.2),
+ 0 0 0 rgba(255,255,255,0.8),
+ inset 10px 10px 20px rgba(0,0,0,0.1),
+ inset -10px -10px 20px rgba(255,255,255,1);
}
-
+ input:-webkit-autofill ,
+ textarea:-webkit-autofill,
+ select:-webkit-autofill{
+ -webkit-text-fill-color: #000 !important;
+ -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
+ background-color: transparent;
+ font-size: 18px;
+ background-image: none;
+ transition: all 0.4s ease-out;
+ }
.aui-page__login__border .el-form-item {
margin-bottom: 35px;
}
@@ -321,9 +369,6 @@
height: 50px;
}
- .aui-page__login__border .el-form-item__content .el-input__inner {
- background: transparent !important;;
- }
.aui-page__login__border .login-body .el-input__prefix .el-input__icon {
font-size: 25px;
@@ -355,13 +400,4 @@
color: rgba(0, 153, 255, 1)
}
- input:-webkit-autofill,
- textarea:-webkit-autofill,
- select:-webkit-autofill {
- -webkit-text-fill-color: rgba(123, 224, 244, 1) !important;
- -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
- background-color: transparent;
- background-image: none;
- transition: background-color 50000s ease-in-out 5000s;
- }
</style>
--
Gitblit v1.9.1