로그인 페이지 수정

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

@@ -105,7 +105,269 @@
 
 	<div id="ITP_CONTAINER" class="fix">
 		<div class="itp_mobile_contents">
-
+<section id="ITP_MOBILE_MPOMNG03010">  
+  <div id="ITP_POP_MPOMNG03010_SPPLY_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_MPOMNG03010_POP_SPPLY_CLOSE"><img src="../img/close.png"></button>
+			</div>
+		</div>
+		<div class="search_bar">
+			<form id="ITP_FORM_MPOMNG03010_POP_SPPLY" class="form-horizontal" onsubmit="return false;">
+				<input type="hidden" id="ITP_FORM_MPOMNG03010_POP_SPPLY_ITEM_BRAND_ID" name="sbrandId" value="">
+				<input type="hidden" id="ITP_FORM_MPOMNG03010_PO_PSPPLY_ITEM_STORE_ID" name="sstoreId" value="">
+				<input id="ITP_FORM_MPOMNG03010_POP_SPPLY_KEYWORD" type="text" name="sSpplyNm" placeholder="공급업체명">
+				<button id="ITP_BTN_MPOMNG03010_POP_SPPLY_SEARCH"><img src="../img/search.png"></button>
+			</form>
+		</div>
+		<div class="select_btn">
+			<button id="ITP_BTN_MPOMNG03010_POP_SPPLY_NM" class="btn_blue">공급업체 ▼</button>
+		</div>
+		<div id="ITP_POP_MPOMNG03010_SPPLY_LIST_AREA" class="popup_scroll">
+			<ul id="ITP_POP_MPOMNG03010_SPPLY_LIST_ROWS" class="mb_0 itp_nav"></ul>
+			<div id="ITP_POP_MPOMNG03010_SPPLY_LIST_ROWCOPY" style="display: block;">
+				<li class="row_2">
+					<div class="scroll_left">
+						<div class="fnSpplyNm">공급업체 명A</div>
+						<div class="sub fnLocationNm">서울특별시 동대문구 서울 시립대로 12길</div>
+						<div class="sub fnLocationNm">누리자 B/D</div>
+					</div>
+					<div class="scroll_right">
+						<button id="ITP_BTN_MPOMNG03010_POP_SPPLY_CHOICE" class="fnSpplyId">선택</button>
+					</div>
+				</li>
+			</div>
+		</div>
+	</div>
+  </div>
+	<div id="ITP_POP_MPOMNG03010_WHS_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_MPOMNG03010_POP_WHS_CLOSE" class="btn-pop-close"><img src="../img/close.png"></button>
+				</div>
+			</div>
+			<div class="search_bar">
+				<form id="ITP_FORM_MPOMNG03010_POP_WHS" class="form-horizontal" onsubmit="return false;">
+					<input type="hidden" id="ITP_FORM_MPOMNG03010_WHS_ITEM_BRAND_ID" name="sbrandId" value="">
+					<input type="hidden" id="ITP_FORM_MPOMNG03010_WHS_ITEM_STORE_ID" name="sstoreId" value="">
+					<input id="ITP_FORM_MPOMNG03010_POP_WHS_KEYWORD" type="text" name="swhsNm" placeholder="납품장소명">
+					<button id="ITP_BTN_MPOMNG03010_POP_WHS_SEARCH"><img src="../img/search.png"></button>
+				</form>
+			</div>
+			<div class="select_btn">
+				<button id="ITP_BTN_MPOMNG03010_POP_WHS_NM" class="btn_blue">납품장소▼</button>
+			</div>
+			<div id="ITP_LIST_MPOMNG03010_POP_WHS_AREA" class="popup_scroll">
+				<ul id="ITP_LIST_MPOMNG03010_POP_WHS_ROWS" class="mb_0 itp_nav"></ul>
+				<div id="ITP_LIST_MPOMNG03010_POP_WHS_ROWCOPY" style="display: block;">
+					<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_MPOMNG03010_POP_WHS_CHOICE" class="fnWhsId" data-whs-id="">선택</button>
+						</div>
+					</li>
+				</div>
+			</div>
+		</div>
+	</div>
+  <div id="ITP_AJAX_MPOMNG03010_LIST_CONTAINER" style="display: block;">
+      <form id="ITP_FORM_MPOMNG03010_LIST" class="form-horizontal" onsubmit="return false;">
+      <input type="hidden" id="ITP_FORM_MPOMNG03010_DETAIL_VIEW_CD" name="viewCd" value="C">
+	    <div class="content">
+    	  <div class="line header">
+			<div class="itp_search_header">구매발주현황</div>
+      	  </div>
+	      <div class="line">
+	        <label>발주일자</label>
+	        <div class="date_to date">
+	          <input id="ITP_FORM_MPOMNG03010_LIST_SEARCH_FROM_DT" name="fromDt" type="date">
+	          <div class="at">~</div>
+	          <input id="ITP_FORM_MPOMNG03010_LIST_SEARCH_TO_DT" name="toDt" type="date">
+	        </div>
+	      </div>
+	      <div class="line">
+	        <label>발주상태</label>
+	        <div class="float_left">
+	          <select name="spchOdrStCd" id="ITP_FORM_MPOMNG03010_LIST_SEARCH_PCH_ORD_ST_CD">
+	            <option value=""></option>
+	          </select>
+	      	</div>   
+	      </div>
+	      <div class="line">
+	        <label>공급업체</label>
+	        <div class="float_left">
+	          <input type="text" id="ITP_FORM_MPOMNG03010_LIST_SEARCH_SPPLY_NM" name="sspplyNm" placeholder="A공급업체명">
+			  <input type="hidden" id="ITP_FORM_MPOMNG03010_LIST_SEARCH_SPPLY_ID" class="" name="sspplyId" />
+              <div class="itp_input_btn">
+	         	 <button id="ITP_BTN_MPOMNG03010_LIST_SEARCH_SPPLY_NM"><img src="../img/search.png" alt=""></button>
+      		  </div>
+	        </div>
+	        <div class="float_right_btn">
+	          <button id="ITP_BTN_MPOMNG03010_LIST_DELETE_SPPLY_NM"><img src="../img/delete.png" alt=""></button>
+	        </div>
+	      </div>
+	      <div class="line">
+          	<label>납품장소</label>
+          	<div class="search_nm">
+	            <div class="float_left">
+	              <input type="text" id="ITP_FORM_MPOMNG03010_LIST_SEARCH_WHS_NM" class="" name="swhsNm" placeholder="매장명" />
+				  <input type="hidden" id="ITP_FORM_MPOMNG03010_LIST_SEARCH_WHS_ID" class="" name="swhsId" />
+           		  <div class="itp_input_btn">
+	              	<button id="ITP_BTN_MPOMNG03010_LIST_SEARCH_WHS_NM"><img src="../img/search.png" alt=""></button>
+				  </div>
+	            </div>
+	            <div class="float_right_btn">
+	              <button id="ITP_BTN_MPOMNG03010_LIST_DELETE_WHS_NM"><img src="../img/delete.png" alt=""></button>
+	            </div>
+          	</div>
+   	 	  </div>
+	      <div class="line" style="height:50px;">
+	        <div class="search">
+	          <button id="ITP_BTN_MPOMNG03010_LIST_SEARCH" class="btn-primary btn-sm ADB">검색</button>
+	        </div>
+	      </div>
+	      <div class="table_header">
+	        <h1><발주 내역></h1>
+	      </div>
+	    </div>
+      <div id="ITP_LIST_MPOMNG03010_LIST_ITEM_AREA" class="scroll_area row-3">
+        <ul id="ITP_LIST_MPOMNG03010_LIST_ITEM_ROWS" class="mb_0"></ul>
+        	<div id="ITP_LIST_MPOMNG03010_LIST_ITEM_ROWCOPY" style="display: block;">
+		      <li class="list-row2">
+		        <div class="left">
+		          <div class="nomal">
+		            <label>발주일자 &nbsp;:</label>
+		            <div class="history">
+		              <div class="fnPodrDt">2022.10.01</div> 
+		              (<div class="fnOwnerNm">홍길동 점주</div>)
+		            </div>
+		          </div>
+		        </div>
+		        <div class="left">
+		          <div class="nomal">
+		            <label>발주상태 &nbsp;:</label>
+		            <div class="history">
+		              <div class="fnPodrStCd">대기</div>
+		            </div>
+		            <label>납품장소명&nbsp;:</label>
+		            <div class="history">
+		              <div class="fnDlvPlaceNm">A매장내</div>
+		            </div>
+		          </div>
+		        </div>
+		        <div class="left">
+		          <div class="nomal">
+		            <label>발주정보 &nbsp;:</label>
+		            <div class="history">
+		              <div class="fnItemQty">품목수(3)</div> 
+		              <i>-</i>
+		              <div class="fnItemAtm">1,200,000</div>원
+		            </div>
+		          </div>
+		        </div>
+		        <div class="left">
+		          <div class="nomal">
+		            <label>공급업체 &nbsp;:</label>
+		            <div class="history">
+		              <div class="fnSpplyNm">A공급업체</div> 
+		            </div>
+		          </div>
+		        </div>
+		      </li>
+	      </div>
+	    </div>
+    </form>
+  </div>
+  <div id="ITP_AJAX_MPOMNG03010_VIEW_CONTAINER" style="display: none;">
+     <form id="ITP_FORM_MPOMNG03010_VIEW" class="form-horizontal" onsubmit="return false;">
+      <input type="hidden" id="ITP_FORM_MPOMNG03010_VIEW_VIEW_CD" name="viewCd" value="C">
+	    <div class="content">
+	      <div class="line">
+	        <label>발주일자</label>
+	        <div class="line_right">
+	          <div class="fnPodrDt">2022.10.10</div>
+	        </div>      
+	      </div>
+	      <div class="line">
+	        <label>발주금액</label>
+	        <div class="line_right">
+	          <div class="fnPodrAmt">424,000원</div>
+	        </div>
+	      </div>
+	      <div class="line">
+	        <label>납품장소</label>
+	        <div class="line_right">
+	          <div class="fnDlvPlace">A매장내</div>
+	        </div>
+	      </div>
+	      <div class="line">
+	        <label>공급업체</label>
+	        <div class="line_right">
+	          <div class="fnSpplyNm">A공급업체</div>
+	        </div>
+	      </div>
+	      <div class="table_header">
+	        <h1>> 발주 품목</h1>
+	      </div>
+	    </div>
+      <div id="ITP_LIST_MPOMNG03010_VIEW_ITEM_AREA" class="scroll_area row-2">
+        <ul id="ITP_LIST_MPOMNG03010_VIEW_ITEM_ROWS" class="mb_0"></ul>
+        	<div id="ITP_LIST_MPOMNG03010_VIEW_ITEM_ROWCOPY" style="display:block;">
+			  <li>
+		        <div>
+		          <div class="left_info col-4">
+		            <div class="thick">
+             		  <label>품목명</label>
+             		  <span>:</span>
+		              <div class="fnItemNm">품목명</div>
+		            </div>
+		          </div>
+		          <div class="left_info col-6">
+		            <div class="thick">
+		              <label>수량/금액</label> 
+		              <span>:</span>
+		              <div class="fnQty">200</div>
+		              <span>/</span>
+		              <div class="fnAmt">1,224,000</div>
+		            </div>
+		          </div>
+		          <div class="left_info col-4">
+		            <div class="thick">
+		              <label>구매가 </label>
+		              <span>:</span>
+		              <div class="fnPchActAmt">12,000</div>
+		            </div>
+		          </div>
+		          <div class="left_info col-6">
+		            <div class="thick">
+		              <label>납기요청일</label>
+		              <span>:</span>
+		              <div class="fnDlvReqDt">2022.10.01</div>
+		            </div>
+		          </div>
+		        </div>
+		      </li>
+	      </div>
+	    </div>
+	    <div class="button_bar">
+	      <button id="ITP_BTN_MPOMNG03010_VIEW_CANCEL" class="col_12 btn-gray CLB">취소</button>
+	    </div>
+    </form>
+  </div>
+  <div id="ITP_MOBILE_JS"></div>
+</section>
 		</div>
 	</div>
 	<footer id="ITP_FOOTER">

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

@@ -6,7 +6,8 @@
 }
 * {margin: 0; padding: 0; box-sizing: border-box; text-align: center; font-family: 'GmarketSansMedium', 'serif'; list-style: none;}
 section {}
-body{background: #fff; position: fixed; width: 100%; height: auto; font-family: 'GmarketSansMedium';}
+body{background: #fff; position: relative; width: 100%; height: auto; font-family: 'GmarketSansMedium';}
+body .login {position:fixed;}
 .color-gray {color:#aaa;}
 /* 팝업 */
 section .popup { position: fixed; width: 100%; height: 100%; background: transparent; z-index: 11;}
@@ -140,11 +141,15 @@ body.eee {height: 700px; background: #eee;}
 
 /* 로그인 */
 .bg_gray {width:100%; height:180px; background:#ecebea; border-bottom-left-radius:50%; border-bottom-right-radius:50%;}
-#ITP_LOGIN {max-width: 500px; margin: 0 auto;}
-#ITP_LOGIN .login_popup {position: relative; width: 100%; text-align: center;}
+#ITP_LOGIN {
+    transform: translateX(-50%);
+    max-width: 500px;
+    left: 50%;
+    position: fixed;}
+#ITP_LOGIN .login_popup {position: relative; width: 350px; text-align: center;}
 #ITP_LOGIN .login_popup h1 { font-size: 1.5rem; color: #333; font-weight: 700;}
 #ITP_LOGIN .login_popup input { position: relative; height: 30px; font-size: 2.2rem;}
-#ITP_LOGIN .login_popup .login_info { margin-bottom: 30px; position:relative; top:-50px;}
+#ITP_LOGIN .login_popup .login_info {position:relative; top:-50px;}
 #ITP_LOGIN .login_popup .login_info img {width:100px; margin-bottom:10px;}
 #ITP_LOGIN .login_popup .num_area { position: relative; width: 100%;  margin-bottom: 40px;}
 #ITP_LOGIN .login_popup .num_area .input_area {margin-bottom: 10px;}
@@ -160,7 +165,7 @@ body.eee {height: 700px; background: #eee;}
 #ITP_LOGIN .input_area label {position: absolute; left: 18%; top: 14px; font-size: 15px; transition: all .5s ease; color:#666;}
 #ITP_LOGIN .input_area input:focus + label,
 #ITP_LOGIN .input_area input:valid + label {top: 4px; left: 18%; font-size: 0.6rem; color: blue;}
-#ITP_LOGIN .error {margin: 0 auto; margin-top: 100px;}
+#ITP_LOGIN .error {margin: 0 auto; height:70px;}
 #ITP_LOGIN .error label {font-size: 1rem;}
 #ITP_LOGIN .login_btn {position: relative; top: -20px; left: 0;}
 #ITP_LOGIN .login_btn button {
@@ -496,64 +501,23 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
 	.content .line div.date_to input {width:45%}
 	.content .line {margin:-5px 3%;}
 	.content .line .float_left.name {width:76%;}
-	.modal-dialog {margin:auto 20% !important; }
+	.modal-dialog {margin:auto 20% !important;}
 }
+@media screen and (max-height: 720px) {
+	#ITP_LOGIN {position:fixed; top:80px; max-width: 500px; margin: 0 auto;}
+	.bg_gray {position:relative; top:-90px;}
+	
+	}
 /* 알림 팝업 추가 */
 .modal {position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; display: none; overflow: hidden; outline: 0;}
 .itp_modal {z-index: 10000;}
-.modal-dialog {
-    position: relative;
-    width: auto;
-    margin: 10px;
-}
-.modal-content {
-    position: relative;
-    background-color: #fff;
-    background-clip: padding-box;
-    border: 1px solid #999;
-    border: 1px solid rgba(0,0,0,.2);
-    border-radius: 6px;
-    outline: 0;
-    box-shadow: 0 3px 9px rgb(0 0 0 / 50%);
-}
-.modal-header {
-    min-height: 16.43px;
-    padding: 15px;
-    border-bottom: 1px solid #e5e5e5;
-    padding: 12px 15px 12px 15px;
-    background: #337ab7;
-    cursor: move;
-}
-.modal-header .close {
-    margin-top: -2px;
-    color: #fff;
-    opacity: 1;
-}
-button.close {
-    -webkit-appearance: none;
-    padding: 0;
-    cursor: pointer;
-    background: 0 0;
-    border: 0;
-}
-.close {
-    float: right;
-    font-size: 21px;
-    font-weight: 700;
-    line-height: 1;
-    text-shadow: 0 1px 0 #fff;
-}
-.modal-body {
-    position: relative;
-    padding: 15px;
-}
-.modal-footer {
-    padding: 15px;
-    text-align: right;
-    border-top: 1px solid #e5e5e5;
-}
-.modal-footer .btn {
-	border-radius:6px;
-    padding: 6px 12px;
-}
+.modal-dialog {position: relative; width: auto; margin: 10px;}
+.modal-content {position: relative; background-color: #fff; background-clip: padding-box; border: 1px solid #999; border: 1px solid rgba(0,0,0,.2); border-radius: 6px; outline: 0; box-shadow: 0 3px 9px rgb(0 0 0 / 50%);}
+.modal-header {min-height: 16.43px; padding: 15px; border-bottom: 1px solid #e5e5e5; padding: 12px 15px 12px 15px; background: #337ab7; cursor: move;}
+.modal-header .close { margin-top: -2px; color: #fff; opacity: 1;}
+button.close {-webkit-appearance: none; padding: 0; cursor: pointer; background: 0 0; border: 0;}
+.close {float: right; font-size: 21px; font-weight: 700; line-height: 1; text-shadow: 0 1px 0 #fff;}
+.modal-body {position: relative; padding: 15px;}
+.modal-footer {padding: 15px; text-align: right; border-top: 1px solid #e5e5e5;}
+.modal-footer .btn {border-radius:6px; padding: 6px 12px;}