报销合并交互

css/global.css

@@ -1955,7 +1955,7 @@ a.new-ribbon:before{
 }
 .borad-news {
   width:960px;
-  margin:0 auto
+  margin:0 auto;
 }
 .saeaList {
   margin:0 0 20px 0;
@@ -4074,18 +4074,24 @@ td div.dlLev3{
 }
 .saeaType li{
   float: left;
-  padding:20px 80px;
+  width: 30%;
+  text-align: center;
+  margin:0 10px;
+  /*padding:20px 0;
   margin:0 10px;
+  width: 30%;
+  text-align: center;
   background: #f6f6f6;
+  font-size: 16px;*/
 }
-.saeaType li.active{
+/*.saeaType li.active{
   background: #084F8E;
   color: #fff;
 }
 .saeaType li:hover{
   background: #2677be;
   color: #fff;
-}
+}*/
 .saeaCheckbox{
   float: left;
 }
@@ -4099,19 +4105,26 @@ td div.dlLev3{
   display: block !important;
 }
 .fixedSide{
-  position: absolute;
-  top: 0;
-  left: 205px;
+  position: sticky;
+  top: 100px;
+  left: 0px;
   width: 22px;
 }
 .fixedSide ul li{
   float: left;
+  display: block;
+  font-size: 12px;
+  color: #fff;
+  background: #666;
+  margin: 1px 0;
 }
 .fixedSide ul li a{
   display: block;
-  font-size: 14px;
   color: #fff;
-  padding: 15px 3px;
-  margin: 10px 0;
-  background: #191818;
+  padding: 15px 0;
+  text-align: center;
+}
+.fixedSide ul li.active{
+  background: #222 !important;
+  color: #fff !important;
 }

css/jquery-labelauty.css

@@ -0,0 +1,146 @@
+/*!
+ * LABELAUTY jQuery Plugin Styles
+ *
+ * @file: jquery-labelauty.css
+ * @author: Francisco Neves (@fntneves)
+ * @site: www.francisconeves.com
+ * @license: MIT License
+ */
+
+/* Prevent text and blocks selection */
+input.labelauty + label ::selection { background-color: rgba(255, 255, 255, 0); }
+input.labelauty + label ::-moz-selection { background-color: rgba(255, 255, 255, 0); }
+
+/* Hide original checkboxes. They are ugly! */
+input.labelauty { display: none !important; }
+
+/*
+ * Let's style the input
+ * Feel free to work with it as you wish!
+ */
+input.labelauty + label
+{
+	display: inline-block;
+	/*display: table;*/
+	font-size: 14px;
+	padding:20px 0;
+	width: 100%;
+  	text-align: center;
+	background-color: #efefef;
+	color: #b3b3b3;
+	cursor: pointer;
+
+	border-radius: 3px 3px 3px 3px;
+	-moz-border-radius: 3px 3px 3px 3px;
+	-webkit-border-radius: 3px 3px 3px 3px;
+
+
+	transition: background-color 0.25s;
+	-moz-transition: background-color 0.25s;
+	-webkit-transition: background-color 0.25s;
+	-o-transition: background-color 0.25s;
+
+	-moz-user-select: none;
+	-khtml-user-select: none;
+	-webkit-user-select: none;
+	-o-user-select: none;
+}
+
+/* Stylish text inside label */
+
+input.labelauty + label > span.labelauty-unchecked,
+input.labelauty + label > span.labelauty-checked
+{
+	display: inline-block;
+	line-height: 16px;
+	vertical-align: bottom;
+}
+
+/* Stylish icons inside label */
+
+input.labelauty + label > span.labelauty-unchecked-image,
+input.labelauty + label > span.labelauty-checked-image
+{
+	display: inline-block;
+	width: 16px;
+	height: 16px;
+	vertical-align: bottom;
+	background-repeat: no-repeat;
+	background-position: left center;
+
+	transition: background-image 0.5s linear;
+	-moz-transition: background-image 0.5s linear;
+	-webkit-transition: background-image 0.5s linear;
+	-o-transition: background-image 0.5s linear;
+}
+
+/* When there's a label, add a little margin to the left */
+input.labelauty + label > span.labelauty-unchecked-image + span.labelauty-unchecked,
+input.labelauty + label > span.labelauty-checked-image + span.labelauty-checked
+{
+	margin-left: 7px;
+}
+
+/* When not Checked */
+input.labelauty:not(:checked):not([disabled]) + label:hover
+{
+	background-color: #9e9e9e;
+	color: #fff;
+}
+input.labelauty:not(:checked) + label > span.labelauty-checked-image
+{
+	display: none;
+}
+
+input.labelauty:not(:checked) + label > span.labelauty-checked
+{
+	display: none;
+}
+
+/* When Checked */
+input.labelauty:checked + label
+{
+	background-color: #084F8E;
+	color: #ffffff;
+}
+
+input.labelauty:checked:not([disabled]) + label:hover
+{
+	background-color: #2677be;
+}
+input.labelauty:checked + label > span.labelauty-unchecked-image
+{
+	display: none;
+}
+
+input.labelauty:checked + label > span.labelauty-unchecked
+{
+	display: none;
+}
+
+input.labelauty:checked + label > span.labelauty-checked
+{
+	display: inline-block;
+}
+
+input.labelauty.no-label:checked + label > span.labelauty-checked
+{
+	display: block;
+}
+
+/* When Disabled */
+input.labelauty[disabled] + label
+{
+	opacity: 0.5;
+}
+
+/* Add a background to (un)checked images */
+input.labelauty + label > span.labelauty-unchecked-image
+{
+	background-image: url( ../images/input-unchecked.png );
+}
+
+input.labelauty + label > span.labelauty-checked-image
+{
+	background-image: url( ../images/input-checked.png );
+}

js/jquery-labelauty.js

@@ -0,0 +1,236 @@
+/*!
+ * LABELAUTY jQuery Plugin
+ *
+ * @file: jquery-labelauty.js
+ * @author: Francisco Neves (@fntneves)
+ * @site: www.francisconeves.com
+ * @license: MIT License
+ */
+
+(function( $ ){
+
+	$.fn.labelauty = function( options )
+	{
+		/*
+		 * Our default settings
+		 * Hope you don't need to change anything, with these settings
+		 */
+		var settings = $.extend(
+		{
+			// Development Mode
+			// This will activate console debug messages
+			development: false,
+
+			// Trigger Class
+			// This class will be used to apply styles
+			class: "labelauty",
+
+			// Use text label ?
+			// If false, then only an icon represents the input
+			label: true,
+
+			// Separator between labels' messages
+			// If you use this separator for anything, choose a new one
+			separator: "|",
+
+			// Default Checked Message
+			// This message will be visible when input is checked
+			checked_label: "Checked",
+
+			// Default UnChecked Message
+			// This message will be visible when input is unchecked
+			unchecked_label: "Unchecked",
+
+			// Minimum Label Width
+			// This value will be used to apply a minimum width to the text labels
+			minimum_width: false,
+
+			// Use the greatest width between two text labels ?
+			// If this has a true value, then label width will be the greatest between labels
+			same_width: true
+		}, options);
+
+		/*
+		 * Let's create the core function
+		 * It will try to cover all settings and mistakes of using
+		 */
+		return this.each(function()
+		{
+			var $object = $( this );
+			var use_labels = true;
+			var labels;
+			var labels_object;
+			var input_id;
+
+			// Test if object is a check input
+			// Don't mess me up, come on
+			if( $object.is( ":checkbox" ) === false && $object.is( ":radio" ) === false )
+				return this;
+
+			// Add "labelauty" class to all checkboxes
+			// So you can apply some custom styles
+			$object.addClass( settings.class );
+
+			// Get the value of "data-labelauty" attribute
+			// Then, we have the labels for each case (or not, as we will see)
+			labels = $object.attr( "data-labelauty" );
+
+			use_labels = settings.label;
+
+			// It's time to check if it's going to the right way
+			// Null values, more labels than expected or no labels will be handled here
+			if( use_labels === true )
+			{
+				if( labels == null || labels.length === 0 )
+				{
+					// If attribute has no label and we want to use, then use the default labels
+					labels_object = new Array();
+					labels_object[0] = settings.unchecked_label;
+					labels_object[1] = settings.checked_label;
+				}
+				else
+				{
+					// Ok, ok, it's time to split Checked and Unchecked labels
+					// We split, by the "settings.separator" option
+					labels_object = labels.split( settings.separator );
+
+					// Now, let's check if exist _only_ two labels
+					// If there's more than two, then we do not use labels :(
+					// Else, do some additional tests
+					if( labels_object.length > 2 )
+					{
+						use_labels = false;
+						debug( settings.development, "There's more than two labels. LABELAUTY will not use labels." );
+					}
+					else
+					{
+						// If there's just one label (no split by "settings.separator"), it will be used for both cases
+						// Here, we have the possibility of use the same label for both cases
+						if( labels_object.length === 1 )
+							debug( settings.development, "There's just one label. LABELAUTY will use this one for both cases." );
+					}
+				}
+			}
+
+			/*
+			 * Let's begin the beauty
+			 */
+
+			// Start hiding ugly checkboxes
+			// Obviously, we don't need native checkboxes :O
+			$object.css({ display : "none" });
+
+			// We don't need more data-labelauty attributes!
+			// Ok, ok, it's just for beauty improvement
+			$object.removeAttr( "data-labelauty" );
+
+			// Now, grab checkbox ID Attribute for "label" tag use
+			// If there's no ID Attribute, then generate a new one
+			input_id = $object.attr( "id" );
+
+			if( input_id == null )
+			{
+				var input_id_number = 1 + Math.floor( Math.random() * 1024000 );
+				input_id = "labelauty-" + input_id_number;
+
+				// Is there any element with this random ID ?
+				// If exists, then increment until get an unused ID
+				while( $( input_id ).length !== 0 )
+				{
+					input_id_number++;
+					input_id = "labelauty-" + input_id_number;
+					debug( settings.development, "Holy crap, between 1024 thousand numbers, one raised a conflict. Trying again." );
+				}
+
+				$object.attr( "id", input_id );
+			}
+
+			// Now, add necessary tags to make this work
+			// Here, we're going to test some control variables and act properly
+			$object.after( create( input_id, labels_object, use_labels ) );
+
+			// Now, add "min-width" to label
+			// Let's say the truth, a fixed width is more beautiful than a variable width
+			if( settings.minimum_width !== false )
+				$object.next( "label[for=" + input_id + "]" ).css({ "min-width": settings.minimum_width });
+
+			// Now, add "min-width" to label
+			// Let's say the truth, a fixed width is more beautiful than a variable width
+			if( settings.same_width != false && settings.label == true )
+			{
+				var label_object = $object.next( "label[for=" + input_id + "]" );
+				var unchecked_width = getRealWidth(label_object.find( "span.labelauty-unchecked" ));
+				var checked_width = getRealWidth(label_object.find( "span.labelauty-checked" ));
+
+				if( unchecked_width > checked_width )
+					label_object.find( "span.labelauty-checked" ).width( unchecked_width );
+				else
+					label_object.find( "span.labelauty-unchecked" ).width( checked_width );
+			}
+		});
+	};
+
+	/*
+	 * Tricky code to work with hidden elements, like tabs.
+	 * Note: This code is based on jquery.actual plugin.
+	 * https://github.com/dreamerslab/jquery.actual
+	 */
+	function getRealWidth( element )
+	{
+		var width = 0;
+		var $target = element;
+		var style = 'position: absolute !important; top: -1000 !important; ';
+
+		$target = $target.clone().attr('style', style).appendTo('body');
+		width = $target.width(true);
+		$target.remove();
+
+		return width;
+	}
+
+	function debug( debug, message )
+	{
+		if( debug && window.console && window.console.log )
+			window.console.log( "jQuery-LABELAUTY: " + message );
+	};
+
+	function create( input_id, messages_object, label )
+	{
+		var block;
+		var unchecked_message;
+		var checked_message;
+
+		if( messages_object == null )
+			unchecked_message = checked_message = "";
+		else
+		{
+			unchecked_message = messages_object[0];
+
+			// If checked message is null, then put the same text of unchecked message
+			if( messages_object[1] == null )
+				checked_message = unchecked_message;
+			else
+				checked_message = messages_object[1];
+		}
+
+		if( label == true )
+		{
+			block = '<label for="' + input_id + '">' +
+						'<span class="labelauty-unchecked-image"></span>' +
+						'<span class="labelauty-unchecked">' + unchecked_message + '</span>' +
+						'<span class="labelauty-checked-image"></span>' +
+						'<span class="labelauty-checked">' + checked_message + '</span>' +
+					'</label>';
+		}
+		else
+		{
+			block = '<label for="' + input_id + '">' +
+						'<span class="labelauty-unchecked-image"></span>' +
+						'<span class="labelauty-checked-image"></span>' +
+					'</label>';
+		}
+
+		return block;
+	};
+
+}( jQuery ));

saea-receipt-add4.html

@@ -7,7 +7,8 @@
 	<link rel="shortcut icon" href="images/favicon.ico">
 	<meta name=copyright content=smartcost.com.cn>
 	<link rel=stylesheet href=css/global.css>
-	<script src=js/jquery-1.7.1.min.js></script>
+	<link rel="stylesheet" href="css/jquery-labelauty.css">
+	<script src=js/jquery-1.10.2.min.js></script>
 	<script src=js/global.js></script>
 </head>
 <body>
@@ -48,298 +49,311 @@
 		  		<div class="borad-news">
 		  			<div class="fixedSide" id="fixedSide">
 		  				<ul>
-		  					<li><a href="#banshichu">办事处相关费用</a></li>
-		  					<li><a href="#xingchengdan">差旅相关费用</a></li>
-		  					<li><a href="#neibupeixun">内部培训费用</a></li>
-		  					<li><a href="#baixiao">报销单审批</a></li>
+		  					<li class="active"><a href="#banshi">办事处</a></li>
+		  					<li><a href="#chalv">差旅</a></li>
+		  					<li><a href="#neibupeixun">内部培训</a></li>
+		  					<li><a href="#shenpi">审批</a></li>
+		  					<!-- <li><a href="#tijiao">提交</a></li> -->
 		  				</ul>
 		  			</div>
-					<legend><div class="fR"></div>申请报销相关费用</legend>
-			  		<div class="saeaList">
-			  			<h4 class="saeaTip">请选择一下需要报销的费用类型</h4>
-			  			<ul class="saeaType clearfix">
-			  				<li class="active">
-			  					<input class="saeaCheckbox" type="checkbox" name="" style="zoom:180%;" checked="">
-			  					<label>办事处相关费用</label>
-			  				</li>
-			  				<li class="active">
-			  					<input class="saeaCheckbox" type="checkbox" name="" style="zoom:180%;" checked="">
-			  					<label>差旅相关费用</label>
-			  				</li>
-			  				<li>
-			  					<input class="saeaCheckbox" type="checkbox" name="" style="zoom:180%;">
-			  					<label>内部培训费用</label>
-			  				</li>
-			  			</ul>
-			  			<div class="entry receipt-list">
-			  				<div class="seTable">
-			  					<table class="table table-bordered table-condensed table-hover">
-			  					<tbody>
-			  						<tr><th colspan="2" class="taC" id="banshichu">办事处相关费用</th></tr>
-			  						<tr><th>市内交通费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入市内交通费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
-			  						<tr><th>市内出租费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入市内出租费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
-			  						<tr><th>办事处房租</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入办事处房租" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
-			  						<tr><th>电话费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入电话费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
-			  						<tr><th>水费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入水费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
-			  						<tr><th>电费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入电费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
-			  						<tr><th>办公费用</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入办公费用" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
-			  						<tr><th>邮寄费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入邮寄费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
-			  						<tr><th>其他费用</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入其他费用" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
-			  						<tr><th class="taR">合计</th><td class="colGreen taR">￥0.00</td></tr>
-			  						<tr><th colspan="2" class="taC">其他</th></tr>
-			  						<tr><th>公关费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入公关费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
-			  						<tr><th>广告费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入公关费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
-			  						<tr><th>借款</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入公关费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
-			  						<tr><th>可自加费用</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入可自加费用" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
-			  						<tr><th class="taR">合计</th><td class="colGreen taR">￥0.00</td></tr>
-			  						<tr><th colspan="2" class="taC">公关费绑定发票</th></tr>
-			  						<tr><th class="colRed">如本次报销有公关费支出，确认是否涉需要绑定发票</th><td class="taR"><!-- <select class="span2"><option>绑定开票</option><option>不需要</option></select> --></td></tr>
-			  						<tr><th></th><td class="taR"><a class="button" href="#add-invoice" data-toggle="modal">添加发票</a></select></td></tr>
-					  								<tr><th>发票</a></th><td class="taR">公关费（￥500.00）</td></tr>
-					  								<tr><th><a href="#invdetail" data-toggle="modal">#F201909187362</a> <a class="fR">移除</a></th><td class="taR">￥<input type="number" value="0" placeholder="输入可自加费用" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
-			  						<tr class="warning"><td class="taR"><b>本次报销费用合计</b></td><td class="colGreed taR"><b style="font-size:24px">￥2160.00</b></td></tr>
-			  						<tr><th colspan="2" class="taC">附件</th></tr>
-			  						<tr><td colspan="2">
-			  							<input type="file"><a class="btn btn-primary btn-mini">上传</a>&nbsp;&nbsp;<span>支持jpg、png、doc、docx、els、elsx；最大8M文件。</span>
-			  							<!--已上传文件-->
-			  							<table class="table">
-			  								<thead><th>文件名</th><th>大小</th><th>操作</th></thead>
-			  								<tbody>
-			  									<tr><td><a href="#" target="_blank">发票1.jpg</a></td><td>20kb</td><td><a href="">删除</a></td></tr>
-			  									<tr><td><a href="#" target="_blank">QQ截图20150624170045.png</a></td><td>171kb</td><td><a href="">删除</a></td></tr>
-			  									<tr><td><a href="#" target="_blank">Doc1.docx</a></td><td>47kb</td><td><a href="">删除</a></td></tr>
-			  								</tbody>
-			  							</table>
-			  							<!--已上传文件-->
-			  						</td></tr>
-			  						</tbody>
-			  					</table>
-			  				</div>
-			  				<div class="seCensor receipt-censor">
-			  					<div class="title">
-			  					报销单填写说明
-			  					</div>
-				  				<div class="detail">
-				  					<p>1 办事处水电费标准100元，标准内实报；</p>
-				  					<p>2 <b>产生费用所在办事处</b> 默认使用您所在的第一个办事处；</p>
-				  					<p>3 邮寄费、公关费、办公费等详细说明请填写到 <b>报销说明</b>。</p>
-			  					</div>
-			  				</div>
-			  			</div>
-			  			<div class="entry receipt-list">
-			  				<div class="seTable">
-			  					<table class="table table-bordered table-condensed table-hover">
-			  					<tbody>
-			  						<tr><th colspan="2" class="taC" id="xingchengdan">行程1#详细<a href="#del" class="fR text-danger" data-toggle="modal">删除</a></th></tr>
-			  						<tr><th colspan="2" class="ta"><i class="contactsMark icon-">P</i> 2020-01-03 珠海-广州<div class="fR"><a href="">编辑</a>&nbsp;<a href="" class="colRed">移除</a></div></th></tr>
-			  						<tr><th>往来交通费<p class="colGray">#高铁</p></th><td  width="200" class="taR">￥75.00</td></tr>
-			  						<tr><th>市内交通费<p class="colGray">#出租车</p></th><td  width="200" class="taR">￥25.00</td></tr>
-			  						<tr><th class="taR">合计</th><td class="colGreen taR">￥100.00</td></tr>
-			  						<tr><th colspan="2" class="ta"><i class="contactsMark icon-">P</i> 2020-01-03～2020-01-04 广州-广州<div class="fR"><a href="">编辑</a>&nbsp;<a href="" class="colRed">移除</a></div></th></tr>
-			  						<tr><th>出差住宿费<p class="colGray">#住一晚</p></th><td  width="200" class="taR">￥235.00</td></tr>
-			  						<tr><th>出差补助费<p class="colGray">#2天</p></th><td  width="200" class="taR">￥60.00</td></tr>
-			  						<tr><th class="taR">合计</th><td class="colGreen taR">￥295.00</td></tr>
-			  						<tr><th colspan="2" class="ta"><i class="contactsMark icon-">P</i> 2020-01-05 广州-珠海<div class="fR"><a href="">编辑</a>&nbsp;<a href="" class="colRed">移除</a></div></th></tr>
-			  						<tr><th>往来交通费<p class="colGray">#高铁</p></th><td  width="200" class="taR">￥75.00</td></tr>
-			  						<tr><th>市内交通费<p class="colGray">#出租车</p></th><td  width="200" class="taR">￥25.00</td></tr>
-			  						<tr><th class="taR">合计</th><td class="colGreen taR">￥100.00</td></tr>
-			  						<tr><th colspan="2" class="taC"><a href="#route-add" class="button" data-toggle="modal">添加行程费用</a></th></tr>
-			  						<tr><th colspan="2" class="taC">行程2#详细<a href="#" class="fR text-danger">删除</a></th></tr>
-			  						<tr><th colspan="2" class="ta"><i class="contactsMark icon-">P</i> 2020-01-11 珠海-中山<div class="fR"><a href="">编辑</a>&nbsp;<a href="" class="colRed">移除</a></div></th></tr>
-			  						<tr><th>往来交通费<p class="colGray">#高铁</p></th><td  width="200" class="taR">￥75.00</td></tr>
-			  						<tr><th>市内交通费<p class="colGray">#出租车</p></th><td  width="200" class="taR">￥25.00</td></tr>
-			  						<tr><th class="taR">合计</th><td class="colGreen taR">￥100.00</td></tr>
-			  						<tr><th class="taR">合计</th><td class="colGreen taR">￥100.00</td></tr>
-			  						<tr><th colspan="2" class="taC"><a href="#route-add" class="button" data-toggle="modal">添加行程费用</a></th></tr>
-			  						<tr><th colspan="2" class="taC"><a href="#" class="button" data-toggle="modal">添加新行程</a></th></tr>
-			  						<tr><th colspan="2" class="taC">差旅相关费用</th></tr>
-			  						<tr><th>往来交通费</th><td  width="200" class="taR">￥150.00</td></tr>
-			  						<tr><th>市内交通费</th><td  width="200" class="taR">￥50.00</td></tr>
-			  						<tr><th>出差住宿费</th><td  width="200" class="taR">￥235.00</td></tr>
-			  						<tr><th>出差补助</th><td  width="200" class="taR">￥60.00</td></tr>
-			  						<tr><th>其他费用</th><td  width="200" class="taR">￥0.00</td></tr>
-			  						<tr><th class="taR">合计</th><td class="colGreen taR">￥495.00</td></tr>
-			  						<tr class="warning"><td class="taR"><b>本次报销费用合计</b></td><td class="colGreed taR"><b style="font-size:24px">￥495.00</b></td></tr>
-			  						<tr><th colspan="2" class="taC">附件</th></tr>
-			  						<tr><td colspan="2">
-			  							<input type="file"><a class="btn btn-primary btn-mini">上传</a>&nbsp;&nbsp;<span>支持jpg、png、doc、docx、els、elsx；最大8M文件。</span>
-			  							<!--已上传文件-->
-			  							<table class="table">
-			  								<thead><th>文件名</th><th>大小</th><th>操作</th></thead>
-			  								<tbody>
-			  									<tr><td><a href="#" target="_blank">发票1.jpg</a></td><td>20kb</td><td><a href="">删除</a></td></tr>
-			  									<tr><td><a href="#" target="_blank">QQ截图20150624170045.png</a></td><td>171kb</td><td><a href="">删除</a></td></tr>
-			  									<tr><td><a href="#" target="_blank">Doc1.docx</a></td><td>47kb</td><td><a href="">删除</a></td></tr>
-			  								</tbody>
-			  							</table>
-			  							<!--已上传文件-->
-			  						</td></tr>
-			  						</tbody>
-			  					</table>
-			  				</div>
-			  				<div class="seCensor receipt-censor">
-			  					<div class="title">
-			  					报销单填写说明
-			  					</div>
-				  				<div class="detail">
-				  					<p>1 请按先后发生顺序填写报销明细，交通费（市内交通费及往来交通费）、邮寄费需在批注明注明费用明细（例：珠海-广州70元-佛山20元）；</p>
-				  					<p>2 出差补助30元/天，不需提供发票，只需在报销单上填写清楚；</p>
-				  					<p>3 <b>产生费用所在办事处</b> 默认使用您所在的第一个办事处。</p>
-			  					</div>
-			  					<div class="itinerary">
-			  						<h2 class="itineraryTitle">总行程单</h2>
-			  						<div class="itineraryCon">
-			  							<ul>
-			  								<li>行程1#</li>
-			  								<li>
-			  									<div class="itineraryList">
-						  							<div class="addressName"><i class="contactsMark icon-">P</i> <b>珠海</b></div>
-						  							<div class="pointLine">
-						  								<div class="priceList">
-						  									<span class="priceTitle">金额</span>
-						  									<span class="price colGreen">￥70</span>
-						  								</div>
-						  								<div class="timeList">
-						  									<span class="timeTitle">时间</span>
-						  									<span class="time">2020-05-12 ~ 2020-05-13</span>
-						  								</div>
-						  							</div>
-						  						</div>
-			  								</li>
-			  								<li>
-			  									<div class="itineraryList">
-						  							<div class="addressName"><i class="contactsMark icon-">P</i> <b>广州</b></div>
-						  							<div class="pointLine">
-						  								<div class="priceList">
-						  									<span class="priceTitle">金额</span>
-						  									<span class="price colGreen">￥70</span>
-						  								</div>
-						  								<div class="timeList">
-						  									<span class="timeTitle">时间</span>
-						  									<span class="time">2020-05-13 ~ 2020-05-14</span>
-						  								</div>
-						  							</div>
-						  						</div>
-			  								</li>
-			  								<li>
-			  									<div class="itineraryList">
-						  							<div class="addressName"><i class="contactsMark icon-">P</i> <b>广州</b></div>
-						  							<div class="pointLine">
-						  								<div class="priceList">
-						  									<span class="priceTitle">金额</span>
-						  									<span class="price colGreen">￥70</span>
-						  								</div>
-						  								<div class="timeList">
-						  									<span class="timeTitle">时间</span>
-						  									<span class="time">2020-05-14 ~ 2020-05-14</span>
-						  								</div>
-						  							</div>
-						  						</div>
-			  								</li>
-			  								<li>
-			  									<div class="itineraryList">
-						  							<div class="addressName"><i class="contactsMark icon-">P</i> <b>珠海</b></div>
-						  						</div>
-			  								</li>
-			  							</ul>
-			  							<ul>
-			  								<li>行程2#</li>
-			  								<li>
-			  									<div class="itineraryList">
-						  							<div class="addressName"><i class="contactsMark icon-">P</i> <b>珠海</b></div>
-						  							<div class="pointLine">
-						  								<div class="priceList">
-						  									<span class="priceTitle">金额</span>
-						  									<span class="price colGreen">￥70</span>
-						  								</div>
-						  								<div class="timeList">
-						  									<span class="timeTitle">时间</span>
-						  									<span class="time">2020-05-12 ~ 2020-05-13</span>
-						  								</div>
-						  							</div>
-						  						</div>
-			  								</li>
-			  								<li>
-			  									<div class="itineraryList">
-						  							<div class="addressName"><i class="contactsMark icon-">P</i> <b>中山</b></div>
-						  							<div class="pointLine">
-						  								<div class="priceList">
-						  									<span class="priceTitle">金额</span>
-						  									<span class="price colGreen">￥70</span>
-						  								</div>
-						  								<div class="timeList">
-						  									<span class="timeTitle">时间</span>
-						  									<span class="time">2020-05-13 ~ 2020-05-14</span>
-						  								</div>
-						  							</div>
-						  						</div>
-			  								</li>
-			  							</ul>
-			  						</div>
-			  					</div>
-			  				</div>
-			  			</div>
-			  			<div class="entry receipt-list">
-			  				<div class="seTable">
-			  					<table class="table table-bordered table-condensed table-hover">
-			  					<tbody>
-			  						<tr><th colspan="2" class="taC" id="neibupeixun">内部培训费用</th></tr>
-			  						<tr><th>场租费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入场租费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
-			  						<tr><th>薪酬</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入薪酬" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
-			  						<tr><th>住宿费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入住宿费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
-			  						<tr><th>交通费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入交通费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
-			  						<tr><th>餐饮费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入餐饮费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
-			  						<tr><th>办公费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入办公费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
-			  						<tr><th>餐费补助</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入公关费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
-			  						<tr><th>其他</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入其他" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
-			  						<tr><th class="taR">合计</th><td class="colGreen taR">￥0.00</td></tr>
-			  						<tr class="warning"><td class="taR"><b>本次报销费用合计</b></td><td class="colGreed taR"><b style="font-size:24px">￥2160.00</b></td></tr>
-									<tr><th colspan="2" class="taC">报销单审批</th></tr>
-									<tr>
-										<th id="baixiao">选择审批组</th>
-										<td class="taR"><select><option>通用组（何银龄 >  谭玉堂 >赵淑燕）</option></select></td>
-									</tr>
-									<tr><th colspan="2" class="taC">产生费用所在办事处</th></tr>
-									<tr>
-										<th>选择办事处</th>
-										<td class="taR"><select class="span2"><option>总部</option></select></td>
-									</tr>
-									<tr><th colspan="2" class="taC">汇款信息</th></tr>
-									<tr><th>汇款人户名</th><td><input type="text" placeholder="请输入汇款人户名" value="刘飞"></td></tr>
-									<tr><th>汇款开户银行名称</th><td><input type="text" placeholder="请输入汇款开户银行名称" value="建行西安长安路支行"></td></tr>
-									<tr><th>汇款帐号</th><td><input type="text" placeholder="请输入汇款帐号" value="61001720015050000695"></td></tr>
-									<tr><th class="tipFather">联行号&nbsp;<div class="tipContent"><span class="tipGray">?</span><div class="tipConactive"><p>1.如果不是公司广发，务必填上银行联行号</p><p>2.如不清楚银行联行号请咨询报销查款专用 QQ：2870766094</p></div></div></th><td><input type="text" placeholder="请输入联行号" value=""></td></tr>
-			  						<tr><th colspan="2" class="taC">报销说明</th></tr>
-			  						<tr><th colspan="2">
-			  									<textarea required rows="2" style="width:99%" placeholder="市内交通费、邮寄费、公关费、办公费等费用说明，请详细填写在这。"></textarea>
-			  						</th></tr>
-			  						<tr><th colspan="2" class="taC">附件</th></tr>
-			  						<tr><td colspan="2">
-			  							<input type="file"><a class="btn btn-primary btn-mini">上传</a>&nbsp;&nbsp;<span>支持jpg、png、doc、docx、els、elsx；最大8M文件。</span>
-			  							<!--已上传文件-->
-			  							<table class="table">
-			  								<thead><th>文件名</th><th>大小</th><th>操作</th></thead>
-			  								<tbody>
-			  									<tr><td><a href="#" target="_blank">发票1.jpg</a></td><td>20kb</td><td><a href="">删除</a></td></tr>
-			  									<tr><td><a href="#" target="_blank">QQ截图20150624170045.png</a></td><td>171kb</td><td><a href="">删除</a></td></tr>
-			  									<tr><td><a href="#" target="_blank">Doc1.docx</a></td><td>47kb</td><td><a href="">删除</a></td></tr>
-			  								</tbody>
-			  							</table>
-			  							<!--已上传文件-->
-			  						</td></tr>
-			  						</tbody>
-			  					</table>
-			  				</div>
-			  				<div class="seCensor receipt-censor">
-			  					<div class="title">
-			  					报销单填写说明
-			  					</div>
-				  				<div class="detail">
-				  					<p>1 内部培训，总部专用。</p>
-			  					</div>
-			  				</div>
-			  			</div>
-			  			<div class="btn-display"><a href="saea-confirm.html" class="button">生成报销单 >></a></div>
+		  			<div style="margin-left:30px;">
+						<legend><div class="fR"></div>申请报销相关费用</legend>
+				  		<div class="saeaList" id="saeaList">
+				  			<h4 class="saeaTip">请选择一下需要报销的费用类型</h4>
+				  			<ul class="saeaType clearfix">
+				  				<li>
+				  					<input type="checkbox" name="checkbox" checked data-labelauty="办事处相关费用">
+				  				</li>
+				  				<li>
+				  					<input type="checkbox" name="checkbox" data-labelauty="差旅相关费用">
+				  					<!-- <input class="saeaCheckbox" type="checkbox" name="" style="zoom:180%;" checked="">
+				  					<label>差旅相关费用</label> -->
+				  				</li>
+				  				<li>
+				  					<input type="checkbox" name="checkbox" data-labelauty="内部培训费用">
+				  				</li>
+				  			</ul>
+				  			<div class="entry receipt-list" id="banshi">
+				  				<div class="seTable">
+				  					<table class="table table-bordered table-condensed table-hover">
+				  					<tbody>
+				  						<tr><th colspan="2" class="taC">办事处相关费用</th></tr>
+				  						<tr><th>市内交通费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入市内交通费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
+				  						<tr><th>市内出租费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入市内出租费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
+				  						<tr><th>办事处房租</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入办事处房租" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
+				  						<tr><th>电话费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入电话费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
+				  						<tr><th>水费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入水费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
+				  						<tr><th>电费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入电费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
+				  						<tr><th>办公费用</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入办公费用" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
+				  						<tr><th>邮寄费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入邮寄费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
+				  						<tr><th>其他费用</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入其他费用" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
+				  						<tr><th class="taR">合计</th><td class="colGreen taR">￥0.00</td></tr>
+				  						<tr><th colspan="2" class="taC">其他</th></tr>
+				  						<tr><th>公关费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入公关费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
+				  						<tr><th>广告费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入公关费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
+				  						<tr><th>借款</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入公关费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
+				  						<tr><th>可自加费用</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入可自加费用" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
+				  						<tr><th class="taR">合计</th><td class="colGreen taR">￥0.00</td></tr>
+				  						<tr><th colspan="2" class="taC">公关费绑定发票</th></tr>
+				  						<tr><th class="colRed">如本次报销有公关费支出，确认是否涉需要绑定发票</th><td class="taR"><!-- <select class="span2"><option>绑定开票</option><option>不需要</option></select> --></td></tr>
+				  						<tr><th></th><td class="taR"><a class="button" href="#add-invoice" data-toggle="modal">添加发票</a></select></td></tr>
+						  								<tr><th>发票</a></th><td class="taR">公关费（￥500.00）</td></tr>
+						  								<tr><th><a href="#invdetail" data-toggle="modal">#F201909187362</a> <a class="fR">移除</a></th><td class="taR">￥<input type="number" value="0" placeholder="输入可自加费用" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
+				  						<tr class="warning"><td class="taR"><b>本次报销费用合计</b></td><td class="colGreed taR"><b style="font-size:24px">￥2160.00</b></td></tr>
+				  						<tr><th colspan="2" class="taC">附件</th></tr>
+				  						<tr><td colspan="2">
+				  							<input type="file"><a class="btn btn-primary btn-mini">上传</a>&nbsp;&nbsp;<span>支持jpg、png、doc、docx、els、elsx；最大8M文件。</span>
+				  							<!--已上传文件-->
+				  							<table class="table">
+				  								<thead><th>文件名</th><th>大小</th><th>操作</th></thead>
+				  								<tbody>
+				  									<tr><td><a href="#" target="_blank">发票1.jpg</a></td><td>20kb</td><td><a href="">删除</a></td></tr>
+				  									<tr><td><a href="#" target="_blank">QQ截图20150624170045.png</a></td><td>171kb</td><td><a href="">删除</a></td></tr>
+				  									<tr><td><a href="#" target="_blank">Doc1.docx</a></td><td>47kb</td><td><a href="">删除</a></td></tr>
+				  								</tbody>
+				  							</table>
+				  							<!--已上传文件-->
+				  						</td></tr>
+				  						</tbody>
+				  					</table>
+				  				</div>
+				  				<div class="seCensor receipt-censor">
+				  					<div class="title">
+				  					报销单填写说明
+				  					</div>
+					  				<div class="detail">
+					  					<p>1 办事处水电费标准100元，标准内实报；</p>
+					  					<p>2 <b>产生费用所在办事处</b> 默认使用您所在的第一个办事处；</p>
+					  					<p>3 邮寄费、公关费、办公费等详细说明请填写到 <b>报销说明</b>。</p>
+				  					</div>
+				  				</div>
+				  			</div>
+				  			<div class="entry receipt-list" id="chalv">
+				  				<div class="seTable">
+				  					<table class="table table-bordered table-condensed table-hover">
+				  					<tbody>
+				  						<tr><th colspan="2" class="taC">行程1#详细<a href="#del" class="fR text-danger" data-toggle="modal">删除</a></th></tr>
+				  						<tr><th colspan="2" class="ta"><i class="contactsMark icon-">P</i> 2020-01-03 珠海-广州<div class="fR"><a href="">编辑</a>&nbsp;<a href="" class="colRed">移除</a></div></th></tr>
+				  						<tr><th>往来交通费<p class="colGray">#高铁</p></th><td  width="200" class="taR">￥75.00</td></tr>
+				  						<tr><th>市内交通费<p class="colGray">#出租车</p></th><td  width="200" class="taR">￥25.00</td></tr>
+				  						<tr><th class="taR">合计</th><td class="colGreen taR">￥100.00</td></tr>
+				  						<tr><th colspan="2" class="ta"><i class="contactsMark icon-">P</i> 2020-01-03～2020-01-04 广州-广州<div class="fR"><a href="">编辑</a>&nbsp;<a href="" class="colRed">移除</a></div></th></tr>
+				  						<tr><th>出差住宿费<p class="colGray">#住一晚</p></th><td  width="200" class="taR">￥235.00</td></tr>
+				  						<tr><th>出差补助费<p class="colGray">#2天</p></th><td  width="200" class="taR">￥60.00</td></tr>
+				  						<tr><th class="taR">合计</th><td class="colGreen taR">￥295.00</td></tr>
+				  						<tr><th colspan="2" class="ta"><i class="contactsMark icon-">P</i> 2020-01-05 广州-珠海<div class="fR"><a href="">编辑</a>&nbsp;<a href="" class="colRed">移除</a></div></th></tr>
+				  						<tr><th>往来交通费<p class="colGray">#高铁</p></th><td  width="200" class="taR">￥75.00</td></tr>
+				  						<tr><th>市内交通费<p class="colGray">#出租车</p></th><td  width="200" class="taR">￥25.00</td></tr>
+				  						<tr><th class="taR">合计</th><td class="colGreen taR">￥100.00</td></tr>
+				  						<tr><th colspan="2" class="taC"><a href="#route-add" class="button" data-toggle="modal">添加行程费用</a></th></tr>
+				  						<tr><th colspan="2" class="taC">行程2#详细<a href="#" class="fR text-danger">删除</a></th></tr>
+				  						<tr><th colspan="2" class="ta"><i class="contactsMark icon-">P</i> 2020-01-11 珠海-中山<div class="fR"><a href="">编辑</a>&nbsp;<a href="" class="colRed">移除</a></div></th></tr>
+				  						<tr><th>往来交通费<p class="colGray">#高铁</p></th><td  width="200" class="taR">￥75.00</td></tr>
+				  						<tr><th>市内交通费<p class="colGray">#出租车</p></th><td  width="200" class="taR">￥25.00</td></tr>
+				  						<tr><th class="taR">合计</th><td class="colGreen taR">￥100.00</td></tr>
+				  						<tr><th class="taR">合计</th><td class="colGreen taR">￥100.00</td></tr>
+				  						<tr><th colspan="2" class="taC"><a href="#route-add" class="button" data-toggle="modal">添加行程费用</a></th></tr>
+				  						<tr><th colspan="2" class="taC"><a href="#" class="button" data-toggle="modal">添加新行程</a></th></tr>
+				  						<tr><th colspan="2" class="taC">差旅相关费用</th></tr>
+				  						<tr><th>往来交通费</th><td  width="200" class="taR">￥150.00</td></tr>
+				  						<tr><th>市内交通费</th><td  width="200" class="taR">￥50.00</td></tr>
+				  						<tr><th>出差住宿费</th><td  width="200" class="taR">￥235.00</td></tr>
+				  						<tr><th>出差补助</th><td  width="200" class="taR">￥60.00</td></tr>
+				  						<tr><th>其他费用</th><td  width="200" class="taR">￥0.00</td></tr>
+				  						<tr><th class="taR">合计</th><td class="colGreen taR">￥495.00</td></tr>
+				  						<tr class="warning"><td class="taR"><b>本次报销费用合计</b></td><td class="colGreed taR"><b style="font-size:24px">￥495.00</b></td></tr>
+				  						<tr><th colspan="2" class="taC">附件</th></tr>
+				  						<tr><td colspan="2">
+				  							<input type="file"><a class="btn btn-primary btn-mini">上传</a>&nbsp;&nbsp;<span>支持jpg、png、doc、docx、els、elsx；最大8M文件。</span>
+				  							<!--已上传文件-->
+				  							<table class="table">
+				  								<thead><th>文件名</th><th>大小</th><th>操作</th></thead>
+				  								<tbody>
+				  									<tr><td><a href="#" target="_blank">发票1.jpg</a></td><td>20kb</td><td><a href="">删除</a></td></tr>
+				  									<tr><td><a href="#" target="_blank">QQ截图20150624170045.png</a></td><td>171kb</td><td><a href="">删除</a></td></tr>
+				  									<tr><td><a href="#" target="_blank">Doc1.docx</a></td><td>47kb</td><td><a href="">删除</a></td></tr>
+				  								</tbody>
+				  							</table>
+				  							<!--已上传文件-->
+				  						</td></tr>
+				  						</tbody>
+				  					</table>
+				  				</div>
+				  				<div class="seCensor receipt-censor">
+				  					<div class="title">
+				  					报销单填写说明
+				  					</div>
+					  				<div class="detail">
+					  					<p>1 请按先后发生顺序填写报销明细，交通费（市内交通费及往来交通费）、邮寄费需在批注明注明费用明细（例：珠海-广州70元-佛山20元）；</p>
+					  					<p>2 出差补助30元/天，不需提供发票，只需在报销单上填写清楚；</p>
+					  					<p>3 <b>产生费用所在办事处</b> 默认使用您所在的第一个办事处。</p>
+				  					</div>
+				  					<div class="itinerary">
+				  						<h2 class="itineraryTitle">总行程单</h2>
+				  						<div class="itineraryCon">
+				  							<ul>
+				  								<li>行程1#</li>
+				  								<li>
+				  									<div class="itineraryList">
+							  							<div class="addressName"><i class="contactsMark icon-">P</i> <b>珠海</b></div>
+							  							<div class="pointLine">
+							  								<div class="priceList">
+							  									<span class="priceTitle">金额</span>
+							  									<span class="price colGreen">￥70</span>
+							  								</div>
+							  								<div class="timeList">
+							  									<span class="timeTitle">时间</span>
+							  									<span class="time">2020-05-12 ~ 2020-05-13</span>
+							  								</div>
+							  							</div>
+							  						</div>
+				  								</li>
+				  								<li>
+				  									<div class="itineraryList">
+							  							<div class="addressName"><i class="contactsMark icon-">P</i> <b>广州</b></div>
+							  							<div class="pointLine">
+							  								<div class="priceList">
+							  									<span class="priceTitle">金额</span>
+							  									<span class="price colGreen">￥70</span>
+							  								</div>
+							  								<div class="timeList">
+							  									<span class="timeTitle">时间</span>
+							  									<span class="time">2020-05-13 ~ 2020-05-14</span>
+							  								</div>
+							  							</div>
+							  						</div>
+				  								</li>
+				  								<li>
+				  									<div class="itineraryList">
+							  							<div class="addressName"><i class="contactsMark icon-">P</i> <b>广州</b></div>
+							  							<div class="pointLine">
+							  								<div class="priceList">
+							  									<span class="priceTitle">金额</span>
+							  									<span class="price colGreen">￥70</span>
+							  								</div>
+							  								<div class="timeList">
+							  									<span class="timeTitle">时间</span>
+							  									<span class="time">2020-05-14 ~ 2020-05-14</span>
+							  								</div>
+							  							</div>
+							  						</div>
+				  								</li>
+				  								<li>
+				  									<div class="itineraryList">
+							  							<div class="addressName"><i class="contactsMark icon-">P</i> <b>珠海</b></div>
+							  						</div>
+				  								</li>
+				  							</ul>
+				  							<ul>
+				  								<li>行程2#</li>
+				  								<li>
+				  									<div class="itineraryList">
+							  							<div class="addressName"><i class="contactsMark icon-">P</i> <b>珠海</b></div>
+							  							<div class="pointLine">
+							  								<div class="priceList">
+							  									<span class="priceTitle">金额</span>
+							  									<span class="price colGreen">￥70</span>
+							  								</div>
+							  								<div class="timeList">
+							  									<span class="timeTitle">时间</span>
+							  									<span class="time">2020-05-12 ~ 2020-05-13</span>
+							  								</div>
+							  							</div>
+							  						</div>
+				  								</li>
+				  								<li>
+				  									<div class="itineraryList">
+							  							<div class="addressName"><i class="contactsMark icon-">P</i> <b>中山</b></div>
+							  							<div class="pointLine">
+							  								<div class="priceList">
+							  									<span class="priceTitle">金额</span>
+							  									<span class="price colGreen">￥70</span>
+							  								</div>
+							  								<div class="timeList">
+							  									<span class="timeTitle">时间</span>
+							  									<span class="time">2020-05-13 ~ 2020-05-14</span>
+							  								</div>
+							  							</div>
+							  						</div>
+				  								</li>
+				  							</ul>
+				  						</div>
+				  					</div>
+				  				</div>
+				  			</div>
+				  			<div class="entry receipt-list" id="neibupeixun">
+				  				<div class="seTable">
+				  					<table class="table table-bordered table-condensed table-hover">
+				  					<tbody>
+				  						<tr><th colspan="2" class="taC" id="neibupeixun">内部培训费用</th></tr>
+				  						<tr><th>场租费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入场租费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
+				  						<tr><th>薪酬</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入薪酬" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
+				  						<tr><th>住宿费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入住宿费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
+				  						<tr><th>交通费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入交通费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
+				  						<tr><th>餐饮费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入餐饮费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
+				  						<tr><th>办公费</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入办公费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
+				  						<tr><th>餐费补助</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入公关费" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
+				  						<tr><th>其他</th><td  width="200" class="taR">￥<input type="number" value="0" placeholder="输入其他" pattern="[0-9]" step="1" min="0" class="span2"></td></tr>
+				  						<tr><th class="taR">合计</th><td class="colGreen taR">￥0.00</td></tr>
+				  						<tr class="warning"><td class="taR"><b>本次报销费用合计</b></td><td class="colGreed taR"><b style="font-size:24px">￥2160.00</b></td></tr>
+				  						<tr><th colspan="2" class="taC">附件</th></tr>
+				  						<tr><td colspan="2">
+				  							<input type="file"><a class="btn btn-primary btn-mini">上传</a>&nbsp;&nbsp;<span>支持jpg、png、doc、docx、els、elsx；最大8M文件。</span>
+				  							<!--已上传文件-->
+				  							<table class="table">
+				  								<thead><th>文件名</th><th>大小</th><th>操作</th></thead>
+				  								<tbody>
+				  									<tr><td><a href="#" target="_blank">发票1.jpg</a></td><td>20kb</td><td><a href="">删除</a></td></tr>
+				  									<tr><td><a href="#" target="_blank">QQ截图20150624170045.png</a></td><td>171kb</td><td><a href="">删除</a></td></tr>
+				  									<tr><td><a href="#" target="_blank">Doc1.docx</a></td><td>47kb</td><td><a href="">删除</a></td></tr>
+				  								</tbody>
+				  							</table>
+				  							<!--已上传文件-->
+				  						</td></tr>
+				  						</tbody>
+				  					</table>
+				  				</div>
+				  				<div class="seCensor receipt-censor">
+				  					<div class="title">
+				  					报销单填写说明
+				  					</div>
+					  				<div class="detail">
+					  					<p>1 内部培训，总部专用。</p>
+				  					</div>
+				  				</div>
+				  			</div>
+				  			<div class="entry receipt-list" id="shenpi">
+				  				<div class="seTable">
+				  					<table class="table table-bordered table-condensed table-hover">
+				  						<tr><th colspan="2" class="taC">报销单审批</th></tr>
+										<tr>
+											<th id="shenpi">选择审批组</th>
+											<td class="taR"><select><option>通用组（何银龄 >  谭玉堂 >赵淑燕）</option></select></td>
+										</tr>
+										<tr><th colspan="2" class="taC">产生费用所在办事处</th></tr>
+										<tr>
+											<th>选择办事处</th>
+											<td class="taR"><select class="span2"><option>总部</option></select></td>
+										</tr>
+										<tr><th colspan="2" class="taC">汇款信息</th></tr>
+										<tr><th>汇款人户名</th><td><input type="text" placeholder="请输入汇款人户名" value="刘飞"></td></tr>
+										<tr><th>汇款开户银行名称</th><td><input type="text" placeholder="请输入汇款开户银行名称" value="建行西安长安路支行"></td></tr>
+										<tr><th>汇款帐号</th><td><input type="text" placeholder="请输入汇款帐号" value="61001720015050000695"></td></tr>
+										<tr><th class="tipFather">联行号&nbsp;<div class="tipContent"><span class="tipGray">?</span><div class="tipConactive"><p>1.如果不是公司广发，务必填上银行联行号</p><p>2.如不清楚银行联行号请咨询报销查款专用 QQ：2870766094</p></div></div></th><td><input type="text" placeholder="请输入联行号" value=""></td></tr>
+				  						<tr><th colspan="2" class="taC">报销说明</th></tr>
+				  						<tr><th colspan="2">
+				  									<textarea required rows="2" style="width:99%" placeholder="市内交通费、邮寄费、公关费、办公费等费用说明，请详细填写在这。"></textarea>
+				  						</th></tr>
+				  					</table>
+				  				</div>
+				  				<div class="seCensor receipt-censor">
+				  					<div class="title">
+				  					审批流程
+				  					</div>
+				  				</div>
+				  			</div>
+				  			<div class="btn-display"><a href="saea-confirm.html" class="button">生成报销单 >></a></div>
+						</div>
 					</div>
 				</div>
 		</div>
@@ -398,25 +412,39 @@
 	</div>
 			<!--移除-->
 <script type="text/javascript">autoFlashHeight();</script>
-<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
-<script type="text/javascript">
-function FloatMenu(){
-	var animationSpeed=1500;
-	var animationEasing='easeOutQuint';
-	var scrollAmount=$(document).scrollTop();
-	var newPosition=menuPosition+scrollAmount;
-	if($(window).height()<$('#fixedSide').height()){
-		$('#fixedSide').css('top',menuPosition);
-	} else {
-		$('#fixedSide').stop().animate({top: newPosition}, animationSpeed, animationEasing);
-	}
-}
-$(window).load(function(){
-	menuPosition=$('#fixedSide').position().top;
-	FloatMenu();
-});
-$(window).scroll(function(){ 
-	FloatMenu();
-});
+<script src="js/jquery-labelauty.js"></script>
+
+<script>
+    $(function () {
+        var fixedSide = $("#fixedSide");
+        var entry = $(".entry");
+        var mainTopArr = new Array();
+        for(
+        	var i=0;i<entry.length;i++){
+            var top = entry.eq(i).offset().top;
+            mainTopArr.push(top);
+        }
+        $(".autoHeight").scroll(function(){
+            var scrollTop = $(this).scrollTop();
+            var k;
+            for(
+            	var i=0;i<mainTopArr.length;i++)
+            	{
+	                if(scrollTop>=mainTopArr[i]){
+	                    k=i;
+                }
+            }
+            fixedSide.find("li").eq(k).addClass("active").siblings().removeClass("active");
+        });
+        $('.fixedSide li').click(function(){
+			var t = $('#saeaList .entry').eq($(this).index()).offset().top;
+			$('body,html').animate({"scrollTop":t},500);
+			$(this).addClass('active').siblings().removeClass('active');
+		});
+    });
+    $(function(){
+		$(':input').labelauty();
+	});
+
 </script>
 </body>