|
|
@@ -1,287 +1,330 @@
|
|
|
-.el-main{
|
|
|
- padding: 0;
|
|
|
+.el-main {
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
+
|
|
|
// 大背景图
|
|
|
.backdrop {
|
|
|
- width: 100%;
|
|
|
- min-height: 100%;
|
|
|
- padding: 55px;
|
|
|
- background-image: url("~@/assets/images/login/login_bg.png");
|
|
|
- background-size:cover;
|
|
|
- background-repeat:no-repeat;
|
|
|
- background-position:center center;/*居中显示*/
|
|
|
- box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+ min-height: 100%;
|
|
|
+ padding: 55px;
|
|
|
+ background-image: url("~@/assets/images/login/login_bg.png");
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ /*居中显示*/
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
-.zap-login{
|
|
|
- position: relative;
|
|
|
+
|
|
|
+.zap-login {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ min-height: calc(100vh - 110px);
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: #ffffff;
|
|
|
+
|
|
|
+ .login-form {
|
|
|
+ margin-left: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-media {
|
|
|
+ width: 532px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding-top: 164px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-name {
|
|
|
+ width: 269px;
|
|
|
+ height: 29px;
|
|
|
+ margin-left: 26px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-illustration {
|
|
|
width: 100%;
|
|
|
- min-height: calc(100vh - 110px);
|
|
|
- border-radius: 4px;
|
|
|
- background-color: #ffffff;
|
|
|
- .login-form {
|
|
|
- margin-left: 30px;
|
|
|
- }
|
|
|
- .login-media{
|
|
|
- width: 532px;
|
|
|
- margin: 0 auto;
|
|
|
- padding-top: 164px;
|
|
|
- }
|
|
|
- .login-name{
|
|
|
- width: 269px;
|
|
|
- height: 29px;
|
|
|
- margin-left: 26px;
|
|
|
- }
|
|
|
- .login-illustration{
|
|
|
- width: 100%;
|
|
|
- margin-top: 47px;
|
|
|
- }
|
|
|
- .login-text{
|
|
|
- display: block;
|
|
|
- width: 320px;
|
|
|
- height: 16px;
|
|
|
- margin-top: 20px;
|
|
|
- margin-left: 26px;
|
|
|
- }
|
|
|
- // 输入框大小
|
|
|
- .el-input {
|
|
|
- width: 100%;
|
|
|
- background-image: linear-gradient(
|
|
|
- #fdfdfd,
|
|
|
- #fdfdfd),
|
|
|
- linear-gradient(
|
|
|
- #e7f0ff,
|
|
|
- #e7f0ff);
|
|
|
- background-blend-mode: normal,
|
|
|
- normal;
|
|
|
- input {
|
|
|
- height: 40px;
|
|
|
- width: 100%;
|
|
|
- font-size: 16px;
|
|
|
- color: #333333;
|
|
|
- border: none;
|
|
|
- border-radius: 4px;
|
|
|
- background-color: #F4F5F6;
|
|
|
- }
|
|
|
- &.login-code-msg{
|
|
|
- input{
|
|
|
- width: 200px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .zap-login__icon {
|
|
|
- height: 16px;
|
|
|
- width: 16px;
|
|
|
- margin-top: 12px;
|
|
|
- margin-left: 16px;
|
|
|
- }
|
|
|
- .el-input--prefix .el-input__inner{
|
|
|
- padding-left: 50px;
|
|
|
- }
|
|
|
- .login-tip {
|
|
|
- font-size: 13px;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .el-form-item--medium .el-form-item__content{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- // 验证码
|
|
|
- .login-code {
|
|
|
- height: 40px;
|
|
|
- img {
|
|
|
- cursor: pointer;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
- }
|
|
|
- .login-code-img {
|
|
|
- flex: 1;
|
|
|
- height: 40px;
|
|
|
- margin-left: 8px;
|
|
|
- }
|
|
|
+ margin-top: 47px;
|
|
|
+ }
|
|
|
|
|
|
- .rightulliimg{
|
|
|
- width: 860px;
|
|
|
+ .login-text {
|
|
|
+ display: block;
|
|
|
+ width: 320px;
|
|
|
+ height: 16px;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-left: 26px;
|
|
|
+ }
|
|
|
|
|
|
- }
|
|
|
- .divider_left{
|
|
|
- margin-left: -40px;
|
|
|
- }
|
|
|
+ // 输入框大小
|
|
|
+ .el-input {
|
|
|
+ width: 100%;
|
|
|
+ background-image: linear-gradient(#fdfdfd,
|
|
|
+ #fdfdfd),
|
|
|
+ linear-gradient(#e7f0ff,
|
|
|
+ #e7f0ff);
|
|
|
+ background-blend-mode: normal,
|
|
|
+ normal;
|
|
|
|
|
|
- // 内部供应链
|
|
|
- .zap-tabs{
|
|
|
- width: 320px;
|
|
|
- margin: 0 auto;
|
|
|
- min-height: 480px;
|
|
|
- box-sizing: border-box;
|
|
|
- background-image: linear-gradient(
|
|
|
- #ffffff,
|
|
|
- #ffffff),
|
|
|
- linear-gradient(
|
|
|
- #f3f3f3,
|
|
|
- #f3f3f3);
|
|
|
- .el-tabs__nav-wrap::after{
|
|
|
- height: 0;
|
|
|
- }
|
|
|
- .el-tabs__nav{
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .el-tabs__item{
|
|
|
- height: 22px;
|
|
|
- line-height: 22px;
|
|
|
- font-size: 16px;
|
|
|
- color: #333333;
|
|
|
- &:nth-of-type(3){
|
|
|
- padding-left: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
- .el-tabs__item.is-active{
|
|
|
- color: #4280F2;
|
|
|
- }
|
|
|
- .el-tabs__active-bar{
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
- .zap-logo{
|
|
|
- position: absolute;
|
|
|
- top: 50px;
|
|
|
- left: 58px;
|
|
|
- width: 156px;
|
|
|
- height: 44px;
|
|
|
- }
|
|
|
- .zap-2dcode{
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- align-items: center;
|
|
|
- padding-top: 25px;
|
|
|
- padding-right: 50px;
|
|
|
- margin-bottom: 63px;
|
|
|
- font-size: 0;
|
|
|
- background-color: #ffffff;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .zap-2dcode__text{
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- width: 131px;
|
|
|
- height: 36px;
|
|
|
- margin-right: -25px;
|
|
|
- span{
|
|
|
- position: relative;
|
|
|
- display: block;
|
|
|
- line-height: 14px;
|
|
|
- padding-left: 12px;
|
|
|
- font-size: 14px;
|
|
|
- color: #ffffff;
|
|
|
- z-index: 6;
|
|
|
- }
|
|
|
- img{
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- z-index: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .zap-2dcode__img{
|
|
|
- width: 78px;
|
|
|
- height: 78px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .zap-button{
|
|
|
- margin-top: 25px;
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
- font-size: 16px;
|
|
|
- border-radius: 0;
|
|
|
- background-color: #4280F2;
|
|
|
- background-blend-mode: normal,
|
|
|
- normal;
|
|
|
- }
|
|
|
- .zap-agreement{
|
|
|
- display: flex;
|
|
|
- align-items: top;
|
|
|
- margin-top: 8px;
|
|
|
- line-height: 18px;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- .zap-agreement__text{
|
|
|
- color: #666666;
|
|
|
- }
|
|
|
- .zap-agreement__link{
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: flex-start;
|
|
|
- color: #4280F2;
|
|
|
- cursor: pointer;
|
|
|
+ input {
|
|
|
+ height: 40px;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ border-radius: 4px;
|
|
|
}
|
|
|
- .zap-code-button{
|
|
|
- margin-left: 16px;
|
|
|
- padding: 0 16px;
|
|
|
- line-height: 40px;
|
|
|
- font-size: 14px;
|
|
|
- color: #ffffff;
|
|
|
- border: none;
|
|
|
- background-color: #4280F2;
|
|
|
- }
|
|
|
- .el-button.is-disabled, .el-button.is-disabled:hover, .el-button.is-disabled:focus{
|
|
|
- background-color: transparent;
|
|
|
- }
|
|
|
- // 扫码登录
|
|
|
- .zap-scanning{
|
|
|
- background-image: linear-gradient(
|
|
|
- #ffffff,
|
|
|
- #ffffff),
|
|
|
- linear-gradient(
|
|
|
- #f3f3f3,
|
|
|
- #f3f3f3);
|
|
|
- background-blend-mode: normal,
|
|
|
- normal;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .zap-scanning__content{
|
|
|
- width: 320px;
|
|
|
- margin: 0 auto;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- .zap-scanning__title{
|
|
|
- text-align: left;
|
|
|
- font-size: 24px;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- .zap-scanning__img{
|
|
|
- display: block;
|
|
|
- width: 220px;
|
|
|
- height: 220px;
|
|
|
- margin: 40px auto 0;
|
|
|
- object-fit: cover;
|
|
|
+
|
|
|
+ &.login-code-msg {
|
|
|
+ flex: 1;
|
|
|
}
|
|
|
- .zap-scanning__bottom{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-top: 18px;
|
|
|
- font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zap-login__icon {
|
|
|
+ height: 16px;
|
|
|
+ width: 16px;
|
|
|
+ margin-top: 12px;
|
|
|
+ margin-left: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input--prefix .el-input__inner {
|
|
|
+ padding-left: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-tip {
|
|
|
+ font-size: 13px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item--medium .el-form-item__content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 验证码
|
|
|
+ .login-code {
|
|
|
+ height: 40px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ cursor: pointer;
|
|
|
+ vertical-align: middle;
|
|
|
}
|
|
|
- .zap-scanning__icon{
|
|
|
- width: 22px;
|
|
|
- height: 22px;
|
|
|
- margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-code-img {
|
|
|
+ flex: 1;
|
|
|
+ height: 40px;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rightulliimg {
|
|
|
+ width: 860px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .divider_left {
|
|
|
+ margin-left: -40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 内部供应链
|
|
|
+ .zap-tabs {
|
|
|
+ width: 320px;
|
|
|
+ margin: 0 auto;
|
|
|
+ min-height: 480px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-image: linear-gradient(#ffffff,
|
|
|
+ #ffffff),
|
|
|
+ linear-gradient(#f3f3f3,
|
|
|
+ #f3f3f3);
|
|
|
+
|
|
|
+ .el-tabs__nav-wrap::after {
|
|
|
+ height: 0;
|
|
|
}
|
|
|
- .zap-scanning__text{
|
|
|
- color: #333333;
|
|
|
+
|
|
|
+ .el-tabs__nav {
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
- .zap-scanning__color{
|
|
|
- color: #23b24b;
|
|
|
+
|
|
|
+ .el-tabs__item {
|
|
|
+ height: 22px;
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+
|
|
|
+ &:nth-of-type(3) {
|
|
|
+ padding-left: 30px;
|
|
|
+ }
|
|
|
}
|
|
|
- .el-tabs__header{
|
|
|
- margin-bottom: 32px;
|
|
|
+
|
|
|
+ .el-tabs__item.is-active {
|
|
|
+ color: #4280F2;
|
|
|
}
|
|
|
- .el-dialog:not(.is-fullscreen){
|
|
|
- margin-top: 25vh !important;
|
|
|
+
|
|
|
+ .el-tabs__active-bar {
|
|
|
+ display: none;
|
|
|
}
|
|
|
- .el-form-item--medium.el-form-item{
|
|
|
- margin-bottom: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zap-logo {
|
|
|
+ position: absolute;
|
|
|
+ top: 50px;
|
|
|
+ left: 58px;
|
|
|
+ width: 156px;
|
|
|
+ height: 44px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zap-2dcode {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 25px;
|
|
|
+ padding-right: 50px;
|
|
|
+ margin-bottom: 63px;
|
|
|
+ font-size: 0;
|
|
|
+ background-color: #ffffff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zap-2dcode__text {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ width: 131px;
|
|
|
+ height: 36px;
|
|
|
+ margin-right: -25px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ position: relative;
|
|
|
+ display: block;
|
|
|
+ line-height: 14px;
|
|
|
+ padding-left: 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ z-index: 6;
|
|
|
}
|
|
|
+
|
|
|
+ img {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .zap-2dcode__img {
|
|
|
+ width: 78px;
|
|
|
+ height: 78px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zap-button {
|
|
|
+ margin-top: 25px;
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ border-radius: 0;
|
|
|
+ background-color: #4280F2;
|
|
|
+ background-blend-mode: normal,
|
|
|
+ normal;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zap-agreement {
|
|
|
+ display: flex;
|
|
|
+ align-items: top;
|
|
|
+ margin-top: 8px;
|
|
|
+ line-height: 18px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zap-agreement__text {
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zap-agreement__link {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ color: #4280F2;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zap-code-button {
|
|
|
+ margin-left: 16px;
|
|
|
+ padding: 0 16px;
|
|
|
+ line-height: 38px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ border: 1px solid #4280F2;
|
|
|
+ background-color: #4280F2;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button.is-disabled,
|
|
|
+ .el-button.is-disabled:hover,
|
|
|
+ .el-button.is-disabled:focus {
|
|
|
+ color: #4280F2;
|
|
|
+ border: 1px solid #4280F2;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 扫码登录
|
|
|
+ .zap-scanning {
|
|
|
+ background-image: linear-gradient(#ffffff,
|
|
|
+ #ffffff),
|
|
|
+ linear-gradient(#f3f3f3,
|
|
|
+ #f3f3f3);
|
|
|
+ background-blend-mode: normal,
|
|
|
+ normal;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zap-scanning__content {
|
|
|
+ width: 320px;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zap-scanning__title {
|
|
|
+ text-align: left;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zap-scanning__img {
|
|
|
+ display: block;
|
|
|
+ width: 220px;
|
|
|
+ height: 220px;
|
|
|
+ margin: 40px auto 0;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zap-scanning__bottom {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 18px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zap-scanning__icon {
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zap-scanning__text {
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zap-scanning__color {
|
|
|
+ color: #23b24b;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tabs__header {
|
|
|
+ margin-bottom: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog:not(.is-fullscreen) {
|
|
|
+ margin-top: 25vh !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item--medium.el-form-item {
|
|
|
+ margin-bottom: 32px;
|
|
|
+ }
|
|
|
}
|
zhanglb