Merge branch 'develop' of git.yoho.cn:fe/yohoblk-wap into develop

@@ -19,7 +19,7 @@
 <style>
     .brand-list-box {
         width: 100%;
-        padding: 30px 0;
+        padding: 20px 0;
         background: #f6f6f6;
 
         .per-brand-box {

@@ -8,7 +8,7 @@
 <style>
     .search {
         width: 100%;
-        height: 85px;
+        height: 88px;
         padding: 15px 16px;
         background-color: #f6f6f6;
         text-align: center;

@@ -103,14 +103,20 @@
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
+        position: absolute;
+        left: 0;
+        right: 0;
+        z-index: -1;
     }
 
     .blk-header-left {
         float: left;
+        font-size: 42px;
     }
 
     .blk-header-right {
         float: right;
+        font-size: 45px;
 
         span {
             margin-left: 30px;

@@ -191,13 +191,6 @@
             color: #000;
         }
 
-        .blk-header-main {
-            position: absolute;
-            left: 0;
-            right: 0;
-            z-index: -1;
-        }
-
         .top-box {
             .blk-header {
                 background-color: transparent;

@@ -91,21 +91,38 @@
                 this.$parent.$refs.filter.isVisible = !this.$parent.$refs.filter.isVisible;
             },
             changeTopStatus() {
-                let topChange = true;
-                let topHeight = document.body.scrollTop;
+                let ghost = true;
+                let ghost2 = false;
+                let ghost3 = false;
 
-                if (topHeight > 100) {
-                    topChange = false;
+                if (window.scrollY > 100) {
+                    ghost = false;
+                    ghost2 = false;
+                    ghost3 = false;
+                } else if (window.scrollY > 70) {
+                    ghost = false;
+                    ghost3 = true;
+                } else if (window.scrollY > 30) {
+                    ghost = false;
+                    ghost2 = true;
                 }
 
-                this.$refs.header.$el.classList.toggle('ghost', topChange);
+                this.$refs.header.$el.classList.toggle('ghost', ghost);
+                this.$refs.header.$el.classList.toggle('ghost-2', ghost2);
+                this.$refs.header.$el.classList.toggle('ghost-3', ghost3);
             }
         },
         created() {
             this.domain = this.shareData.domain;
 
             if (this.shareData.isBlkShop) {
-                window.onscroll = this.changeTopStatus;
+                window.addEventListener('touchmove', () => {
+                    this.changeTopStatus();
+                });
+
+                window.addEventListener('scroll', () => {
+                    this.changeTopStatus();
+                });
             }
         }
     };