Skip to content

任超 / js.portalStaticPage

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

style:选择区域

1 parent 9b424e3f
Inline Side-by-side
Showing 2 changed files with 68 additions and 61 deletions
......@@ -5,41 +5,6 @@
padding-top: 25px;
margin-bottom: 25px;
}
.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;
}
.selected {
background-color: #5FB878!important;
color: #fff!important;
......@@ -60,6 +25,7 @@
.selectCity {
width: 1200px;
margin: 0 auto;
margin-top: 50px;
}
.selectCity h2 {
display: inline-block;
......@@ -67,7 +33,7 @@
}
.area_list_content {
overflow: hidden;
margin-top: 20px;
margin-top: 30px;
width: 100%;
}
.area_list_content h2 {
......@@ -81,22 +47,26 @@
}
.selectCity .area_list li {
display: inline-block;
width: 100px;
height: 32px;
width: 140px;
height: 48px;
border-radius: 3px;
background-color: #01AAED;
margin-right: 10px;
color: #fff;
margin-right: 15px;
color: #9B9B9B;
text-align: center;
line-height: 32px;
margin-bottom: 10px;
line-height: 48px;
margin-bottom: 15px;
cursor: pointer;
background: #FFFFFF;
border-radius: 4px;
border: 1px solid #DEDEDE;
}
.selectCity .area_list li:hover {
background-color: #5FB878;
border-color: #0091FF;
color: #0091FF;
}
.active1 {
background-color: #5FB878!important;
border-color: #0091FF!important;
color: #0091FF!important;
}
.select_officehall {
width: 1200px;
......@@ -109,7 +79,7 @@
}
/* -----------------------------地图--------------------------------------- */
.map_content {
margin-top: 20px;
margin-top: 20px!important;
}
.office_halls {
width: 15%;
......@@ -118,26 +88,48 @@
}
.office_halls h2 {
font-weight: 600;
margin-bottom: 6px;
margin-bottom: 15px;
color: #6D7278;
line-height: 16px;
}
.office_halls li{
line-height: 28px;
width: 150px;
height: 48px;
background: #FFFFFF;
border-radius: 4px;
border: 1px solid #DEDEDE;
cursor: pointer;
text-align: center;
line-height: 48px;
margin-bottom: 10px;
color: #9B9B9B;
}
.office_halls li:hover {
color: #0091FF;
color: #006CFF;
border-color: #006CFF;
}
.footer_button {
margin: 20px 0;
margin: 30px 0 100px 0;
text-align: center;
}
.footer_button button {
margin-right: 10px;
width: 140px;
height: 42px;
position: relative;
}
.footer_button a {
color: #fff;
display: block;
width: 140px;
height: 42px;
position: absolute;
left: 0;
top: 0;
}
.footer_button a:hover {
color: #fff;
}
.hallActive {
background-color: rgb(236, 236, 236);
color: #0091FF;
......
......@@ -8,6 +8,7 @@
<title>我的预约-选择区域</title>
<script type="text/javascript" src="../staticJs/head.js"></script>
<link rel="stylesheet" type="text/css" href="../staticCss/xzqy.css">
<link rel="stylesheet" type="text/css" href="../staticCss/progressBar.css">
</head>
<body>
......@@ -22,26 +23,40 @@
</div>
</div>
<!-- ----------------------------------内容模块的开始----------------------------------------------- -->
<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="active">
<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>
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="50%"></div>
</div>
<li>
<span>3</span>
<p></p>
<h5>
预约时间
</h5>
</li>
<div class="line"></div>
<div class="layui-progress">
<div class="layui-progress-bar"></div>
</div>
<li>
<span>4</span>
<p></p>
<h5>
预约结果
</h5>
</li>
</ul>
</div>
......