Skip to content

任超 / js.portalStaticPage

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

style:样式

1 parent e511291e
Inline Side-by-side
Showing 4 changed files with 51 additions and 47 deletions
......@@ -13,6 +13,10 @@
.layui-icon-search {
color: #6D7278;
}
.active1 {
background-color: #1E9FFF!important;
color: #fff!important;
}
/* ----------------------公共样式-------------------------- */
.contentBox {
width: 1200px;
......
.central_area {
min-height:calc(100vh - 227px);
min-height:calc(100vh - 197px);
}
.ovfHiden{overflow: hidden;height: 100%;}
.navigation_crumbs {
......@@ -10,38 +10,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;
}
......@@ -70,6 +38,7 @@
padding: 0 50px;
box-sizing: border-box;
position: relative;
margin-top: 30px;
}
.swiper-container {
width: 100%;
......@@ -88,8 +57,9 @@
font-size: 14px;
margin-top: 3px;
}
.active {
.active1 {
background-color: #1E9FFF;
color: #fff;
}
.business_choice {
margin: 20px auto;
......@@ -299,8 +269,22 @@
text-align: center;
margin: 20px 0;
}
.next_button button {
width: 140px;
height: 42px;
position: relative;
}
.next_button a {
color: #fff;
display: block;
width: 140px;
height: 42px;
position: absolute;
left: 0;
top: 0;
}
.next_button a:hover{
color: #fff;
}
.layui-layer-title {
background-color: #1E9FFF!important;
......
......@@ -81,7 +81,7 @@ $(function () {
function a(i) {
Date = data.dateList[i].date
bustime = data.dateList[i].week
$(".swiper-slide").eq(i).addClass('active').siblings().removeClass('active');
$(".swiper-slide").eq(i).addClass('active1').siblings().removeClass('active1');
}
layui.use('laytpl', function () {
......@@ -107,6 +107,7 @@ $(function () {
on: {
click: function (swiper) {
var index = swiper['clickedIndex'];
console.log(index)
a(index);
}
},
......
......@@ -8,6 +8,7 @@ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD
<title>我的预约-预约时间</title>
<script type="text/javascript" src="../staticJs/head.js"></script>
<link rel="stylesheet" href="../staticCss/swiper-bundle.min.css">
<link rel="stylesheet" type="text/css" href="../staticCss/progressBar.css">
<link rel="stylesheet" type="text/css" href="../staticCss/yysj.css">
</head>
......@@ -25,26 +26,40 @@ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD
</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="active">
<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>
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="50%"></div>
</div>
<li>
<span>4</span>
<p></p>
<h5>
预约结果
</h5>
</li>
</ul>
</div>
......@@ -91,7 +106,7 @@ PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD
<script id="date" type="text/html">
{{# layui.each(d.dateList, function(index, item){ }}
{{# if(item.isSelect){ }}
<ul class="swiper-slide layui-bg-gray active">
<ul class="swiper-slide layui-bg-gray active1">
<li>{{item.week}}</li>
<li>{{item.date}}</li>
</ul>
......