2024/12/03 모바일 사용자화면 css 수정

This commit is contained in:
subsub 2024-12-03 11:44:10 +09:00
parent e1360bc23e
commit 4dc826ac8b
11 changed files with 63 additions and 46 deletions

View File

@ -33,8 +33,8 @@
<li>
<p class="title depth03 blue_border">분쟁조정 신청 유형을 잘 모르시겠다면 하단의 안내를 확인하시거나, 신청 전 상담을 받아보시기 바랍니다.</p>
<div class="btn_wrap left">
<button type="button" class="btn btn_text btn_35 skyblue_fill">분쟁조정 대상 유형 알아보기</button>
<button type="button" class="btn btn_text btn_35 skyblue_fill">분쟁조정 사례 확인하기</button>
<button type="button" class="btn btn_text btn_35 skyblue_fill" onclick="location.href='/web/content.do?proFn=9989110'">분쟁조정 대상 유형 알아보기</button>
<button type="button" class="btn btn_text btn_35 skyblue_fill" onclick="location.href='/web/user/exam/case/402/162/exam402List.do'">분쟁조정 사례 확인하기</button>
</div>
</li>
<li>

View File

@ -105,7 +105,7 @@
</div>
<div class="bbs-view-item">
<p class="item-title"><span style="color: red">*</span> 성별</p>
<div class="item-box">
<div class="item-box input_box">
<label><input type="radio" name="joinGender" value="M" <c:if test="${memberInfo.MEMBER_ITEM_B2 == 'M'}">checked="checked"</c:if>>남</label>
<label><input type="radio" name="joinGender" value="F" <c:if test="${memberInfo.MEMBER_ITEM_B2 == 'F'}">checked="checked"</c:if>>여</label>
</div>
@ -477,7 +477,7 @@
var url = "/user/case/common/ajax/MemberDept.do";
XHR(url, param, function(r){
$.each(r.data, function(k,v) {
$("#changePartDiv").append('<label><input type="checkbox" name="changeParts" style="position: relative; margin-top: -3px !important; vertical-align: middle !important;" value="'+v.code+'">'+v.value+'</label>&nbsp;&nbsp;&nbsp;');
$("#changePartDiv").append('<label><input type="checkbox" name="changeParts" style="position: relative; margin-top: -3px !important; vertical-align: middle !important;" value="'+v.code+'">'+v.value+'</label>');
if(k == 6) {
$("#changePartDiv").append('<br/>');

View File

@ -106,7 +106,7 @@
</div>
<div class="bbs-view-item">
<p class="item-title"><span style="color: red">*</span> 성별</p>
<div class="item-box">
<div class="item-box input_box">
<label><input type="radio" name="joinGender" value="M" checked="checked">남</label>
<label><input type="radio" name="joinGender" value="F">여</label>
</div>
@ -421,7 +421,7 @@
var url = "/user/case/common/ajax/MemberDept.do";
XHR(url, param, function(r){
$.each(r.data, function(k,v) {
$("#changePartDiv").append('<label><input type="checkbox" name="changeParts" style="position: relative; margin-top: -3px !important; vertical-align: middle !important;" value="'+v.code+'">'+v.value+'</label>&nbsp;&nbsp;&nbsp;');
$("#changePartDiv").append('<label><input type="checkbox" name="changeParts" style="position: relative; margin-top: -3px !important; vertical-align: middle !important;" value="'+v.code+'">'+v.value+'</label>');
if(k == 6) {
$("#changePartDiv").append('<br/>');

View File

@ -1676,7 +1676,7 @@ function showConsignmentGubun(){
</c:forEach>
</c:if>
<c:if test="${empty applcntData}">
<div class="bbs-view-item" align="center" style="border-top:2px solid #222;">
<div class="bbs-view-item" align="center" style="display:flex;justify-content:center;align-items:center;border-top:2px solid #222;">
등록된 데이터가 없습니다.
</div>
</c:if>
@ -1782,7 +1782,7 @@ function showConsignmentGubun(){
</c:if>
<c:if test="${empty applcntData}">
<div class="bbs-view-item" align="center" style="border-top:2px solid #222;">
<div class="bbs-view-item" align="center" style="display:flex;justify-content:center;align-items:center;border-top:2px solid #222;">
등록된 데이터가 없습니다.
</div>
</c:if>
@ -1910,7 +1910,7 @@ function showConsignmentGubun(){
</c:if>
<c:if test="${empty respondentData}">
<div class="bbs-view-item" align="center" style="border-top:2px solid #222;">
<div class="bbs-view-item" align="center" style="display:flex;justify-content:center;align-items:center;border-top:2px solid #222;">
등록된 데이터가 없습니다.
</div>
</c:if>
@ -2016,7 +2016,7 @@ function showConsignmentGubun(){
</c:if>
<c:if test="${empty selectResagent}">
<c:if test="${empty respondentData}">
<div class="bbs-view-item" align="center" style="border-top:2px solid #222;">
<div class="bbs-view-item" align="center" style="display:flex;justify-content:center;align-items:center;border-top:2px solid #222;">
등록된 데이터가 없습니다.
</div>
</c:if>

View File

@ -73,6 +73,7 @@ content="default-src * self blob: data: gap:; style-src * self 'unsafe-inline' b
<c:if test="${
fn:contains(URL, '/web/user')
&& fn:contains(URL, 'mediationStep')
|| fn:contains(URL, '/web/user/mediation/case/01/154/mediationApp.do')
&& fn:contains(URL, '.do')
}">
<link rel="stylesheet" href="/kofair_case_seed/usr/style/popup.css">

View File

@ -51,10 +51,12 @@ function header() {
// 전체메뉴
$(".btn_all_menu").click(function(){
$(".full_all_menu").addClass("active");
$("body,html").css("overflow","hidden");
});
$(".full_all_menu .btn_menu_close").click(function(){
$(".full_all_menu").removeClass("active");
$("body,html").removeAttr("style");
})
// ================= 모바일 header =================

View File

@ -153,10 +153,10 @@ input:disabled, input:read-only{background:#f8f9fa;border:1px solid #d8d8d8;}
:not(.window_popup.idf) .btn{border-radius:10px;}
:not(.window_popup.idf) .btn:hover{box-shadow:none;}
:not(.window_popup.idf) .btn_35{height:70px;font-size:3.2rem;padding:0 50px;}
:not(.window_popup.idf) .btn_40{height:80px;font-size:3.4rem;padding:0 38px;}
:not(.window_popup.idf) .btn_45{height:90px;font-size:3.4rem;padding:0 36px;}
:not(.window_popup.idf) .btn_50{height:100px;font-size:4rem;}
:not(.window_popup.idf) .btn_35{min-height:70px;font-size:3.2rem;padding:0 50px;}
:not(.window_popup.idf) .btn_40{min-height:80px;font-size:3.4rem;padding:0 38px;}
:not(.window_popup.idf) .btn_45{min-height:90px;font-size:3.4rem;padding:0 36px;}
:not(.window_popup.idf) .btn_50{min- height:100px;font-size:4rem;}
/* 노출/숨김 */
@ -199,11 +199,11 @@ input:disabled, input:read-only{background:#f8f9fa;border:1px solid #d8d8d8;}
@media screen and (max-width: 767px){
/* 버튼 */
:not(.window_popup.idf) .btn{border-radius:5px;}
:not(.window_popup.idf) .btn_35{height:35px;font-size:1.6rem;padding:0 25px;}
:not(.window_popup.idf) .btn_40{height:40px;font-size:1.7rem;padding:0 18px;}
:not(.window_popup.idf) .btn_45{height:45px;font-size:1.7rem;padding:0 18px;}
:not(.window_popup.idf) .btn_50{height:50px;font-size:2rem;}
:not(.window_popup.idf) .btn{border-radius:5px;height:auto;}
:not(.window_popup.idf) .btn_35{min-height:35px;font-size:1.6rem;padding:0 25px;}
:not(.window_popup.idf) .btn_40{min-height:40px;font-size:1.7rem;padding:0 18px;}
:not(.window_popup.idf) .btn_45{min-height:45px;font-size:1.7rem;padding:0 18px;}
:not(.window_popup.idf) .btn_50{min-height:50px;font-size:2rem;}
/* input, select, textarea */
:not(.window_popup.idf) .input_text, .input_calendar .duet-date__input{height:40px;font-size:1.7rem;border-radius:5px;padding:0 10px;}

View File

@ -286,7 +286,7 @@
/* //바로가기 */
/* 사례 */
.case_content{padding:30px 0 0 0;}
.case_content{padding:30px 0 26px 0;}
.case_content .title_wrap{margin:0 0 17px 0;}
.case_content .title{font-size:1.9rem;}
.case_content .title .btn_plus,.case_content .case_slide_util .btn.only_icon{width:30px;height:30px;padding:0;}
@ -309,7 +309,7 @@
.notice_content .tab:first-child::after{width:4px;height:4px;right:-2px;}
.notice_content .tab:first-child{padding:0 13px 0 0;}
.notice_content .tab_content.active{height:200px;margin:22.5px 0 0 0;}
.notice_content .tab_content .btn_plus{width:30px;height:30px;left:218px;top:15px;}
.notice_content .tab_content .btn_plus{width:30px;height:30px;left:218px;top:15px;padding:0;}
.notice_content .tab_content .btn_plus .icon.plus{background-size:100%;margin:0;;}
.notice_content a{font-size:1.7rem;padding:0 0 15px 8px;}
.notice_content a::after{width:3px;height:3px;top:10.5px;}
@ -338,7 +338,7 @@
/* 배너 */
.banner_contents .case_slide_util{margin:20px 0 0 0;}
.banner_contents .case_slide_util .btn.only_icon{width:30px;height:30px;}
.banner_contents .case_slide_util .btn.only_icon{width:30px;height:30px;padding:0;}
.banner_contents .btn.only_icon .icon.left, .banner_contents .btn.only_icon .icon.pause, .banner_contents .btn.only_icon .icon.right{width:100%;height:30px;background-size:100%;}
/* //배너 */
}

View File

@ -63,7 +63,7 @@ html{font-size:62.5%;}
.full_all_menu .nav::after{position:absolute;content:"";width:100%;height:4px;background:#2e40ba;top:80px;}
.full_all_menu .menu_ul li{width:calc(100%/5);height:auto;text-align:center;}
.full_all_menu .menu_title{display:flex;width:100%;height:80px;font-size:23px;font-weight:bold;color:#333;justify-content:center;align-items:center;}
.full_all_menu .depth02_ul{display:flex;height:calc(100% - 95px);padding:32px 0 35px 30px;border-right:1px solid #d8d8d8;flex-direction:column;gap:25px;}
.full_all_menu .depth02_ul{display:flex;height:calc(100% - 95px);padding:32px 0 35px 30px;border-right:1px solid #d8d8d8;flex-direction:column;gap:20px;}
.full_all_menu li:last-child .depth02_ul{border-right:0;}
.full_all_menu .depth02_ul li{width:100%;text-align:left;}
.full_all_menu .depth02{display:flex;font-size:21px;font-weight:500;color:#333;align-items:center;}
@ -171,9 +171,15 @@ html{font-size:62.5%;}
.mobile_header{height:63px;padding:0 30px;}
.mobile_header .logo{width:55%;}
.mobile_header .header_util button{width:30px;height:30px;}
.mobile_header .header_util{gap:11px;}
.mobile_header .header_util button{width:30px;height:20px;height:auto !important;max-height:30px;}
.mobile_header .header_util button i{height:100%;background-size:auto 100%;}
.mobile_header .header_util .btn_menu i{background-size:100% auto;}
/* .mobile_header .header_util .btn_menu i{background-size:auto ;} */
.mobile_header .search_area{height:60px;bottom:-60px;}
.mobile_header .search_area .input_search{width:calc(100% - 75px);height:40px;padding:0 15px;font-size:1.5rem;}
.mobile_header .search_area .btn_search{width:60px;height:40px;border-radius:5px;}
.mobile_header .search_area .btn_search i{width:40px;height:40px;background-size:23px;}
.mobile_header .all_menu_wrap .btn_menu_close{width:32px;height:32px;}
.mobile_header .all_menu_wrap .btn_menu_close i{background-size:100% auto;}
@ -213,3 +219,7 @@ html{font-size:62.5%;}
/* //footer */
}
@media screen and (max-width: 500px){
.mobile_header{padding:0 15px;}
}

View File

@ -73,7 +73,7 @@
.page a{display:flex;width:40px;height:40px;font-size:1.7rem;color:#666;border-radius:5px;align-items:center;justify-content:center;}
.page a:hover{background:#e5e5e5;}
.page .active,.page .active:hover{background:#888888;font-weight:500;color:#fff;}
.page .only_icon{border:1px solid #d8d8d8;margin:0 5px;}
.page .only_icon{border:1px solid #d8d8d8;margin:0 5px;padding:0 !important;}
.page i{width:40px;height:40px;}
.page .page_first{background:url(/kofair_case_seed/usr/images/component/icon_page_first.png) center center;}
.page .page_prev{background:url(/kofair_case_seed/usr/images/component/icon_page_prev.png) center center;}
@ -309,15 +309,16 @@
.sub_con_tit{font-size:5rem;margin:60px 0 0 0;}
.sub_con_sub_tit{font-size:3.4rem;margin:80px 0 ;}
.search_wrap{padding:60px;margin:80px 0;gap:20px;}
:not(.window_popup.idf) .search_wrap select[name=search_category],.search_wrap select[name=reservation_category]{width:100%;}
:not(.window_popup.idf) .search_wrap select[name=search_category],.search_wrap select[name=reservation_category],.search_wrap select[name=searchMenu]{width:100%;}
:not(.window_popup.idf) .search_wrap select[name=search_type],.search_wrap select[name=searchType]{width:180px;}
:not(.window_popup.idf) .search_wrap .input_text{width:calc(100% - 290px);height:80px;}
:not(.window_popup.idf) .search_wrap .select+.select+.input_text{width:calc(100% - 330px);}
:not(.window_popup.idf) .search_wrap .btn_search{width:110px;height:80px;padding:0;font-size:3.6rem;padding:0;}
.page a{font-size:3.4rem;}
.page a,.page .only_icon{width:80px;height:80px;border-radius:10px;}
.page i{width:80px;height:80px;}
.page li:nth-child(n+6):nth-child(-n+12){display:none;}
.page li:nth-child(n+6):nth-child(-n+11){display:none;}
.page .page_first{background:url(/kofair_case_seed/usr/images/component/icon_page_first_80.png) center center;}
.page .page_prev{background:url(/kofair_case_seed/usr/images/component/icon_page_prev_80.png) center center;}
.page .page_next{background:url(/kofair_case_seed/usr/images/component/icon_page_next_80.png) center center;}
@ -495,11 +496,11 @@
.page_location .icon.home{width:19px;height:19px;background:url(/kofair_case_seed/usr/images/component/icon_home.png) no-repeat center center;}
.sub_con_tit{font-size:2.5rem;margin:30px 0 0 0;}
.sub_con_sub_tit{font-size:1.7rem;margin:40px 0;}
.sub_con_sub_tit{font-size:1.7rem;margin:40px 0;line-height:1.4;}
.search_wrap{padding:30px;margin:40px 0;gap:10px;}
:not(.window_popup.idf) .search_wrap select[name=search_category]{width:100%;}
:not(.window_popup.idf) .search_wrap select[name=search_category],:not(.window_popup.idf) .search_wrap select[name=searchMenu]{width:100%;}
:not(.window_popup.idf) .search_wrap select[name=search_type],:not(.window_popup.idf) .search_wrap select[name=searchType]{width:90px;}
:not(.window_popup.idf) .search_wrap .input_text{width:calc(100% - 220px);height:40px;}
:not(.window_popup.idf) .search_wrap .input_text,:not(.window_popup.idf) .search_wrap .select+.select+.input_text{width:calc(100% - 220px);height:40px;}
:not(.window_popup.idf) .search_wrap .btn_search{width:80px;height:40px;font-size:1.8rem;}
.page a, .page .only_icon,.page i{width:40px;height:40px;border-radius:5px;font-size:1.7rem;}
@ -520,21 +521,21 @@
.mobile_view_table table{margin:20px 0 0 0;border-top:2px solid #2e40ba;}
.mobile_view_table table thead th,.mobile_view_table table tbody td{height:50px;border-bottom:1px solid #d8d8d8;border-right:1px solid #d8d8d8;}
.table_type_rows table{font-size:1.7rem;margin:10px 0 0 0;border-top:2px solid #2e40ba;}
.table_type_rows table tbody th,.table_type_rows table tbody td{display:flex;min-height:58px;padding:7px 10px;}
.table_type_rows table tbody th{padding:7px 22.5px;}
:not(.window_popup.idf) .table_type_rows table{font-size:1.7rem;margin:10px 0 0 0;border-top:2px solid #2e40ba;}
:not(.window_popup.idf) .table_type_rows table tbody th,.table_type_rows table tbody td{display:flex;min-height:58px;padding:7px 10px;}
:not(.window_popup.idf) .table_type_rows table tbody th{padding:7px 22.5px;}
.table_type_rows table .select{font-size:1.6rem;padding:0 14px;background-position:calc(100% - 14px);}
:not(.window_popup.idf) .table_type_rows table .select{font-size:1.6rem;padding:0 14px;background-position:calc(100% - 14px);}
.table_type_rows table .phone_wrap{width:100%;}
.table_type_rows table .phone_wrap *,.table_type_rows table .phone_wrap .input_text{width:calc((100% / 3) - 10px);}
:not(.window_popup.idf) .table_type_rows table .phone_wrap{width:100%;}
:not(.window_popup.idf) .table_type_rows table .phone_wrap *,.table_type_rows table .phone_wrap .input_text{width:calc((100% / 3) - 10px);}
.table_type_rows table .email_wrap{gap:10px;}
.table_type_rows table .email_wrap .input_email:first-child{width:calc(100% - 40px);}
.table_type_rows table .email_wrap .input_email:nth-child(2){width:55%;}
.table_type_rows table .email_wrap .email_select{width:calc(45% - 10px);}
:not(.window_popup.idf) .table_type_rows table .email_wrap{gap:10px;}
:not(.window_popup.idf) .table_type_rows table .email_wrap .input_email:first-child{width:calc(100% - 40px);}
:not(.window_popup.idf) .table_type_rows table .email_wrap .input_email:nth-child(2){width:55%;}
:not(.window_popup.idf) .table_type_rows table .email_wrap .email_select{width:calc(45% - 10px);}
.table_type_rows table+.cf_text{margin:30px 0 0 0;}
:not(.window_popup.idf) .table_type_rows table+.cf_text{margin:30px 0 0 0;}
/* view */
.list_view_tit{font-size:2.1rem;}
@ -637,8 +638,11 @@
/* sub layout */
.contents.sub .inner{padding:0 20px;}
.search_wrap select[name=search_category],.search_wrap select[name=search_type]{width:100%;}
.search_wrap .input_text{width:calc(100% - 90px);}
.search_wrap li{flex-wrap:wrap;}
:not(.window_popup.idf) .search_wrap .select{width:100% !important;}
:not(.window_popup.idf) .search_wrap select[name=search_category],.search_wrap select[name=search_type]{width:100%;}
:not(.window_popup.idf) .search_wrap .input_text,:not(.window_popup.idf) .search_wrap .input_text, :not(.window_popup.idf) .search_wrap .select+.select+.input_text{width:calc(100% - 90px);}
.search_wrap .calendar_term{width:100%;}
.page a, .page .only_icon, .page i{width:35px;height:35px;padding:0;}
.page .only_icon{margin:0 2.5px;}