Daesang 로그인 디자인 수정
This commit is contained in:
khk
parent
83e29c172b
commit
4e44407f9b
|
|
@ -1,5 +1,84 @@
|
|||
<div class="login" fxLayout="column">
|
||||
<div class="login-wrapper" fxLayout="column" fxLayoutAlign="center center">
|
||||
<div class="login-wrapper">
|
||||
<div class="slider">
|
||||
<div class="slider_slide slider_slide-active" data-slide="1">
|
||||
<div class="slider_wrap slider_wrap-hacked">
|
||||
<div class="slider_back"></div>
|
||||
</div>
|
||||
<div class="slider_inner">
|
||||
<div class="slider_header">
|
||||
<span class="company-name">DAESANG Messenger</span>
|
||||
<span class="h-line"></span>
|
||||
</div>
|
||||
<div class="slider_content">
|
||||
<h1>
|
||||
“ 고객의식탁에 건강한 먹거리와 행복한 미래를 제공합니다.”
|
||||
</h1>
|
||||
<p class="info">
|
||||
늘 가족의 곁에서 가족의 건강만을 생각하는 마음으로 진한 사랑과
|
||||
정성을 담으려 합니다. 전통적인 맛에 현대적인 감각과 전문성을 더해,
|
||||
건강한 식생활 문화를 다양한 곳으로 전달합니다.
|
||||
</p>
|
||||
</div>
|
||||
<a class="slider_link go-to-next bg-accent-dark">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slider_slide" data-slide="2">
|
||||
<div class="slider_wrap slider_wrap-hacked">
|
||||
<div class="slider_back"></div>
|
||||
</div>
|
||||
<div class="slider_inner">
|
||||
<div class="slider_header">
|
||||
<span class="company-name">DAESANG Messenger</span>
|
||||
<span class="h-line"></span>
|
||||
</div>
|
||||
<div class="slider_content">
|
||||
<h1>
|
||||
세계시장에 깊고 온화한 한국의 맛을 전파합니다!
|
||||
</h1>
|
||||
<p class="info">
|
||||
대상은 산업근대화 시기인 지난 70년대 초반, 국내 최초의 플랜트 수출
|
||||
성공사례로 평가 받고 있는 인도네시아 진출을 계기로 해외시장 개척의
|
||||
새로운 장을 열었습니다. 사람과 자연을 존중하는 대상의 기업정신에
|
||||
한국 전통 문화와 정서를 담아 세계인의 마음에 깊고 단단한 뿌리를
|
||||
내리고 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
<a class="slider_link go-to-next bg-accent-dark">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slider_slide" data-slide="3">
|
||||
<div class="slider_wrap slider_wrap-hacked">
|
||||
<div class="slider_back"></div>
|
||||
</div>
|
||||
<div class="slider_inner">
|
||||
<div class="slider_header">
|
||||
<span class="company-name">DAESANG Messenger</span>
|
||||
<span class="h-line"></span>
|
||||
</div>
|
||||
<div class="slider_content">
|
||||
<h1>
|
||||
“ 나눌수록 맛있는 행복을 전합니다 ”
|
||||
</h1>
|
||||
<p class="info">
|
||||
다 함께 행복할 수 있는 세상을 만들기 위해 대상은 사회적 책임을
|
||||
다합니다. 대상은 고객감동경영을 실천하고자 건강한 기업문화를
|
||||
확립하여 이를 토대로 인재를 육성하고, 미래를 만들어갑니다. 뿐만
|
||||
아니라 고객과 비전을 공유하여 함께 꿈을 꾸고, 다양한
|
||||
사회공헌활동을 통해 사회의 건강과 행복을 위해 노력하며,나눌수록
|
||||
맛있는 행복을 실천하고 있습니다
|
||||
</p>
|
||||
</div>
|
||||
<a class="slider_link go-to-next bg-accent-dark">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slider_indicators">
|
||||
<div class="slider_indicator" data-slide="1"></div>
|
||||
<div class="slider_indicator" data-slide="2"></div>
|
||||
<div class="slider_indicator" data-slide="3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ucap-account-login
|
||||
[companyList]="companyList$ | async"
|
||||
[curCompanyCode]="fixedCompany"
|
||||
|
|
@ -14,17 +93,8 @@
|
|||
[useAutoLogin]="useAutoLogin"
|
||||
(login)="onLogin($event)"
|
||||
(notiClick)="onClickNoti($event)"
|
||||
class="login-form-box"
|
||||
>
|
||||
</ucap-account-login>
|
||||
</div>
|
||||
|
||||
<!--<button
|
||||
mat-raised-button
|
||||
color="accent"
|
||||
class="submit-button"
|
||||
aria-label="Template"
|
||||
(click)="onClickTemplate()"
|
||||
>
|
||||
Template
|
||||
</button>-->
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,302 @@
|
|||
.login {
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
height: 100%;
|
||||
height: calc(100% - 50px);
|
||||
background: #eaeff1;
|
||||
background: -webkit-linear-gradient(to top, #93a3af, #eaeff1);
|
||||
background: linear-gradient(to top, #93a3af, #eaeff1);
|
||||
margin-top: 50px;
|
||||
overflow: hidden;
|
||||
/*background: -webkit-linear-gradient(to top, #93a3af, #eaeff1);
|
||||
background: linear-gradient(to top, #93a3af, #eaeff1);*/
|
||||
|
||||
.login-wrapper {
|
||||
flex: 1 0 auto;
|
||||
background: url(/assets/images/bg_login.png) no-repeat 50% bottom;
|
||||
//background: url(/assets/images/bg_login.png) no-repeat 50% bottom;
|
||||
background-size: 100% auto;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
$main: #777;
|
||||
$back: #aaa;
|
||||
$accent: hsl(220, 50%, 40%);
|
||||
|
||||
$sans: 'Open Sans', sans-serif;
|
||||
$heebo: 'Heebo', sans-serif;
|
||||
$hangul: '나눔고딕', Malgun Gothic, '맑은고딕', Arial, Dotum, '돋움';
|
||||
|
||||
$base: 3vh;
|
||||
|
||||
$time: 1800ms;
|
||||
|
||||
$ease-out: cubic-bezier(0.26, 0.005, 0.135, 1);
|
||||
$ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
||||
|
||||
@mixin word-break-keep {
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background: $main;
|
||||
overflow: hidden;
|
||||
|
||||
&_wrap {
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
transform: translateX(100vw);
|
||||
top: 0%;
|
||||
left: 0;
|
||||
right: auto;
|
||||
overflow: hidden;
|
||||
transition: transform $time/4 $ease-in-out;
|
||||
transform-origin: 0% 50%;
|
||||
transition-delay: $time/4;
|
||||
opacity: 0;
|
||||
&-hacked {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&_back {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: auto 100%;
|
||||
background-position: center;
|
||||
background-repeat: none;
|
||||
transition: filter $time/4 $ease-in-out;
|
||||
}
|
||||
|
||||
&_inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0%;
|
||||
background-size: auto 133.3333%;
|
||||
background-position: center;
|
||||
background-repeat: none;
|
||||
transform: scale(0.75);
|
||||
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);
|
||||
padding: $base * 3;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ffffff;
|
||||
}
|
||||
&_header {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
width: 40%;
|
||||
height: 20px;
|
||||
justify-content: center;
|
||||
font-size: $base * 0.6;
|
||||
color: #ffffff;
|
||||
.company-name {
|
||||
flex: 0 0 auto;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.h-line {
|
||||
flex: 1 1 auto;
|
||||
align-self: center;
|
||||
height: 2px;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
}
|
||||
}
|
||||
&_content {
|
||||
position: relative;
|
||||
top: 64%;
|
||||
width: 40%;
|
||||
transform: translateY(-50%);
|
||||
color: white;
|
||||
font-family: $hangul;
|
||||
opacity: 0;
|
||||
transition: opacity $time/4;
|
||||
h1 {
|
||||
font-weight: 900;
|
||||
font-size: $base * 1.24;
|
||||
line-height: 1.2;
|
||||
margin-bottom: $base/2;
|
||||
pointer-events: none;
|
||||
text-shadow: 0 $base/8 $base/4 rgba(darken($accent, 50%), 0.1);
|
||||
@include word-break-keep();
|
||||
}
|
||||
p {
|
||||
font-size: $base * 0.64;
|
||||
line-height: $base * 0.9;
|
||||
margin-bottom: $base/2;
|
||||
@include word-break-keep();
|
||||
}
|
||||
}
|
||||
&_link {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
font-family: $heebo;
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: $base * 0.1;
|
||||
font-weight: 100;
|
||||
display: block;
|
||||
bottom: 10%;
|
||||
color: #ffffff;
|
||||
padding: 10px 60px 10px 30px;
|
||||
border-radius: 100px;
|
||||
color: #00dbed;
|
||||
width: $base * 5;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
border-top: 1px solid white;
|
||||
border-right: 1px solid white;
|
||||
display: block;
|
||||
width: $base/3;
|
||||
height: $base/3;
|
||||
transform: translateX(0) translateY(-50%) rotate(45deg);
|
||||
position: absolute;
|
||||
font-family: $heebo;
|
||||
font-weight: 100;
|
||||
top: 50%;
|
||||
left: $base * 4;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #134a67;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
&_slide {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
transition: transform $time/3 $ease-in-out;
|
||||
transition-delay: $time/3;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
|
||||
&-active {
|
||||
transform: translatex(0%);
|
||||
z-index: 2;
|
||||
.slider_wrap {
|
||||
transform: translateX(0);
|
||||
transform-origin: 100% 50%;
|
||||
opacity: 1;
|
||||
animation: none;
|
||||
}
|
||||
.slider_back {
|
||||
filter: blur(#{$base * 0.2});
|
||||
transition: filter $time/2 $ease-in-out;
|
||||
transition-delay: $time/2 !important;
|
||||
}
|
||||
.slider_inner {
|
||||
transform: scale(0.7);
|
||||
box-shadow: 0 $base/3 $base * 1 rgba(darken($accent, 50%), 0.2);
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
transition: transform $time/2 $ease-in-out,
|
||||
box-shadow $time/2 $ease-in-out, opacity 1ms step-end;
|
||||
transition-delay: $time/2;
|
||||
}
|
||||
.slider_content {
|
||||
opacity: 1;
|
||||
transition-delay: $time * 3/4;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.slider_slide--active) .slider_wrap {
|
||||
@keyframes hack {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-100vw);
|
||||
opacity: 1;
|
||||
}
|
||||
51% {
|
||||
transform: translateX(-100vw);
|
||||
opacity: 0;
|
||||
}
|
||||
52% {
|
||||
transform: translateX(100vw);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100vw);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
animation-name: hack;
|
||||
animation-duration: $time/2;
|
||||
animation-delay: $time/4;
|
||||
animation-timing-function: $ease-in-out;
|
||||
}
|
||||
|
||||
&:nth-child(1) .slider_back,
|
||||
&:nth-child(1) .slider_inner {
|
||||
background-image: url(/assets/images/login/bg_login01.png);
|
||||
//background: #eee;
|
||||
}
|
||||
&:nth-child(2) .slider_back,
|
||||
&:nth-child(2) .slider_inner {
|
||||
background-image: url(/assets/images/login/bg_login02.png);
|
||||
//background: #aaa;
|
||||
}
|
||||
&:nth-child(3) .slider_back,
|
||||
&:nth-child(3) .slider_inner {
|
||||
background-image: url(/assets/images/login/bg_login03.png);
|
||||
//background: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*.sig {
|
||||
position: fixed;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
font-weight: 100;
|
||||
font-family: sans-serif;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
letter-spacing: 2px;
|
||||
z-index: 9999;
|
||||
}*/
|
||||
|
||||
.login-form-box {
|
||||
position: absolute;
|
||||
height: 70vh;
|
||||
top: 15%;
|
||||
right: 15%;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@media all and (min-width: 768px) and (max-width: 1400px) {
|
||||
.slider {
|
||||
&_content {
|
||||
transform: translateY(-50%);
|
||||
color: white;
|
||||
font-family: $heebo;
|
||||
opacity: 0;
|
||||
transition: opacity $time/4;
|
||||
h1 {
|
||||
font-weight: 900;
|
||||
font-size: $base * 1.2;
|
||||
margin-bottom: $base;
|
||||
}
|
||||
p {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&-active {
|
||||
.slider_inner {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 998 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
|
|
@ -35,6 +35,16 @@
|
|||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<button
|
||||
mat-raised-button
|
||||
class="submit-button bg-accent-dark"
|
||||
aria-label="LOG IN"
|
||||
[disabled]="loginForm.invalid || !loginBtnEnable"
|
||||
(click)="onClickLogin()"
|
||||
>
|
||||
{{ loginBtnText }}
|
||||
</button>
|
||||
|
||||
<div
|
||||
class="remember-forgot-password"
|
||||
fxLayout="row"
|
||||
|
|
@ -59,16 +69,6 @@
|
|||
자동 로그인
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
|
||||
<button
|
||||
mat-raised-button
|
||||
class="submit-button bg-accent-dark"
|
||||
aria-label="LOG IN"
|
||||
[disabled]="loginForm.invalid || !loginBtnEnable"
|
||||
(click)="onClickLogin()"
|
||||
>
|
||||
{{ loginBtnText }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="register" fxLayout="column" fxLayoutAlign="center center">
|
||||
|
|
@ -79,7 +79,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="policy">
|
||||
<div class="policy bg-accent-light">
|
||||
<a class="link" (click)="onClickNoti()">{{
|
||||
!!notiText ? notiText : '개인정보 처리방침'
|
||||
}}</a>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,34 @@
|
|||
.login-form {
|
||||
position: relative;
|
||||
width: 384px;
|
||||
max-width: 384px;
|
||||
padding: 50px;
|
||||
transform: scale(1);
|
||||
width: 540px;
|
||||
min-width: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 16%;
|
||||
text-align: center;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 0px;
|
||||
box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.1);
|
||||
@media all and (min-width: 768px) and (max-width: 1400px) {
|
||||
width: 420px;
|
||||
min-width: 420px;
|
||||
}
|
||||
|
||||
.mat-title {
|
||||
margin: 16px 0 32px 0;
|
||||
margin: 10px 0 50px 0;
|
||||
text-indent: -10000000px;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
background-image: url(/assets/images/logo/bg_login_w160.png);
|
||||
background-repeat: no-repeat;
|
||||
display: inline-flex;
|
||||
background-size: 100% auto;
|
||||
flex: 1 1 auto;
|
||||
@media all and (min-width: 768px) and (max-width: 1400px) {
|
||||
width: 140px;
|
||||
min-width: 140px;
|
||||
margin: 10px 0 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
|
|
@ -26,22 +45,21 @@
|
|||
|
||||
.remember-forgot-password {
|
||||
font-size: 13px;
|
||||
margin-top: 8px;
|
||||
|
||||
.remember-me {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.auto-login {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 2vh;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
margin: 2vh 0 1.6vh;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -90,13 +108,18 @@
|
|||
}
|
||||
.policy {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
left: 0;
|
||||
color: #ffffff;
|
||||
bottom: 5vh;
|
||||
display: block;
|
||||
text-align: center;
|
||||
opacity: 0.7;
|
||||
padding: 6px;
|
||||
border-radius: 100px;
|
||||
width: 68%;
|
||||
color: #2d3a4a;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
&.google,
|
||||
&.facebook {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user