모바일 팝업 html 수정

src/main/webapp/mobile/app/main.html

@@ -105,218 +105,7 @@
 
 	<div id="ITP_CONTAINER" class="fix">
 		<div class="itp_mobile_contents">
-<section id="ITP_MOBILE_MPOMNG01010">
-  <div id="ITP_AJAX_MPOMNG01010_VIEW_CONTAINER">
-    <form id="ITP_FORM_MPOMNG01010_DETAIL" class="form-horizontal" onsubmit="return false;">
-      <input type="hidden" id="ITP_FORM_MPOMNG01010_DETAIL_VIEW_CD" name="viewCd" value="C">
-      <input type="hidden" id="ITP_FORM_MPOMNG01010_DETAIL_BRAND_ID" name="brandId" value="">
-      <input type="hidden" id="ITP_FORM_MPOMNG01010_DETAIL_STORE_ID" name="storeId" value="">
-      <input type="hidden" id="ITP_FORM_MPOMNG01010_DETAIL_LOAN_DVSN" name="loanDvsn" value="">
-      <input type="hidden" id="ITP_FORM_MPOMNG01010_DETAIL_LOAN_MGNT_UNQ_NO" name="loanMgntUnqNo" value="">
-      <input type="hidden" id="ITP_FORM_MPOMNG01010_DETAIL_PCH_REQ_DVSN" name="pchReqDvsn" value="">
-      <input type="hidden" id="ITP_FORM_MPOMNG01010_DETAIL_PCH_REQ_ST_CD" name="pchReqStCd" value="">
-      <input type="hidden" id="ITP_FORM_MPOMNG01010_DETAIL_MALL_ID" name="mallId" value="">
-      <div class="content">
-      	<div class="line header">
-			<div class="itp_search_header fnMenuNm">구매요청생성</div>
-      	</div>
-        <div class="line">
-          <label>납기요청일</label>
-          <input id="ITP_FORM_MPOMNG01010_DETAIL_DLV_REQ_DT" name="dlvReqDt" class="date" data-check-required="empty" type="date" placeholder="">
-        </div>
-        <div class="line">
-          <label>구매요청금액</label>
-          <div class="line_right">
-            <div class="fnPchReqAmtTot">0원</div>
-          </div>
-        </div>
-        <div class="line">
-          <label>구매가능금액</label>
-          <div class="line_right">
-            <div class="fnOrdUseAmt">0원</div>
-          </div>
-        </div>
-        <div class="line">
-          <label>납품장소</label>
-            <div class="float_left">
-                <input type="text" id="ITP_FORM_MPOMNG01010_DETAIL_WHS_NM" class="" name="whsNm" data-check-required="empty" placeholder="매장명" readonly />
-                <input type="hidden" id="ITP_FORM_MPOMNG01010_DETAIL_WHS_ID" class="form-control itp_input" name="whsId" value="" />
-                <input type="hidden" id="ITP_FORM_MPOMNG01010_DETAIL_LOCATION" class="form-control itp_input" name="location" value="" />
-             	<button id="ITP_BTN_MPOMNG01010_DETAIL_SEARCH_WHS_NM" data-call-popup="ITP_POP_MPOMNG01010_WHS_AREA"><img src="../img/search.png" alt=""></button>
-            </div>
-            <div class="float_right_btn">
-              <!-- <button id="ITP_BTN_MPOMNG01010_DETAIL_SEARCH_WHS_NM" data-call-popup="ITP_POP_MPOMNG01010_WHS_AREA"><img src="../img/search.png" alt=""></button> -->
-              <button id="ITP_BTN_MPOMNG01010_DETAIL_DELETE_WHS_NM"><img src="../img/delete.png" alt=""></button>
-            </div>
-        </div>
-        <div class="header line">
-          <div class="table_header">
-            <h1><구매품목></h1>
-            <button type="button" id="ITP_BTN_MPOMNG01010_DETAIL_DELROW" class="btn-primary btn-sm ADB">품목삭제</button>
-            <button type="button" id="ITP_BTN_MPOMNG01010_DETAIL_ADDROW" class="btn-primary btn-sm ADB" data-call-popup="ITP_POP_MPOMNG01010_ITEM_AREA">품목추가</button>
-          </div>
-        </div>
-      </div>
-      <div id="ITP_LIST_MPOMNG01010_ITEM_AREA" class="scroll_area row-3">
-        <ul id="ITP_LIST_MPOMNG01010_DETAIL_ROWS" class="mb_0"></ul>
-        <div id="ITP_LIST_MPOMNG01010_DETAIL_ROWCOPY" style="display: block;">
-      <!--   검색된 데이터가 없습니다  -->
-      	<div class="itp_non_data" style="display:none;">
-      		<div>검색된 데이터가 없습니다.</div>
-      	</div>
-          <li class="list-row">
-            <div class="left_info">
-              <div class="check_box">
-                <div style="display:none;"><input type="checkbox" name="brandUnitUnqNo" class="fnBrandUnitUnqNo" /></div>
-              </div>
-              <div class="thick">
-                <div class="itp_item fnItemNm">품목명</div>
-                <div class="itp_item fnUnit">EA</div>
-              </div>
-              <div class="thick">
-                <div class="itp_gram fnUnitAmt">700g</div>
-              </div>
-              <div class="thick">
-                <div class="itp_amt fnUnitAmt">1,120,000원</div>
-              </div>
-            </div>
-            <div class="md_info">
-            	<div class="thick">
-            		<div>2022.12.15</div>
-            	</div>
-            	<div class="thick">
-            		<div>브랜드 창고A</div>
-            	</div>
-            </div>
-            <div class="right">
-              <button id="ITP_BTN_MPOMNG01010_DETAIL_MINUS">-</button>
-              <div class="num fnPchReqQty">1</div>
-              <button id="ITP_BTN_MPOMNG01010_DETAIL_PLUS">+</button>
-            </div>
-          </li>
-          
-        </div>
-      </div>
-      <div class="button_bar">
-        <button id="ITP_BTN_MPOMNG01010_DETAIL_REQ_ORDER" data-call-popup="ITP_POP_MPOMNG01010_REQ_AREA" class="col_3 btn-primary REQ">구매요청</button>
-        <button id="ITP_BTN_MPOMNG01010_DETAIL_TEMP_SAVE" data-call-popup="ITP_POP_MPOMNG01010_REQ_AREA" class="col_3 btn-gray TSA">임시저장</button>
-        <button id="ITP_BTN_MPOMNG01010_DETAIL_CANCEL" class="col_3 btn-gray CLB">취소</button>
-      </div>
-    </form>
-  </div>
-  <div id="ITP_MOBILE_JS"></div>
-    <div id="ITP_POP_MPOMNG01010_REQ_AREA" class="popup mobile-pop-close" style="display: none;">
-        <div class="pop">
-            <div class="pop_line">
-                <label>납품요청일 &nbsp;&nbsp;:</label>
-                <div class="fnPopDlvReqDt"></div>
-            </div>
-            <div class="pop_line">
-                <label>품목수&nbsp;&nbsp; :</label>
-                <div class="fnItemQty">개</div>
-            </div>
-            <div class="pop_line">
-                <label>구매금액 &nbsp;&nbsp;:</label>
-                <div class="fnOrdAmt">원</div>
-            </div>
-            <!--<label class="pop_label msg_save">구매요청 하시겠습니까?</label>-->
-            <div class="pop_msg">구매요청 하시겠습니까?</div>
-            <div class="popup_btn">
-                <button id="ITP_BTN_MPOMNG01010_POP_REQ_CLOSE" class="cancel btn-gray CLB btn-pop-close">취소</button>
-                <button id="ITP_BTN_MPOMNG01010_POP_REQ_CONFIRM" class="ok btn-primary COK">확인</button>
-            </div>
-        </div>
-    </div>
-    <div id="ITP_POP_MPOMNG01010_WHS_AREA" class="popup2 mobile-pop-close" style="display: block;">
-        <div class="pop">
-            <div class="header">
-                <div class="header_left">
-                    <label>납품장소</label>
-                </div>
-                <div class="header_right">
-                    <button type="button" id="ITP_BTN_MPOMNG01010_POP_WHS_CLOSE" class="btn-pop-close"><img src="../img/close.png"></button>
-                </div>
-            </div>
-            <div class="search_bar">
-                <form id="ITP_FORM_MPOMNG01010_POP_WHS" class="form-horizontal" onsubmit="return false;">
-                    <input type="hidden" id="ITP_FORM_MPOMNG01010_WHS_ITEM_BRAND_ID" name="sbrandId" value="">
-                    <input type="hidden" id="ITP_FORM_MPOMNG01010_WHS_ITEM_STORE_ID" name="sstoreId" value="">
-                    <input id="ITP_FORM_MPOMNG01010_POP_WHS_KEYWORD" type="text" name="swhsNm" placeholder="납품장소명">
-                    <button id="ITP_BTN_MPOMNG01010_POP_WHS_SEARCH"><img src="../img/search.png"></button>
-                </form>
-            </div>
-            <div class="select_btn">
-                <button id="ITP_BTN_MPOMNG01010_POP_WHS_NM" class="btn_blue">납품장소▼</button>
-            </div>    
-            <div id="ITP_LIST_MPOMNG01010_POP_WHS_AREA" class="popup_scroll">
-                <ul id="ITP_LIST_MPOMNG01010_POP_WHS_ROWS" class="panel-group itp_nav"></ul>
-                <div id="ITP_LIST_MPOMNG01010_POP_WHS_ROWCOPY" style="display: block;">
-                    <li class="row_2">
-                        <div class="scroll_left">
-                            <div class="fnWhsNm">브랜드 창고 명A</div>
-                            <div class="fnLocationNm">(상세위치내용)</div>
-                        </div>
-                        <div class="scroll_right">
-                            <button id="ITP_BTN_MPOMNG01010_POP_WHS_CHOICE" class="fnWhsId" data-whs-id="">선택</button>
-                        </div>
-                    </li>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div id="ITP_POP_MPOMNG01010_ITEM_AREA" class="popup2 mobile-pop-close" style="display: none;">
-        <div class="pop">
-            <div class="header">
-                <div class="header_left">
-                    <label>> 품목 검색</label>
-                </div>
-                <div class="header_right">
-                    <button type="button" id="ITP_BTN_MPOMNG01010_POP_ITEM_CLOSE" class="btn-pop-close"><img src="../img/close.png"></button>
-                </div>
-            </div>
-            <form id="ITP_FORM_MPOMNG01010_POPUP_ITEM" class="form-horizontal" onsubmit="return false;">
-                <input type="hidden" id="ITP_FORM_MPOMNG01010_POPUP_ITEM_BRAND_ID" name="sbrandId" value="">
-                <input type="hidden" id="ITP_FORM_MPOMNG01010_POPUP_ITEM_STORE_ID" name="sstoreId" value="">
-                <div class="search_bar">
-                    <input id="ITP_FORM_MPOMNG01010_POP_ITEM_KEYWORD" name="sitemNm" type="text" placeholder="품목명/품목번호" />
-                    <button id="ITP_BTN_MPOMNG01010_POP_ITEM_SEARCH"><img src="../img/search.png"></button>
-                </div>
-                <div class="search_bar">
-                    <button id="ITP_BTN_MPOMNG01010_POP_ITEM_NM" class="btn_blue">품목명▼</button>
-                </div>
-            </form>
-            <div id="ITP_LIST_MPOMNG01010_POP_ITEM_AREA" class="popup_scroll">
-                <ul id="ITP_LIST_MPOMNG01010_POP_ITEM_ROWS" class="panel-group"></ul>
-                <div id="ITP_LIST_MPOMNG01010_POP_ITEM_ROWCOPY" style="display:none;">
-                    <li class="row_2">
-                        <div class="left" style="width:180px;">
-                            <!--<div class="check_box">
-                                <input type="checkbox" id="ITP_FORM_MPOMNG01010_POP_ITEM_CHECKBOX" name="itemId" />
-                            </div>-->
-                            <div class="thick">
-                                <div class="fnItemNm">품목명</div>
-                                <div>-</div>
-                                <div class="fnUnit">EA</div>
-                            </div>
-                            <div class="thick" style="font-weight:100;">
-                                <div class="space">구매가 :</div>
-                                <div class="fnUnitAmt">0</div>
-                            </div>
-                        </div>
-                        <div class="right">
-                            <button id="ITP_BTN_MPOMNG01010_POP_ITEM_MINUS" class="POP_ITEM_MINUS">-</button>
-                            <div class="num fnPchReqQty">1</div>
-                            <button id="ITP_BTN_MPOMNG01010_POP_ITEM_PLUS" class="POP_ITEM_PLUS">+</button>
-                        </div>
-                        <div class="add">
-                            <button id="ITP_BTN_MPOMNG01010_POP_ITEM_ADD" class="POP_ITEM_ADD">추가</button>
-                        </div>
-                    </li>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
+
 		</div>
 	</div>
 	<footer id="ITP_FOOTER">

src/main/webapp/mobile/app/mpomng/MPOMNG01010.html

@@ -124,7 +124,7 @@
         <div class="pop">
             <div class="header">
                 <div class="header_left">
-                    <label>> 납품장소</label>
+                    <label>납품장소</label>
                 </div>
                 <div class="header_right">
                     <button type="button" id="ITP_BTN_MPOMNG01010_POP_WHS_CLOSE" class="btn-pop-close"><img src="../img/close.png"></button>
@@ -138,16 +138,27 @@
                     <button id="ITP_BTN_MPOMNG01010_POP_WHS_SEARCH"><img src="../img/search.png"></button>
                 </form>
             </div>
-            <div class="search_bar">
-                <button id="ITP_BTN_MPOMNG01010_POP_WHS_NM" class="btn_blue">납품장소▼</button>
-            </div>
+            <div class="select_btn">
+                <button id="ITP_BTN_MPOMNG01010_POP_WHS_NM" class="btn_blue">납품장소 V</button>
+            </div>    
             <div id="ITP_LIST_MPOMNG01010_POP_WHS_AREA" class="popup_scroll">
-                <ul id="ITP_LIST_MPOMNG01010_POP_WHS_ROWS" class="panel-group itp_nav"></ul>
+                <ul id="ITP_LIST_MPOMNG01010_POP_WHS_ROWS" class="mb_0 itp_nav"></ul>
                 <div id="ITP_LIST_MPOMNG01010_POP_WHS_ROWCOPY" style="display: block;">
                     <li class="row_2">
                         <div class="scroll_left">
                             <div class="fnWhsNm">브랜드 창고 명A</div>
-                            <div class="fnLocationNm">(상세위치내용)</div>
+                            <div class="sub fnLocationNm">서울특별시 동대문구 서울 시립대로 12길</div>
+                            <div class="sub fnLocationNm">누리자 B/D</div>
+                        </div>
+                        <div class="scroll_right">
+                            <button id="ITP_BTN_MPOMNG01010_POP_WHS_CHOICE" class="fnWhsId" data-whs-id="">선택</button>
+                        </div>
+                    </li>
+                     <li class="row_2">
+                        <div class="scroll_left">
+                            <div class="fnWhsNm">브랜드 창고 명A</div>
+                            <div class="sub fnLocationNm">서울특별시 동대문구 서울 시립대로 12길</div>
+                            <div class="sub fnLocationNm">누리자 B/D</div>
                         </div>
                         <div class="scroll_right">
                             <button id="ITP_BTN_MPOMNG01010_POP_WHS_CHOICE" class="fnWhsId" data-whs-id="">선택</button>

src/main/webapp/mobile/css/style.css

@@ -29,17 +29,17 @@ section .popup2 .barcode_area {width: 300px; height: 300px; margin: auto; backgr
 section .popup2 .barcode h1{text-align: left; width: 85%; font-size: 1.1rem; margin:auto; margin-top: 20%;}
 section .popup2 .btn_barcode {margin-top: 20%;}
 section .popup2 .btn_barcode button {width: 35%; height: 50px; font-size: 1rem;}
-section .popup2 .pop { position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%); width: 95%; height: 85%; background: #fff; border: 2px solid #000;}
-section .popup2 .pop .header {position: relative; height: 50px; background: #f0831e; color:#eee; border-bottom: 1px solid #000;}
+section .popup2 .pop { position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%); width: 95%; height: 85%; background: #fff; border: 1px solid #000; border-radius:10px;}
+section .popup2 .pop .header {position: relative; height: 50px; background: #f0831e; color:#eee; border-bottom: 1px solid #000; border-top-right-radius: 10px; border-top-left-radius: 10px;}
 section .popup2 .pop .header .header_left {padding-top: 12px;}
 section .popup2 .pop .header .header_left label {font-size: 18px; font-weight:100;} 
 section .popup2 .pop .header .header_right {float: right; padding-right: 10px; position:relative; top:-44px;}
 section .popup2 .pop .header .header_right button {border: none; background: transparent;}
 section .popup2 .pop .header .header_right button img {width:30px; height:30px;}
-section .popup2 .pop .select_btn button.btn_blue {float: right; width: 100px; height: 35px; background:#d9baaf; color: #fff; font-size: 13px; padding: 0; border: 1px solid #000;}
-section .popup2 .pop .select_btn {width:100%; height: 20px;}
+section .popup2 .pop .select_btn button.btn_blue {float: right; width: 100px; height: 30px; background:#d9baaf; color: #fff; font-size: 13px; padding-top:6px; border: 1px solid #cca597;}
+section .popup2 .pop .select_btn {position:relative; top:-25px; left:55px; width:100%; height: 20px;}
 section .popup2 .pop .search_bar {width: 100%; height: 60px; padding:10px;}
-section .popup2 .pop .search_bar input {width: 90%; margin:0 5%; height: 40px; position:relative; top:-37px;}
+section .popup2 .pop .search_bar input {width: 90%; margin:0 5%; height: 40px; position:relative; top:-37px; font-size:14px;}
 section .popup2 .pop .search_bar button {position:relative; top:-74px; background:transparent; margin-right:5%; float: right; border: none; padding-top:3px;}
 section .popup2 .pop .search_bar button img {width: 22px;}
 section .popup2 .pop .search_bar button.search {float: none; width: 50%; height: 35px; background:rgb(46, 46, 248); color: #fff; font-size: 1rem; padding: 0; border: 1px solid #000; margin: 0 auto;}
@@ -53,9 +53,10 @@ section .popup2 .pop .search_btn_bar .btn_right button {height:35px; padding:5px
 section .popup2 .pop table{width:98%; margin:0 1%;}
 section .popup2 .pop table tbody th {height:50px; font-size:16px;}
 section .popup2 .pop table tbody input{width:15px;}
-section .popup2 .pop .popup_scroll {position: relative; width: 100%;height: 720px; overflow: auto;}
-section .popup2 .pop .popup_scroll li {list-style: none; width: 99%; height: 50px; border: 1px solid #000; margin: 0 auto;}
-section .popup2 .pop .popup_scroll li.row_2 {height: 80px;}
+section .popup2 .pop .popup_scroll ul.mb_0 {margin-bottom:0 !important;}
+section .popup2 .pop .popup_scroll {position: relative; top:-25px; width: 100%;height: 540px; overflow: auto; border-top:1px solid #E0B8AB;}
+section .popup2 .pop .popup_scroll li {list-style: none; width: 100%; height: 50px; border-bottom: 1px solid #E0B8AB;}
+section .popup2 .pop .popup_scroll li.row_2 {height: 90px;}
 
 section .popup2 .pop .popup_scroll li .left {position: relative; float: left;}
 section .popup2 .pop .popup_scroll li .left .check_box {width:30px; float:left; height:80px; padding-left:5px; padding-top:20px;}
@@ -65,10 +66,11 @@ section .popup2 .pop .popup_scroll li .left .thick {float: left; margin: 12px 0
 section .popup2 .pop .popup_scroll li .left .nomal {float: left; margin: 15px 0px 0px 15px; font-size: 1.2rem; text-align: left; width: 100%;}
 section .popup2 .pop .popup_scroll li .left .history {font-weight: 700; font-size: 2.4rem; margin-left: 20px;}
 section .popup2 .pop .popup_scroll li .left .history input{width: 150px;}
-section .popup2 .pop .popup_scroll li .scroll_left {float: left;}
-section .popup2 .pop .popup_scroll li .scroll_left div {float: left; font-size: 0.8rem; font-weight: 700; width: auto; margin: 15px 10px;}
+section .popup2 .pop .popup_scroll li .scroll_left {float: left; display:grid;}
+section .popup2 .pop .popup_scroll li .scroll_left div {text-align:left; float: left; font-size: 18px; font-weight: 100; width: auto; margin:9px 6px -6px 10px;}
+section .popup2 .pop .popup_scroll li .scroll_left .sub{font-size:14px; color:gray;}
 section .popup2 .pop .popup_scroll li .scroll_right {float: right;}
-section .popup2 .pop .popup_scroll li .scroll_right button {width: 60px; height: 40px; padding: 0; background: rgb(198, 170, 250); border-radius: 10px; font-size: 0.8rem; margin:4px 10px;}
+section .popup2 .pop .popup_scroll li .scroll_right button {width: 50px; height: 38px; padding: 0; background:#8f9fc6; border:1px solid #cacfe3; color:#eee; border-radius: 10px; font-size: 14px; margin:25px 10px;}
 section .popup2 .pop .popup_scroll li .right {position: relative; display: flex; font-size: 1.6rem; font-weight: 700; float: left; top:20px;}
 section .popup2 .pop .popup_scroll li .right .num {margin: 0 20px; width: auto;}
 section .popup2 .pop .popup_scroll li .right button {padding: 5px; font-size: 1rem; border-radius: 0px;}
@@ -365,7 +367,7 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
 .col-4{width:40% !important;}
 .col-6{width:60% !important;}
 
-.scroll_area ul.mb_0 {margin-bottom:0;}
+.scroll_area ul.mb_0 {margin-bottom:0 !important;}
 .scroll_area .itp_non_data {margin:35% auto;}
 .scroll_area li {margin:0; list-style: none; width: 100%; height: 85px; border: 1px solid #ccc; background-color: #fff;}
 .scroll_area li.list-row {height:110px;}