platform-b2b/src/main/webapp/resources/tpl/index/baseInfo/uploadByBatch.html

<style type="text/css">
.location {
	line-height: 28px;
}

.location ul {
	border-bottom: solid 1px #ddd;
}

.block {
	padding: 0px 15px;
}

.headerline {
	font-size: 24px;
    font-family: Microsoft YaHei, SimHei, Verdana;
    font-weight: 500;
    line-height: 22px;
    margin: 30px 0 35px -15px;
    clear: both;
    zoom: 1;
    border-top: 1px solid #eee;
    position: relative;
    font-size: 18px;
}

.headerline .index {
	position: absolute;
    top: 12px;
    left: 0;
    width: 6px;
    height: 24px;
    line-height: 24px;
    background: #ff7300;
    color: #fff;
    text-align: center;
    border-radius: 0 2px 2px 0;
    z-index: 2;
}

.headerline .content {
	position: absolute;
    top: 12px;
    left: 6px;
    line-height: 24px;
    padding: 0 15px 0 10px;
    background: #fff;
    z-index: 2;
}

.headerline .end {
	position: absolute;
    top: -12px;
    right: 0;
    line-height: 24px;
    padding-left: 15px;
    background: #fff;
    z-index: 2;
}

.search table.table tr td {
	border-top: none;
}

#searchInput {
	height: 34px;
}

.suggestion {
	position: absolute;
	margin-top: -1px;
	width: 374px;
	background-color: #fff;
	border: 1px solid #bbb;
	border-top: none;
	z-index: 20;
}

.suggestion ul {
	margin-bottom: 0;
}

.suggestion ul li {
	line-height: 20px;
	font-size: 16px;
	padding: 0px 12px;
	color: #0080c0;
	cursor: pointer;
}

.suggestion ul li:hover,.suggestion ul li.active {
	background: #eee;
}

.productInfo {
	overflow-x:scroll;
}

#release .tableMargin {
	margin-top: 20px;
}

#release table {
	margin:0 auto;
}
	
#release th {
	text-align: center;
	height: 40px;
}
#release-body td {
	text-align: center;
	word-break: break-all;
}
#release-body td ul li {
	list-style: none;
	text-align: right;
}

#release .checkboxSize input {
		width: 18px;
		height: 18px;
}

#image-box .x-floating-wrap {
	position: fixed;
	z-index: 99998;
	background: #000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.5;
}
#image-box .x-floating {
	position: fixed;
	z-index: 99999;
	top: 60px;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
}
#image-box .x-floating img {
	margin: auto auto;
	max-width: 100%;
	max-height: 80%;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

#image-box .x-close-wrap {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 100000;
	width: 120px;
  	height: 120px;
	margin: -60px -60px 0 0;
	border-radius: 100%;
	background: #000;
	opacity: .3
}

#image-box .x-close-wrap a {
	position: absolute;
	left: 25px;
	bottom: 25px;
	font-size: 42px;
	color: #fff
}

#image-box .x-close-wrap:hover {
	opacity: .7
}

table.table.table-striped  thead {
	display: none;
}

.clear-fix {
    clear: both;
}

.color-gray-f {
    color: #858585;
}

.color-red-f {
    color: #F30A26;
}

/* 分页 Start */
.block div.text-normal-s {
    margin: 20px 0;
    width: 100%;
}

.block div.text-normal-s>div:first-child {
    float: right;
    display: inline;
    height: 28px;
    line-height: 28px;
}

.block div.text-normal-s>div:first-child div {
    padding: 0;
    margin: 0;
    height: 26px;
    line-height: 26px;
    vertical-align: top;
    display: inline-block;
}

.block div.text-normal-s>div:first-child input[type="button"] {
    border: 0;
    margin: 0;
    padding: 0;
    height: 26px;
    vertical-align: top;
    background-color: transparent;
}

.block div.text-normal-s>div:first-child input[type="button"]:hover {
    color: #000000;
}

.block div.text-normal-s>div:first-child span {
    vertical-align: top;
}

.block div.text-normal-s>div:first-child input[type="text"]{
    border: 0;
    width: 20px;
    height: 20px;
    margin: 4px 0;
    vertical-align: top;
    text-align: center;
    background-image: url('static/img/order/number-box.png');
}

.block div.text-normal-s input[type="button"].btn-jump {
    width: 56px;
    height: 26px;
    border: 0;
    padding: 0;
    background-image: url('static/img/order/page-jump.png');
}

.block div.text-normal-s input[type="button"].btn-jump:hover {
    border-left: 1px #0000ff solid;
    border-right: 1px #0000ff solid;
}
    
  /* 分页 End */

</style>
<!-- block start -->
<div class="block">
	<div class="headerline">
		<div class="index"></div>
		<div class="content f16 text-bold">第一步、下载Excel模板</div>
	</div>
	<div class="box-item" ng-hide="box1Closed">
		<p>
			<button class="btn btn-success btn-sm" ng-click="download()">下载Excel模板 <i
				class="fa fa-download"></i></button> 在Excel模板上录入商品发布信息，上传
			<a class="f14 text-default" ng-click="showImg()">查看表格示例</a>。
		</p>
	</div>
	<div id="image-box" style="display: none">
		<div class="x-close-wrap" title="关闭">
			<a href="javascript:void(0);">&times;</a>
		</div>
		<div class="x-floating-wrap"></div>
		<div class="x-floating">
			<img />
		</div>
	</div>
	<div class="headerline">
		<div class="index"></div>
		<div class="content f16 text-bold">第二步、上传已经填好的Excel文件</div>
	</div>
	<div class="box-item" ng-hide="box2Closed">
		<form class="form-horizontal">
			<div class="form-group">
				<label class="control-label col-xs-3" for="xlsFile">请上传已经填写好的Excel文件</label>
				<div class="col-xs-4">
					<input required ng-file-select accept="*.xls,*.xlsx"
						ng-model="myFiles" type="file" ng-multiple="false"
						class="form-control input-sm" id="xlsFile" name="xlsFile"
						placeholder="请上传.xls或.xlsx文件" />
				</div>
				<div class="col-xs-4">
					<button ng-click="upload()" class="btn btn-success btn-sm">
						确认上传 <i class="fa fa-upload"></i>
					</button>
				</div class="col-xs-4">
			</div>
			<div>
			</div>
			<!-- 分页 Start -->
		</form>
	</div>
	<div class="headerline">
		<div class="index"></div>
		<div class="content f16 text-bold">第三部、信息提示</div>
	</div>
	<div class="box-item" ng-hide="box3Closed">
		<p ng-if="result">
			<div ng-repeat="alter in alters">
				物料 <span class="text-inverse">{{alter}}</span> 已存在，上传失败
			</div>
		</p>
	</div>
	<div class="headerline">
	</div>
	<div id="image-box" style="display: none">
		<div class="x-close-wrap" title="关闭">
			<a href="javascript:void(0);">&times;</a>
		</div>
		<div class="x-floating-wrap"></div>
		<div class="x-floating">
			<img />
		</div>
	</div>
</div>
<!-- block end -->