|
|
@@ -5,12 +5,21 @@
|
|
|
['', 'login-form-right', 'login-form-left'][direction]
|
|
|
]"
|
|
|
>
|
|
|
+ <!-- 左侧标题区域 -->
|
|
|
+ <div class="login-header">
|
|
|
+ <h1 class="login-title">
|
|
|
+ 工业互联网<span class="highlight">平台</span>
|
|
|
+ </h1>
|
|
|
+ <p class="login-subtitle">让工业更智能,让生产更可信,让运营更高效</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 登录表单 -->
|
|
|
<el-form
|
|
|
ref="form"
|
|
|
size="large"
|
|
|
:model="form"
|
|
|
:rules="rules"
|
|
|
- class="login-form ele-bg-white"
|
|
|
+ class="login-form"
|
|
|
@keyup.enter.native="submit"
|
|
|
>
|
|
|
<el-popover width="150" trigger="hover">
|
|
|
@@ -21,13 +30,14 @@
|
|
|
<div slot="reference" class="switch-btn"></div>
|
|
|
</el-popover>
|
|
|
|
|
|
- <h4>{{ $t('login.title') }}</h4>
|
|
|
+ <h4 class="form-title">欢迎登录</h4>
|
|
|
<el-form-item prop="loginName">
|
|
|
<el-input
|
|
|
clearable
|
|
|
v-model="form.loginName"
|
|
|
prefix-icon="el-icon-user"
|
|
|
placeholder="请输入登录账号"
|
|
|
+ class="login-input"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item prop="loginPwd">
|
|
|
@@ -36,6 +46,7 @@
|
|
|
v-model="form.loginPwd"
|
|
|
prefix-icon="el-icon-lock"
|
|
|
placeholder="请输入登录密码"
|
|
|
+ class="login-input"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item prop="captcha">
|
|
|
@@ -44,7 +55,8 @@
|
|
|
clearable
|
|
|
v-model="form.captcha"
|
|
|
prefix-icon="el-icon-_vercode"
|
|
|
- :placeholder="$t('login.code')"
|
|
|
+ placeholder="请输入验证码"
|
|
|
+ class="login-input"
|
|
|
/>
|
|
|
<img
|
|
|
alt=""
|
|
|
@@ -54,19 +66,6 @@
|
|
|
/>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
- <!-- <div class="el-form-item">
|
|
|
- <el-checkbox v-model="form.remember">
|
|
|
- {{ $t('login.remember') }}
|
|
|
- </el-checkbox>
|
|
|
- <el-link
|
|
|
- type="primary"
|
|
|
- :underline="false"
|
|
|
- class="ele-pull-right"
|
|
|
- @click="$router.push('/forget')"
|
|
|
- >
|
|
|
- 忘记密码
|
|
|
- </el-link>
|
|
|
- </div> -->
|
|
|
<div class="el-form-item">
|
|
|
<el-button
|
|
|
size="large"
|
|
|
@@ -75,30 +74,22 @@
|
|
|
:loading="loading"
|
|
|
@click="submit"
|
|
|
>
|
|
|
- {{ loading ? $t('login.loading') : $t('login.login') }}
|
|
|
+ {{ loading ? $t('login.loading') : '登 录' }}
|
|
|
</el-button>
|
|
|
</div>
|
|
|
- <div class="ele-text-center" style="margin-bottom: 10px">
|
|
|
- <!-- <i class="login-oauth-icon el-icon-_qq" style="background: #3492ed"></i>
|
|
|
- <i
|
|
|
- class="login-oauth-icon el-icon-_wechat"
|
|
|
- style="background: #4daf29"
|
|
|
- ></i>
|
|
|
- <i
|
|
|
- class="login-oauth-icon el-icon-_weibo"
|
|
|
- style="background: #cf1900"
|
|
|
- ></i> -->
|
|
|
- </div>
|
|
|
</el-form>
|
|
|
+
|
|
|
<div class="login-copyright">
|
|
|
<!-- copyright © 2022 eleadmin.com all rights reserved. -->
|
|
|
</div>
|
|
|
+
|
|
|
<!-- 多语言切换 -->
|
|
|
<div style="position: absolute; right: 30px; top: 20px">
|
|
|
<i18n-icon
|
|
|
:icon-style="{ fontSize: '22px', color: '#fff', cursor: 'pointer' }"
|
|
|
/>
|
|
|
</div>
|
|
|
+
|
|
|
<!-- 实际项目去掉这段 -->
|
|
|
<div
|
|
|
class="hidden-xs-only"
|
|
|
@@ -338,14 +329,19 @@
|
|
|
padding: 50px 20px;
|
|
|
position: relative;
|
|
|
box-sizing: border-box;
|
|
|
- background-image: url('@/assets/bg-login.jpg');
|
|
|
+ background-image: url('@/assets/bg-login.png');
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: cover;
|
|
|
+ background-position: center bottom;
|
|
|
min-height: 100vh;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
|
|
|
&:before {
|
|
|
content: '';
|
|
|
- background-color: rgba(0, 0, 0, 0.2);
|
|
|
+ background: linear-gradient(180deg, rgba(135, 180, 255, 0.3) 0%, rgba(200, 220, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
@@ -354,25 +350,82 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ /* 头部标题区域 */
|
|
|
+ .login-header {
|
|
|
+ position: relative;
|
|
|
+ z-index: 2;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 8vh;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-title {
|
|
|
+ font-size: 42px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #1a3a5c;
|
|
|
+ margin: 0 0 12px 0;
|
|
|
+ letter-spacing: 4px;
|
|
|
+
|
|
|
+ .highlight {
|
|
|
+ color: #409eff;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-subtitle {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #4a6a8a;
|
|
|
+ margin: 0;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
/* 卡片 */
|
|
|
.login-form {
|
|
|
margin: 0 auto;
|
|
|
- width: 360px;
|
|
|
+ width: 400px;
|
|
|
max-width: 100%;
|
|
|
- padding: 25px 30px;
|
|
|
+ padding: 35px 40px;
|
|
|
position: relative;
|
|
|
- box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
|
|
|
+ background: rgba(255, 255, 255, 0.95);
|
|
|
+ box-shadow: 0 8px 32px rgba(31, 100, 200, 0.15);
|
|
|
box-sizing: border-box;
|
|
|
- border-radius: 4px;
|
|
|
+ border-radius: 12px;
|
|
|
z-index: 2;
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
|
|
|
- h4 {
|
|
|
+ .form-title {
|
|
|
text-align: center;
|
|
|
- margin: 0 0 25px 0;
|
|
|
+ margin: 0 0 30px 0;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #303133;
|
|
|
}
|
|
|
|
|
|
& > .el-form-item {
|
|
|
- margin-bottom: 25px;
|
|
|
+ margin-bottom: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 输入框样式 */
|
|
|
+ .login-input {
|
|
|
+ :deep(.el-input__inner) {
|
|
|
+ border-radius: 6px;
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ padding-left: 40px;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ border-color: #409eff;
|
|
|
+ box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-input__prefix) {
|
|
|
+ left: 12px;
|
|
|
+ color: #909399;
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -395,22 +448,43 @@
|
|
|
}
|
|
|
|
|
|
.login-captcha {
|
|
|
- height: 38px;
|
|
|
- width: 102px;
|
|
|
- margin-left: 10px;
|
|
|
- border-radius: 4px;
|
|
|
+ height: 44px;
|
|
|
+ width: 110px;
|
|
|
+ margin-left: 12px;
|
|
|
+ border-radius: 6px;
|
|
|
border: 1px solid #dcdfe6;
|
|
|
text-align: center;
|
|
|
cursor: pointer;
|
|
|
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
|
|
|
|
&:hover {
|
|
|
- opacity: 0.75;
|
|
|
+ opacity: 0.85;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.login-btn {
|
|
|
display: block;
|
|
|
width: 100%;
|
|
|
+ height: 46px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ border-radius: 6px;
|
|
|
+ margin-top: 8px;
|
|
|
+ background: linear-gradient(135deg, #409eff 0%, #2c8cf0 100%);
|
|
|
+ border: none;
|
|
|
+ box-shadow: 0 4px 12px rgba(64, 158, 255, 0.35);
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
|
|
|
+ box-shadow: 0 6px 16px rgba(64, 158, 255, 0.45);
|
|
|
+ transform: translateY(-1px);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
/* 第三方登录图标 */
|
|
|
@@ -435,11 +509,7 @@
|
|
|
/* 响应式 */
|
|
|
@media screen and (min-height: 550px) {
|
|
|
.login-form {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- margin-top: -220px;
|
|
|
+ margin-top: 0;
|
|
|
}
|
|
|
|
|
|
.login-form-right .login-form,
|
|
|
@@ -447,12 +517,13 @@
|
|
|
left: auto;
|
|
|
right: 15%;
|
|
|
transform: translateX(0);
|
|
|
- margin: -220px auto auto auto;
|
|
|
+ margin: 0 15% 0 auto;
|
|
|
}
|
|
|
|
|
|
.login-form-left .login-form {
|
|
|
right: auto;
|
|
|
left: 15%;
|
|
|
+ margin: 0 auto 0 15%;
|
|
|
}
|
|
|
|
|
|
.login-copyright {
|
|
|
@@ -464,12 +535,30 @@
|
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 768px) {
|
|
|
+ .login-header {
|
|
|
+ margin-top: 5vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-title {
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-subtitle {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-form {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 360px;
|
|
|
+ padding: 25px 25px;
|
|
|
+ }
|
|
|
+
|
|
|
.login-form-right .login-form,
|
|
|
.login-form-left .login-form {
|
|
|
left: 50%;
|
|
|
right: auto;
|
|
|
transform: translateX(-50%);
|
|
|
- margin-right: auto;
|
|
|
+ margin: 0 auto;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
