20251126修改登录界面
This commit is contained in:
wxlong
BIN
src/assets/images/background.png
Normal file
BIN
src/assets/images/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 MiB |
@@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<div class="login-container">
|
||||
<img
|
||||
style="position: fixed; width: 100%; height: 100%; z-index: -1; left: 0"
|
||||
src="../../assets/images/background.jpg"
|
||||
style="position: fixed; width: 100%; height: 100%; z-index: -1; left: 0; top: 0; object-fit: cover; object-position: center"
|
||||
src="../../assets/images/background.png"
|
||||
/>
|
||||
<h1 class="main-title">天津市林草资源专项调查管理平台</h1>
|
||||
<el-form
|
||||
autocomplete="on"
|
||||
:model="loginForm"
|
||||
@@ -13,23 +14,18 @@
|
||||
label-width="0px"
|
||||
class="card-box login-form"
|
||||
>
|
||||
<p class="title">{{ myname }}</p>
|
||||
<p class="title">任务调度系统</p>
|
||||
<el-form-item prop="username">
|
||||
<span class="svg-container svg-container_login">
|
||||
<svg-icon icon-class="user" />
|
||||
</span>
|
||||
<el-input
|
||||
name="username"
|
||||
type="text"
|
||||
v-model="loginForm.username"
|
||||
autocomplete="on"
|
||||
placeholder="用户名"
|
||||
prefix-icon="el-icon-user"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<span class="svg-container">
|
||||
<svg-icon icon-class="password"></svg-icon>
|
||||
</span>
|
||||
<el-input
|
||||
name="password"
|
||||
:type="pwdType"
|
||||
@@ -37,22 +33,26 @@
|
||||
v-model="loginForm.password"
|
||||
autocomplete="on"
|
||||
placeholder="密码"
|
||||
></el-input>
|
||||
<span class="show-pwd" @click="showPwd">
|
||||
<svg-icon v-show="pwdType == 'password'" icon-class="eye" />
|
||||
<svg-icon v-show="pwdType == ''" icon-class="eye2" />
|
||||
</span>
|
||||
prefix-icon="el-icon-lock"
|
||||
>
|
||||
<i
|
||||
slot="suffix"
|
||||
:class="pwdType === 'password' ? 'el-icon-view' : 'el-icon-hide'"
|
||||
@click="showPwd"
|
||||
style="cursor: pointer;"
|
||||
></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
class="loginbutton"
|
||||
class="login-button"
|
||||
:loading="loading"
|
||||
@click.native.prevent="handleLogin"
|
||||
>登录</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="loginbutton" @click.native.prevent="toRegister"
|
||||
<el-button class="register-button" @click.native.prevent="toRegister"
|
||||
>注册</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
@@ -72,7 +72,7 @@
|
||||
</div>
|
||||
</el-form>
|
||||
<span style="position: fixed; bottom: 10px; left: 10px; color: lightgray"
|
||||
>6.12</span
|
||||
>v20251113beta</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
@@ -137,6 +137,7 @@ export default {
|
||||
if (response.data.success == true) {
|
||||
sessionStorage.setItem("access-user", response.data.data.role);
|
||||
sessionStorage.setItem("access-id", response.data.data.id);
|
||||
|
||||
if (
|
||||
sessionStorage.getItem("access-user") == "Admin" ||
|
||||
sessionStorage.getItem("access-user") == "SuperAdmin" ||
|
||||
@@ -213,120 +214,338 @@ body {
|
||||
color: #fff;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.svg-container {
|
||||
color: #264672;
|
||||
vertical-align: middle;
|
||||
padding: 6px 0px 6px 0px;
|
||||
vertical-align: middle;
|
||||
width: 14.5px;
|
||||
display: inline-block;
|
||||
&_login {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 20px;
|
||||
color: #264672;
|
||||
background: rgba(157, 187, 231, 0.1);
|
||||
width: 402px;
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
margin-top: 0px;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
background: linear-gradient(135deg, rgba(157, 187, 231, 0.15) 0%, rgba(157, 187, 231, 0.05) 100%);
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
border-radius: 16px 16px 0 0;
|
||||
border-bottom: 1px solid rgba(157, 187, 231, 0.2);
|
||||
}
|
||||
.el-form-item {
|
||||
margin-left: 21px;
|
||||
margin-top: 24px;
|
||||
width: 360px;
|
||||
height: 50px;
|
||||
background: rgba(157, 187, 231, 0.3) !important;
|
||||
border-radius: 4px !important;
|
||||
margin-left: 30px;
|
||||
margin-right: 30px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
width: calc(100% - 60px);
|
||||
height: auto;
|
||||
min-height: 50px;
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
}
|
||||
&:focus-within {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
}
|
||||
&:first-of-type {
|
||||
margin-top: 24px;
|
||||
}
|
||||
&:not(:first-of-type):not(:nth-of-type(3)):not(:nth-of-type(4)) {
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
.el-form-item__content {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.el-form-item__error {
|
||||
padding-left: 32px !important;
|
||||
margin-left: 32px !important;
|
||||
|
||||
}
|
||||
.el-input {
|
||||
display: inline-block;
|
||||
height: 47px;
|
||||
width: 85%;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
input {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
padding: 12px 0px 12px 10.8px;
|
||||
background: transparent !important;
|
||||
border: 0px !important;
|
||||
padding: 14px 0px 14px 12px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 16px;
|
||||
color: #264672;
|
||||
font-size: 15px;
|
||||
color: #2c3e50;
|
||||
transition: all 0.3s ease;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.el-input__inner {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
&::placeholder {
|
||||
color: #264672;
|
||||
color: #889aa4;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 16px;
|
||||
font-size: 15px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
&:focus {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
.main-title {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 45px;
|
||||
margin: 0 auto;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", "SimHei", "STHeiti", "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
color: #264672;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
text-shadow: 0 2px 8px rgba(38, 70, 114, 0.2),
|
||||
0 4px 16px rgba(38, 70, 114, 0.15),
|
||||
0 8px 32px rgba(38, 70, 114, 0.1);
|
||||
letter-spacing: 5px;
|
||||
line-height: 1.4;
|
||||
padding: 0 30px 25px 30px;
|
||||
box-sizing: border-box;
|
||||
animation: titleFadeIn 0.8s ease-out;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
width: 150px;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
rgba(91, 141, 239, 0.3) 20%,
|
||||
#5b8def 50%,
|
||||
rgba(91, 141, 239, 0.3) 80%,
|
||||
transparent 100%);
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 8px rgba(91, 141, 239, 0.4);
|
||||
}
|
||||
}
|
||||
@keyframes titleFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-30px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
.login-form {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 150px auto;
|
||||
//opacity: 0.9;
|
||||
background: rgba(247, 248, 241, 0.9);
|
||||
box-shadow: 0 2px 40px 0 rgba(157, 187, 231, 0.5);
|
||||
border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
width: 402px;
|
||||
height: 438px;
|
||||
margin: 120px auto;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
box-shadow: 0 8px 32px rgba(38, 70, 114, 0.15),
|
||||
0 2px 8px rgba(0, 0, 0, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.6);
|
||||
border-radius: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
width: 420px;
|
||||
min-height: 450px;
|
||||
padding-bottom: 20px;
|
||||
transition: all 0.3s ease;
|
||||
animation: slideUp 0.6s ease-out;
|
||||
}
|
||||
.loginbutton {
|
||||
width: 360px;
|
||||
height: 50px;
|
||||
margin-bottom: 24px;
|
||||
margin-top: 0px;
|
||||
background: #9dbbe7 !important;
|
||||
border-color: #9dbbe7 !important;
|
||||
border-radius: 4px;
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
// 按钮容器的间距调整
|
||||
.el-form-item:nth-of-type(3) {
|
||||
margin-top: 24px !important;
|
||||
}
|
||||
.el-form-item:nth-of-type(4) {
|
||||
margin-top: 12px !important;
|
||||
}
|
||||
.login-button {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
margin: 0;
|
||||
background: linear-gradient(135deg, #5b8def 0%, #4a7dd8 100%) !important;
|
||||
border: none !important;
|
||||
border-radius: 12px !important;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
letter-spacing: 0;
|
||||
font-weight: 600;
|
||||
color: #ffffff !important;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 14px rgba(91, 141, 239, 0.4),
|
||||
0 2px 4px rgba(91, 141, 239, 0.2);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(91, 141, 239, 0.5),
|
||||
0 4px 8px rgba(91, 141, 239, 0.3);
|
||||
background: linear-gradient(135deg, #6b9dff 0%, #5a8de8 100%) !important;
|
||||
}
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 3px 10px rgba(91, 141, 239, 0.35),
|
||||
0 1px 3px rgba(91, 141, 239, 0.2);
|
||||
}
|
||||
}
|
||||
.register-button {
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
margin: 0;
|
||||
background: rgba(255, 255, 255, 0.95) !important;
|
||||
border: 1.5px solid #5b8def !important;
|
||||
border-radius: 12px !important;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #5b8def !important;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 8px rgba(91, 141, 239, 0.2),
|
||||
0 1px 3px rgba(91, 141, 239, 0.1);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
background: rgba(91, 141, 239, 0.08) !important;
|
||||
border-color: #6b9dff !important;
|
||||
border-width: 1.5px !important;
|
||||
box-shadow: 0 4px 14px rgba(91, 141, 239, 0.3),
|
||||
0 2px 6px rgba(91, 141, 239, 0.15);
|
||||
color: #6b9dff !important;
|
||||
}
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 6px rgba(91, 141, 239, 0.25),
|
||||
0 1px 2px rgba(91, 141, 239, 0.15);
|
||||
}
|
||||
}
|
||||
.login-text1 {
|
||||
position: absolute;
|
||||
left: 21px;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
left: 30px;
|
||||
font-size: 13px;
|
||||
color: #7a8ba3;
|
||||
font-family: PingFangSC-Regular;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
color: #264672;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.login-text {
|
||||
position: absolute;
|
||||
right: 21px;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
right: 30px;
|
||||
font-size: 13px;
|
||||
color: #7a8ba3;
|
||||
font-family: PingFangSC-Regular;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
color: #264672;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.show-pwd {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 7px;
|
||||
font-size: 16px;
|
||||
color: #889aa4;
|
||||
// Element UI 输入框图标样式
|
||||
.el-input__prefix,
|
||||
.el-input__suffix {
|
||||
color: #7a8ba3;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.el-form-item:focus-within .el-input__prefix,
|
||||
.el-form-item:focus-within .el-input__suffix {
|
||||
color: #264672;
|
||||
}
|
||||
.el-input__suffix {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
&:hover {
|
||||
color: #264672;
|
||||
}
|
||||
}
|
||||
.extra-text {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
padding-left: 2px;
|
||||
margin: 16px 30px 0 30px;
|
||||
padding: 0;
|
||||
width: calc(100% - 60px);
|
||||
}
|
||||
}
|
||||
@media all and (max-width: 480px) {
|
||||
.login-form {
|
||||
width: 300px !important;
|
||||
.main-title {
|
||||
font-size: 28px;
|
||||
top: 40px;
|
||||
letter-spacing: 2px;
|
||||
padding: 0 20px;
|
||||
line-height: 1.4;
|
||||
&::before {
|
||||
width: 80px;
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
.login-container .loginbutton {
|
||||
width: 260px !important;
|
||||
.login-form {
|
||||
width: 90% !important;
|
||||
max-width: 340px !important;
|
||||
margin: 180px auto;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.login-container .login-button,
|
||||
.login-container .register-button {
|
||||
width: 100% !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.login-container .login-button {
|
||||
margin-top: 32px !important;
|
||||
margin-bottom: 0 !important;
|
||||
height: 46px !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
.login-container .register-button {
|
||||
margin-top: 16px !important;
|
||||
margin-bottom: 0 !important;
|
||||
height: 46px !important;
|
||||
font-size: 16px !important;
|
||||
}
|
||||
.login-container .el-form-item {
|
||||
width: 260px !important;
|
||||
width: calc(100% - 40px) !important;
|
||||
margin-left: 20px !important;
|
||||
margin-right: 20px !important;
|
||||
}
|
||||
.login-container .extra-text {
|
||||
margin-left: 20px !important;
|
||||
margin-right: 20px !important;
|
||||
width: calc(100% - 40px) !important;
|
||||
}
|
||||
.title {
|
||||
border-radius: 16px 16px 0 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,9 @@
|
||||
import Vue from 'vue'
|
||||
import SvgIcon from '@/components/SvgIcon'// svg组件
|
||||
|
||||
// 导入所有 SVG 图标
|
||||
const requireAll = requireContext => requireContext.keys().map(requireContext)
|
||||
const req = require.context('./svg', false, /\.svg$/)
|
||||
requireAll(req)
|
||||
|
||||
Vue.component('svg-icon', SvgIcon)
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user