|
|
@@ -38,15 +38,13 @@
|
|
|
</div>
|
|
|
<div class="loginbox-input">
|
|
|
<span class='iconfont icon-mima1'></span>
|
|
|
- <el-input v-model="loginForm.password" type="password" clearable show-password placeholder="请输入密码"
|
|
|
- @keyup.enter="onLoginClick" />
|
|
|
+ <el-input v-model="loginForm.password" type="password" clearable show-password placeholder="请输入密码" @keyup.enter="onLoginClick" />
|
|
|
</div>
|
|
|
<div class="loginbox-checkbox">
|
|
|
<span>
|
|
|
<!-- <input id="sfjzzh" type="checkbox" title="记住账号" :checked="loginForm.remember" @click="remeberPerson"
|
|
|
@keyup.enter="onLoginClick" /> -->
|
|
|
- <el-switch change="remeberPerson" @keyup.enter="onLoginClick" width="40rem" size="default"
|
|
|
- v-model="loginForm.remember"></el-switch>
|
|
|
+ <el-switch change="remeberPerson" @keyup.enter="onLoginClick" width="40rem" size="default" v-model="loginForm.remember"></el-switch>
|
|
|
记住账号密码
|
|
|
</span>
|
|
|
</div>
|
|
|
@@ -167,27 +165,37 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+ $fontColor: #fff;
|
|
|
+ $fullsize: calc(100% - 0rem);
|
|
|
+ $header-title: url(@/assets/images/login/login-title.webp) 0rem no-repeat;
|
|
|
+ $header-bg-color: linear-gradient(100deg,
|
|
|
+ rgb(16, 96, 210, 0.2) 30%,
|
|
|
+ rgb(16, 106, 250, 0.1) 70%);
|
|
|
+
|
|
|
::v-deep .el-input__wrapper {
|
|
|
padding-left: 56rem !important;
|
|
|
}
|
|
|
+
|
|
|
::v-deep .is-checked .el-switch__core .el-switch__action {
|
|
|
margin-left: calc(-1rem - 14rem);
|
|
|
}
|
|
|
+
|
|
|
el-switch {
|
|
|
margin: 3rem 0rem;
|
|
|
width: 36rem !important;
|
|
|
}
|
|
|
+
|
|
|
::v-deep .el-switch__core .el-switch__action {
|
|
|
width: 16rem !important;
|
|
|
height: 16rem !important;
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
::v-deep .el-switch__core .el-switch__action {
|
|
|
top: 1rem;
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
::v-deep .el-switch__core {
|
|
|
width: 40rem !important;
|
|
|
height: 20rem !important;
|
|
|
@@ -240,10 +248,10 @@
|
|
|
|
|
|
/* 页面顶部标题栏样式 */
|
|
|
.logoinTop {
|
|
|
- width: calc(100% - 0rem);
|
|
|
+ width: $fullsize;
|
|
|
height: 70rem;
|
|
|
line-height: 70rem;
|
|
|
- background: url(@/assets/images/login/login-title.webp) 0rem no-repeat, linear-gradient(100deg, rgba(16, 96, 210, .2) 30%, rgba(16, 106, 250, .1) 70%);
|
|
|
+ background: $header-title, $header-bg-color;
|
|
|
background-size: 510rem 70rem, 100% 70rem;
|
|
|
background-repeat: no-repeat;
|
|
|
user-select: none;
|
|
|
@@ -254,7 +262,7 @@
|
|
|
/* 页面底部样式 */
|
|
|
.loginBottom {
|
|
|
position: absolute;
|
|
|
- width: calc(100% - 0rem);
|
|
|
+ width: $fullsize;
|
|
|
height: 110rem;
|
|
|
bottom: -40rem;
|
|
|
background: linear-gradient(100deg, rgba(16, 96, 210, .1) 20%, rgba(16, 106, 250, .1) 40%);
|
|
|
@@ -262,7 +270,7 @@
|
|
|
background-repeat: no-repeat;
|
|
|
font-size: 13rem;
|
|
|
text-align: center;
|
|
|
- color: #ffffff;
|
|
|
+ color: $fontColor;
|
|
|
overflow: hidden;
|
|
|
user-select: none;
|
|
|
padding: 10rem 0rem;
|
|
|
@@ -298,7 +306,7 @@
|
|
|
line-height: 70rem;
|
|
|
font-size: 30rem;
|
|
|
font-weight: 600;
|
|
|
- color: #ffffff;
|
|
|
+ color: $fontColor;
|
|
|
text-align: center;
|
|
|
margin-top: 30rem;
|
|
|
padding: 0rem;
|
|
|
@@ -327,12 +335,12 @@
|
|
|
|
|
|
/* 记住账号复选框样式 */
|
|
|
.loginbox-checkbox {
|
|
|
- width: calc(100% - 0rem);
|
|
|
+ width: $fullsize;
|
|
|
height: 40rem;
|
|
|
line-height: 40rem;
|
|
|
/* 字间距 */
|
|
|
letter-spacing: 2rem;
|
|
|
- color: #ffffff;
|
|
|
+ color: $fontColor;
|
|
|
font-size: 14rem;
|
|
|
}
|
|
|
|
|
|
@@ -355,7 +363,7 @@
|
|
|
|
|
|
/* 登录按钮样式 */
|
|
|
.loginbox-btn div {
|
|
|
- width: calc(100% - 0rem);
|
|
|
+ width: $fullsize;
|
|
|
height: 40rem;
|
|
|
line-height: 40rem;
|
|
|
background-color: rgba(0, 153, 240, 0.8);
|
|
|
@@ -391,7 +399,7 @@
|
|
|
|
|
|
//后置图标颜色
|
|
|
::v-deep .el-icon svg {
|
|
|
- color: #ffffff;
|
|
|
+ color: $fontColor;
|
|
|
height: 10rem;
|
|
|
width: 10rem;
|
|
|
}
|
