1

src/assets/css/tabsmixin.less

-@NavHeight: 42px;
+@NavHeight: 40px;
 
 /deep/.van-tabs {
 
@@ -10,8 +10,9 @@
             padding-bottom: 0;
 
             .van-tab {
-                font-size: 15px;
+                font-size     : 15px;
                 color         : white;
+                padding-bottom: 5px;
             }
 
             .van-tab--active {
@@ -20,7 +21,7 @@
 
             .van-tabs__line {
                 background: white;
-                bottom    : 2px;
+                bottom    : 4px;
             }
         }
     }

src/views/news/index.vue

@@ -6,7 +6,7 @@
         <div class="nav-placeholder"></div>
       </template>
     </nafm-header>
-    <van-tabs v-model="active" animated scrollspy class="news-tabs">
+    <van-tabs v-model="active" animated scrollspy swipe-threshold="3" class="data-tabs">
       <van-tab :title="item.name" v-for="(item,idx) in tabs" :key="idx">
         <DataListLayout :tab="item" />
       </van-tab>
@@ -43,7 +43,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@PlaceholderHeight: 40px;
+@import '~@/assets/css/tabsmixin.less';
+@PlaceholderHeight: 42px;
 .news {
   height: 100%;
   display: flex;
@@ -52,37 +53,12 @@ export default {
     height: @PlaceholderHeight;
     width: 100%;
   }
-  .news-tabs {
+  .data-tabs {
     flex: 1;
     z-index: 10;
-    margin-top: calc(-@PlaceholderHeight);
+    margin-top: -@PlaceholderHeight;
     display: flex;
     flex-direction: column;
-    /deep/.van-tabs__wrap {
-      height: @PlaceholderHeight;
-      .van-tabs__nav {
-        background: transparent;
-
-        .van-tab {
-          font-size: 15px;
-          color: white;
-        }
-        .van-tab--active {
-          color: white;
-          font-size: 19px;
-        }
-        .van-tabs__line {
-          background: white;
-          bottom: 5px;
-        }
-      }
-    }
-    /deep/.van-tabs__content {
-      flex: 1;
-      .van-tab__pane {
-        height: 100%;
-      }
-    }
   }
 }
 </style>
\ No newline at end of file

src/views/selfregulating/index.vue

@@ -51,7 +51,7 @@ export default {
 <style lang="less" scoped>
 @import '~@/assets/css/tabsmixin.less';
 
-@PlaceholderHeight: 43px;
+@PlaceholderHeight: 42px;
 .self-regulating {
   height: 100%;
   display: flex;