进度条

 

/*状态进度条*/

<style>
.order_status{height:120px;padding-top: 30px;padding-left: 25%;}
.order_status .s-step{float: left; 26%;height: 60px;position: relative;}
.order_status .s-step:nth-child(5n){0px;}
.order_status .s-step.active{float: left; 20%;height: 60px;position: relative;}
.order_status .s-step>b>b.active{background-color: #1E9FFF}
.order_status .s-step>b{display: block; 32px;height:32px;line-height: 32px;border-radius: 32px;position: absolute;margin-left: -16px;top: -20px;;z-index: 87}
.order_status .s-step>b>b{display: block; 26px;height: 26px;line-height: 26px;border-radius: 26px;background: #ccc;margin-top: 3px;margin-left: 3px;z-index: 88;cursor: pointer;}
.order_status .s-step>p{ 300px;height: 2px;background: #ddd;top: -5px;position: absolute;z-index: 86}
.order_status .s-step>p.active{ 268px;height: 2px;background: #ddd;top: -5px;position: absolute;z-index: 86}
.order_status .s-step em{display: block;padding-top: 20px;font-style: normal;text-align: center;color: #495060;font-size: 12px;margin-left: -65px; 130px}
.order_status .s-step>div{display: block;80px;height:32px;line-height: 32px;position: absolute;margin-left: -40px;top: -55px;z-index: 87;text-align: center;font-size: 12px;color: #c9c4c4}
.order_status .s-step>div.active{display: block;80px;height:32px;line-height: 32px;position: absolute;margin-left: -40px;top: -55px;z-index: 87;text-align: center;font-size: 12px;color: #3399ff}

</style>

<div class="page-content main-padding">
<div class="order_status">
<span class="s-step s-step0">
<b><b class="management active"></b></b>
<p></p>
<em>提交评估价</em>
</span>
<span class="s-step s-step1">
<b><b class="management"></b></b>
<p></p>
<em>完善评估信息</em>
</span>
<span class="s-step s-step2">
<b><b class="management"></b></b>
<em>完善车辆信息</em>
</span>
</div>
<div class="main-padding main-b" id="referPrice">
<div>车辆信息</div>
<table class="layui-table">
<colgroup>
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>车架号</th>
<th>行驶里程</th>
<th>上牌地区</th>
<th>上牌日期</th>
</tr>
</thead>
<tbody>
<tr>
<td>{$info.chejiahao}</td>
<td>{$info.miles}</td>
<td>{$info.buy_area}</td>
<td>{$info.buy_time}</td>
</tr>
</tbody>
</table>
<div class="layui-row mt-28">
<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label">输入评估价：</label>
<div class="layui-input-block">
<input name="assessment_money" placeholder="" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label">备注：</label>
<div class="layui-input-block">
<input name="msg" placeholder="" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</div>
<div class="div-center mt-50">
<button class="layui-btn layui-btn-normal subbt">提交</button>
</div>
</div>
<div class="main-padding main-b" id="completeAssess" hidden>
<div class="layui-row">
<div class="layui-col-xs12 layui-col-sm3 layui-col-md4">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label content-color">公平价评估价</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="gpjprice" placeholder="">
</div>
</div>
<i class="layui-icon" style="color: #80848f;">&#xe654;</i>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm3 layui-col-md4">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label content-color">车300评估价</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="cheprice" placeholder="">
</div>
</div>
<i class="layui-icon" style="color: #80848f;">&#xe654;</i>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm3 layui-col-md4">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label content-color">精真估评估价</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="jzgprice" placeholder="">
</div>
</div>
<i class="layui-icon" style="color: #80848f;">&#xe654;</i>
</div>
</div>
</div>
<div class="mt-28">车辆登记证书</div>
<hr/>
<div class="pd-10 imglist">
<input type="hidden" name="attachment[0][type_id]" value="">
<input type="hidden" data_id="0" name="attachment[0][url]" value="">
<ul id="jq22" class="jq22 upload-ul clearfix">
{volist name="info.imgs.3.url_list" id='v'}
<li class="diyUploadHover">
<div class="viewThumb">
<p class="diyControl"><span class="diyCancel"><i></i></span></p>
<?php $ext = explode('.',$v); $ext = $ext[count($ext)-1]; ?>
<img data-original="https://mp.eflashloan.com{$v}" src="https://mp.eflashloan.com{$v}_500x500.{$ext}"/>
<!--<img data-original="https://mp.eflashloan.com{$v}" src="https://mp.eflashloan.com{$v}"/>-->
</div>
</li>
{/volist}
<li class="upload-pick">
<div data_id="0" up_id="" class="webuploader-container clearfix imgupload upImagee"></div>
</li>
</ul>
</div>
<div>其余车辆信息图片</div>
<hr/>
<div class="pd-10 imglist">
<input type="hidden" name="attachment[1][type_id]" value="">
<input type="hidden" data_id="1" name="attachment[1][url]" value="">
<ul id="jq22" class="jq22 upload-ul clearfix">
{volist name="info.imgs.3.url_list" id='v'}
<li class="diyUploadHover">
<div class="viewThumb">
<p class="diyControl"><span class="diyCancel"><i></i></span></p>
<?php $ext = explode('.',$v); $ext = $ext[count($ext)-1]; ?>
<img data-original="https://mp.eflashloan.com{$v}" src="https://mp.eflashloan.com{$v}_500x500.{$ext}"/>
<!--<img data-original="https://mp.eflashloan.com{$v}" src="https://mp.eflashloan.com{$v}"/>-->
</div>
</li>
{/volist}
<li class="upload-pick">
<div data_id="1" up_id="" class="webuploader-container clearfix imgupload upImagee"></div>
</li>
</ul>
</div>
<div class="div-center mt-50 mb-20">
<button class="layui-btn layui-btn-normal nextbt">下一步</button>
</div>
</div>
<div class="main-padding main-b" id="completeCar" hidden>
<div class="layui-row mt-28">
<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
<div class="layui-carousel" style="height: 300px;" id="test10">
<div carousel-item="">
{volist name="info.imgs.3.url_list" id='v'}
<div><img width="600" height="400" src="https://mp.eflashloan.com{$v}"></div>
{/volist}
</div>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
<form class="layui-form" action="">
<div class="layui-row">
<div class="layui-col-xs12 layui-col-sm6 layui-col-md5">
<div class="layui-form-item">
<label class="layui-form-label p-0 tl content-color">发动机号</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="engine_num" placeholder="">
</div>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md5">
<div class="layui-form-item">
<label class="layui-form-label p-0 tl content-color">车牌号</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="chepai" placeholder="">
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs12 layui-col-sm6 layui-col-md5">
<div class="layui-form-item">
<label class="layui-form-label p-0 tl content-color">车辆性质</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="xingzhi" placeholder="">
</div>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md5">
<div class="layui-form-item">
<label class="layui-form-label p-0 tl content-color">品牌</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="brand" placeholder="">
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs12 layui-col-sm6 layui-col-md5">
<div class="layui-form-item">
<label class="layui-form-label p-0 tl content-color">排量</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="pailiang" placeholder="">
</div>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md5">
<div class="layui-form-item">
<label class="layui-form-label p-0 tl content-color">型号</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="xinhao" placeholder="">
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs12 layui-col-sm6 layui-col-md5">
<div class="layui-form-item">
<label class="layui-form-label p-0 tl content-color">座位</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="seat" placeholder="">
</div>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md5">
<div class="layui-form-item">
<label class="layui-form-label p-0 tl content-color">车身颜色</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="color" placeholder="">
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-xs12 layui-col-sm6 layui-col-md5">
<div class="layui-form-item">
<label class="layui-form-label p-0 tl content-color">进口&nbsp/&nbsp国产</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="country" placeholder="">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="div-center mt-50 mb-20">
<button class="layui-btn layui-btn-normal finishbt">完成</button>
</div>
</div>
</div>

$(".management").on("click",function(){
changeTabStyle(this);
});
var navThatIndex;
function changeTabStyle(obj){
$('.management').removeClass('active');
$(obj).addClass("active");
navThatIndex= $('.management').index(obj);
if(navThatIndex==0){
$("#referPrice").show();
$("#completeAssess").hide();
$("#completeCar").hide();
}
else if(navThatIndex==1){
$("#referPrice").hide();
$("#completeAssess").show();
$("#completeCar").hide();
}
else if(navThatIndex==2){
$("#referPrice").hide();
$("#completeAssess").hide();
$("#completeCar").show();
}
}