tolag3/mjon_git
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2024/11/22 보안로그인 디자인 수정

Browse Source
This commit is contained in:
subsub 2024-11-22 12:26:27 +09:00
parent 265e29a513
commit 3087d39dcb
3 changed files with 39 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/main/webapp/publish/css/common.css
View File

@ -153,11 +153,13 @@ caption, .label {position: absolute;width: 1px;height: 1px;margin: -1px;border:
.login2 .event {white-space:nowrap;}
/* 보안로그인 */
.security_box{display:inline-flex;height:36px;font-weight:500;background:#fff;padding:0 11px;margin:0 0 0 10px;vertical-align:middle;border-radius:5px;align-items:center;}
.login2 .login_info .security_box i.icon_lock{display:inline-block;width:20px;height:18px;background:url(/publish/images/icon_lock.png) no-repeat center center;background-size:auto 100%;vertical-align:top;}
.security_box .state{font-size:13px;font-weight:600;padding:5px 10px;margin:0 0 0 5px;border-radius:5px;}
.security_box .state.on{border:1px solid #18bb59;background:#e7f8ee;color:#18bb59;}
.security_box .state.off{border:1px solid #e62c2c;background:#fce9e9;color:#e62c2c;}
.security_box{display:inline-flex;height:36px;font-weight:500;background:#fff;padding:0 8px 0 11px;margin:0 0 0 3px;vertical-align:middle;border-radius:5px;align-items:center;}
.security_box.red_box{border:1px solid #ca1a1a;}
.security_box.green_box{border:1px solid #0ca448;}
.security_box p{cursor:pointer;}
.security_box .state{display:flex;width:40px;height:25px;font-size:13px;font-weight:600;margin:0 0 0 5px;border-radius:5px;justify-content:center;align-items:center;cursor:pointer;}
.security_box .state.on{background:#18bb59;color:#fff;}
.security_box .state.off{background:#e62c2c;color:#fff;}
/* //header */

11
src/main/webapp/publish/css/mem.css
View File

@ -585,10 +585,13 @@ input[type="password"].list_inputType1 {padding: 0px;background-color: transpare
.security_login .btn_plus{position:absolute;right:0;}
.security_login .set_area{display:flex;align-items:center;}
.security_login .lately_date{font-size:15px;color:#666;}
.security_login .tab_depth1{margin:0 0 0 15px;text-align:center;}
.security_login .tab_depth1 a{display:inline-flex;justify-content:center;align-items:center;}
.security_login .tab_depth1 a:last-child{border-right:0;}
.security_login .tab_depth1 a.on:last-child{border-right:1px solid;border-radius: 0 5px 5px 0 !important;}
.security_login .security_tab{position:relative;width:80px;margin:0 0 0 15px;text-align:center;border-radius:100px;border:0;box-shadow:none;background:transparent;}
.security_login .security_tab.on::after{position:absolute;content:"";width:25px;height:25px;border-radius:100%;background:#fff;top:5px;right:5px;box-shadow:0 0 5px rgba(0,0,0,0.3);cursor:pointer;}
.security_login .security_tab.off::after{position:absolute;content:"";width:25px;height:25px;border-radius:100%;background:#fff;top:5px;left:5px;box-shadow:0 0 5px rgba(0,0,0,0.3);cursor:pointer;}
.security_login .tab_depth1 a{display:none;font-size:16px;font-weight:bold;line-height:32px;}
.security_login .tab_depth1 a.on{display:block;margin:0;box-shadow:inset 0 0 3px rgba(0,0,0,0.2);}
.security_login .tab_depth1 a:first-child.on{position:absolute;width:100%;text-align:left;padding:0 0 0 12px;color:#fff;border:1px solid #0ca448;background:#18bb59;border-radius:100px;}
.security_login .tab_depth1 a:last-child.on{position:absolute;width:100%;text-align:right;padding:0 12px 0 0;color:#fff;border:1px solid #ca1a1a;background:#e62c2c;border-radius:100px;}
.security_login .title_area{position:relative;display:flex;margin:30px 0 15px 0;align-items:center;}
.security_login .qmMark{width:20px;height:20px;margin:-4px 0 0 8px;font-size:14px;font-weight:bold;font-family:'GmarketSansBold';background:#d7d7d9;border-radius:5px;color:#666;text-align:center;line-height:22px;cursor:pointer;}

51
src/main/webapp/publish/mypage_index_2024.html
View File

@ -24,25 +24,21 @@
$(function () {
// on/off 시 confirm 창 노출
$('.security_tab a').click(function (e) {
console.log($(this).hasClass("on"))
if ($(this).hasClass("on") == false) {
if ($(this).text().trim() == "ON") {
if (!confirm("보안로그인 설정 후 로그인 시, 등록한 휴대폰번호로 추가 인증이 진행됩니다")) {
$(this).removeClass("on");
$(this).siblings("a").addClass("on");
} else {
$(this).addClass("on");
$(this).siblings("a").removeClass("on");
}
$(".security_tab").click(function () {
if ($(this).find("a.on").text().trim() == "ON") {
if (!confirm("보안로그인 설정 후 로그인 시, 등록한 휴대폰번호로 추가 인증이 진행됩니다")) {
$(this).find("a.on").siblings("a").removeClass("on");
} else {
if (!confirm("가입자 휴대폰번호로 본인인증 후 해제가 가능하며, 보안로그인 설정을 해제함으로써 발생하는 손해에 대하여 회사는 책임지지 않습니다.")) {
$(this).removeClass("on");
$(this).siblings("a").addClass("on");
} else {
$(this).addClass("on");
$(this).siblings("a").removeClass("on");
}
$(this).find("a.on").removeClass("on").siblings("a").addClass("on");
$(this).removeClass("on").addClass("off");
}
} else if($(this).find("a.on").text().trim() == "OFF") {
if (!confirm("가입자 휴대폰번호로 본인인증 후 해제가 가능하며, 보안로그인 설정을 해제함으로써 발생하는 손해에 대하여 회사는 책임지지 않습니다.")) {
$(this).find("a.on").siblings("a").removeClass("on");
} else {
$(this).find("a.on").removeClass("on").siblings("a").addClass("on");
$(this).removeClass("off").addClass("on");
}
}
});
@ -228,10 +224,13 @@
</div>
<button type="button" class="btnType btnType3">마이페이지</button>
<button type="button" class="btnType btnType2">로그아웃</button>
<div class="security_box">
<p class="title"><i class="icon_lock"></i>보안로그인</p>
<a href="#" class="state on">ON</a>
<!-- <a href="#" class="state off">OFF</a> -->
<div class="security_box red_box">
<a href="#" class="title">보안로그인</a><!-- 보안로그인 클릭시 보안로그인 홈페이지로 -->
<span class="state off">OFF</span><!-- ON/OFF 클릭시 이벤트 발생 -->
</div>
<div class="security_box green_box">
<a href="#" class="title">보안로그인</a>
<span class="state on">ON</span>
</div>
</div>
<div class="login_pay">
@ -304,7 +303,7 @@
<div class="set_area">
<p class="lately_date">최근 변경일시 : <span>2024-11-01 12:49</span></p>
<div class="tab_depth1 security_tab">
<div class="tab_depth1 security_tab on">
<a href="#none" class="on">ON</a>
<a href="#none">OFF</a>
</div>
@ -324,9 +323,9 @@
<div class="set_area">
<p class="lately_date">최근 변경일시 : <span>2024-11-01 12:49</span></p>
<div class="tab_depth1 security_tab">
<a href="#none" class="on">ON</a>
<a href="#none">OFF</a>
<div class="tab_depth1 security_tab off">
<a href="#none">ON</a>
<a href="#none" class="on">OFF</a>
</div>
</div>
</div>