Skip to content

任超 / js.portalStaticPage

Go to a project
Toggle navigation
Toggle navigation pinning
caf5f295 by 任超
Options

style:预约结果

1 parent bdb59604
Inline Side-by-side
Showing 4 changed files with 65 additions and 64 deletions
......@@ -36,7 +36,7 @@
content: " ";
display: block;
position: absolute;
left: 11px;
left: 10px;
top: 6px;
width: 8px;
height: 12px;
......
......@@ -9,38 +9,6 @@
padding-top: 25px;
margin-bottom: 25
}
.app_progress li {
padding: 0 30px;
line-height: 40px;
background: #eee;
display: inline-block;
color: #fff;
position: relative;
color: black;
cursor: pointer;
}
.app_progress li:hover {
background-color: #1E9FFF;
color: #fff;
}
.app_progress li:hover:after {
border-left-color: #1E9FFF;
}
.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;
}
.active {
background-color: #1E9FFF!important;
color: #fff!important;
}
.app_progress li.active:after {
border-left-color: #1E9FFF;
}
......@@ -79,12 +47,13 @@
padding: 10px;
font-size: 14px;
box-sizing: border-box;
margin-top: 30px!important;
}
.status_info {
float: left;
}
.appointment_status .title {
color: #009688;
color: #4A4A4A;
font-weight: 600;
margin-bottom: 10px;
}
......@@ -93,10 +62,16 @@
margin-bottom: 8px;
}
.appointment_status .title h3 span {
color: #FF5722;
color: #FA6400;
font-size: 18px;
}
.appointment_status ul {
margin-top: 30px;
}
.appointment_status ul li {
line-height: 24px;
color: #4A4A4A;
line-height: 28px;
display: inline-block;
}
.code {
float: left;
......@@ -114,20 +89,33 @@
font-size: 14px;
}
.appointment_info {
width: 25%;
float: left;
height: 500px;
box-sizing: border-box;
padding: 10px;
margin-right:10px;
}
.appointment_info ul {
font-size: 0;
}
.appointment_info h3 {
font-weight: 600;
margin-bottom: 10px;
}
.appointment_info li {
line-height: 30px;
font-size: 14px;
width: 50%;
display: inline-block;
}
.appointment_info li p {
display: inline-block;
}
.appointment_info li span {
color: #9B9B9B;
display: inline-block;
width: 80px;
text-align: right;
}
#container {
margin-bottom: 100px;
margin-top: 10px;
}
\ No newline at end of file
......
......@@ -24,7 +24,9 @@ $(function () {
} else {
layui.use('layer', function () {
layer.alert('请先同意以上协议', {icon: 6,title:'提示'});
layer.msg('请先同意以上协议', function(){
//关闭后的操作
});
})
}
})
......
......@@ -8,6 +8,7 @@
<title>我的预约-预约结果</title>
<script type="text/javascript" src="../staticJs/head.js"></script>
<link rel="stylesheet" type="text/css" href="../staticCss/yyjg.css">
<link rel="stylesheet" type="text/css" href="../staticCss/progressBar.css">
</head>
<body>
......@@ -23,31 +24,45 @@
</div>
<!-- ----------------------------------内容模块的开始----------------------------------------------- -->
<div class="central_area">
<div class="appointment_notice contentBox">
<div class="progressBar contentBox">
<ul class="app_progress">
<li class="selected">
<span>1</span>
预约须知
<li>
<p class="active"></p>
<h5>
预约须知
</h5>
</li>
<div class="line"></div>
<li class="selected">
<span>2</span>
选择区域
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="100%"></div>
</div>
<li>
<p class="active"></p>
<h5>
选择区域
</h5>
</li>
<div class="line"></div>
<li class="selected">
<span>3</span>
预约时间
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="100%"></div>
</div>
<li>
<p class="active"></p>
<h5>
预约时间
</h5>
</li>
<div class="line"></div>
<li class="active">
<span>4</span>
预约结果
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="100%"></div>
</div>
<li>
<p class="active"></p>
<h5>
预约结果
</h5>
</li>
</ul>
</div>
<!-- ---------------------预约状态------------------------- -->
<div class="appointment_status layui-bg-gray contentBox">
<div class="appointment_status contentBox">
<div class="status_info">
<div class="title">
<h3>
......@@ -62,13 +77,9 @@
<li>3.请凭预约号及相关证件，按预约时间提前10分钟到选定的不动产登记中心办理业务</li>
</ul>
</div>
<div class="code">
<img src="../staticImages/code.png">
</div>
</div>
<div class="appointment_info_content contentBox">
<div class="appointment_info layui-bg-gray">
<h3>预约信息</h3>
<div class="appointment_info">
<ul>
<li>
<span>姓名：</span>
......@@ -83,7 +94,7 @@
<p>碑林区办事大厅</p>
</li>
<li>
<span>办理业务类型：</span>
<span>预约业务：</span>
<p>二手房过户</p>
</li>
<li>
......@@ -92,7 +103,7 @@
</li>
</ul>
</div>
<div id="container" style="width: 74%;height: 500px;"></div>
<div id="container" style="width: 100%;height: 500px;"></div>
</div>
</div>
</div>
......