2606_UIUX_11 수정 내역
https://contents.k-village.co.kr/front/mobile/css/layout.css
@@ -365,11 +365,12 @@ color: rgba(0, 0, 0, 1);} .popup-wrap .popup .popup__title--fit {padding-left: 0;} .popup-wrap .cont-wrap--fit {padding-top: 0;} .popup-wrap.full .cont-wrap--fit {padding-top: 0;} -.popup-wrap .popup .popup__content .popup__message {font-size:16px;line-height:25px;font-weight:400;} +.popup-wrap .popup .popup__content .popup__message {font-size:16px;line-height:25px;} .popup-wrap .popup .popup__content .popup__message--primary {font-size:18px;line-height:26px;} +.popup-wrap .popup .popup__content .popup__message--info {font-size:14px;line-height:normal;} .popup-wrap .popup .popup__content .popup__message ~ .popup__message {margin-top: 20px;} .popup-wrap .popup .popup__content .popup__message ~ .popup__message--desc {margin-top: 5px;} -.popup-wrap .popup .popup__content .popup__message .lined-text {position:relative;display:inline-block;font-size:inherit} +.popup-wrap .popup .popup__content .popup__message .lined-text {position:relative;display:inline-block;font-size:inherit;font-weight:inherit;} .popup-wrap .popup .popup__content .popup__message .lined-text::before {content:"";position: absolute;bottom:0;left:0;right:0;height: 1px;background-color: #000;} .quantity-control { font-size: 0; } @@ -784,7 +785,7 @@ touch-action: pan-y;} background-size:20px;} .quick-wrap.hide .quick-close{ transform: rotate(180deg);} -.top-btn{position: fixed; right: 21px; bottom: 90px; cursor: pointer; z-index: 16;text-align: right; display:flex; flex-direction:column-reverse; align-items:flex-end; transition:transform .3s;} +.top-btn{position: fixed; right: 21px; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); cursor: pointer; z-index: 16;text-align: right; display:flex; flex-direction:column-reverse; align-items:flex-end; transition:transform .3s;} .top-btn.down{transform:translateY(60px)} .top-btn a{display:inline-block;width: 36px; height: 36px;margin:15px 0 0 0;} .top-btn [data-menuanchor="top"] {display:none; order:-1;} @@ -2023,7 +2024,6 @@ p.essen {font-size: 12px; margin: 8px 0} height: 1px; background: #000; } -.popup-wrap.change-address .popup header {border-bottom: 1px solid #ccc;} .popup-wrap.change-address .div-header h1 { font-size: 18px; font-weight: 500; @@ -2224,10 +2224,6 @@ p.essen {font-size: 12px; margin: 8px 0} font-weight: 700; } -.popup-wrap.mypage-dis header {border-bottom: 1px solid #ccc;} -.popup-wrap.send-mail header {border-bottom: 1px solid #ccc;} -.popup-wrap.pw-change .popup__message--primary {margin-block: 10px 30px;} - /* UIUX4차 68 기획전, 이벤트 타임세일 */ .event-bnr .bnr-txt.white strong , .event-bnr .bnr-txt.white span {color: #fff;}
https://contents.k-village.co.kr/front/mobile/css/mypage.css
@@ -620,10 +620,17 @@ h5 + .order-bene{border-top:none;padding:0;margin: 5px 0 10px 0;} .mypage-dis .tab-cont span.detail {position: relative;width: 100%;padding-left: 20px;font-size: 12px;color: #888;max-width: 100%;} .mypage-dis .tab-cont span.detail::after {content: '';width: 10px;height: 10px;position: absolute;left: 0;bottom: 7px;border-left: 2px solid #ddd;border-bottom: 2px solid #ddd;} .mypage-dis button {margin-top: 20px;} +.mypage-dis button.close {margin-top: 0;} .mypage-dis .tab-cont .mt20 {margin-top: 20px;} .mypage-dis .tab-cont {display: none;padding: 20px;} +.mypage-dis .tab-cont.b-tab-cont {padding-inline: 0;} .mypage-dis .tab-cont.on {display: block;} .mypage-dis.popup-wrap.full .cont-wrap {height: calc(100% - 115px);padding: 0;} +.mypage-dis .tab-cont--coupon span.detail {display:flex;align-items:center;max-width:none;padding-left:0;line-height:19px;} +.mypage-dis .tab-cont--coupon span.detail::before {content: 'ㄴ';position:static;display:inline-block;width:auto;height:auto;border:none;margin-right:2px;font-weight:600;vertical-align:middle;} +.mypage-dis .tab-cont--coupon span.detail::after {content:none;} +.mypage-dis .tab-cont--coupon li {align-items: center;} +.mypage-dis .tab-cont--coupon span.price {font-size:14px;line-height: 1.928em;} .div-middle { margin-top: 15px; } .coupon-input { padding: 0 20px 15px 20px; } @@ -639,6 +644,8 @@ h5 + .order-bene{border-top:none;padding:0;margin: 5px 0 10px 0;} .coupon-wrap .cp .cp-ticket .cp-info { padding:0; } .coupon-wrap .cp-detail li { line-height: 18px !important; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 300; font-size: 12px; letter-spacing: -0.04em; padding:0 15px 0 15px; } .coupon-wrap .cp-ticket .cp-tit { width: 335px; line-height: 18px; font-weight: 500 !important; background: #F0F0F0; padding:15px; letter-spacing: -0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.mypage-dis.popup-wrap.full .cont-wrap--inner {padding-inline: 20px} + /* 2026.03.25 앱배지 추가로 인한 높이 고정 해제 및 배경이미지 코드로 변경 */ /* .coupon-wrap .cp .cp-detail { background:url(../images/png/m_ticket_bg.png) no-repeat; width: 335px; height: 164px; padding: 0; margin-top: 0; } */ .coupon-wrap .cp .cp-detail { position: relative; width: 335px; min-height: 164px; background: #fff; border: 1px solid #eee; border-top: 0; padding: 0 0 13px 0; margin-top: 0; } @@ -632,6 +632,16 @@ h5 + .order-bene{border-top:none;padding:0;margin: 5px 0 10px 0;} .mypage-dis .tab-cont--coupon li {align-items: center;} .mypage-dis .tab-cont--coupon span.price {font-size:14px;line-height: 1.928em;} +.popup-wrap.mypage-dis.on.is-closing .popup { + animation: mypageDisSlideDown 0.3s ease forwards; +} + +@keyframes mypageDisSlideDown { + from {transform: translateY(0);} + to {transform: translateY(100%);} +} + + .div-middle { margin-top: 15px; } .coupon-input { padding: 0 20px 15px 20px; } [class^="txt-type"] { height: 36px; width: 100%; line-height: 1; color: #111; background-color: #fff; font-size: 14px; border: none; border: 1px solid #ddd; padding: 10px 20px; }
html/MY-008_orders_detail.html
@@ -721,7 +721,6 @@ groobee("serviceKey", "149537f7f34642698831c8fc30f4501f"); </div> </div> <div class="area-line"></div> - <div class="area-line"></div> <!-- 주문자 정보 --> <div class="wrap-holder"> @@ -843,7 +842,8 @@ groobee("serviceKey", "149537f7f34642698831c8fc30f4501f"); <div class="popup-wrap full mypage-dis"> <div class="popup"> <div class="layer-container"> - <header class="flex"> + <header class="popup__header flex"> + <h1 class="popup__title">상세 내역</h1> <div class="flex end margin"> <button class="close"> <div class="box"> @@ -852,15 +852,14 @@ groobee("serviceKey", "149537f7f34642698831c8fc30f4501f"); </button> </div> </header> - <div class="cont-wrap"> - <div class="div-header mt-0"> - <h1>상세 내역</h1> - </div> - <ul class="tabWrap"> - <li class="tab tab01 on" data-id="tab01">#쿠폰 할인</li> - <li class="tab tab02" data-id="tab02">#마일리지</li> - </ul> - <div class="bg-gray p-20 tab-cont on" id="tab01"> + <div class="cont-wrap cont-wrap--inner"> + <div class="tab-"> + <ul class="brand-tab"> + <li class="on" data-id="tab01">#쿠폰 할인</li> + <li class="" data-id="tab02">#마일리지</li> + </ul> + </div> + <div class="b-tab-cont tab-cont tab-cont--coupon on"> <ul> <li class="line-under"><span>상품 쿠폰</span></li> <li> @@ -880,7 +879,7 @@ groobee("serviceKey", "149537f7f34642698831c8fc30f4501f"); <li class="line mt20"><span>총 할인 금액</span><span class="price">68,700원</span></li> </ul> </div> - <div class="bg-gray p-20 tab-cont" id="tab02"> + <div class="b-tab-cont tab-cont tab-cont--mileage"> <ul> <li><span>보유 마일리지</span><span> 10,150원 </span></li> @@ -888,18 +888,35 @@ groobee("serviceKey", "149537f7f34642698831c8fc30f4501f"); </ul> </div> </div> - <footer class="fix-type1 divSelDlvp"> - <div class="flex full"> - <button class="btn-type-normal large" onclick=""> - <div class="box"> - <span>확인</span> - </div> - </button> - </div> - </footer> </div> </div> </div> + <script> + document.addEventListener('click', function(e) { + var closeBtn = e.target.closest('.mypage-dis .close'); + if (!closeBtn) return; + + e.preventDefault(); + e.stopPropagation(); + e.stopImmediatePropagation(); + + var popupWrap = closeBtn.closest('.mypage-dis'); + if (!popupWrap || popupWrap.classList.contains('is-closing')) return; + + if (typeof overflowFxScroll === 'function') { + overflowFxScroll(false); + } else if (typeof overflowFx === 'function') { + overflowFx(false); + } + + popupWrap.classList.add('is-closing'); + popupWrap.classList.remove('dim'); + + popupWrap.querySelector('.popup').addEventListener('animationend', function() { + popupWrap.classList.remove('on', 'dim', 'is-closing'); + }, { once: true }); + }, true); + </script> <div class="pd-accordion return-info"> <div class="order-top total bigger ac-title"> <p>취소반품 안내</p>
https://contents.k-village.co.kr/front/mobile/js/commonFx.js
@@ -1110,16 +1110,17 @@ cTab = $('.tab-both li a') }; // 탭 이동 var brdTab= function(){ - bTab = $('.brand-tab li a') - $('.brand-tab li').on('click', function(){ - $('.b-tab-cont').hide(); - $('.brand-tab li').removeClass("on") - $(this).addClass("on"); - vLi = $('.brand-tab li').index(this)+1; - //alert(".ctn"+vLi); - $('.btcon'+vLi).show(); - }); - }; + $('.brand-tab li').on('click', function(){ + var $tab = $(this).closest('.brand-tab'); + var $scope = $(this).closest('.cont-wrap'); + var vLi = $tab.find('li').index(this); + + $scope.find('.b-tab-cont').hide(); + $tab.find('li').removeClass('on'); + $(this).addClass('on'); + $scope.find('.b-tab-cont').eq(vLi).show(); + }); +}; //rangeslider var rangSlide= function(){