로그인 페이지 배경 로테이션 적용.
This commit is contained in:
leejinho
parent
4e44407f9b
commit
404cf0a077
|
|
@ -1,7 +1,15 @@
|
|||
<div class="login" fxLayout="column">
|
||||
<div class="login-wrapper">
|
||||
<div class="slider">
|
||||
<div class="slider_slide slider_slide-active" data-slide="1">
|
||||
<div
|
||||
*ngFor="let infomation of rotateInfomation"
|
||||
[ngClass]="[
|
||||
'slider_slide',
|
||||
infomation.index === rotateInfomationIndex
|
||||
? 'slider_slide-active'
|
||||
: ''
|
||||
]"
|
||||
>
|
||||
<div class="slider_wrap slider_wrap-hacked">
|
||||
<div class="slider_back"></div>
|
||||
</div>
|
||||
|
|
@ -12,64 +20,15 @@
|
|||
</div>
|
||||
<div class="slider_content">
|
||||
<h1>
|
||||
“ 고객의식탁에 건강한 먹거리와 행복한 미래를 제공합니다.”
|
||||
{{ infomation.content }}
|
||||
</h1>
|
||||
<p class="info">
|
||||
늘 가족의 곁에서 가족의 건강만을 생각하는 마음으로 진한 사랑과
|
||||
정성을 담으려 합니다. 전통적인 맛에 현대적인 감각과 전문성을 더해,
|
||||
건강한 식생활 문화를 다양한 곳으로 전달합니다.
|
||||
</p>
|
||||
<p class="info">{{ infomation.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>
|
||||
<a
|
||||
class="slider_link go-to-next bg-accent-dark"
|
||||
(click)="onClickNextInfomation()"
|
||||
>Next</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slider_indicators">
|
||||
|
|
|
|||
|
|
@ -206,7 +206,7 @@ $ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
|||
}
|
||||
}
|
||||
|
||||
&:not(.slider_slide--active) .slider_wrap {
|
||||
&:not(.slider_slide-active) .slider_wrap {
|
||||
@keyframes hack {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
|
|
|
|||
|
|
@ -52,6 +52,29 @@ export class LoginPageComponent implements OnInit, OnDestroy {
|
|||
useRememberMe: boolean;
|
||||
useAutoLogin: boolean;
|
||||
|
||||
rotateInfomationIntervalObject: any;
|
||||
rotateInfomationIndex = 0;
|
||||
rotateInfomation = [
|
||||
{
|
||||
index: 0,
|
||||
content: `“ 고객의식탁에 건강한 먹거리와 행복한 미래를 제공합니다.”`,
|
||||
info: `늘 가족의 곁에서 가족의 건강만을 생각하는 마음으로 진한 사랑과 정성을 담으려 합니다. 전통적인 맛에 현대적인 감각과 전문성을 더해, 건강한 식생활 문화를 다양한 곳으로 전달합니다.`
|
||||
},
|
||||
{
|
||||
index: 1,
|
||||
content: `“ 세계시장에 깊고 온화한 한국의 맛을 전파합니다! ”`,
|
||||
info: `대상은 산업근대화 시기인 지난 70년대 초반, 국내 최초의 플랜트 수출 성공사례로 평가 받고 있는 인도네시아 진출을 계기로 해외시장 개척의 새로운 장을 열었습니다.
|
||||
사람과 자연을 존중하는 대상의 기업정신에 한국 전통 문화와 정서를 담아 세계인의 마음에 깊고 단단한 뿌리를 내리고 있습니다.`
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
content: `“ 나눌수록 맛있는 행복을 전합니다 ”`,
|
||||
info: `다 함께 행복할 수 있는 세상을 만들기 위해 대상은 사회적 책임을 다합니다.
|
||||
대상은 고객감동경영을 실천하고자 건강한 기업문화를 확립하여 이를 토대로 인재를 육성하고, 미래를 만들어갑니다.
|
||||
뿐만 아니라 고객과 비전을 공유하여 함께 꿈을 꾸고, 다양한 사회공헌활동을 통해 사회의 건강과 행복을 위해 노력하며,나눌수록 맛있는 행복을 실천하고 있습니다`
|
||||
}
|
||||
];
|
||||
|
||||
constructor(
|
||||
private store: Store<any>,
|
||||
private router: Router,
|
||||
|
|
@ -66,9 +89,17 @@ export class LoginPageComponent implements OnInit, OnDestroy {
|
|||
KEY_APP_USER_INFO,
|
||||
environment.customConfig.appKey
|
||||
);
|
||||
|
||||
this.rotateInfomationIndex =
|
||||
new Date().getTime() % this.rotateInfomation.length;
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.rotateInfomationIntervalObject = setInterval(() => {
|
||||
this.rotateInfomationIndex =
|
||||
(this.rotateInfomationIndex + 1) % this.rotateInfomation.length;
|
||||
}, 8000);
|
||||
|
||||
this.defatulLoginBtnText = 'LOGIN';
|
||||
this.defatulWaitingTime = 5 * 60; // sec
|
||||
|
||||
|
|
@ -210,6 +241,19 @@ export class LoginPageComponent implements OnInit, OnDestroy {
|
|||
});
|
||||
}
|
||||
|
||||
onClickNextInfomation() {
|
||||
this.rotateInfomationIndex =
|
||||
(this.rotateInfomationIndex + 1) % this.rotateInfomation.length;
|
||||
|
||||
if (!!this.rotateInfomationIntervalObject) {
|
||||
clearInterval(this.rotateInfomationIntervalObject);
|
||||
this.rotateInfomationIntervalObject = setInterval(() => {
|
||||
this.rotateInfomationIndex =
|
||||
(this.rotateInfomationIndex + 1) % this.rotateInfomation.length;
|
||||
}, 8000);
|
||||
}
|
||||
}
|
||||
|
||||
// onClickTemplate() {
|
||||
// this.router.navigate(['/template']);
|
||||
// }
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user