fix 样式冲突

 <template>
-    <div class="header-wrap" :class="class">
-        <div class="header">
-            <div class="header-left">
+    <div class="blk-header-wrap" :class="class">
+        <div class="blk-header">
+            <div class="blk-header-left">
                 <slot name="left">
                     <i class="icon icon-left" @click="goBack"></i>
                 </slot>
             </div>
-            <div class="header-right">
+            <div class="blk-header-right">
                 <slot name="right"></slot>
             </div>
-            <div class="header-main">
-                <span class="header-title">{{title}}</span>
+            <div class="blk-header-main">
+                <span class="blk-header-title">{{title}}</span>
             </div>
         </div>
-        <div class="header-gap"></div>
+        <div class="blk-header-gap"></div>
     </div>
 </template>
 <script>
@@ -29,7 +29,7 @@
     };
 </script>
 <style>
-    .header {
+    .blk-header {
         box-sizing: content-box;
         position: fixed;
         top: 0;
@@ -47,12 +47,12 @@
         color: #000;
 
         .icon,
-        .header-title {
+        .blk-header-title {
             vertical-align: middle;
         }
     }
 
-    .header-main {
+    .blk-header-main {
         display: block;
         text-align: center;
         margin-left: auto;
@@ -62,11 +62,11 @@
         text-overflow: ellipsis;
     }
 
-    .header-left {
+    .blk-header-left {
         float: left;
     }
 
-    .header-right {
+    .blk-header-right {
         float: right;
 
         .icon {
@@ -74,17 +74,17 @@
         }
     }
 
-    .header-gap {
+    .blk-header-gap {
         height: 100px;
         background-color: transparent;
     }
 
     .app.ios {
-        .header {
+        .blk-header {
             padding-top: 60px;
         }
 
-        .header-gap {
+        .blk-header-gap {
             height: calc(70 + 60 + 10)px;
         }
     }

@@ -5,11 +5,11 @@
 </template>
 <style>
     .top-nav {
-        .header {
+        .blk-header {
             background-color: transparent;
         }
 
-        .header-gap {
+        .blk-header-gap {
             display: none;
         }
     }

@@ -11,23 +11,23 @@
 
 <style>
     .top-box {
-        .header {
+        .blk-header {
             background-color: transparent;
             color: #fff;
         }
 
-        .header-gap {
+        .blk-header-gap {
             display: none;
         }
     }
 
     .top-change {
-        .header {
+        .blk-header {
             background-color: #fff;
             color: #000;
         }
 
-        .header-gap {
+        .blk-header-gap {
             display: block;
         }
     }