Merge branch 'release/3.0' into 'master'

Release/3.0



See merge request !20

+$header-height: 88px;
+$header-font-size: 17PX;

@@ -59,12 +59,17 @@
     };
 </script>
 <style>
+    @import "../../scss/common/_header.css";
+    .blk-header-wrap.hide {
+        .blk-header {
+            display: none;
+        }
+    }
     .blk-header-wrap.ghost {
         .blk-header {
             background-color: rgba(255, 255, 255, 0);
             transition: 0.3s all;
             border-bottom: 0;
-            display: none;
         }
 
         .blk-header-title {
@@ -103,13 +108,14 @@
         right: 0;
         left: 0;
         z-index: 210;
-        padding: 20px 34px;
-        height: 70px;
+        padding: 0 34px;
+        height: $header-height;
         max-width: 750px;
         margin-left: auto;
         margin-right: auto;
-        line-height: 70px;
-        font-size: 48px;
+        line-height: $header-height;
+        font-size: $header-font-size;
+        font-weight: bold;
         background-color: #fff;
         border-bottom: 1px solid #eee;
         color: #000;
@@ -124,17 +130,16 @@
         }
 
         .icon {
-            min-width: 110px;
-            min-height: 110px;
-            line-height: 110px;
-            margin-top: -20px;
+            min-width: $header-height;
+            min-height: $header-height;
+            line-height: $header-height;
             margin-left: -32px;
             text-indent: 32px;
             display: inline-block;
         }
 
         .go-back-btn {
-            &:hover {
+            &:active {
                 background: #ccc;
                 opacity: 0.5;
             }
@@ -146,7 +151,7 @@
         text-align: center;
         margin-left: auto;
         margin-right: auto;
-        font-size: 42px;
+        font-size: $header-font-size;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -176,7 +181,7 @@
     }
 
     .blk-header-gap {
-        height: calc(70 + 20 * 2 + 1)px;
+        height: calc($header-height + 2);
         background-color: transparent;
     }
 

@@ -109,6 +109,7 @@
 </script>
 <style>
 @import "../../../../scss/common/_color.css";
+@import "../../../../scss/common/_header.css";
 
 .blk-header {
     padding-left: 26px;
@@ -131,10 +132,11 @@
     }
 
     .btn-clear {
-        font-size: 32px;
+        font-size: 30px;
         border: none;
         width: 100px;
         background-color: #fff;
+        line-height: 1;
     }
 }
 
@@ -189,12 +191,12 @@
 
 .filter-sub-select {
     position: absolute;
-    top: calc(70 + 20 * 2 + 1)px;
+    top: calc($header-height + 2);
     left: 0;
     right: 0;
     bottom: 0;
 
-   
+
 }
 
 .filter-sort {

@@ -317,10 +317,12 @@ export default {
 </script>
 <style>
 @import "../../../../scss/common/_color.css";
+@import "../../../../scss/common/_header.css";
+
 
 .top-filter {
     position: fixed;
-    top: 110px;
+    top: $header-height;
     left: 0;
     right: 0;
     height: 81px;

@@ -53,7 +53,6 @@
 
             .product-name {
                 margin-top: 20px;
-                max-width: 200px;
                 font-size: 22px;
                 color: #000;
                 white-space: nowrap;

@@ -3,7 +3,7 @@
         <header-box>
             <template slot="right">
                 <a class="right-button no-intercept" @click="like">
-                    <span class="count">{{likeCount ? likeCount : ''}}</span>
+                    <span class="count icon">{{likeCount ? likeCount : ''}}</span>
                     <span class="icon" :class="{ 'icon-like': !isLiked, 'icon-liked': isLiked}">
                     </span>
                 </a>
@@ -37,8 +37,6 @@
 
             .count {
                 display: inline-block;
-                vertical-align: text-bottom;
-                margin-bottom: -8px;
             }
         }
     }

@@ -89,7 +89,7 @@
         </p>
     </div>
     <div class="group-list swiper-area" v-if="floor.length > 0">
-        <swipe class="swipe" :style="{height: floorHeight + 'px'}">
+        <swipe v-if="floor.length > 0" class="swipe" :style="{height: floorHeight + 'px'}">
             <swipe-item v-for="item in floor" :key="item.src" :style="{backgroundColor: item.bgColor}">
                 <a v-blk-href="item.url" :title="item.title" v-if="item.url">
                     <img v-img-src="{src: item.src, width: floorImgW, height: floorImgH}">
@@ -185,9 +185,18 @@
                         this.floor = ret[0].data.list;
                         this.floorImgW = ret[0].data.imageWidth;
                         this.floorImgH = ret[0].data.imageHeight;
-                        setTimeout(() => {
-                            this.floorHeight = $('.swipe img').height();
-                        }, 200);
+                        this.$nextTick(() => {
+                            let $img = document.querySelector('.swipe img');
+
+                            if ($img) {
+                                let img = new Image();
+
+                                img.onload = () => {
+                                    this.floorHeight = document.querySelector('.swipe img').clientHeight;
+                                };
+                                img.src = $img.src;
+                            }
+                        });
                     }
                 });
 
@@ -303,6 +312,7 @@
                 }
 
                 this.$refs.header.$el.classList.toggle('ghost', ghost);
+                this.$refs.header.$el.classList.toggle('hide', ghost);
                 this.$refs.header.$el.classList.toggle('ghost-2', ghost2);
                 this.$refs.header.$el.classList.toggle('ghost-3', ghost3);
             }
@@ -415,7 +425,7 @@
         .vip-level {
             display: block;
             width: 100px;
-            height: 36px;
+            height: 38px;
             position: relative;
             bottom: 50px;
             left: 185px;
@@ -423,7 +433,7 @@
 
         .level-1,
         .level-2 {
-            background-size: 100%;
+            background-size: contain;
         }
 
         .level-1 {

@@ -192,6 +192,7 @@
 
 </script>
 <style>
+    @import "../../../scss/common/_header.css";
     .list-header {
         background-color: white;
     }