2606_UIUX_15 수정 내역
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; @@ -2225,8 +2225,6 @@ p.essen {font-size: 12px; margin: 8px 0} } .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
https://contents.k-village.co.kr/front/mobile/css/product.css
@@ -384,6 +384,7 @@ footer.direct button.full::before{transform:none} height: 100%; padding: 20px 20px 135px 20px; } +.basic-popup.size .cont-wrap--fit {padding-inline:0} .comment-pop.on .popup{max-height:100%;height:100%} .comment-pop .cont-wrap{overflow-y:auto;height:100%;padding:0 20px 126px 20px} .comment-pop .review-item{padding:0 20px 0 20px;border:none;margin:0 0 0 -20px} @@ -666,7 +667,7 @@ margin: 0 0 10px 0;position: relative;z-index: 2;text-indent:-9999px;} .inquire-item{padding:10px 0 15px 0} .inquire-item li{height:77px;padding:0 0 0 95px;position:relative;margin:5px 0 10px 0;font-size:13px;color:#888} .inquire-item .img-wrap{width:77px;height:77px;position:absolute;overflow:hidden;left:0;background:#f5f5f5;border:1px solid #ddd;text-align:center;line-height:69px} -.inquire-item .img-wrap img{width:100%} +.inquire-item .img-wrap img{width:100%;height: 100%;object-fit: contain;} .inquire-item .img-wrap.bin img{width:auto} .inquire-item p{} .inquire-item p strong{display:block;color:#555;font-size:11px;padding:3px 0 3px 0} @@ -679,6 +680,7 @@ margin: 0 0 10px 0;position: relative;z-index: 2;text-indent:-9999px;} .info-inquire{border:1px solid #ddd;padding:15px 15px;margin:10px 0} .info-inquire strong{color:#000} .inquire-attach{padding:0 0 30px 0} +.inquire-attach--fit {padding:0} .inquire-attach h4{font-size:15px;padding:15px 0 7px 0;font-weight:500} .inquire-attach .add-file {display:block;} .inquire-attach .add-file ul{display:inline-block;vertical-align: top;} @@ -687,7 +689,7 @@ margin: 0 0 10px 0;position: relative;z-index: 2;text-indent:-9999px;} .inquire-attach .add-file li{position:relative;margin:0 4px 6px 0;display:inline-block;} .inquire-attach .add-file li img{width:77px;height:77px;object-fit:cover} .inquire-attach .add-file li video{width:77px;height:77px;object-fit:cover} -.inquire-attach .add-file li .del{display:block;width:16px;height:16px;position:absolute;right:0;top:0;background:#000 url(https://contents.k-village.co.kr/front/pc/images/common/remove-white_new.svg) center center no-repeat;text-indent:-9999px;background-size:12px} +.inquire-attach .add-file li .del{display:block;width:16px;height:16px;position:absolute;right:0;top:0;background: url(https://contents.k-village.co.kr/front/pc/images/common/remove-white_new.svg) center center no-repeat;text-indent:-9999px;background-size:12px} .answer .inquire-attach{padding: 20px 0 0 20px;} .attach-btns{padding:0 0 10px 0} .attach-btns li{padding:0 0 10px 0}
html/MY-026_review_before.html
@@ -1037,11 +1037,11 @@ groobee("serviceKey", "149537f7f34642698831c8fc30f4501f"); <!-- 내 사이즈 등록 팝업--> - <div class="basic-popup popup-wrap size"> + <div class="basic-popup popup-wrap size on dim"> <div class="popup"> <div class="layer-container"> - <header class="flex"> - <h4 id="size-title">내 사이즈 등록</h4> + <header class="popup__header flex"> + <h1 class="popup__title popup__title--fit" id="size-title">내 사이즈 등록</h1> <div class="flex end margin"> <button class="close"> <div class="box"> @@ -1050,75 +1050,76 @@ groobee("serviceKey", "149537f7f34642698831c8fc30f4501f"); </button> </div> </header> - <div class="cont-wrap"> - <h6>모든 항목 입력 후 '사이즈 정보수집 및 이용'에 동의 시 최초 1회에 한하여 <span name="my-size-mileage"></span>원이 적립됩니다. 정보를 등록하시면 내 체형 리뷰보기를 사용하실 수 있습니다.</h6> + <div class="cont-wrap cont-wrap--fit"> <div class="my-size"> - <h4 class="label">키</h4> + <p>모든 항목 입력 후 '사이즈 정보수집 및 이용'에 동의 시 <br> + 최초 1회에 한하여 마일리지 1,000원이 적립됩니다. <br> + 정보를 등록하시면 내 체형 리뷰보기를 사용하실 수 있습니다. </p> <div class="flex"> <div class="input-holder"> - <input class="txt-type-normal" value="" onKeyup="this.value=this.value.replace(/[^0-9]/g,'');" maxlength="3" inputmode="numeric"> - </div><span class="unit">cm</span> + <input class="txt-type-normal memSize" placeholder="키" name="extn" id="extn" + numberonly="true" value="" maxlength='3' inputmode="numeric"> + </div><span class="unit">CM</span> </div> - <h4 class="label">체중</h4> <div class="flex"> <div class="input-holder"> - <input class="txt-type-normal" onKeyup="this.value=this.value.replace(/[^0-9]/g,'');" maxlength="3" inputmode="numeric"> - </div><span class="unit">kg</span> + <input class="txt-type-normal memSize" placeholder="체중" name="weight" id="weight" + numberonly="true" value="" maxlength='3' inputmode="numeric"> + </div><span class="unit">KG</span> </div> - <h4 class="label">발</h4> <div class="flex"> <div class="input-holder"> - <input class="txt-type-normal" onKeyup="this.value=this.value.replace(/[^0-9]/g,'');" maxlength="3" inputmode="numeric"> - </div><span class="unit">mm</span> + <input class="txt-type-normal memSize" placeholder="발" name="footSize" id="footSize" + numberonly="true" value="" maxlength='3' inputmode="numeric"> + </div><span class="unit">MM</span> </div> - <h4 class="label">상의 사이즈</h4> <div class="flex"> <div class="input-holder"> - <select id="my-size-top" class="box-type-select"> - <option value="" class="placeholder">선택하세요</option> - <!-- <option value="2XS">2XS</option> - <option value="XS">XS</option> - <option value="S">S</option> - <option value="M">M</option> - <option value="L">L</option> - <option value="XL">XL</option> - <option value="2XL">2XL</option> - <option value="3XL">3XL</option> --> + <select class="box-type-select memSize" name="topSize" id="topSize"> + <option value="" class="placeholder">상의 사이즈 선택</option> + <option value="10" >2XS</option> + <option value="20" >XS</option> + <option value="30" >S</option> + <option value="40" >M</option> + <option value="50" >L</option> + <option value="60" >XL</option> + <option value="70" >2XL</option> + <option value="80" >3XL</option> </select> </div> </div> - <h4 class="label">하의 사이즈</h4> <div class="flex"> <div class="input-holder"> - <select id="my-size-bottom" class="box-type-select" size=1> - <option value="" class="placeholder">선택하세요</option> - <!-- <option value="23이하">23이하</option> - <option value="24">24</option> - <option value="25">25</option> - <option value="26">26</option> - <option value="27">27</option> - <option value="28">28</option> - <option value="29">29</option> - <option value="30">30</option> - <option value="31">31</option> - <option value="32">32</option> - <option value="33">33</option> - <option value="34">34</option> - <option value="35">35</option> - <option value="36">36</option> - <option value="37이상">37이상</option> --> + <select class="box-type-select memSize" name="bottomSize" id="bottomSize"> + <option value="" class="placeholder">하의 사이즈 선택</option> + <option value="23" >23 이하</option> + <option value="24" >24</option> + <option value="25" >25</option> + <option value="26" >26</option> + <option value="27" >27</option> + <option value="28" >28</option> + <option value="29" >29</option> + <option value="30" >30</option> + <option value="31" >31</option> + <option value="32" >32</option> + <option value="33" >33</option> + <option value="34" >34</option> + <option value="35" >35</option> + <option value="36" >36</option> + <option value="37" >37</option> + <option value="38" >38 이상</option> </select> </div> </div> <div class="mt-20"> - <input id="cbox-3" class="cbox-type" type="checkbox" name="cbox-2"> - <label for="cbox-3" class="_img">사이즈 정보수집 및 이용 동의</label> + <input name="sizeClctnAgrmnYn" id="sizeClctnAgrmnYn" class="cbox-type" type="checkbox" value="Y" + > + <label for="sizeClctnAgrmnYn" class="_img">사이즈 정보수집 및 이용 동의</label> </div> <div class="box-holder nb"> - <p>입력하신 정보(키, 체중​, 발 사이즈, 상의 사이즈, 하의 사이즈)는 서비스 이용 시 또는 탈퇴 시까지 보관됩니다. </p> + <p>입력하신 정보(키, 체중, 발 사이즈, 상의 사이즈, 하의 사이즈)는 서비스 이용 시 또는 탈퇴 시까지 보관됩니다. </p> <p>내 사이즈는 작성하신 리뷰와 함께 공개되어 다른 고객의 상품 구매에 도움을 줄 수 있습니다.</p> </div> - </div> </div> <footer class="fix-type2">