ソースを参照

修改elevator

zhenyulei 6 年 前
コミット
11e914f037

+ 1 - 1
src/packages/elevator/demo.vue

@@ -3,7 +3,7 @@
         <nut-elevator 
         <nut-elevator 
         :dataArray="dataList"  
         :dataArray="dataList"  
         :showIndicator="true"
         :showIndicator="true"
-        :navHeight="40"
+        :navHeight="30"
         :otherHeight="60"
         :otherHeight="60"
         :initIndex="0" 
         :initIndex="0" 
         :hiddenTime='500'
         :hiddenTime='500'

+ 33 - 7
src/packages/elevator/elevator.scss

@@ -10,30 +10,53 @@
 .nut-list-title{
 .nut-list-title{
     list-style-type:none;
     list-style-type:none;
     width:100%;
     width:100%;
-    margin-bottom:20px;
+    //margin-bottom:20px;
 }
 }
 .nut-list-h{
 .nut-list-h{
+    font-weight: normal;
     height: 30px;
     height: 30px;
     line-height: 30px;
     line-height: 30px;
     padding-left: 20px;
     padding-left: 20px;
-    background: #eee;
+    background: #f6f6f6;
     margin: 0px;
     margin: 0px;
+    font-size: 14px;
+    color: #323233;
 }
 }
 .nut-people-list{
 .nut-people-list{
     padding: 0px;
     padding: 0px;
     padding-left: 20px;
     padding-left: 20px;
 }
 }
 .nut-list-name{
 .nut-list-name{
+    font-size: 14px;
+    color: #323233;
     list-style-type:none;
     list-style-type:none;
-    height: 40px;
-    line-height: 40px;
-    border-bottom: 1px solid #ccc;
+    height: 44px;
+    line-height: 44px;
+    position: relative;
+    &:after{
+        position: absolute;
+        box-sizing: border-box;
+        content: ' ';
+        pointer-events: none;
+        right: 0;
+        bottom: 0;
+        left: 16px;
+        border-bottom: 1px solid #ebedf0;
+        -webkit-transform: scaleY(0.5);
+        transform: scaleY(0.5);
+    }
+    &:last-child{
+        &:after{
+            border-bottom: 0px;
+        }
+    }
 }
 }
 .nut-elevator-nav{
 .nut-elevator-nav{
-    background: #fff;
+    //background: #fff;
     text-align: center;
     text-align: center;
-    border:1px solid #ccc;
+    //border:1px solid #ccc;
     width: 50px;
     width: 50px;
+    font-size: 12px;
     position:fixed;
     position:fixed;
     top:50%;
     top:50%;
     right: 0px;
     right: 0px;
@@ -45,6 +68,9 @@
         height: 40px;
         height: 40px;
         line-height: 40px;
         line-height: 40px;
     }
     }
+    .nut-nav-curr{
+        color:rgb(7, 193, 96);
+    }
 }
 }
 .nut-big-box{
 .nut-big-box{
     width: 26px;
     width: 26px;

+ 1 - 0
src/packages/elevator/elevator.vue

@@ -28,6 +28,7 @@
             v-bind:key="index" 
             v-bind:key="index" 
             :id="'nav'+index"
             :id="'nav'+index"
             class="nut-nav-list" 
             class="nut-nav-list" 
+            :class="{'nut-nav-curr':item.title==currTitle}"
             :style="{height:navListHeight+'px'}"
             :style="{height:navListHeight+'px'}"
             @click="clickNav(item.title,index)"
             @click="clickNav(item.title,index)"
             >{{item.title}}</li>
             >{{item.title}}</li>