Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
3308ec05 by 任超
Options

style:样式

1 parent 0bece580
Inline Side-by-side
Showing 5 changed files with 286 additions and 82 deletions
......@@ -3,6 +3,7 @@
margin: 0 auto;
min-height:calc(100vh - 207px);
color: #4a4a4a;
padding-bottom: 100px;
}
.name_title {
padding: 10px;
......@@ -20,4 +21,47 @@
.name_title p {
display: inline-block;
color: #0091FF;
}
.certificate_list {
padding: 30px 20px;
border: 1px solid #eeeeee;
border-radius: 4px;
margin: 20px 0;
}
.certificate_list a {
color: #0091FF;
margin-right: 10px;
}
.certificate_list li {
line-height: 36px;
}
.certificate_list span {
margin-right: 10px;
}
.acceptance_information {
margin-top: 20px;
}
.acceptance_information h3 {
height: 16px;
padding-left: 5px;
border-left: 3px solid #0091FF;
line-height: 18px;
font-size: 16px;
font-weight: 600;
margin-bottom: 15px;
}
.acceptance_information ul {
font-size: 0;
}
.acceptance_information ul li {
display: inline-block;
width: 50%;
font-size: 14px;
line-height: 28px;
}
.acceptance_information ul li span {
color: #9B9B9B;
}
.acceptance_information ul li p {
display: inline-block;
}
\ No newline at end of file
......
.app_progress li {
padding: 0 30px;
line-height: 40px;
background: #eee;
display: inline-block;
color: #fff;
position: relative;
color: black;
cursor: pointer;
.progressBar {
padding-top: 30px;
color: #4A4A4A;
position: relative;
margin: 30px 0 50px 0;
width: 95%;
}
.app_progress li:hover {
background-color: #1E9FFF;
color: #fff;
}
.app_progress li:hover:after {
border-left-color: #1E9FFF;
.app_progress {
display: flex;
width: 106%;
}
.app_progress li:after{
content: '';
display: block;
border-top: 20px solid #fff;
border-bottom: 20px solid #fff;
border-left: 12px solid #eee;
position: absolute;
right:0;
top: 0;
.app_progress li {
display: inline-block;
text-align: center;
flex: 1;
width: 100%;
}
.active {
background-color: #1E9FFF!important;
color: #fff!important;
.app_progress .layui-progress {
flex: 2.1;
position: relative;
top: 10px;
margin-left: -3%;
margin-right: -3%;
}
.app_progress li.active:after {
border-left-color: #1E9FFF;
.item_proress {
position: relative;
width: 50px!important;
z-index: 10;
}
.selected {
background-color: #009688!important;
color: #fff!important;
.app_progress li p{
width: 29.5px;
height: 29.5px;
border-radius: 50%;
background-color: #E6E6E6;
margin: 0 auto;
}
.selected:hover {
background-color: #009688!important;
.app_progress li h5 {
white-space: nowrap;
}
.app_progress li.selected:after {
border-left-color: #009688;
.active {
background-color: #47E1BF!important;
position: relative;
}
.line {
width: 25px;
height: 0;
display: inline-block;
border-bottom: 2px dotted#dddddd;
margin-bottom: 4px;
.active::after {
content: " ";
display: block;
position: absolute;
left: 10px;
top: 6px;
width: 8px;
height: 12px;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.layui-progress-bar {
background-color: #47E1BF!important;
}
.next_button button {
......
......@@ -4,4 +4,45 @@ $(function () {
});
addTabs('#wssq')
// 业务
var data = {
'progressList': [
{
name: "信息效验",
isActive: 1
},
{
name: "填报信息",
isActive: 1
},
{
name: "完税核税",
isActive: 1
},
{
name: "身份认证",
isActive: 0
},
{
name: "资料审核",
isActive: 0
},
{
name: "线上缴费",
isActive: 0
},
{
name: "生成电子证书",
isActive: 0
}
],
}
// layui.use('laytpl', function () {
// laytpl = layui.laytpl;
// var getTpl = document.getElementById('progress').innerHTML
// , view = document.getElementById('app_progress');
// laytpl(getTpl).render(data, function (html) {
// view.innerHTML = html;
// });
// });
})
......
......@@ -27,47 +27,142 @@
<h2>转移类</h2>
<p>商品房转移买卖转移登记</p>
</div>
<ul class="app_progress">
<li class="selected">
<span>1</span>
信息效验
</li>
<div class="line"></div>
<li class="selected">
<span>2</span>
填报信息
</li>
<div class="line"></div>
<li class="selected">
<span>3</span>
完税核税
</li>
<div class="line"></div>
<li class="selected">
<span>4</span>
身份认证
</li>
<div class="line"></div>
<li class="selected">
<span>5</span>
资料审核
</li>
<div class="line"></div>
<li class="selected">
<span>6</span>
线上缴费
</li>
<div class="line"></div>
<li class="active">
<span>7</span>
生成电子证书
</li>
</ul>
<!-- --------------------------------- -->
<div class="progressBar">
<ul class="app_progress" id="app_progress">
<li class="item_proress">
<p class="active"></p>
<h5>信息效验</h5>
</li>
<li class="layui-progress">
<div class="layui-progress-bar" lay-percent="100%"></div>
</li>
<li class="item_proress">
<p class="active"></p>
<h5>填报信息</h5>
</li>
<li class="layui-progress">
<div class="layui-progress-bar" lay-percent="100%"></div>
</li>
<li class="item_proress">
<p class="active"></p>
<h5>信息效验</h5>
</li>
<li class="layui-progress">
<div class="layui-progress-bar" lay-percent="100%"></div>
</li>
<li class="item_proress">
<p class="active"></p>
<h5>信息效验</h5>
</li>
<li class="layui-progress">
<div class="layui-progress-bar" lay-percent="100%"></div>
</li>
<li class="item_proress">
<p class="active"></p>
<h5>信息效验</h5>
</li>
<li class="layui-progress">
<div class="layui-progress-bar" lay-percent="100%"></div>
</li>
<li class="item_proress">
<p class="active"></p>
<h5>信息效验</h5>
</li>
<li class="layui-progress">
<div class="layui-progress-bar" lay-percent="100%"></div>
</li>
<li class="item_proress">
<p class="active"></p>
<h5>信息效验</h5>
</li>
</ul>
</div>
<div class="certificate_list">
<ul>
<li>
<p>该不动产业务已办结，相应的不动产电子证照已生成，请尽快前往办事大厅领取纸质证书</p>
<p>
<span>电子证照下载</span>
<a href="">陕（2019）XXXXXX</a>
</p>
</li>
<li>
<p>该不动产业务已办结，相应的不动产电子证照已生成，纸质证书已邮寄</p>
<p>
<a href="">物流信息</a>
<span>电子证照下载</span>
<a href="">陕（2019）XXXXXX</a>
</p>
</li>
</ul>
</div>
<!-- ------------受理信息-------------- -->
<div class="acceptance_information">
<h3>受理信息</h3>
<ul>
<li>
<span>权利类型：</span>
<p>房屋等建筑物、构筑物所有权</p>
</li>
<li>
<span>业务类型：</span>
<p>商品房买卖转移登记（个人）</p>
</li>
<li>
<span>受理编号：</span>
<p>201022221345</p>
</li>
<li>
<span>受理日期：</span>
<p>77987989</p>
</li>
</ul>
</div>
<!-- ------------房屋信息-------------- -->
<div class="acceptance_information">
<h3>屋信息</h3>
<ul>
<li>
<span>不动产单元号：</span>
<p>450101 450002 GB 00740W00000000</p>
</li>
<li>
<span>产权证号：</span>
<p>370205004005GB10030</p>
</li>
<li>
<span>坐落：</span>
<p>XXX市(县)XXX街道(乡镇)XXX社区(村委会)XXX街(巷)xxx号XXXX楼XXX室</p>
</li>
<li>
<span>面积（㎡）：</span>
<p>568</p>
</li>
<li>
<span>合同备案号：</span>
<p>YS000000000001</p>
</li>
</ul>
</div>
<!-- ------------买方信息-------------- -->
<div class="acceptance_information">
<h3>买方信息</h3>
<ul>
<li>
<span>姓名：</span>
<p>任超1111</p>
</li>
<li>
<span>证件类型：</span>
<p>8998798798798</p>
</li>
<li>
<span>证件号码：</span>
<p>89798798</p>
</li>
<li>
<span>联系电话：</span>
<p>15877343636</p>
</li>
</ul>
</div>
......@@ -76,4 +171,21 @@
<script type="text/javascript" src="../staticJs/common.js"></script>
<script type="text/javascript" src="../staticJs/down.js"></script>
<script type="text/javascript" src="../staticJs/dzzs.js"></script>
<script id="progress" type="text/html">
{{# layui.each(d.progressList, function(index, item){ }}
{{# if(item.isActive==1){ }}
<li>
<p class="active"></p>
<h5>{{item.name}}</h5>
</li>
{{# } }}
{{# if(item.isActive==0){ }}
<li>
<p></p>
<h5>{{item.name}}</h5>
</li>
{{# } }}
{{# }); }}
</script>
</html>
\ No newline at end of file
......
......@@ -137,7 +137,7 @@
</ul>
<div class="next_button">
<button type="button" class="layui-btn layui-btn-normal">
<a href="">下一步</a>
<a href="./dzzs.html">下一步</a>
</button>
</div>
</div>
......