deep修改框架样式

src/components/TabHeader.vue

 <template>
 <template>
-  <div id="showheader" :class="this.top?'iosStyle header-warp':'header-warp'">
+  <div id="showheader" class="header">
     <van-nav-bar id="nav" :title="title" left-text left-arrow>
     <van-nav-bar id="nav" :title="title" left-text left-arrow>
       <template #title>
       <template #title>
-        <a class="header-title title-active" href="/bill">人事服务</a>
+        <a class="header-title" :class="isActive?'title-active':''" href="/bill">人事服务</a>
 
 
-        <a class="header-title" href="./more">更多服务</a>
+        <a class="header-title" :class="isActive?'':'title-active'" href="./more">更多服务</a>
       </template>
       </template>
     </van-nav-bar>
     </van-nav-bar>
   </div>
   </div>
@@ -12,6 +12,7 @@
 
 
 <script>
 <script>
 import { NavBar, Icon } from "vant";
 import { NavBar, Icon } from "vant";
+import { common } from "../utils/common";
 export default {
 export default {
   components: {
   components: {
     [NavBar.name]: NavBar
     [NavBar.name]: NavBar
@@ -21,6 +22,7 @@ export default {
   },
   },
   data() {
   data() {
     return {
     return {
+      isActive: true,
       top: ""
       top: ""
     };
     };
   },
   },
@@ -28,6 +30,11 @@ export default {
     var u = navigator.userAgent;
     var u = navigator.userAgent;
     var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
     var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
     this.top = isiOS;
     this.top = isiOS;
+    if (window.location.href.indexOf("bill")) {
+      this.isActive = true;
+    } else {
+      this.isActive = false;
+    }
   }
   }
 };
 };
 </script>
 </script>
@@ -42,9 +49,9 @@ export default {
   width: 100%;
   width: 100%;
   z-index: 1100;
   z-index: 1100;
 }
 }
-.van-nav-bar .van-icon {
-  color: #333333 !important;
-  font-size: 25px !important;
+.header /deep/ .van-nav-bar .van-icon {
+  color: #fff !important;
+  font-size: 16px !important;
 }
 }
 .van-nav-bar {
 .van-nav-bar {
   background: linear-gradient(
   background: linear-gradient(
@@ -55,9 +62,12 @@ export default {
 }
 }
 
 
 .header-title {
 .header-title {
-  color: #fff;
+  color: #8ec9fd;
   font-size: 16px;
   font-size: 16px;
-  margin-right: 30px;
+  margin-right: 25px;
+}
+.title-active {
+  color: #ffffff;
+  font-size: 18px;
 }
 }
-
 </style>
 </style>

src/utils/common.js

+
+
+export default class common {
+    getQueryString(name) {
+        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+        var r = window.location.search.substr(1).match(reg);
+        if (r != null) return unescape(r[2]);
+        return null;
+    }
+}
\ No newline at end of file