|
|
@@ -1,7 +1,11 @@
|
|
|
<template>
|
|
|
- <div class="login">
|
|
|
- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
|
|
|
- <h3 class="title">首佳后台管理系统</h3>
|
|
|
+ <div class="login view-box">
|
|
|
+ <div class="login-header">
|
|
|
+ <img class="login-header-img" src="../assets/images/logo-sj.png">
|
|
|
+ <span class="login-h-text">首佳科技SSO平台</span>
|
|
|
+ </div>
|
|
|
+ <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-box">
|
|
|
+ <div class="zz-box">
|
|
|
<el-form-item prop="username">
|
|
|
<el-input
|
|
|
v-model="loginForm.username"
|
|
|
@@ -52,7 +56,8 @@
|
|
|
<div v-if="register" style="float: right;">
|
|
|
<router-link :to="'/register'" class="link-type">立即注册</router-link>
|
|
|
</div>
|
|
|
- </el-form-item>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -231,5 +236,236 @@ export default {
|
|
|
|
|
|
.login-code-img {
|
|
|
height: 38px;
|
|
|
-}
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-input-placeholder {
|
|
|
+ color: #ccc;
|
|
|
+}
|
|
|
+
|
|
|
+/* 视图盒子 */
|
|
|
+.view-box {
|
|
|
+ position: relative;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ overflow: hidden;
|
|
|
+ background: url("../assets/images/login-bg.jpg") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+
|
|
|
+/* 头部 */
|
|
|
+.login-header {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 84px;
|
|
|
+ background: url("../assets/images/login-header.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 34px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: bolder;
|
|
|
+ display: flex;
|
|
|
+ padding-top: 10px;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 1000;
|
|
|
+}
|
|
|
+.login-h-text {
|
|
|
+ background-image: linear-gradient(180deg, #ffffff, #0c8eff);
|
|
|
+ background-clip:text;
|
|
|
+ color: transparent;
|
|
|
+}
|
|
|
+.login-header-img {
|
|
|
+ margin-top: 6px;
|
|
|
+ margin-right: 10px;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 登录盒子 */
|
|
|
+/* .login-box{width: 400px; height: 400px; position: absolute; left: calc(50% - 200px); top: calc(50% - 200px); max-width: 90%; } */
|
|
|
+.login-box {
|
|
|
+ width: 663px;
|
|
|
+ margin: auto;
|
|
|
+ max-width: 90%;
|
|
|
+ height: 100%;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+/* logo */
|
|
|
+.logo-box {
|
|
|
+ height: 150px;
|
|
|
+ line-height: 150px;
|
|
|
+}
|
|
|
+.logo-box img {
|
|
|
+ height: 100px;
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
+.login-tit {
|
|
|
+ width: 50%;
|
|
|
+ height: 64px;
|
|
|
+ line-height: 64px;
|
|
|
+ text-align: left;
|
|
|
+ margin-top: 26px;
|
|
|
+ margin-left: 20px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bolder;
|
|
|
+ color: #90c8ff;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+/* 表单 */
|
|
|
+.from-box {
|
|
|
+ height: 597px;
|
|
|
+ background: url("../assets/images/login-box-bg.png") no-repeat;
|
|
|
+ border-radius: 0px;
|
|
|
+ transition: all 0.2s;
|
|
|
+ background-size: cover;
|
|
|
+}
|
|
|
+.from-box > * {
|
|
|
+ padding: 0px 80px;
|
|
|
+}
|
|
|
+.from-title {
|
|
|
+ margin-top: 40px;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ text-align: left;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+.tab-box {
|
|
|
+}
|
|
|
+.tab-box > span {
|
|
|
+ cursor: pointer;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 10px;
|
|
|
+ font-size: 17px; /* letter-spacing: 1px; */
|
|
|
+ color: #90c8ff;
|
|
|
+}
|
|
|
+.tab-box > span.nat-tab {
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.title-border {
|
|
|
+ width: 68px;
|
|
|
+ height: 3px;
|
|
|
+ margin-top: 5px;
|
|
|
+ background-color: #0084ff;
|
|
|
+ border-radius: 5px;
|
|
|
+ transform: translate3d(0px, 0px, 0px);
|
|
|
+ transition: all 0.2s;
|
|
|
+}
|
|
|
+.title-border-2 {
|
|
|
+ transform: translate3d(83px, 0px, 0px);
|
|
|
+}
|
|
|
+
|
|
|
+.login-dev,
|
|
|
+.reg-dev {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.native {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+/* 输入框 */
|
|
|
+.from-item {
|
|
|
+ border: 0px #000 solid;
|
|
|
+ margin-bottom: 40px;
|
|
|
+}
|
|
|
+.s-input {
|
|
|
+ width: 100%;
|
|
|
+ line-height: 50px;
|
|
|
+ color: #90c8ff;
|
|
|
+ height: 50px;
|
|
|
+ text-indent: 1em;
|
|
|
+ outline: 0;
|
|
|
+ border: 1px #4982c8 solid;
|
|
|
+ border-radius: 0px;
|
|
|
+ transition: all 0.2s;
|
|
|
+ background: rgba(26, 61, 102, 0.8);
|
|
|
+}
|
|
|
+.s-input {
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+.s-input:focus {
|
|
|
+ border-color: #409eff;
|
|
|
+}
|
|
|
+[name="vc"] {
|
|
|
+ width: 200px;
|
|
|
+}
|
|
|
+.send-vc {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ float: right;
|
|
|
+ line-height: 40px;
|
|
|
+}
|
|
|
+.send-vc a {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #409eff;
|
|
|
+}
|
|
|
+.send-vc a:hover {
|
|
|
+ text-decoration: underline;
|
|
|
+}
|
|
|
+
|
|
|
+/* 登录按钮 */
|
|
|
+.s-btn {
|
|
|
+ text-indent: 0;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: #409eff;
|
|
|
+ border-color: #409eff;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+}
|
|
|
+.s-btn:hover {
|
|
|
+ background-color: #50aeff;
|
|
|
+}
|
|
|
+.reg-tips {
|
|
|
+ text-align: left;
|
|
|
+ color: #50aeff;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.login-btn{
|
|
|
+ background:linear-gradient(0deg,#23d6ee,#52a9ff );
|
|
|
+ font-size: 23px;
|
|
|
+ font-weight: bolder;
|
|
|
+}
|
|
|
+.login-btn:hover{
|
|
|
+ background: linear-gradient(0deg,#63e7f8,#6fb6fd );
|
|
|
+}
|
|
|
+.reg-btn:hover{
|
|
|
+ background: linear-gradient(0deg,#63e7f8,#3179df );
|
|
|
+}
|
|
|
+.reg-btn{
|
|
|
+ background: linear-gradient(0deg,#63e7f8,#17478b );
|
|
|
+ font-size: 23px;
|
|
|
+ font-weight: bolder;
|
|
|
+}
|
|
|
+
|
|
|
+/* 重置按钮 */
|
|
|
+.reset-box {
|
|
|
+ text-align: left;
|
|
|
+ font-size: 14px;
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+.reset-box a {
|
|
|
+ text-decoration: none;
|
|
|
+ color: #50aeff;
|
|
|
+}
|
|
|
+.reset-box a:hover {
|
|
|
+ text-decoration: underline;
|
|
|
+}
|
|
|
+
|
|
|
+/* loading框样式 */
|
|
|
+.ajax-layer-load.layui-layer-dialog {
|
|
|
+ min-width: 0px !important;
|
|
|
+ background-color: rgba(0, 0, 0, 0.85);
|
|
|
+}
|
|
|
+.ajax-layer-load.layui-layer-dialog .layui-layer-content {
|
|
|
+ padding: 10px 20px 10px 40px;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.ajax-layer-load.layui-layer-dialog .layui-layer-content .layui-layer-ico {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ background-size: 20px 20px;
|
|
|
+ top: 12px;
|
|
|
+}
|
|
|
+
|
|
|
</style>
|
sumyangyang
