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

Merge branch 'sub'

Browse Source
This commit is contained in:
subsub8729 2022-09-15 16:30:30 +09:00
commit 6486168898
4 changed files with 156 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/main/webapp/kccadrPb/usr/css/main.css
View File

@ -37,16 +37,16 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro
.baro_cont i{position: relative; width: 60px; height: 60px; display: block; background-repeat: no-repeat; background-position: center; background-size: contain; margin: 18px auto 20px auto; position: relative; transition: background-image 0.3s ease-in-out;} .baro_cont i{position: relative; width: 60px; height: 60px; display: block; background-repeat: no-repeat; background-position: center; background-size: contain; margin: 18px auto 20px auto; position: relative; transition: background-image 0.3s ease-in-out;}
.baro_cont p{position: relative;} .baro_cont p{position: relative;}
.baro_cont a:nth-child(2) i{background-image: url(/kccadrPb/usr/image/main/icon_baro01.png);} .baro_cont a:nth-child(1) i{background-image: url(/kccadrPb/usr/image/main/icon_baro01.png);}
.baro_cont a:nth-child(2).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro01_hover.png);} .baro_cont a:nth-child(1).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro01_hover.png);}
.baro_cont a:nth-child(3) i{background-image: url(/kccadrPb/usr/image/main/icon_baro02.png);} .baro_cont a:nth-child(2) i{background-image: url(/kccadrPb/usr/image/main/icon_baro02.png);}
.baro_cont a:nth-child(3).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro02_hover.png);} .baro_cont a:nth-child(2).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro02_hover.png);}
.baro_cont a:nth-child(4) i{background-image: url(/kccadrPb/usr/image/main/icon_baro03.png);} .baro_cont a:nth-child(3) i{background-image: url(/kccadrPb/usr/image/main/icon_baro03.png);}
.baro_cont a:nth-child(4).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro03_hover.png);} .baro_cont a:nth-child(3).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro03_hover.png);}
.baro_cont a:nth-child(5) i{background-image: url(/kccadrPb/usr/image/main/icon_baro04.png);} .baro_cont a:nth-child(4) i{background-image: url(/kccadrPb/usr/image/main/icon_baro04.png);}
.baro_cont a:nth-child(5).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro04_hover.png);} .baro_cont a:nth-child(4).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro04_hover.png);}
.baro_cont a:nth-child(6) i{background-image: url(/kccadrPb/usr/image/main/icon_baro05.png);} .baro_cont a:nth-child(5) i{background-image: url(/kccadrPb/usr/image/main/icon_baro05.png);}
.baro_cont a:nth-child(6).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro05_hover.png);} .baro_cont a:nth-child(5).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro05_hover.png);}
.baro_cont.experience_cont a i{width: 48px;} .baro_cont.experience_cont a i{width: 48px;}
.baro_cont.experience_cont a:nth-child(2) i{background-image: url(/kccadrPb/usr/image/main/icon_baro06.png);} .baro_cont.experience_cont a:nth-child(2) i{background-image: url(/kccadrPb/usr/image/main/icon_baro06.png);}
@ -61,10 +61,11 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro
.baro_cont.experience_cont a:nth-child(6).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro10_hover.png);} .baro_cont.experience_cont a:nth-child(6).on i{background-image: url(/kccadrPb/usr/image/main/icon_baro10_hover.png);}
.mask{position: fixed; display: none; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,0.5); z-index: 25;} .mask{position: fixed; display: none; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,0.5); z-index: 25;}
.tooltip_type01{position: absolute; display: none; justify-content: space-between; align-items: center; width: 320%; top: -40px; left: calc(100% + 20px); background-color: #fff; padding: 30px 30px 30px 42px; box-sizing: border-box; z-index: 99; border-radius: 5px; line-height: 1.3; box-shadow: 4px 8px 8px rgba(0,0,0,0.2); color: #222; text-align: left;} .tooltip_box{position: absolute; display: none; background-color: transparent; top: -100px; left: -10px; width: 500%; height: calc(100% - 30px); z-index: 30;}
.baro_cont a:nth-child(4) .tooltip_type01{top: -140px; left: 0;} .tooltip_type01{display: inline-flex; justify-content: space-between; align-items: center; background-color: #fff; padding: 30px 30px 30px 42px; box-sizing: border-box; z-index: 99; border-radius: 5px; line-height: 1.3; box-shadow: 4px 8px 8px rgba(0,0,0,0.2); color: #222; text-align: left; margin-left: 60px;}
.baro_cont a:nth-child(5) .tooltip_type01{left: calc(-320%);} .baro_cont a:nth-child(4) .tooltip_box{left: -10px; width: 400%;}
.baro_cont a:nth-child(6) .tooltip_type01{left: calc(-320%);} .baro_cont a:nth-child(5) .tooltip_box{left: auto; right: -10px;}
.baro_cont a:nth-child(6) .tooltip_box{left: auto; right: -10px;}
.tooltip_type01>*{display: inline-block; vertical-align: middle;} .tooltip_type01>*{display: inline-block; vertical-align: middle;}
.tooltip_tit01{font-size: 22px;} .tooltip_tit01{font-size: 22px;}
.tooltip_tit02{font-size: 16px; margin-top: 10px;} .tooltip_tit02{font-size: 16px; margin-top: 10px;}
@ -195,7 +196,7 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro
.baro_cont a::before{width: calc(100% + 10px); height: calc(100% + 10px);} .baro_cont a::before{width: calc(100% + 10px); height: calc(100% + 10px);}
.baro_cont i{width: 45px; height: 45px; margin: 15px auto;} .baro_cont i{width: 45px; height: 45px; margin: 15px auto;}
.tooltip_type01{position: fixed; max-width: 100%; width: calc(100% - 30px); left: 50% !important; top: 260px;transform: translateX(-50%);} .tooltip_box{position: fixed; max-width: 100%; width: calc(100% - 30px); height: 326px; left: 50% !important; top: 260px;transform: translateX(-50%);}
.baro_cont a:nth-child(4) .tooltip_type01{top: 260px;} .baro_cont a:nth-child(4) .tooltip_type01{top: 260px;}
/* //바로가기 */ /* //바로가기 */
@ -259,13 +260,13 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro
@media all and (max-width: 840px){ @media all and (max-width: 840px){
.tooltip_tit01{font-size: 18px; font-weight: 500;} .tooltip_tit01{font-size: 18px; font-weight: 500;}
.tooltip_tit02{font-size: 14px;} .tooltip_tit02{font-size: 14px;}
.tooltip_type01 button{margin-top: 16px; margin-left: 0;} .tooltip_box button{margin-top: 16px; margin-left: 0;}
} }
@media all and (max-width: 700px){ @media all and (max-width: 700px){
.tooltip_type01 .text_area{width: 100%; display: block;text-align: center;} .tooltip_type01 .text_area{width: 100%; display: block;text-align: center;}
.tooltip_type01 button{float: none; display: block; text-align: center; margin: 20px auto 0;} .tooltip_type01 button{float: none; display: block; text-align: center; margin: 20px auto 0;}
.tooltip_type01{top: 200px;} .tooltip_box{top: 200px;}
} }
@media all and (max-width: 640px){ @media all and (max-width: 640px){
@ -291,7 +292,7 @@ main{width: 100%; height: 100%; margin-top: 135px; padding-bottom: 90px; backgro
/* //팝업존 */ /* //팝업존 */
.mask{background-color: transparent; z-index: -1;} .mask{background-color: transparent; z-index: -1;}
.tooltip_type01{display: none !important;} .tooltip_box{display: none !important;}
} }
@media all and (max-width: 530px){ @media all and (max-width: 530px){

82
src/main/webapp/kccadrPb/usr/guide2022.html Normal file
View File

@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가이드</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
* {padding: 0;margin: 0;text-decoration: none;color: inherit;font-family: 'Noto Sans KR', sans-serif;}
ul,li {list-style: none;}
body {padding: 50px;}
.tab {display: flex;}
.tab li {border: 1px solid #d5d5d5;width: 150px;text-align: center;padding: 10px 0;margin-right: 10px;}
.wrap {display: flex;}
.area_left,.area_right {width: 50%;}
.area_right div {min-height: 50%;}
.menu {max-width: 1200px;margin: 0 auto;margin-bottom: 15px;}
.menu_tit {font-weight: 700;font-size: 16px;letter-spacing: -0.5px;max-width: 1200px;margin-top: 20px;margin-bottom: 10px;text-align: left;}
.dep01 li {position: relative;}
.dep01 li::after {position: absolute;content: "-";left: 10px;}
.dep01 li a {padding-left: 20px;font-size: 15px;}
.dep01 li p {display: inline-block;padding-left: 20px;font-size: 15px;}
.dep02 {padding-left: 20px;}
.dep02 li::after {position: absolute;content: "·";left: 0px;}
.dep02 li a {padding-left: 15px;font-size: 15px;}
</style>
</head>
<body>
<ul class="tab">
<li><a href="/kccadrPb/usr/guide.html"><font style="color: red;">사용자 퍼블목록</font></a></li>
<li><a href="/kccadrPb/adm/guide.html">관리자 퍼블목록</a></li>
</ul>
<div class="wrap">
<div class="area_left">
<a href="/kccadrPb/usr/index.html">
<p class="menu_tit">메인</p>
</a>
<div class="menu">
<ul class="dep01">
<li><a href="#">XX 목록(완료 8.13)</a></li>
<li><a href="#">XX 상세(작업중)</a></li>
<li><a href="/kccadrPb/usr/index2.html">메인 체험하기(수정 9.15)</a></li>
<li><a href="/kccadrPb/usr/sub02_1_04.html">신청취지/원인 (수정 9.15)</a></li>
</ul>
<p class="menu_tit">남은내역</p>
<div class="menu">
<ul class="dep01">
<!-- <li><a href="#">이용안내(예정)</a></li>
<li><a href="#">조정안내(예정)</a></li> -->
</ul>
</div>
</div>
</div>
<div class="area_right">
<div><b>* 완료시 요청자가 내용 삭제</b>
<div><b>개발자 요청사항</b>
<ul class="dep01">
<li>
<p>
xx 요청드려요~(요청 8.13 여현준)
</p>
</li>
</ul>
</div>
<div><b>퍼블리셔 요청사항</b>
<ul class="dep01">
<li>
<p>
xx 확인 및 XX 부탁드려요~(요청 8.13 정수빈)
</p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

90
src/main/webapp/kccadrPb/usr/index2.html
View File

@ -260,71 +260,81 @@
<div class="mask"></div> <div class="mask"></div>
<a href="/" title="접수 페이지 바로가기"><i></i> <a href="/" title="접수 페이지 바로가기"><i></i>
<p>접수</p> <p>접수</p>
<div class="tooltip_type01"> <div class="tooltip_box">
<div class="text_area"> <div class="tooltip_type01">
<p class="tooltip_tit01"> <div class="text_area">
조정사건을 신청하는 기능<br> <p class="tooltip_tit01">
사건 유형별, 사건정보를 등록하여 조정신청을 진행 조정사건을 신청하는 기능<br>
</p> 사건 유형별, 사건정보를 등록하여 조정신청을 진행
<p class="tooltip_tit02">정보등록, 불러오기, 제출하기 기능 제공</p> </p>
<p class="tooltip_tit02">정보등록, 불러오기, 제출하기 기능 제공</p>
</div>
<button type="button" title="페이지 이동">전자조정 등록</button>
</div> </div>
<button type="button" title="페이지 이동">전자조정 등록</button>
</div> </div>
</a> </a>
<a href="/" title="기일지정 페이지 바로가기"><i></i> <a href="/" title="기일지정 페이지 바로가기"><i></i>
<p>기일지정</p> <p>기일지정</p>
<div class="tooltip_type01"> <div class="tooltip_box">
<div class="text_area"> <div class="tooltip_type01">
<p class="tooltip_tit01"> <div class="text_area">
조정사건을 신청하는 기능<br> <p class="tooltip_tit01">
사건 유형별, 사건정보를 등록하여 조정신청을 진행 조정사건을 신청하는 기능<br>
</p> 사건 유형별, 사건정보를 등록하여 조정신청을 진행
<p class="tooltip_tit02">정보등록, 불러오기, 제출하기 기능 제공</p> </p>
<p class="tooltip_tit02">정보등록, 불러오기, 제출하기 기능 제공</p>
</div>
<button type="button" title="페이지 이동">전자조정 등록</button>
</div> </div>
<button type="button" title="페이지 이동">전자조정 등록</button>
</div> </div>
</a> </a>
<a href="/" title="기일개최 페이지 바로가기"><i></i> <a href="/" title="기일개최 페이지 바로가기"><i></i>
<p>기일개최</p> <p>기일개최</p>
<div class="tooltip_type01"> <div class="tooltip_box">
<div class="text_area"> <div class="tooltip_type01">
<p class="tooltip_tit01"> <div class="text_area">
조정사건을 신청하는 기능<br> <p class="tooltip_tit01">
사건 유형별, 사건정보를 등록하여 조정신청을 진행 조정사건을 신청하는 기능<br>
</p> 사건 유형별, 사건정보를 등록하여 조정신청을 진행
<p class="tooltip_tit02">정보등록, 불러오기, 제출하기 기능 제공</p> </p>
<p class="tooltip_tit02">정보등록, 불러오기, 제출하기 기능 제공</p>
</div>
<button type="button" title="페이지 이동">전자조정 등록</button>
</div> </div>
<button type="button" title="페이지 이동">전자조정 등록</button>
</div> </div>
</a> </a>
<a href="/" title="조정중 페이지 바로가기"><i></i> <a href="/" title="조정중 페이지 바로가기"><i></i>
<p>조정중</p> <p>조정중</p>
<div class="tooltip_type01"> <div class="tooltip_box">
<div class="text_area"> <div class="tooltip_type01">
<p class="tooltip_tit01"> <div class="text_area">
조정사건을 신청하는 기능<br> <p class="tooltip_tit01">
사건 유형별, 사건정보를 등록하여 조정신청을 진행 조정사건을 신청하는 기능<br>
</p> 사건 유형별, 사건정보를 등록하여 조정신청을 진행
<p class="tooltip_tit02">정보등록, 불러오기, 제출하기 기능 제공</p> </p>
<p class="tooltip_tit02">정보등록, 불러오기, 제출하기 기능 제공</p>
</div>
<button type="button" title="페이지 이동">전자조정 등록</button>
</div> </div>
<button type="button" title="페이지 이동">전자조정 등록</button>
</div> </div>
</a> </a>
<a href="/" title="종료 페이지 바로가기"><i></i> <a href="/" title="종료 페이지 바로가기"><i></i>
<p>종료</p> <p>종료</p>
<div class="tooltip_type01"> <div class="tooltip_box">
<div class="text_area"> <div class="tooltip_type01">
<p class="tooltip_tit01"> <div class="text_area">
조정사건을 신청하는 기능<br> <p class="tooltip_tit01">
사건 유형별, 사건정보를 등록하여 조정신청을 진행 조정사건을 신청하는 기능<br>
</p> 사건 유형별, 사건정보를 등록하여 조정신청을 진행
<p class="tooltip_tit02">정보등록, 불러오기, 제출하기 기능 제공</p> </p>
<p class="tooltip_tit02">정보등록, 불러오기, 제출하기 기능 제공</p>
</div>
<button type="button" title="페이지 이동">전자조정 등록</button>
</div> </div>
<button type="button" title="페이지 이동">전자조정 등록</button>
</div> </div>
</a> </a>

10
src/main/webapp/kccadrPb/usr/script/main.js
View File

@ -26,17 +26,17 @@ $(document).ready(function () {
if($(this).siblings().is("on") == false){ if($(this).siblings().is("on") == false){
$(this).addClass("on"); $(this).addClass("on");
$(".mask").show(); $(".mask").show();
$(this).children(".tooltip_type01").show(); $(this).children(".tooltip_box").show();
$(this).siblings().removeClass("on"); $(this).siblings().removeClass("on");
$(this).next().siblings(".tooltip_type01").hide() $(this).next().siblings(".tooltip_box").hide()
}else{} }else{}
}); });
$(".tooltip_type01").mouseleave(function(){ $(".tooltip_box, .baro_cont a").mouseleave(function(){
$(".tooltip_type01").hide(); $(".tooltip_box").hide();
$(".mask").hide(); $(".mask").hide();
$(".baro_cont a").removeClass("on"); $(".baro_cont a").removeClass("on");
}); })
}); });
function main_visual() { function main_visual() {