style:样式

任超
Showing 4 changed files with 51 additions and 47 deletions
staticCss/common.css
staticCss/yysj.css
staticJs/yysj.js
staticViews/yysj.html
--- a/staticCss/common.css
View file @bdb5960
+++ b/staticCss/common.css
View file @bdb5960
@@ -13,6 +13,10 @@
 .layui-icon-search {
    color: #6D7278;
 }
+.active1 {
+    background-color: #1E9FFF!important;
+    color: #fff!important;
+}
 /* ----------------------公共样式-------------------------- */
 .contentBox {
    width: 1200px;
--- a/staticCss/yysj.css
View file @bdb5960
+++ b/staticCss/yysj.css
View file @bdb5960
 .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;
--- a/staticJs/yysj.js
View file @bdb5960
+++ b/staticJs/yysj.js
View file @bdb5960
@@ -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);
      }
    },
--- a/staticViews/yysj.html
View file @bdb5960
+++ b/staticViews/yysj.html
View file @bdb5960
@@ -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">
+                    <li>
-                        <span>1</span>
+                        <p class="active"></p>
+                        <h5>
                            预约须知
+                        </h5>
                    </li>
-                    <div class="line"></div>
+                    <div class="layui-progress">
-                    <li class="selected">
+                        <div class="layui-progress-bar" lay-percent="100%"></div>
-                        <span>2</span>
+                    </div>
+                    <li>
+                        <p class="active"></p>
+                        <h5>
                            选择区域
+                        </h5>
                    </li>
-                    <div class="line"></div>
+                    <div class="layui-progress">
-                    <li class="active">
+                        <div class="layui-progress-bar" lay-percent="100%"></div>
-                        <span>3</span>
+                    </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>