Index: ssts-web/src/main/webapp/disinfectsystem/toussePictures/toussePictures.js
===================================================================
diff -u -r27593 -r27624
--- ssts-web/src/main/webapp/disinfectsystem/toussePictures/toussePictures.js	(.../toussePictures.js)	(revision 27593)
+++ ssts-web/src/main/webapp/disinfectsystem/toussePictures/toussePictures.js	(.../toussePictures.js)	(revision 27624)
@@ -32,6 +32,7 @@
 				"?resolution=1980" +
 				"&tousseDefinitionID=" + tousseDefinitionID +
 				"&tousseName=" + tousseName +
+				"&parentPageName=toussePictures" +
 				"&number=1&showToussePictures=true",
 				'tousseImages', '_self');
 		}
@@ -76,6 +77,7 @@
 					"?resolution=1980" +
 					"&tousseDefinitionID=" + tousseDefinitionID +
 					"&tousseName=" + toussepackingName +
+					"&parentPageName=toussePictures" +
 					"&clientHeight=" + clientHeight +
 					"&number=1&showToussePictures=true",
 					'tousseImages', '_self'); 
Index: ssts-web/src/main/webapp/disinfectsystem/packing/packingView.jsp
===================================================================
diff -u -r27541 -r27624
--- ssts-web/src/main/webapp/disinfectsystem/packing/packingView.jsp	(.../packingView.jsp)	(revision 27541)
+++ ssts-web/src/main/webapp/disinfectsystem/packing/packingView.jsp	(.../packingView.jsp)	(revision 27624)
@@ -112,6 +112,24 @@
 	position:inherit;
 	border: 0px solid #ccc;
 }
+
+.mfp-iframe-holder {
+	padding: 0 !important;
+}
+
+.mfp-ready {
+	overflow: hidden !important;
+}
+
+.mfp-iframe-scaler iframe {
+	top: 0 !important;
+}
+
+.mfp-iframe-holder .mfp-close{
+	width: 100px !important;
+	top: 0 !important;
+    line-height: 44px;
+}
 </style>
 <!-- ImageShow 样式定义结束 -->
 <!-- alertDiv样式 -->
@@ -170,6 +188,11 @@
 <script src="${ctx}/disinfectsystem/touchScreen/recycle/alertDiv/CJL.0.1.min.js"></script>
 <script src="${ctx}/disinfectsystem/touchScreen/recycle/alertDiv/AlertBox.js"></script>
 <script src="${ctx}/js/barcodeBtn.js"></script>
+
+<script type="text/javascript" src="${ctx}/jquery/jquery-1.11.2.js"></script>
+<script type="text/javascript" src="${ctx}/js/magnificPopup/jquery.magnific-popup.js"></script>
+<script type="text/javascript" src="${ctx}/disinfectsystem/touchScreen/recycle/js/jquery-message.js"></script>
+<link rel="stylesheet" href="${ctx}/js/magnificPopup/magnific-popup.css"> 
 <script>
 var timer, target, current, ab; 
 var isShown = false;
Index: ssts-web/src/main/webapp/disinfectsystem/packing/packingView.js
===================================================================
diff -u -r27565 -r27624
--- ssts-web/src/main/webapp/disinfectsystem/packing/packingView.js	(.../packingView.js)	(revision 27565)
+++ ssts-web/src/main/webapp/disinfectsystem/packing/packingView.js	(.../packingView.js)	(revision 27624)
@@ -2073,19 +2073,140 @@
 	}
 	]
 });
+function amendDisinfectionTousse(row){
+	var tousseName = row.tousseName;
+	var tousseDefinitionID = row.td_id;
+	var tousseType = row.type.split('图片')[0];
+	var materials = row.materialId;
+	var currentPage = row.currentPage;
+	var iframeHeight = $('body').height();
+	
+	if(tousseType == '消毒物品' || tousseType == '灭菌物品'){
+		var width = 740;
+	    var height = 400;
+	    
+	    layerIndex=layer.open({
+	        type : 2,
+	        title : ['消毒物品明细',true],
+	        content : 'disinfectionTousseItems.jsp?resolution=1980&row=0&tousseDefinitionID='+tousseDefinitionID+'&materials='+encodeURIComponent(materials),
+	        area : [ width + 'px' , height + 'px'],
+	        border : [5, 0.3, '#fff', true],
+	        closeBtn : [2 , true],
+	        offset : ['100px','']
+	    });
+	}else if(tousseType == '器械包'){
+		$.magnificPopup.open({
+			items: [{
+				src:WWWROOT+'/disinfectsystem/touchScreen/recycle/tousseImage.jsp?resolution=1980&clientHeight='+iframeHeight+'&parentPageName=packingView&tousseDefinitionID='+tousseDefinitionID+'&tousseName='+encodeURIComponent(tousseName)+'&number='+currentPage,
+				type :'iframe'
+				
+			},{
+				//只是为了让箭头出现,如果可以有其他办法,这里可以去掉。因为在tousseImage.jsp内部,修改了下一页和上一页的处理
+				src: '<div>永远看不到我</div>',
+				type: 'inline'
+			}],
+			tClose: '关闭(Esc)',
+			gallery: {
+				enabled: true,
+				tPrev: '上一页 (左箭头)', // Alt text on left arrow
+				tNext: '下一页 (右箭头)'
+			},
+			image: {
+				verticalFit: true
+			},
+			type: 'image' // this is default type
+		});
+		var windowScreenH = window.screen.height;
+		if(windowScreenH == 1080){
+			$(".mfp-iframe-scaler iframe").css({"top":"10px","height":"100%"});
+			$(".mfp-iframe-holder .mfp-close").css({"top":"12px"});
+		}else if(windowScreenH == 1050){
+			$(".mfp-iframe-scaler iframe").css({"top":"10px","height":"100%"});
+			$(".mfp-iframe-holder .mfp-close").css({"top":"0px"});
+		}else{
+			$(".mfp-iframe-scaler iframe").css({"top":"10px","height":"100%"});
+		}
+	}else if(tousseType == '自定义器械包'){
+		   var width = 740;
+		    var height = 400;
+		    var designedTousseWidth = 980;
+			var designedTousseHeight = 700;
+			var designedWidth = 1920;
+			var designedHeight = 1080;
+			var actualWidth = window.screen.availWidth;
+			var actualHeight = window.screen.availHeight;
+			var offsetTop = 100;
+			var heightExtra = 10;
+		  var zoomRatio = calculateZoomRatio(designedWidth,designedHeight,actualWidth,actualHeight);
+			var size = calculateSizeAfterZoom(designedTousseWidth,designedTousseHeight,zoomRatio);
 
+      var isLessIE11 = navigator.userAgent.indexOf('compatible') > -1 && navigator.userAgent.indexOf('MSIE') > -1;
+
+      if(!isLessIE11){
+        document.body.style.zoom = 1;
+        documentGetElementsByClassName('mbody')[0].style.zoom = zoomRatio;
+      }
+			
+			width = size.width;
+			height = size.height;
+			
+			offsetTop = offsetTop*zoomRatio;
+			layerIndex=layer.open({
+		        type : 2,
+		        title : [tousseName + '  材料信息',true],
+		        content : 'setMaterialRecycleAmount.jsp?resolution=1980&width='+width+'&height='+height+'&row='+row+'&tousseDefinitionID=' + tousseDefinitionID,
+		        area : [ width + 'px' , height +heightExtra + 'px'],
+		        border : [5, 0.3, '#fff', true],
+		        closeBtn : [2 , true],  
+		        offset : [offsetTop+'px','']
+		    });
+	}else if(tousseType == '外来器械包'){
+		   var width = 740;
+		    var height = 400;
+		    var designedTousseWidth = 980;
+			var designedTousseHeight = 700;
+			var designedWidth = 1920;
+			var designedHeight = 1080;
+			var actualWidth = window.screen.availWidth;
+			var actualHeight = window.screen.availHeight;
+			var offsetTop = 100;
+			var heightExtra = 10;
+		    var zoomRatio = calculateZoomRatio(designedWidth,designedHeight,actualWidth,actualHeight);
+			var size = calculateSizeAfterZoom(designedTousseWidth,designedTousseHeight,zoomRatio);
+
+      var isLessIE11 = navigator.userAgent.indexOf('compatible') > -1 && navigator.userAgent.indexOf('MSIE') > -1;
+
+      if(!isLessIE11){
+        document.body.style.zoom = 1;
+        documentGetElementsByClassName('mbody')[0].style.zoom = zoomRatio;
+      }
+			
+			width = size.width;
+			height = size.height;
+			
+			offsetTop = offsetTop*zoomRatio;
+			
+			layerIndex=layer.open({
+		        type : 2,
+		        title : [tousseName + '  信息',true],
+		        content : 'setForeignTousseDefinition.jsp?resolution=1980&width='+width+'&height='+height+'&row='+row+'&tousseDefinitionID=' + tousseDefinitionID + '&applicationId=' + params_appId + '&recyclingrecordId=' + params_id,
+		        area : [ width + 'px' , height +heightExtra + 'px'],
+		        border : [5, 0.3, '#fff', true],
+		        closeBtn : [2 , true],  
+		        offset : [offsetTop+'px','']
+		    });
+	}
+}
 function loadGoodsImage(tousseName,type,materialId,currentPage,vedioName,td_id){
 	var url = WWWROOT + "/disinfectSystem/baseData/showImageAction!getToussePic.do?imageType=" + type +'&materialId='+materialId+'&tousseId='+td_id+'&page='+currentPage + '&name='+encodeURIComponent(tousseName);
-//    var image = Ext4.getCmp('browseImage');
-//    image.setSrc('');
-//    image.setSrc(url);// 覆盖原来的图片
+
     Ext4.getCmp('imageName').setText(tousseName);
     Ext4.getCmp('imageType').setValue(type);
     Ext4.getCmp('currentPage').setValue(currentPage);
     Ext4.getCmp('materialId').setValue(materialId);
     Ext4.getCmp('vedioName').setValue(vedioName);
-    Ext4.getCmp('td_id').setValue(td_id);
-    
+	Ext4.getCmp('td_id').setValue(td_id);
+	
     var panel = Ext4.getCmp('imageContentPanel');
     var image = Ext4.getCmp('browseImage');
     panel.remove(image);
@@ -2099,7 +2220,15 @@
             	var imgCmp = this;
             	imgCmp.getEl().on("dblclick" , function(e){
             		if(this.el.dom.src && this.el.dom.src != ''){
-            			showImage(this.el.dom.src,tousseName);
+						var row = {
+							tousseName:tousseName,
+							td_id:td_id,
+							type:type,
+							materialId:materialId,
+							currentPage:currentPage
+						}
+						amendDisinfectionTousse(row);
+            			//showImage(this.el.dom.src,tousseName);
             		}
             	});
             	var img = this.imgEl
@@ -2144,7 +2273,7 @@
             }
         },
 	    src : url
-    	 });
+    });
     
     panel.add(newImage);
 }
Index: ssts-web/src/main/webapp/disinfectsystem/touchScreen/recycle/tousseImage.jsp
===================================================================
diff -u -r27596 -r27624
--- ssts-web/src/main/webapp/disinfectsystem/touchScreen/recycle/tousseImage.jsp	(.../tousseImage.jsp)	(revision 27596)
+++ ssts-web/src/main/webapp/disinfectsystem/touchScreen/recycle/tousseImage.jsp	(.../tousseImage.jsp)	(revision 27624)
@@ -25,6 +25,7 @@
 var materialDefinitionId = '${param.materialDefinitionId}';
 var showToussePictures;
 var clientHeight = '${param.clientHeight}';
+var parentPageName = '${param.parentPageName}';
 //动态加载JS和CSS
 document.write('<link href="${ctx}/disinfectsystem/touchScreen/recycle/${param.resolution}/images/style.css" rel="stylesheet" type="text/css" />');
 
@@ -53,21 +54,39 @@
          }else{
              dataLength = 11;
          }
-         var trData = "";
+		 var trData = "";
+
+		 if(parentPageName == 'packingView'){
+			$('.table1').hide();
+			$('.table2').show();
+		 }else {
+			$('.table1').show();
+			$('.table2').hide();
+		 }
+
          for (var i = 0; i<json.length; i++) {
              var materialName = json[i].materialName;
              var materialAmount = json[i].amount;
 			 sumTotal+=parseFloat(materialAmount);
 			 $('#SumTotal').text(sumTotal);
-             trData += '<tr onclick ="getMaterialNameWithAmount(this);">';
-			 trData += '<td  style="width:4%;height:40px;" class="w7 checkbox-materialTd" align="center"><input type="checkbox" name="" class="checkbox-material" value="'+materialName+'" amount="'+materialAmount+'" onclick ="getCheckboxMaterialNameWithAmount(this,event);"/></td>';
-             trData += '<td onclick="onMaterialItemClick(\''+json[i].materialDefinitionId+'\',this);" class="w7" style="width:38.6%;height:40px;" align="center">'+materialName+'</td>';
-             trData += '<td onclick="onMaterialItemClick(\''+json[i].materialDefinitionId+'\',this);" class="w8" style="width:8.1%;height:40px;" align="center">'+materialAmount+'</td>';
-             trData += '<td onclick="onDetachableClick(\''+json[i].materialDefinitionId+'\',this);"  class="w8" style="width:8%;height:40px;" align="center">'+emptyStringIfUndefinedOrNull(json[i].detachable)+'</td>';
-             trData += '<td class="w8" style="width:10%;height:40px;" align="center">'+emptyStringIfUndefinedOrNull(json[i].washMethod)+'</td>';
-             trData += '<td onclick="onWashQualityCheckPointClick(\''+json[i].materialDefinitionId+'\',this);" class="w9" style="width:16.6%;height:40px;" align="center">'+json[i].washQualityCheckPoint+'</td>';
-             trData += '<td onclick="onFunctionCheckClick(\''+json[i].materialDefinitionId+'\',this);" class="w10" style="width:14.1%;height:40px;" align="center">'+json[i].functionCheck+'</td>';
-             trData += '</tr>';
+			 if(parentPageName == 'packingView'){
+				trData += '<tr onclick ="getMaterialNameWithAmount(this);">';
+				trData += '<td style="width:4%;height:40px;" class="w7 checkbox-materialTd" align="center"><input type="checkbox" name="" class="checkbox-material" value="'+materialName+'" amount="'+materialAmount+'" onclick ="getCheckboxMaterialNameWithAmount(this,event);"/></td>';
+				trData += '<td onclick="onMaterialItemClick(\''+json[i].materialDefinitionId+'\',this);" class="w7" style="width:60%;height:40px;" align="center">'+materialName+'</td>';
+				trData += '<td onclick="onMaterialItemClick(\''+json[i].materialDefinitionId+'\',this);" class="w8" style="width:20%;height:40px;" align="center">'+materialAmount+'</td>';
+				trData += '<td onclick="onDetachableClick(\''+json[i].materialDefinitionId+'\',this);"  class="w8" style="width:20%;height:40px;" align="center">'+emptyStringIfUndefinedOrNull(json[i].detachable)+'</td>';
+				trData += '</tr>';
+			 }else {
+				trData += '<tr onclick ="getMaterialNameWithAmount(this);">';
+				trData += '<td  style="width:4%;height:40px;" class="w7 checkbox-materialTd" align="center"><input type="checkbox" name="" class="checkbox-material" value="'+materialName+'" amount="'+materialAmount+'" onclick ="getCheckboxMaterialNameWithAmount(this,event);"/></td>';
+				trData += '<td onclick="onMaterialItemClick(\''+json[i].materialDefinitionId+'\',this);" class="w7" style="width:38.6%;height:40px;" align="center">'+materialName+'</td>';
+				trData += '<td onclick="onMaterialItemClick(\''+json[i].materialDefinitionId+'\',this);" class="w8" style="width:8.1%;height:40px;" align="center">'+materialAmount+'</td>';
+				trData += '<td onclick="onDetachableClick(\''+json[i].materialDefinitionId+'\',this);"  class="w8" style="width:8%;height:40px;" align="center">'+emptyStringIfUndefinedOrNull(json[i].detachable)+'</td>';
+				trData += '<td class="w8" style="width:10%;height:40px;" align="center">'+emptyStringIfUndefinedOrNull(json[i].washMethod)+'</td>';
+				trData += '<td onclick="onWashQualityCheckPointClick(\''+json[i].materialDefinitionId+'\',this);" class="w9" style="width:16.6%;height:40px;" align="center">'+json[i].washQualityCheckPoint+'</td>';
+				trData += '<td onclick="onFunctionCheckClick(\''+json[i].materialDefinitionId+'\',this);" class="w10" style="width:14.1%;height:40px;" align="center">'+json[i].functionCheck+'</td>';
+				trData += '</tr>';
+			 }
          }
         document.getElementById("myTable").innerHTML = "<table style='table-layout:fixed;width:100%;' id='materialTable' border='0' cellspacing='0' cellpadding='0'>" + trData + "</table>";
 		if(sstsConfig.toussePicturesShow && showToussePictures){
@@ -80,7 +99,7 @@
     var insertText = document.createTextNode(materialName);
     BElement.appendChild(insertText);
     document.getElementById("tousseNameID").appendChild(BElement);
-    jQuery('#tousseOrMaterialImage').css('width','800px');
+    jQuery('#tousseOrMaterialImageDiv').css('width','800px');
     jQuery('#MaterialID').remove();
     jQuery('.btn-box').remove();
     jQuery('.remark-box').remove();
@@ -199,6 +218,24 @@
 	document.getElementById('tousseOrMaterialImage').src = '${ctx}/disinfectSystem/baseData/showImageAction!getToussePic.do?id=' + cur.objId + '&imageType=' + cur.imageType + '&page=' + cur.page +'&time='+new Date().getTime();
 }
 /**
+ * 图片放大
+*/
+function markBig(){
+	var width = $('#tousseOrMaterialImage').width();
+	var height= $('#tousseOrMaterialImage').height();
+	$('#tousseOrMaterialImage').width((width+width*0.1)+'px');
+	$('#tousseOrMaterialImage').height((height+height*0.1)+'px');
+}
+/**
+ * 图片缩小
+*/
+function markSmall(){
+	var width = $('#tousseOrMaterialImage').width();
+	var height= $('#tousseOrMaterialImage').height();
+	$('#tousseOrMaterialImage').width((width-width*0.1)+'px');
+	$('#tousseOrMaterialImage').height((height-height*0.1)+'px');
+}
+/**
  * 加载材料定义的注意事项
  */
 function loadMaterialNotice(materialDefinitionId){
@@ -210,7 +247,20 @@
         success:function(result){
         	if(result.success){
         		var notice = result.notice;
-        		var text = notice.replace(/\r\n/g,"<p/>");
+				var text = notice.replace(/\r\n/g,"<p/>");
+				var height = $('#materialDIV').height();
+				if(text == ''){
+					if(!$('.remark-box').is(":hidden")){
+						$('.remark-box').hide();
+						$('#materialDIV').height((height+52)+'px');
+					}
+				}else {
+					if($('.remark-box').is(":hidden")){
+						$('.remark-box').show();
+						$('#materialDIV').height((height-52)+'px');
+					}
+				}
+
         		jQuery("#materialRemark").html(text);
         	}
         },
@@ -286,103 +336,82 @@
 		getMaterial();
 	}
 
-	$(".toussePage").show();
-
-	var bodyHeight = $('body').height();
 	var newClientHeight = (clientHeight == '')?document.body.clientHeight:parseInt(clientHeight);
 	var screenHeight = window.screen.height;
+	var screenWidth = window.screen.width;
 	var height = 0;
+
+	$('body').height(newClientHeight+'px');
+	var bodyHeight = $('body').height();
+
 	if(newClientHeight > bodyHeight){
+		height = newClientHeight;
+	}else {
 		height = bodyHeight;
+	}
+
+	if(screenWidth == 1920){
+		$('.btn-box a').css('font-size','20px');
+	}else if(screenWidth == 1680 || screenWidth == 1600){
+		$('.btn-box a').css('font-size','18px');
+	}else if(screenWidth == 1440 || screenWidth == 1400){
+		$('.btn-box a').css('font-size','16px');
+	}else if(screenWidth == 1366 || screenWidth == 1360){
+		$('.btn-box a').css('font-size','14px');
 	}else {
-		height = newClientHeight;
+		$('.btn-box a').css('font-size','12px');
 	}
 
-	if(newClientHeight == bodyHeight){
-		if(screenHeight - bodyHeight > 100){
-			$('#imageAndMaterialID').height((bodyHeight-50)+'px');
-			$('#materialDIV').height((bodyHeight-93)+'px');
-			$('#tousseOrMaterialImage').height((bodyHeight-193)+'px');
-			$('#ImageID').height((bodyHeight-193)+'px');
+	var imageAndMaterialID_Height = 0;
+	var ImageID_Height = 0;
+	var MaterialDIV_Height = 0;
+	var tousseOrMaterialImageDiv_Height = 0;
+	var MaterialID_Height = 0;
+	var materialDIV_Height = 0;
+
+	if(screenHeight - bodyHeight > 100){
+		if(parentPageName == 'toussePictures'){
+			imageAndMaterialID_Height = bodyHeight-50;
+			ImageID_Height = bodyHeight-146;
+			MaterialDIV_Height = bodyHeight-146;
+			tousseOrMaterialImageDiv_Height = bodyHeight-198;
+			MaterialID_Height = bodyHeight-146;
+			materialDIV_Height = bodyHeight-186;
 		}else {
-			$('#imageAndMaterialID').height((bodyHeight-50)+'px');
-			$('#materialDIV').height((bodyHeight-190)+'px');
-			$('#tousseOrMaterialImage').height((bodyHeight-290)+'px');
-			$('#ImageID').height((bodyHeight-290)+'px');
+			imageAndMaterialID_Height = bodyHeight-50;
+			ImageID_Height = bodyHeight-50;
+			MaterialDIV_Height = bodyHeight-50;
+			tousseOrMaterialImageDiv_Height = bodyHeight-102;
+			MaterialID_Height = bodyHeight-50;
+			materialDIV_Height = bodyHeight-90;
 		}
 	}else {
-		var zoom = 1;
-		if(!isIE()){
-			if(screenHeight == 1080){
-				zoom = 0.97;
-			}else if(screenHeight == 1050){
-				zoom = 0.935;
-			}else if(screenHeight == 1024){
-				zoom = 0.901;
-			}else if(screenHeight == 960){
-				zoom = 0.812;
-			}else if(screenHeight == 900){
-				zoom = 0.731;
-			}else if(screenHeight == 864){
-				zoom = 0.685;
-			}else if(screenHeight == 800){
-				zoom = 0.596;
-			}else if(screenHeight == 768){
-				zoom = 0.550;
-			}else if(screenHeight == 720){
-				zoom = 0.485;
-			}else if(screenHeight == 600){
-				zoom = 0.365;
-			}else {
-				zoom = 1;
-			}
-
-			$('body').css('zoom',zoom);
+		if(parentPageName == 'toussePictures'){
+			imageAndMaterialID_Height = bodyHeight-84;
+			ImageID_Height = bodyHeight-84;
+			MaterialDIV_Height = bodyHeight-84;
+			tousseOrMaterialImageDiv_Height = bodyHeight-136;
+			MaterialID_Height = bodyHeight-84;
+			materialDIV_Height = bodyHeight-126;
 		}else {
-			var bodyWidth = 100;
-			if(screenHeight == 1080){
-				zoom = 0.97;
-				bodyWidth = 103;
-			}else if(screenHeight == 1050){
-				zoom = 0.925;
-				bodyWidth = 108;
-			}else if(screenHeight == 1024){
-				zoom = 0.89;
-				bodyWidth = 112;
-			}else if(screenHeight == 960){
-				zoom = 0.8;
-				bodyWidth = 125;
-			}else if(screenHeight == 900){
-				zoom = 0.72;
-				bodyWidth = 139;
-			}else if(screenHeight == 864){
-				zoom = 0.675;
-				bodyWidth = 148;
-			}else if(screenHeight == 800){
-				zoom = 0.59;
-				bodyWidth = 170;
-			}else if(screenHeight == 768){
-				zoom = 0.545;
-				bodyWidth = 183;
-			}else if(screenHeight == 720){
-				zoom = 0.48;
-				bodyWidth = 208;
-			}else if(screenHeight == 600){
-				zoom = 1;
-				bodyWidth = 100;
-			}else {
-				zoom = 1;
-			}
-
-			$('body').css('width',bodyWidth+'%');
-			$('body').css('zoom',zoom);
+			imageAndMaterialID_Height = bodyHeight-50;
+			ImageID_Height = bodyHeight-146;
+			MaterialDIV_Height = bodyHeight-146;
+			tousseOrMaterialImageDiv_Height = bodyHeight-198;
+			MaterialID_Height = bodyHeight-146;
+			materialDIV_Height = bodyHeight-186;
 		}
-		
 	}
+
+	$('#imageAndMaterialID').height(imageAndMaterialID_Height+'px');
+	$('#ImageID').height(ImageID_Height+'px');
+	$('#MaterialDIV').height(MaterialDIV_Height+'px');
+	$('#tousseOrMaterialImageDiv').height(tousseOrMaterialImageDiv_Height+'px');
+	$('#MaterialID').height(MaterialID_Height+'px');
+	$('#materialDIV').height(materialDIV_Height+'px');
 	
 	if(sstsConfig.toussePicturesShow && showToussePictures){
 		$(".instruction-book,.packing-teach,.tousse-video,.checkbox-materialTd").show();
-		
 	}
 	// add this code after popup JS file is included
 	/* if(window.parent && window.parent.$ && window.parent.$.magnificPopup && window.parent.$.magnificPopup.instance){
@@ -461,24 +490,42 @@
 }
 .left {   
     float:left;   
-}   
-.toussePage{
-	text-align: center;
-	display:none;
 }
-.toussePage a{
-	display: inline-block;
-    padding: 2px 12px;
-	border-radius: 4px;
-}
 #MaterialDIV{   
     float:right;   
 } 
 .instruction-book,.packing-teach,.tousse-video{display: none;}
 .imageAndMaterialID{height:637px;}
-.ImageID{width: 50%;height:100%;}
+#ImageID{width: 50%;height:100%;}
 .image-box{width: 50%;height:100%;}
 .checkbox-materialTd{display: none;}
+
+.btn-box {
+	width:100%;
+	height:50px;
+	border-top: 1px solid #ccc;
+	border-bottom: 1px solid #ccc;
+	line-height: 50px;
+	text-align: left !important;
+}
+.btn-box a{
+	margin-left: 10px;
+	background: none !important;
+}
+
+.remark-box .box {
+	width:100%;
+	height:50px !important;
+	border-top: 1px solid #ccc;
+	border-bottom: 1px solid #ccc;
+	display: flex;
+    align-items: center;
+}
+
+.remark-box .box .noticetitle{
+	color: red;
+	margin: 0 10px;
+}
 </style>   
 
 
@@ -488,47 +535,53 @@
 		</div>
 		</div>
         <div id="imageAndMaterialID" align="center" class="imageAndMaterialID">
-            <div id="ImageID" class="left ImageID" style="position: relative;">
-				<div class="toussePage">
-					<a href="javascript:void(0);" style="position: absolute;left: 10px;top: 50%;" onclick="prevPage();">
-						<img src="left.png" />
-					</a>
-					<a href="javascript:void(0);" style="position: absolute;right: 10px;top: 50%;" onclick="nextPage();">
-						<img src="right.png" />
-					</a>
-				</div>
-				<img id="tousseOrMaterialImage" style="width:100%;height:546px;vertical-align:middle;text-align:center;"/>
-                <div class="remark-box">
-					<div class="box" style="width:100%;height:114px;text-align:left;">
-						<h4 class="noticetitle">注意事项</h4>
+			<div id="ImageID" class="left" style="position: relative;">
+				<div class="btn-box">
+					<div>
+						<a href="javascript:void(0)" onclick='markBig()'>放大</a>
+						<a href="javascript:void(0)" onclick='markSmall()'>缩小</a>
+						<a href="javascript:void(0)" onclick='prevPage();'>上一张</a>
+						<a href="javascript:void(0)" onclick='nextPage();'>下一张</a>
+						<a href="javascript:void(0)" onclick='onOperationGuideClick();'>清洗操作指引</a>
+						<a href="javascript:void(0)" onclick='loadTousseImage();'>查看包图片</a>
+						<a href="javascript:void(0)" onclick='onInstructionBookClick();' class="instruction-book">说明书</a>
+						<a href="javascript:void(0)" onclick='onPackingTeachClick();' class="packing-teach">装配教学</a>
+						<a href="javascript:void(0)" onclick='onTousseVideoClick();' class="tousse-video">教学视频</a>
+					</div>
+				   </div>
+				   <div id="tousseOrMaterialImageDiv" style="overflow: auto;">
+						<img id="tousseOrMaterialImage" style="width:100%;height: 100%;vertical-align:middle;text-align:center;"/>
+				   </div>
+			</div>
+            <div class="image-box" id="MaterialDIV">
+				<div class="remark-box" style="display: none;">
+					<div class="box" style="width:100%;">
+						<h4 class="noticetitle">注意事项：</h4>
                			<div class="notice" id="materialRemark">
                			</div>
                		</div>
             	</div>
-            	
-            	<div class="btn-box" style="width:100%;height:30px;text-align:center;margin-top:5px;">
-					<a href="javascript:void(0)" onclick='onOperationGuideClick();'>清洗操作指引</a>
-					<a href="javascript:void(0)" onclick='onInstructionBookClick();' class="instruction-book">说明书</a>
-					<a href="javascript:void(0)" onclick='onPackingTeachClick();' class="packing-teach">装配教学</a>
-					<a href="javascript:void(0)" onclick='onTousseVideoClick();' class="tousse-video">教学视频</a>
-               	</div>
-            </div>
-            <div class="image-box" id="MaterialDIV">
-                <div id="MaterialID" class="table" style="width:100%;">
-                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
-                            <tr class="title">
-								<th width="4%" class="checkbox-materialTd"><input type="checkbox" name="" onclick="checkboxMaterialAll(this);" id="checkboxMaterialAll" class="checkbox-material"/></th>
-                                <th width="38%">材料名称</th>
-                                <th width="8%">数量</th>
-                                <th width="8%">是否可拆</th>
-                                <th width="10%">清洗方式</th>
-                                <th width="16%">清洗质量检查关注点</th>
-                                <th width="16%">功能检查</th>
-                            </tr>
-                        </table>
-                        <div class="box" id="materialDIV" style="width:100%;height:650px;">
-                        	<div id='myTable' style="width:100%;"></div>
-                        </div>
+                <div id="MaterialID" class="table removeTopDiv" style="width:100%;">
+					<table width="100%" border="0" cellspacing="0" cellpadding="0">
+						<tr class="title table1">
+							<th width="4%" class="checkbox-materialTd"><input type="checkbox" name="" onclick="checkboxMaterialAll(this);" id="checkboxMaterialAll" class="checkbox-material"/></th>
+							<th width="38%">材料名称</th>
+							<th width="8%">数量</th>
+							<th width="8%">是否可拆</th>
+							<th width="10%">清洗方式</th>
+							<th width="16%">清洗质量检查关注点</th>
+							<th width="16%">功能检查</th>
+						</tr>
+						<tr class="title table2" style="display: none;">
+							<th width="4%" class="checkbox-materialTd"><input type="checkbox" name="" onclick="checkboxMaterialAll(this);" id="checkboxMaterialAll" class="checkbox-material"/></th>
+							<th width="58%">材料名称</th>
+							<th width="20%">数量</th>
+							<th width="22%">是否可拆</th>
+						</tr>
+					</table>
+					<div class="box" id="materialDIV" style="width:100%;height:650px;">
+						<div id='myTable' style="width:100%;"></div>
+					</div>
                 </div>
             </div>
         </div>