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

2024/11/21 관리자 대시보드, 간편인증 팝업

Browse Source
This commit is contained in:
subsub 2024-11-21 12:18:46 +09:00
parent a6b3dcc726
commit 80fe8d99f0
6 changed files with 376 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
src/main/webapp/kofair_case_seed/adm/index.html
View File

@ -12,6 +12,7 @@
<link rel="stylesheet" href="/kofair_case_seed/css/font.css">
<link rel="stylesheet" href="/kofair_case_seed/adm/style/layout.css">
<link rel="stylesheet" href="/kofair_case_seed/adm/style/common.css">
<link rel="stylesheet" href="/kofair_case_seed/adm/style/index.css">
<!-- script -->
@ -22,13 +23,209 @@
</head>
<body>
<div class="wrap">
<div class="wrap main">
<div data-include-path="/kofair_case_seed/adm/layout/leftmenu.html"></div>
<div class="contents">
<div data-include-path="/kofair_case_seed/adm/layout/user_info.html"></div>
<div class="box_wrap">
<div class="box width3">
<div class="title">
<h2>최근 접수사건 <span>(미배정)</span></h2>
<button type="button" class="btn_plus"><i></i></button>
</div>
<ul class="box_list">
<li>
<a href="#">
<span class="list_title">· 하도2024-0005</span>
<span class="list_writer">상호명</span>
<span class="list_date">2024.11.11</span>
</a>
</li>
<li>
<a href="#">
<span class="list_title">· 하도2024-0005</span>
<span class="list_writer">상호명</span>
<span class="list_date">2024.11.11</span>
</a>
</li>
<li>
<a href="#">
<span class="list_title">· 하도2024-0005</span>
<span class="list_writer">상호명</span>
<span class="list_date">2024.11.11</span>
</a>
</li>
<li>
<a href="#">
<span class="list_title">· 하도2024-0005</span>
<span class="list_writer">상호명</span>
<span class="list_date">2024.11.11</span>
</a>
</li>
<li>
<a href="#">
<span class="list_title">· 하도2024-0005</span>
<span class="list_writer">상호명</span>
<span class="list_date">2024.11.11</span>
</a>
</li>
</ul>
</div>
<div class="box width3">
<div class="title">
<h2>진행 중 사건목록 <span>(오래된 순)</span></h2>
<button type="button" class="btn_plus"><i></i></button>
</div>
<ul class="box_list">
<li>
<a href="#">
<span class="list_title">· 하도2024-0005</span>
<span class="list_writer">상호명</span>
<span class="list_date">2024.11.11</span>
</a>
</li>
<li>
<a href="#">
<span class="list_title">· 하도2024-0005</span>
<span class="list_writer">상호명</span>
<span class="list_date">2024.11.11</span>
</a>
</li>
<li>
<a href="#">
<span class="list_title">· 하도2024-0005</span>
<span class="list_writer">상호명</span>
<span class="list_date">2024.11.11</span>
</a>
</li>
<li>
<a href="#">
<span class="list_title">· 하도2024-0005</span>
<span class="list_writer">상호명</span>
<span class="list_date">2024.11.11</span>
</a>
</li>
<li>
<a href="#">
<span class="list_title">· 하도2024-0005</span>
<span class="list_writer">상호명</span>
<span class="list_date">2024.11.11</span>
</a>
</li>
</ul>
</div>
<div class="box width3 quick_area">
<a href="#" class="bg_7990c3">
<span class="quick_title">분쟁사건 처리관리</span>
<span class="baro_text">바로가기 <i></i></span>
</a>
<a href="#" class="bg_474b5e">
<span class="quick_title">나의사건 통계</span>
<span class="baro_text">바로가기 <i></i></span>
</a>
<a href="#" class="bg_171c70">
<span class="quick_title">분쟁조정협의회</span>
<span class="baro_text">바로가기 <i></i></span>
</a>
<a href="#" class="bg_04b5a5">
<span class="quick_title">종료사건 조회</span>
<span class="baro_text">바로가기 <i></i></span>
</a>
</div>
<div class="box width2">
<div class="title">
<h2>분쟁조정 게시판</h2>
<button type="button" class="btn_plus"><i></i></button>
</div>
<ul class="box_list">
<li>
<a href="#">
<span class="list_title">· 하도2024-0005</span>
<span class="list_writer">상호명</span>
<span class="list_date">2024.11.11</span>
</a>
</li>
<li>
<a href="#">
<span class="list_title">· 하도2024-0005</span>
<span class="list_writer">상호명</span>
<span class="list_date">2024.11.11</span>
</a>
</li>
<li>
<a href="#">
<span class="list_title">· 하도2024-0005</span>
<span class="list_writer">상호명</span>
<span class="list_date">2024.11.11</span>
</a>
</li>
<li>
<a href="#">
<span class="list_title">· 하도2024-0005</span>
<span class="list_writer">상호명</span>
<span class="list_date">2024.11.11</span>
</a>
</li>
<li>
<a href="#">
<span class="list_title">· 하도2024-0005</span>
<span class="list_writer">상호명</span>
<span class="list_date">2024.11.11</span>
</a>
</li>
</ul>
</div>
<div class="box width2">
<div class="title">
<h2>분쟁조정협의회 <span>(예정)</span></h2>
<button type="button" class="btn_plus"><i></i></button>
</div>
<ul class="box_list">
<li>
<a href="#">
<span class="list_title">· 하도2024-0005</span>
<span class="list_writer">상호명</span>
<span class="list_date">2024.11.11</span>
</a>
</li>
<li>
<a href="#">
<span class="list_title">· 하도2024-0005</span>
<span class="list_writer">상호명</span>
<span class="list_date">2024.11.11</span>
</a>
</li>
<li>
<a href="#">
<span class="list_title">· 하도2024-0005</span>
<span class="list_writer">상호명</span>
<span class="list_date">2024.11.11</span>
</a>
</li>
<li>
<a href="#">
<span class="list_title">· 하도2024-0005</span>
<span class="list_writer">상호명</span>
<span class="list_date">2024.11.11</span>
</a>
</li>
<li>
<a href="#">
<span class="list_title">· 하도2024-0005</span>
<span class="list_writer">상호명</span>
<span class="list_date">2024.11.11</span>
</a>
</li>
</ul>
</div>
</div>
</div>

41
src/main/webapp/kofair_case_seed/adm/style/index.css
View File

@ -0,0 +1,41 @@
@charset "utf-8";
.wrap.main{min-height:100vh;}
.main .box_wrap{display:flex;flex-wrap:wrap;gap:40px;}
.main .box{border:5px solid #f4f5fb;border-radius:10px;;}
.main .width3{width:calc((100% / 3) - 27px);}
.main .width2{width:calc((100% / 2) - 20px);}
.main .title{display:flex;height:50px;padding:0 25px;font-size:20px;font-weight:bold;color:#2b3db9;border-bottom:1px solid #f4f5f6;justify-content:space-between;align-items:center;}
.main .title span{font-size:18px;font-weight:400;}
.main .btn_plus{width:26px;height:26px;border:1px solid #d5d5d5;border-radius:5px;}
.main .btn_plus i{display:inline-block;width:100%;height:100%;background:url(/kofair_case_seed/adm/images/main/icon_plus.png) no-repeat center center;}
.main .box_list{display:flex;padding:20px 25px;flex-direction:column;gap:18px;}
.main .box_list a{display:flex;font-size:16px;font-weight:300;color:#666;gap:3px;transition:all 0.3s;}
.main .box_list a:hover{text-decoration:underline;text-underline-offset:3px;transition:all 0.3s;}
.main .box_list span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.main .box_list .list_title{width:calc(100% - 160px);font-weight:400;color:#222;}
.main .box_list .list_writer{width:60px;}
.main .box_list .list_date{width:100px;text-align:right;}
.main .quick_area{display:inline-flex;flex-wrap:wrap;border:0;gap:20px;}
.main .quick_area a{position:relative;width:calc((100% - 20px)/2);height:calc((100% - 20px)/2);padding:25px;color:#fff;border-radius:10px;transition:all 0.3s;}
.main .quick_area a::after{position:absolute;content:"";width:85px;height:85px;background:#fff;border-radius:100%;right:-6px;bottom:-17px;opacity:0.2;}
.main .quick_area a::before{position:absolute;content:"";width:85px;height:85px;}
.main .quick_area a.bg_7990c3::before{background:url(/kofair_case_seed/adm/images/main/icon_1.png) no-repeat center center;right:-4px;bottom:-14px;}
.main .quick_area a.bg_474b5e::before{background:url(/kofair_case_seed/adm/images/main/icon_2.png) no-repeat center center;right:-4px;bottom:-14px;}
.main .quick_area a.bg_171c70::before{background:url(/kofair_case_seed/adm/images/main/icon_3.png) no-repeat center center;right:-4px;bottom:-10px;}
.main .quick_area a.bg_04b5a5::before{background:url(/kofair_case_seed/adm/images/main/icon_4.png) no-repeat center center;right:-6px;bottom:-12px;}
.main .quick_area a:hover{transition:all 0.3s;}
.main .quick_area a.bg_7990c3:hover{box-shadow:0 0 9px rgba(121,144,195,0.5);}
.main .quick_area a.bg_474b5e:hover{box-shadow:0 0 9px rgba(71,75,94,0.5);}
.main .quick_area a.bg_171c70:hover{box-shadow:0 0 9px rgba(23,28,112,0.5);}
.main .quick_area a.bg_04b5a5:hover{box-shadow:0 0 9px rgba(4,181,165,0.5);}
.main .quick_area .bg_7990c3{background:#7990c3;}
.main .quick_area .bg_474b5e{background:#474b5e;}
.main .quick_area .bg_171c70{background:#171c70;}
.main .quick_area .bg_04b5a5{background:#04b5a5;}
.main .quick_area .quick_title{font-size:20px;font-weight:bold;}
.main .quick_area .baro_text{position:absolute;font-size:14px;left:25px;bottom:25px;}
.main .quick_area .baro_text i{display:inline-block;width:20px;height:11px;background:url(/kofair_case_seed/adm/images/main/icon_baro.png) no-repeat center center;}

77
src/main/webapp/kofair_case_seed/usr/identification/popup/idf_popup.html Normal file
View File

@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>한국공정거래조정원 온라인분쟁조정시스템 > 마이페이지 > 본인인증 > 네이버 간편인증</title>
<!-- css -->
<link rel="stylesheet" href="/kofair_case_seed/css/reset.css">
<link rel="stylesheet" href="/kofair_case_seed/css/font.css">
<link rel="stylesheet" href="/kofair_case_seed/usr/style/common.css">
<link rel="stylesheet" href="/kofair_case_seed/usr/style/layout.css">
<link rel="stylesheet" href="/kofair_case_seed/usr/style/style.css">
<link rel="stylesheet" href="/kofair_case_seed/usr/style/popup.css">
<!-- js -->
<script src="/kofair_case_seed/script/lib/jquery-3.5.0.js"></script>
<script src="/kofair_case_seed/usr/scripts/common.js"></script>
<script src="/kofair_case_seed/usr/scripts/layout.js"></script>
<script src="/kofair_case_seed/usr/scripts/ui.js"></script>
<script src="/kofair_case_seed/usr/scripts/popup.js"></script>
</head>
<body>
<div class="window_popup idf" style="width:700px">
<div class="title_area">
<h1>네이버 간편인증</h1>
</div>
<div class="cont_area">
<div class="table_type_rows">
<table>
<colgroup>
<col style="width:200px;">
<col style="width:auto;">
</colgroup>
<tbody>
<tr>
<th>이름</th>
<td><input type="text" class="input_text w100per" placeholder="이름"></td>
</tr>
<tr>
<th>휴대전화</th>
<td><input type="text" class="input_text w100per" placeholder="본인명의 휴대전화번호(숫자만 입력)"></td>
</tr>
<tr>
<th>생년월일</th>
<td><input type="text" class="input_text w100per" placeholder="생년월일 8자리(19990101)"></td>
</tr>
</tbody>
</table>
</div>
<ul class="agree_box_area">
<li>
<div class="checkbox_wrap">
<input type="checkbox" id="agree_01"><label for="agree_01">개인정보 수집 및 이용동의 <span class="color_red">(필수)</span></label>
</div>
<button type="button" class="btn btn_35 btn_text darkgray_border">자세히보기</button>
</li>
<li>
<div class="checkbox_wrap">
<input type="checkbox" id="agree_02"><label for="agree_02">제3자 정보 제공 동의 <span class="color_red">(필수)</span></label>
</div>
<button type="button" class="btn btn_35 btn_text darkgray_border">자세히보기</button>
</li>
</ul>
<div class="btn_wrap center">
<button type="button" class="btn btn_40 btn_text gray_fill" onclick="self.close();">취소</button>
<button type="button" class="btn btn_40 btn_text darkblue_fill">인증요청</button>
</div>
</div>
</div>
</body>
</html>

48
src/main/webapp/kofair_case_seed/usr/identification/popup/idf_process_popup.html Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>한국공정거래조정원 온라인분쟁조정시스템 > 마이페이지 > 본인인증 > 네이버 간편인증</title>
<!-- css -->
<link rel="stylesheet" href="/kofair_case_seed/css/reset.css">
<link rel="stylesheet" href="/kofair_case_seed/css/font.css">
<link rel="stylesheet" href="/kofair_case_seed/usr/style/common.css">
<link rel="stylesheet" href="/kofair_case_seed/usr/style/layout.css">
<link rel="stylesheet" href="/kofair_case_seed/usr/style/style.css">
<link rel="stylesheet" href="/kofair_case_seed/usr/style/popup.css">
<!-- js -->
<script src="/kofair_case_seed/script/lib/jquery-3.5.0.js"></script>
<script src="/kofair_case_seed/usr/scripts/common.js"></script>
<script src="/kofair_case_seed/usr/scripts/layout.js"></script>
<script src="/kofair_case_seed/usr/scripts/ui.js"></script>
<script src="/kofair_case_seed/usr/scripts/popup.js"></script>
</head>
<body>
<div class="window_popup idf" style="width:700px">
<div class="title_area">
<h1>네이버 간편인증</h1>
</div>
<div class="cont_area text_center">
<p class="title gMarket_bold"><i class="icon lock"></i> 인증을 진행해주세요.</p>
<div class="box gray_fill">
입력하신 휴대폰으로 인증 요청 메시지를 보냈습니다.<br>
앱에서 인증을 진행해 주세요.
</div>
<div class="btn_wrap center">
<button type="button" class="btn btn_40 btn_text gray_fill" onclick="self.close();">취소</button>
<button type="button" class="btn btn_40 btn_text darkblue_fill">인증요청</button>
</div>
</div>
</div>
</body>
</html>

BIN
src/main/webapp/kofair_case_seed/usr/images/component/icon_lock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 751 B

12
src/main/webapp/kofair_case_seed/usr/style/popup.css
View File

@ -45,6 +45,18 @@
.type_popup .box.white_fill .gray_fill.gray_border{margin:0 0 0 -20px;padding:10px 10px 10px 20px;}
.type_popup .box.white_fill>dd:last-child{margin:0;}
/* 간편인증 팝업 */
.idf.window_popup .title_area{display:flex;width:100%;height:50px;font-size:1.9rem;font-weight:bold;color:#fff;padding:0 20px;background:#2870ed;align-items:center;}
.idf.window_popup .cont_area{padding:30px;}
.idf.window_popup .agree_box_area{display:flex;margin:17px 0 0 0;flex-direction:column;gap:11px;}
.idf.window_popup .agree_box_area li{display:flex;padding:11px 17px;background:#f4f5f7;border-radius:5px;justify-content:space-between;align-items:center;}
.idf.window_popup .checkbox_wrap{display:flex;align-items:center;gap:8px;}
.idf.window_popup input[type="checkbox"]{width:18px;height:18px;}
.idf.window_popup input[type="checkbox"]+label{font-size:1.7rem;}
.idf.window_popup .btn_wrap button{width:100px;}
.idf.window_popup .title.gMarket_bold{font-size:2.8rem;}
.idf.window_popup .lock{width:28px;height:35px;background:url(/kofair_case_seed/usr/images/component/icon_lock.png) no-repeat center;margin:0 9px 0 0;vertical-align:sub;}
/* ==================== 모바일 ==================== */
@media screen and (max-width: 767px){
.popup_wrap{min-width:90%; width:90% !important;left:50% !important;top:50% !important;transform:translate(-50%,-50%) !important;}