납품서현황 모바일 수정

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

@@ -6,6 +6,9 @@
 			<input type="hidden" id="ITP_FORM_MORDMNG01010_SEARCH_SPPLY_ID" name="sspplyId" value="">
 			<div class="content">
 				<div class="content_fix">
+					<div class="line header">
+						<div class="itp_search_header"><img src="../img/right_arrow_pink.png" alt="">납품서현황</div>
+			      	</div>
 					<div class="line">
 						<label>납품장소</label>
 						<div class="float_left">
@@ -107,27 +110,27 @@
 		</form>
 	</div>
 	<!-- 여기부터 -->
-	<div id="ITP_AJAX_MORDMNG03010_VIEW_CONTAINER" style="display: block;">
+	<div id="ITP_AJAX_MORDMNG03010_VIEW_CONTAINER" style="display: none;">
 		<form id="ITP_FORM_MORDMNG03010_VIEW" class="form-horizontal" onsubmit="return false;">
 			<input type="hidden" id="ITP_FORM_MORDMNG03010_VIEW_VIEW_CD" name="viewCd" value="C">
 			<div class="detail_content">
 				<div class="detail_content_fix">
 					<div class="detail_header">
-						<div class="detail_logo"></div>
+						<div class="detail_logo"><img src=""></div>
 						<div class="detail_ok">
 							<label>납품 확인서</label>
 						</div>
 					</div>
 					<div class="detail_confirmation">
 						<div class="detail_col">
-							<label>발행일</label>
+							<label>납품서확인번호</label>
 							<i>:</i>
-							<div class="fnDlvRegDt"></div>
+							<div class="fnDlvSttmtUnqNo"></div>
 						</div>
 						<div class="detail_col">
-							<label>납품서확인번호</label>
+							<label>발행일</label>
 							<i>:</i>
-							<div class="fnDlvSttmtUnqNo"></div>
+							<div class="fnDlvRegDt"></div>
 						</div>
 						<div class="detail_col">
 							<label>납품일</label>
@@ -195,49 +198,43 @@
 						</div>
 					</div>
 					<div class="table_header">
-						<h1>> 납품 상세 내역</h1>
+						<h1><납품 상세 내역></h1>
 					</div>
 				</div>
 			</div>
 			<div id="ITP_LIST_MORDMNG03010_VIEW_ITEM_AREA" class="scroll_area row-7">
 				<ul id="ITP_LIST_MORDMNG03010_VIEW_ITEM_ROWS" class="mb_0 panel-group"></ul>
-				<div id="ITP_LIST_MORDMNG03010_VIEW_ITEM_ROWCOPY" style="display: block;">
-					<li class="history_list5 item-row">
+				<div id="ITP_LIST_MORDMNG03010_VIEW_ITEM_ROWCOPY" style="display: none;">
+					<li class="history_list10 item-row">
 						<div>
 							<div class="left">
 								<div class="nomal">
-									<label>발주번호 &nbsp;:</label>
-									<div class="space2">
-										<div class="fnPchPodrUnqNo"></div>
-									</div>
-									<label class="col_0">품목아이디&nbsp;:</label>
-									<div class="space2">
-										<div class="fnItemId"></div>
-									</div>
+									<label class="col_3">발주번호</label>
+									<span>:</span>
+									<div class="fnPchPodrUnqNo"></div>
+									<label class="col_0">품목아이디</label>
+									<span>:</span>
+									<div class="fnItemId"></div>
 								</div>
 							</div>
 							<div class="left">
 								<div class="nomal">
-									<label>품목명 &nbsp;:</label>
-									<div class="space2">
-										<div class="fnItemNm"></div>
-									</div>
-									<label>유통기한&nbsp;:</label>
-									<div class="space2">
-										<div class="fnExpryDate"></div>
-									</div>
+									<label class="col_3">품목명</label>
+									<span>:</span>
+									<div class="fnItemNm"></div>
+									<label>유통기한</label>
+									<span>:</span>
+									<div class="fnExpryDate"></div>
 								</div>
 							</div>
 							<div class="left">
 								<div class="nomal">
-									<label>발주수량 &nbsp;:</label>
-									<div class="space2">
-										<div class="fnPodrQty"></div>
-									</div>
-									<label>납품수량&nbsp;:</label>
-									<div>
-										<div class="fnDlvQty"></div>
-									</div>
+									<label class="col_3">발주수량</label>
+									<span>:</span>
+									<div class="fnPodrQty"></div>
+									<label>납품수량</label>
+									<span>:</span>
+									<div class="fnDlvQty"></div>
 								</div>
 							</div>
 						</div>
@@ -255,7 +252,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_MORDMNG03010_POP_WHS_CLOSE" class="btn-pop-close"><img src="../img/close.png"></button>
@@ -269,16 +266,16 @@
 					<button id="ITP_BTN_MORDMNG03010_POP_WHS_SEARCH"><img src="../img/search.png"></button>
 				</form>
 			</div>
-			<div class="search_bar">
-				<button id="ITP_BTN_MORDMNG03010_POP_WHS_NM" class="btn_blue">납품장소▼</button>
+			<div class="select_btn">
+				<button id="ITP_BTN_MORDMNG03010_POP_WHS_NM" class="btn_red">납품장소 <img src="../img/arrow_down.png"></button>
 			</div>
 			<div id="ITP_LIST_MORDMNG03010_POP_WHS_AREA" class="popup_scroll">
-				<ul id="ITP_LIST_MORDMNG03010_POP_WHS_ROWS" class="panel-group itp_nav"></ul>
-				<div id="ITP_LIST_MORDMNG03010_POP_WHS_ROWCOPY" style="display:none;">
-					<li class="list-row">
+				<ul id="ITP_LIST_MORDMNG03010_POP_WHS_ROWS" class="mb_0 panel-group itp_nav"></ul>
+				<div id="ITP_LIST_MORDMNG03010_POP_WHS_ROWCOPY" style="display: none;">
+					<li class="row_2 item-row">
 						<div class="scroll_left">
 							<div class="fnWhsNm">브랜드 창고 명A</div>
-							<div class="fnLocationNm">(상세위치내용)</div>
+							<div class="wichi fnLocationNm">(상세위치내용)</div>
 						</div>
 						<div class="scroll_right">
 							<button id="ITP_BTN_MORDMNG03010_POP_WHS_CHOICE" class="fnWhsId" data-whs-id="">선택</button>

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

@@ -386,28 +386,28 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
 .content .table_header {margin-top: 6px; width: 100%; height: 36px;}
 .content .table_header h1 {margin-left: 15px; margin-top:16px; margin-bottom:0; font-size: 13px; float: left; color: #000; font-weight: 100;}
 .content .table_header button {float: right; width: 68px; height:26px; font-size: 12px; font-weight: 100; padding:0px; margin: 4px 12px 6px 0; border-radius:15px;}
-.detail_content {top: 0px; position: fixed; z-index: 10; width:100%; background: #fff;}
+.detail_content {top: 0px; position: fixed; display:contents; z-index: 10; width:100%; background: #fff;}
 .detail_content .detail_content_fix {background: #f5f6f6; border-bottom:1px solid #E0B8AB;}
-.detail_content .detail_header {width: 100%; height: 80px; padding-top:65px}
-.detail_content .detail_header .detail_logo {float: left;}
-.detail_content .detail_header .detail_logo img {width: 70px; margin-left: 15px;}
-.detail_content .detail_header .detail_ok {float: left;}
-.detail_content .detail_header .detail_ok label {margin-left: 50px; font-size: 1.6rem; font-weight: 700;}
-.detail_content .detail_confirmation {height: 260px; }
-.detail_content .detail_confirmation .detail_col {float: left; width: 100%; display: inline-flex; margin-left: 15px; margin-bottom: 10px;}
-.detail_content .detail_confirmation .detail_col label{font-size: 12pt; font-weight: 700; float: left; width: 100px; text-align: left;}
-.detail_content .detail_confirmation .detail_col i{font-size: 1rem; font-style:normal; width: 1%; text-align: right; margin-right: 10px;}
-.detail_content .detail_confirmation .detail_col div{font-size: 1rem; width: auto; text-align: left;}
-.detail_content .detail_company_info {height:150px;}
-.detail_content .detail_company_info label{font-size: 1rem; font-weight: 600;}
-.detail_content .detail_company_info .weight {margin-bottom: 20px;}
-.detail_content .detail_company_info .weight label{font-size: 1.2rem; font-weight: 700;}
-.detail_content .detail_company_info div{font-size: 1rem;}
-.detail_content .detail_company_info .info_left {width: 50%; height: 150px; float: left;}
-.detail_content .detail_company_info .info_left .company_info {width: 100%; float: left; display: flex; margin-left: 15px; margin-top:3px;}
-.detail_content .table_header {margin: 0% auto; width: 100%; height: 45px; background-color: skyblue; align-items: center; position: fixed; z-index: 10;}
-.detail_content .table_header h1 {margin-top: 12px; margin-left: 15px; font-size: 1.2rem; float: left;}
-.detail_content .table_header button {float: right; width: 200px; font-size: 2rem; padding: 5px 20px; margin: 20px;}
+.detail_content .detail_header {width: 330px; height: 50px; margin:0; left:50%; position:relative; transform:translateX(-50%);}
+.detail_content .detail_header .detail_logo {float: left; margin-top:7px;}
+.detail_content .detail_header .detail_logo img {width: 35px; margin-left: 10px;}
+.detail_content .detail_header .detail_ok {float: left; margin-top:10px;}
+.detail_content .detail_header .detail_ok label {margin-left: 72px; font-size: 14pt; font-weight: 700;}
+.detail_content .detail_confirmation {height: 190px; margin-top:5px;}
+.detail_content .detail_confirmation .detail_col {left:50%; position:relative; transform:translateX(-50%); float: left; width: 330px; height:20px; margin-bottom:11px; display: flex;}
+.detail_content .detail_confirmation .detail_col label{font-size: 12pt; font-weight: 700; float: left; width: auto; text-align: left; min-width:78px;}
+.detail_content .detail_confirmation .detail_col i{font-size: 12pt; font-style:normal; width: 1%; text-align: right; margin-right: 10px;}
+.detail_content .detail_confirmation .detail_col div{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; font-size: 12pt; width: 210px; text-align: left;}
+.detail_content .detail_company_info {width: 330px;left: 50%; position: relative; transform: translateX(-50%); height:150px; margin-top:5px;}
+.detail_content .detail_company_info label{font-size: 11pt; font-weight: 600; width: auto; text-align:left;}
+.detail_content .detail_company_info .weight {width:50px; margin:0 auto;}
+.detail_content .detail_company_info .weight label{font-size: 13pt; font-weight: 700;}
+.detail_content .detail_company_info div{font-size: 11pt; width:120px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; text-align:left;}
+.detail_content .detail_company_info .info_left {width: 165px; height: 150px; float: left;}
+.detail_content .detail_company_info .info_left .company_info {width: 100%; float: left; display: flex; margin-left: 0px; margin-top:3px;}
+.detail_content .table_header {margin-top: 6px; width: 100%; height: 36px;}
+.detail_content .table_header h1 {margin-left: 15px; margin-top:16px; margin-bottom:0; font-size: 13px; float: left; color: #000; font-weight: 100;}
+.detail_content .table_header button {float: right; width: 68px; height:26px; font-size: 12px; font-weight: 100; padding:0px; margin: 4px 12px 6px 0; border-radius:15px;}
 
 /* select.stcd {
   float: left;
@@ -476,6 +476,7 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
 .scroll_area li.history_list3 .btn_check {height:158px; margin-top:-5px; width:90%; float:right; padding-top:7px; }
 .scroll_area li.history_list4 {height: 150px; padding-top:4px;}
 .scroll_area li.history_list5 {height: 65px; padding-top:5px;}
+.scroll_area li.history_list10 {height: 90px; padding-top:5px;}
 .scroll_area li.history_list8 {height: 100px; padding-top:5px;}
 .scroll_area li.history_list6 {height: 110px; padding-top:5px;}
 .scroll_area li.history_list7 {height: 120px; padding-top:5px;}
@@ -612,6 +613,7 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
 }
 @media screen and (min-width: 630px) {
 	.content .line {margin:0 100px -10px 100px;}
+	.detail_content .detail_confirmation .detail_col {width:410px;}
 }
 @media screen and (max-height: 720px) {
 	#ITP_LOGIN {position:fixed; top:80px; max-width: 500px; margin: 0 auto;}