로그인 변경
This commit is contained in:
khk
parent
87cbb1b6b5
commit
6cbb69d0c7
|
|
@ -1,6 +1,6 @@
|
|||
<div class="login" fxLayout="column">
|
||||
<div class="login-wrapper">
|
||||
<div class="slider">
|
||||
<!--<div class="slider">
|
||||
<div
|
||||
*ngFor="let infomation of rotateInfomation; let i = index"
|
||||
[ngClass]="[
|
||||
|
|
@ -17,7 +17,9 @@
|
|||
'background-image':
|
||||
' url(./assets/images/login/bg_login0' + (i + 1) + '.png)'
|
||||
}"
|
||||
></div>
|
||||
>
|
||||
<div class="slider_back" >
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="slider_inner"
|
||||
|
|
@ -49,7 +51,7 @@
|
|||
<div class="slider_indicator" data-slide="3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
-->
|
||||
<ucap-account-login
|
||||
[companyList]="companyList$ | async"
|
||||
[curCompanyCode]="fixedCompany"
|
||||
|
|
|
|||
|
|
@ -21,9 +21,12 @@ $mob-l-width: 640px;
|
|||
|
||||
.login-wrapper {
|
||||
flex: 1 0 auto;
|
||||
//background: url(/assets/images/bg_login.png) no-repeat 50% bottom;
|
||||
background-color: #ffffff;
|
||||
background-size: 100% auto;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -50,9 +53,8 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
|||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: $main;
|
||||
//background: $main;
|
||||
overflow: hidden;
|
||||
|
||||
&_wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
@ -79,6 +81,7 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
|||
background-position: center;
|
||||
background-repeat: none;
|
||||
transition: filter $time/4 $ease-in-out;
|
||||
background-color: #2d3a4a;
|
||||
}
|
||||
|
||||
&_inner {
|
||||
|
|
@ -94,7 +97,7 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
|||
transition: transform $time/4 $ease-in-out, box-shadow $time/4 $ease-in-out,
|
||||
opacity $time/4 step-end;
|
||||
opacity: 0;
|
||||
box-shadow: 0 $base $base rgba(darken($accent, 50%), 0);
|
||||
//box-shadow: 0 $base $base rgba(darken($accent, 50%), 0);
|
||||
padding: $base * 3;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ffffff;
|
||||
|
|
@ -270,21 +273,25 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
|||
|
||||
::ng-deep .login-form-box {
|
||||
position: absolute;
|
||||
width: 26vw;
|
||||
height: 70%;
|
||||
top: 15%;
|
||||
right: 15%;
|
||||
width: 20vw;
|
||||
height: 50%;
|
||||
min-height: 480px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
z-index: 100;
|
||||
@media screen and (max-width: #{$desktop-l-width}) {
|
||||
width: 28vw;
|
||||
width: 24vw;
|
||||
min-height: 480px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: #{$tablet-l-width}), (max-height: $tablet-s-width) {
|
||||
width: 34vw;
|
||||
@media screen and (max-width: #{$tablet-l-width}) {
|
||||
width: 36vw;
|
||||
min-height: 420px;
|
||||
}
|
||||
.mat-form-field {
|
||||
.mat-form-field-label-wrapper {
|
||||
color: #06b2d6;
|
||||
}
|
||||
/*.mat-form-field {
|
||||
padding-top: 20px;
|
||||
.mat-form-field-wrapper {
|
||||
padding-bottom: 0;
|
||||
|
|
@ -324,7 +331,7 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
|||
}
|
||||
.error-container {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}*/
|
||||
}
|
||||
|
||||
.mat-card > .notice {
|
||||
|
|
|
|||
|
|
@ -21,11 +21,56 @@
|
|||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="input-lineless">
|
||||
<!--<span class="icon-img"><i class="mid mdi-account-tie-outline"></i></span>-->
|
||||
<span class="icon-img">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.82 22">
|
||||
<path
|
||||
d="M14.39,11.88a5.7,5.7,0,1,0-4.78,0A10.41,10.41,0,0,0,1.59,22v1H22.41V22A10.41,10.41,0,0,0,14.39,11.88Z"
|
||||
transform="translate(-1.59 -1)"
|
||||
style="fill:#fff"
|
||||
/>
|
||||
<path
|
||||
d="M14.39,11.88a5.7,5.7,0,1,0-4.78,0A10.41,10.41,0,0,0,1.59,22v1H22.41V22A10.41,10.41,0,0,0,14.39,11.88ZM8.3,6.7A3.71,3.71,0,1,1,12,10.41,3.7,3.7,0,0,1,8.3,6.7ZM3.65,21a8.42,8.42,0,0,1,7.58-7.37L10,16.58l2,2,2-2-1.23-2.95A8.42,8.42,0,0,1,20.35,21Z"
|
||||
transform="translate(-1.59 -1)"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<mat-form-field class="login-id">
|
||||
<mat-label>{{ 'accounts.fieldLoginId' | translate }}</mat-label>
|
||||
<input matInput [formControl]="loginIdFormControl" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="input-lineless">
|
||||
<!--<span class="icon-img"><i class="mid mdi-lock-outline"></i></span>-->
|
||||
<span class="icon-img">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 22.07">
|
||||
<title>login-lock</title>
|
||||
<path
|
||||
d="M19,10H18V7A6,6,0,0,0,6,7v3H5a3,3,0,0,0-3,3v7a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V13A3,3,0,0,0,19,10Z"
|
||||
transform="translate(-2 -0.93)"
|
||||
style="fill:#fff"
|
||||
/>
|
||||
<rect x="9.08" y="12.94" width="1.84" height="3.72" />
|
||||
<path
|
||||
d="M19,22.93H5a3,3,0,0,1-3-3v-7a3,3,0,0,1,3-3H19a3,3,0,0,1,3,3v7A3,3,0,0,1,19,22.93Zm-14-11a1,1,0,0,0-1,1v7a1,1,0,0,0,1,1H19a1,1,0,0,0,1-1v-7a1,1,0,0,0-1-1Z"
|
||||
transform="translate(-2 -0.93)"
|
||||
/>
|
||||
<path
|
||||
d="M17,11.93a1,1,0,0,1-1-1v-4a4,4,0,0,0-8,0v4a1,1,0,0,1-2,0v-4a6,6,0,0,1,12,0v4A1,1,0,0,1,17,11.93Z"
|
||||
transform="translate(-2 -0.93)"
|
||||
/>
|
||||
<rect
|
||||
x="9.58"
|
||||
y="13.36"
|
||||
width="0.84"
|
||||
height="2.72"
|
||||
style="fill:#fff"
|
||||
/>
|
||||
<rect x="9.08" y="12.86" width="1.84" height="3.72" />
|
||||
</svg>
|
||||
</span>
|
||||
<mat-form-field class="login-pw">
|
||||
<mat-label>{{ 'accounts.fieldLoginPw' | translate }}</mat-label>
|
||||
<input
|
||||
|
|
@ -35,6 +80,7 @@
|
|||
#loginPw
|
||||
/>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="error-container">
|
||||
<mat-error
|
||||
|
|
@ -105,7 +151,8 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="policy bg-accent-light">
|
||||
<div class="policy">
|
||||
<div class="icon-img"><i class="mid mdi-alarm-light"></i></div>
|
||||
<a class="link" (click)="onClickNoti()">{{
|
||||
!!notiText ? notiText : '개인정보 처리방침'
|
||||
}}</a>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@ $login-max-height: 800px;
|
|||
min-width: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 14%;
|
||||
text-align: center;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 0px;
|
||||
|
|
@ -40,8 +39,8 @@ $login-max-height: 800px;
|
|||
.mat-title {
|
||||
margin: 10px 0 10px 0;
|
||||
text-indent: -10000000px;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background-repeat: no-repeat;
|
||||
display: inline-flex;
|
||||
background-size: 100% auto;
|
||||
|
|
@ -53,15 +52,36 @@ $login-max-height: 800px;
|
|||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
.input-lineless {
|
||||
background-color: #e0e0e0;
|
||||
padding: 14px 20px;
|
||||
margin-top: 6px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
@media screen and (max-width: #{$tablet-s-width}) {
|
||||
padding: 8px 20px;
|
||||
}
|
||||
.icon-img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
color: #333333;
|
||||
&.login-pw {
|
||||
margin-top: 10px;
|
||||
//margin-top: 10px;
|
||||
@media screen and (max-width: #{$tablet-s-width}) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mat-checkbox {
|
||||
margin: 0;
|
||||
|
|
@ -83,8 +103,14 @@ $login-max-height: 800px;
|
|||
.submit-button {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
margin: 1.4vh 0;
|
||||
margin: 20px 0 10px;
|
||||
display: block;
|
||||
border-radius: 0;
|
||||
line-height: 50px;
|
||||
font-size: 1.1em;
|
||||
@media screen and (max-width: #{$tablet-s-width}) {
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -132,18 +158,32 @@ $login-max-height: 800px;
|
|||
}
|
||||
.policy {
|
||||
position: absolute;
|
||||
bottom: 5vh;
|
||||
bottom: 2vh;
|
||||
display: block;
|
||||
text-align: center;
|
||||
opacity: 0.7;
|
||||
padding: 6px;
|
||||
border-radius: 100px;
|
||||
width: 72%;
|
||||
color: #333333;
|
||||
background-color: #58b0b1;
|
||||
width: 100%;
|
||||
color: #ffffff;
|
||||
font-size: 0.86em;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.icon-img {
|
||||
padding: 12px 10px;
|
||||
width: 50px;
|
||||
color: #ffffff;
|
||||
padding-right: 10px;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.7);
|
||||
flex: 0 0 auto;
|
||||
@media screen and (max-width: #{$tablet-s-width}) {
|
||||
padding: 9px 10px;
|
||||
}
|
||||
}
|
||||
a {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
button {
|
||||
&.google,
|
||||
|
|
@ -156,22 +196,11 @@ $login-max-height: 800px;
|
|||
}
|
||||
}
|
||||
|
||||
@include desktop-m {
|
||||
.login-form {
|
||||
.mat-title {
|
||||
background-size: 86% auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include tab {
|
||||
.login-form {
|
||||
font-size: 0.9em;
|
||||
padding: 12%;
|
||||
.mat-title {
|
||||
width: 14vh;
|
||||
height: 14vh;
|
||||
margin: 10px 0 10px 0;
|
||||
background-size: 90% auto;
|
||||
}
|
||||
.mat-form-field .mat-form-field-infix input {
|
||||
font-size: 0.9em;
|
||||
|
|
@ -179,13 +208,11 @@ $login-max-height: 800px;
|
|||
.policy {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
text-align: center;
|
||||
opacity: 0.7;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
margin-left: -12%;
|
||||
font-size: 0.9em;
|
||||
padding: 0px;
|
||||
line-height: 3em;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user