Home Explore Help
Register Sign In
orderqueen
/
oqpo-view
Watch 3
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

모바일 html 디자인 수정

whakdo963 2 years ago
parent
b39cbb8ebb
commit
20c05c2c65
4 changed files with 64 additions and 58 deletions
Split View Show Diff Stats
  1. 0 1
      src/main/webapp/mobile/app/mpomng/MPOMNG01010.html
  2. 1 3
      src/main/webapp/mobile/app/mpomng/MPOMNG02010.html
  3. 54 46
      src/main/webapp/mobile/app/mpomng/MPOMNG03010.html
  4. 9 8
      src/main/webapp/mobile/css/style.css

+ 0 - 1
src/main/webapp/mobile/app/mpomng/MPOMNG01010.html
View File 

@@ -66,7 +66,6 @@
66 66 
               </div>
67 67 
               <div class="thick">
68 68 
                 <div class="itp_item fnItemNm">품목명</div>
69 
-                <div class="itp_item fnUnit"></div>
70 69 
               </div>
71 70 
               <div class="thick">
72 71 
                 <div class="itp_gram fnUnitAmt"></div>

+ 1 - 3
src/main/webapp/mobile/app/mpomng/MPOMNG02010.html
View File 

@@ -36,7 +36,7 @@
36 36 
           <button id="ITP_BTN_MPOMNG02010_LIST_DELETE_WHS_NM"><img src="../img/delete.png" alt=""></button>
37 37 
         </div>
38 38 
       </div>
39 
-      <div class="line" style="height:50px;">
39 
+      <div class="line">
40 40 
         <div class="search">
41 41 
           <button id="ITP_BTN_MPOMNG02010_LIST_SEARCH" class="btn-primary btn-sm ADB">검색</button>
42 42 
         </div>
 
@@ -139,7 +139,6 @@
139 139 
           <div class="left_info">
140 140 
              <div class="thick">
141 141 
                 <div class="itp_item fnItemNm">품목명</div>
142 
-                <div class="itp_item fnUnit">EA</div>
143 142 
               </div>
144 143 
               <div class="thick">
145 144 
                 <div class="itp_gram fnUnitAmt">700g</div>
 
@@ -221,7 +220,6 @@
221 220 
               </div>
222 221 
               <div class="thick">
223 222 
                 <div class="itp_item fnItemNm">품목명</div>
224 
-                <div class="itp_item fnUnit">EA</div>
225 223 
               </div>
226 224 
               <div class="thick">
227 225 
                 <div class="itp_gram fnUnitAmt">700g</div>

+ 54 - 46
src/main/webapp/mobile/app/mpomng/MPOMNG03010.html
View File 

@@ -3,7 +3,7 @@
3 3 
 	<div class="pop">
4 4 
 		<div class="header">
5 5 
 			<div class="header_left">
6 
-				<label>> 공급업체</label>
6 
+				<label>공급업체</label>
7 7 
 			</div>
8 8 
 			<div class="header_right">
9 9 
 				<button type="button" id="ITP_BTN_MPOMNG03010_POP_SPPLY_CLOSE"><img src="../img/close.png"></button>
 
@@ -17,16 +17,17 @@
17 17 
 				<button id="ITP_BTN_MPOMNG03010_POP_SPPLY_SEARCH"><img src="../img/search.png"></button>
18 18 
 			</form>
19 19 
 		</div>
20 
-		<div class="search_bar">
21 
-			<button id="ITP_BTN_MPOMNG03010_POP_SPPLY_NM" class="btn_blue">공급업체▼</button>
20 
+		<div class="select_btn">
21 
+			<button id="ITP_BTN_MPOMNG03010_POP_SPPLY_NM" class="btn_blue">공급업체 ▼</button>
22 22 
 		</div>
23 23 
 		<div id="ITP_POP_MPOMNG03010_SPPLY_LIST_AREA" class="popup_scroll">
24 
-			<ul id="ITP_POP_MPOMNG03010_SPPLY_LIST_ROWS" class="panel-group itp_nav"></ul>
24 
+			<ul id="ITP_POP_MPOMNG03010_SPPLY_LIST_ROWS" class="mb_0 itp_nav"></ul>
25 25 
 			<div id="ITP_POP_MPOMNG03010_SPPLY_LIST_ROWCOPY" style="display: block;">
26 
-				<li>
26 
+				<li class="row_2">
27 27 
 					<div class="scroll_left">
28 28 
 						<div class="fnSpplyNm">공급업체 명A</div>
29 
-						<div class="fnLocationNm">(상세위치내용)</div>
29 
+						<div class="sub fnLocationNm">서울특별시 동대문구 서울 시립대로 12길</div>
30 
+						<div class="sub fnLocationNm">누리자 B/D</div>
30 31 
 					</div>
31 32 
 					<div class="scroll_right">
32 33 
 						<button id="ITP_BTN_MPOMNG03010_POP_SPPLY_CHOICE" class="fnSpplyId">선택</button>
 
@@ -40,7 +41,7 @@
40 41 
 		<div class="pop">
41 42 
 			<div class="header">
42 43 
 				<div class="header_left">
43 
-					<label>> 납품장소</label>
44 
+					<label>납품장소</label>
44 45 
 				</div>
45 46 
 				<div class="header_right">
46 47 
 					<button type="button" id="ITP_BTN_MPOMNG03010_POP_WHS_CLOSE" class="btn-pop-close"><img src="../img/close.png"></button>
 
@@ -54,16 +55,17 @@
54 55 
 					<button id="ITP_BTN_MPOMNG03010_POP_WHS_SEARCH"><img src="../img/search.png"></button>
55 56 
 				</form>
56 57 
 			</div>
57 
-			<div class="search_bar">
58 
+			<div class="select_btn">
58 59 
 				<button id="ITP_BTN_MPOMNG03010_POP_WHS_NM" class="btn_blue">납품장소▼</button>
59 60 
 			</div>
60 61 
 			<div id="ITP_LIST_MPOMNG03010_POP_WHS_AREA" class="popup_scroll">
61 
-				<ul id="ITP_LIST_MPOMNG03010_POP_WHS_ROWS" class="panel-group itp_nav"></ul>
62 
-				<div id="ITP_LIST_MPOMNG03010_POP_WHS_ROWCOPY" style="display:none;">
62 
+				<ul id="ITP_LIST_MPOMNG03010_POP_WHS_ROWS" class="mb_0 itp_nav"></ul>
63 
+				<div id="ITP_LIST_MPOMNG03010_POP_WHS_ROWCOPY" style="display: block;">
63 64 
 					<li class="row_2">
64 65 
 						<div class="scroll_left">
65 66 
 							<div class="fnWhsNm">브랜드 창고 명A</div>
66 
-							<div class="fnLocationNm">(상세위치내용)</div>
67 
+						    <div class="sub fnLocationNm">서울특별시 동대문구 서울 시립대로 12길</div>
68 
+							<div class="sub fnLocationNm">누리자 B/D</div>
67 69 
 						</div>
68 70 
 						<div class="scroll_right">
69 71 
 							<button id="ITP_BTN_MPOMNG03010_POP_WHS_CHOICE" class="fnWhsId" data-whs-id="">선택</button>
 
@@ -73,40 +75,41 @@
73 75 
 			</div>
74 76 
 		</div>
75 77 
 	</div>
76 
-  <div id="ITP_AJAX_MPOMNG03010_LIST_CONTAINER" style="display: block;">
78 
+  <div id="ITP_AJAX_MPOMNG03010_LIST_CONTAINER" style="display: none;">
77 79 
       <form id="ITP_FORM_MPOMNG03010_LIST" class="form-horizontal" onsubmit="return false;">
78 80 
       <input type="hidden" id="ITP_FORM_MPOMNG03010_DETAIL_VIEW_CD" name="viewCd" value="C">
79 81 
 	    <div class="content">
82 
+    	  <div class="line header">
83 
+			<div class="itp_search_header fnMenuNm">구매발주현황</div>
84 
+      	  </div>
80 85 
 	      <div class="line">
81 86 
 	        <label>발주일자</label>
82 
-	        <div class="date_to">
83 
-	          <input id="ITP_FORM_MPOMNG03010_LIST_SEARCH_FROM_DT" name="fromDt" class="year" type="date">
87 
+	        <div class="date_to date">
88 
+	          <input id="ITP_FORM_MPOMNG03010_LIST_SEARCH_FROM_DT" name="fromDt" type="date">
84 89 
 	          <div class="at">~</div>
85 
-	          <input id="ITP_FORM_MPOMNG03010_LIST_SEARCH_TO_DT" name="toDt" class="year" type="date">
90 
+	          <input id="ITP_FORM_MPOMNG03010_LIST_SEARCH_TO_DT" name="toDt" type="date">
86 91 
 	        </div>
87 92 
 	      </div>
88 93 
 	      <div class="line">
89 94 
 	        <label>발주상태</label>
90 
-	        <div class="search_wrap">
91 
-		        <div class="line_right">
92 
-		          <select name="spchOdrStCd" class="m9" id="ITP_FORM_MPOMNG03010_LIST_SEARCH_PCH_ORD_ST_CD">
93 
-		            <option value=""></option>
94 
-		          </select>
95 
-		        </div>
95 
+	        <div class="float_left">
96 
+	          <select name="spchOdrStCd" id="ITP_FORM_MPOMNG03010_LIST_SEARCH_PCH_ORD_ST_CD">
97 
+	            <option value=""></option>
98 
+	          </select>
96 99 
 	      	</div>
97 100 
 	      </div>
98 101 
 	      <div class="line">
99 102 
 	        <label>공급업체</label>
100 
-	        <div class="search_wrap">
101 
-		        <div class="float_left">
102 
-		          <input type="text" id="ITP_FORM_MPOMNG03010_LIST_SEARCH_SPPLY_NM" name="sspplyNm" placeholder="A공급업체명">
103 
-				  <input type="hidden" id="ITP_FORM_MPOMNG03010_LIST_SEARCH_SPPLY_ID" class="" name="sspplyId" />
104 
-		        </div>
105 
-		        <div class="float_left_btn">
106 
-		          <button id="ITP_BTN_MPOMNG03010_LIST_SEARCH_SPPLY_NM"><img src="../img/search.png" alt=""></button>
107 
-		          <button id="ITP_BTN_MPOMNG03010_LIST_DELETE_SPPLY_NM"><img src="../img/delete.png" alt=""></button>
108 
-		        </div>
109 
-	        </div>
103 
+	        <div class="float_left">
104 
+	          <input type="text" id="ITP_FORM_MPOMNG03010_LIST_SEARCH_SPPLY_NM" name="sspplyNm" placeholder="A공급업체명">
105 
+			  <input type="hidden" id="ITP_FORM_MPOMNG03010_LIST_SEARCH_SPPLY_ID" class="" name="sspplyId" />
106 
+                 <div class="itp_input_btn">
107 
+	         	 <button id="ITP_BTN_MPOMNG03010_LIST_SEARCH_SPPLY_NM"><img src="../img/search.png" alt=""></button>
108 
+      		  </div>
109 
+	        </div>
110 
+	        <div class="float_right_btn">
111 
+	          <button id="ITP_BTN_MPOMNG03010_LIST_DELETE_SPPLY_NM"><img src="../img/delete.png" alt=""></button>
112 
+	        </div>
110 113 
 	      </div>
111 114 
 	      <div class="line">
112 115 
           	<label>납품장소</label>
 
@@ -114,9 +117,11 @@
114 117 
 	            <div class="float_left">
115 118 
 	              <input type="text" id="ITP_FORM_MPOMNG03010_LIST_SEARCH_WHS_NM" class="" name="swhsNm" placeholder="매장명" />
116 119 
 				  <input type="hidden" id="ITP_FORM_MPOMNG03010_LIST_SEARCH_WHS_ID" class="" name="swhsId" />
120 
+           		  <div class="itp_input_btn">
121 
+	              	<button id="ITP_BTN_MPOMNG03010_LIST_SEARCH_WHS_NM"><img src="../img/search.png" alt=""></button>
122 
+				  </div>
117 123 
 	            </div>
118 
-	            <div class="float_left_btn">
119 
-	              <button id="ITP_BTN_MPOMNG03010_LIST_SEARCH_WHS_NM"><img src="../img/search.png" alt=""></button>
124 
+	            <div class="float_right_btn">
120 125 
 	              <button id="ITP_BTN_MPOMNG03010_LIST_DELETE_WHS_NM"><img src="../img/delete.png" alt=""></button>
121 126 
 	            </div>
122 127 
           	</div>
 
@@ -127,13 +132,13 @@
127 132 
 	        </div>
128 133 
 	      </div>
129 134 
 	      <div class="table_header">
130 
-	        <h1>> 발주 내역</h1>
135 
+	        <h1><발주 내역></h1>
131 136 
 	      </div>
132 137 
 	    </div>
133 138 
       <div id="ITP_LIST_MPOMNG03010_LIST_ITEM_AREA" class="scroll_area row-3">
134 
-        <ul id="ITP_LIST_MPOMNG03010_LIST_ITEM_ROWS" class="panel-group"></ul>
139 
+        <ul id="ITP_LIST_MPOMNG03010_LIST_ITEM_ROWS" class="mb_0"></ul>
135 140 
         	<div id="ITP_LIST_MPOMNG03010_LIST_ITEM_ROWCOPY" style="display: block;">
136 
-		      <li class="list-row">
141 
+		      <li class="list-row2">
137 142 
 		        <div class="left">
138 143 
 		          <div class="nomal">
139 144 
 		            <label>발주일자 &nbsp;:</label>
 
@@ -211,34 +216,37 @@
211 216 
 	      </div>
212 217 
 	    </div>
213 218 
       <div id="ITP_LIST_MPOMNG03010_VIEW_ITEM_AREA" class="scroll_area row-2">
214 
-        <ul id="ITP_LIST_MPOMNG03010_VIEW_ITEM_ROWS" class="panel-group"></ul>
219 
+        <ul id="ITP_LIST_MPOMNG03010_VIEW_ITEM_ROWS" class="mb_0"></ul>
215 220 
         	<div id="ITP_LIST_MPOMNG03010_VIEW_ITEM_ROWCOPY" style="display:block;">
216 
-			  <li class="list-row">
221 
+			  <li>
217 222 
 		        <div>
218 223 
 		          <div class="left_info col-4">
219 224 
 		            <div class="thick">
225 
+             		  <label>품목명</label>
226 
+             		  <span>:</span>
220 227 
 		              <div class="fnItemNm">품목명</div>
221 
-		              <i>-</i>
222 
-		              <div class="fnUnit">2EA</div>
223 228 
 		            </div>
224 229 
 		          </div>
225 230 
 		          <div class="left_info col-6">
226 231 
 		            <div class="thick">
227 
-		              <label>수량/금액</label>
228 
-		              <div class="fnQty">2</div>
229 
-		              <i>/</i>
230 
-		              <div class="fnAmt">24,000</div>
232 
+		              <label>수량/금액</label>
233 
+		              <span>:</span>
234 
+		              <div class="fnQty">200</div>
235 
+		              <span>/</span>
236 
+		              <div class="fnAmt">1,224,000</div>
231 237 
 		            </div>
232 238 
 		          </div>
233 239 
 		          <div class="left_info col-4">
234 240 
 		            <div class="thick">
235 
-		              <label style="margin:0;">구매가 :</label>
241 
+		              <label>구매가 </label>
242 
+		              <span>:</span>
236 243 
 		              <div class="fnPchActAmt">12,000</div>
237 244 
 		            </div>
238 245 
 		          </div>
239 246 
 		          <div class="left_info col-6">
240 247 
 		            <div class="thick">
241 
-		              <label>납기요청일&nbsp;:&nbsp;</label>
248 
+		              <label>납기요청일</label>
249 
+		              <span>:</span>
242 250 
 		              <div class="fnDlvReqDt">2022.10.01</div>
243 251 
 		            </div>
244 252 
 		          </div>

+ 9 - 8
src/main/webapp/mobile/css/style.css
View File 

@@ -272,7 +272,6 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
272 272 
 .content .line label {min-width:110px; color:#666; font-size: 18px; margin-left: 10px; float: left; text-align: left; margin-top: 10px; font-weight:100;}
273 273 
 .content .line label.pay_label {margin:38px 1%; width:98%;}
274 274 
 .content .line select.label {border: 1px solid #000; font-size: 0.9rem;margin:9px 0 0 5px; float: left; width: 120px; height: 30px; text-align: left;}
275 
-.content .line .search_wrap {float:right; margin-right:10px;}
276 275 
 .content .line .float_left {float: left; margin-top:2px; width:50%;}
277 276 
 .content .line .float_left button {float:right; left:-5px; position:relative; background:transparent; border:none; width:36px; height:36px; padding:0;}
278 277 
 .content .line .float_left button img {width:22px;}
 
@@ -291,14 +290,12 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
291 290 
 .content .line .line_right input.m9 {margin-right:93px;}
292 291 
 .content .line .line_right input.left {text-align: left;}
293 292 
 .content .line .line_right input.mg0 {margin-right:10px;}
294 
-.content .line .line_right select.m9 {margin-right:83px;}
295 293 
 .content .line .line_right input.date{width:140px; margin-right:132px; height:35px;}
296 294 
 .content .line .line_right select {float: right; width: 180px; height: 30px; margin-top: 7px; border: 1px solid #000; font-size: 1rem; margin-right:93px;}
297 295 
 .content .line input.date {width: 50%; margin: 5px 0; height: 35px; float: left; text-align:center; font-size:14px;background: url(../img/calender.png)no-repeat 95% 50%/20px auto #fff;}
298 296 
 .content .line input.date2 {width: 140px; height: 30px; margin-right:133px;}
299 297 
 .content .line div.date_to {width:60%; float: left; margin-right:10px;}
300 298 
 .content .line div.date_to input {width:45%}
301 
-.content .line div.date_to input.year {width: 120px; height: 30px;}
302 299 
 .content .line div.date_to div.at {width: 3%;  font-size: 1rem; float: right; display: contents;}
303 300 
 .content .line .search {width: 100%; height: 50px; padding-top:8px;}
304 301 
 .content .line .search button {width: 50%; height: 35px; font-size: 1rem; padding: 0;}
 
@@ -361,7 +358,7 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
361 358 
 .row-1-1{top:364px;}
362 359 
 .row-2{top: 300px;}
363 360
364 
-.row-3{top: 363px;}
361 
+.row-3{top: 395px;}
365 362 
 .row-4{top: 377px;}
366 363 
 .row-5{top: 418px;}
367 364 
 .row-6{top: 468px;}
 
@@ -373,12 +370,16 @@ input .day {margin: 18%; width: 45%; height: 80px; float: right;}
373 370 
 .scroll_area ul.mb_0 {margin-bottom:0 !important;}
374 371 
 .scroll_area .itp_non_data {margin:35% auto;}
375 372 
 .scroll_area li {margin:0; list-style: none; width: 100%; height: 85px; border: 1px solid #ccc; background-color: #fff;}
373 
+
376 374 
 .scroll_area li.list-row {height:100px;}
377 
-.scroll_area li .left_info {width:155px; float:left; font-size:1rem; margin-top:6px;}
378 
-.scroll_area li .left_info div {display: inline-block;}
379 
-.scroll_area li .left_info label{font-size: 1.1rem; font-weight:100; margin-left:10px;}
375 
+.scroll_area li.list-row2 {height:130px; padding-top:8px;}
376 
+
377 
+.scroll_area li .left_info {float:left; margin-top:6px;}
378 
+.scroll_area li .left_info div {display: inline-block; font-size:14px;}
379 
+.scroll_area li .left_info span {font-size: 14px;}
380 
+.scroll_area li .left_info label{font-size: 16px; font-weight:100; margin-left:10px;}
380 381 
 .scroll_area li .left_info .check_box {padding:20px 3px; height:88px; float:left; width:13px;}
381 
-.scroll_area li .left_info .thick {float:left;  margin: 2px 0 0 8px; font-size: 18px; text-align: left; width: 85%; font-weight: 100;}
382 
+.scroll_area li .left_info .thick {float:left;  margin: 2px 0 0 8px; font-size: 18px; text-align: left; width: 110%; font-weight: 100;}
382 383 
 .scroll_area li .left_info .thick .itp_item {color:gray;}
383 384 
 .scroll_area li .left_info .thick .itp_gram {color:#aaa; font-size:16px;}
384 385 
 .scroll_area li .left_info .thick .itp_amt {color:#b88278; margin-top: 4px;}