fe / yohoblk-wap · Commits

Go to a project

Authored by 陈峰
Commit 2158509a7dccc8ab6bdccabba0a9315771ca796b 2 parents 1f989ce0 1fff6e8a

Merge branch 'release/3.0' into 'master' 

Release/3.0



See merge request !20
Inline Side-by-side
Showing 8 changed files with 44 additions and 25 deletions
  1 +$header-height: 88px;
  2 +$header-font-size: 17PX;
@@ -59,12 +59,17 @@ @@ -59,12 +59,17 @@
59 }; 59 };
60 </script> 60 </script>
61 <style> 61 <style>
  62 + @import "../../scss/common/_header.css";
  63 + .blk-header-wrap.hide {
  64 + .blk-header {
  65 + display: none;
  66 + }
  67 + }
62 .blk-header-wrap.ghost { 68 .blk-header-wrap.ghost {
63 .blk-header { 69 .blk-header {
64 background-color: rgba(255, 255, 255, 0); 70 background-color: rgba(255, 255, 255, 0);
65 transition: 0.3s all; 71 transition: 0.3s all;
66 border-bottom: 0; 72 border-bottom: 0;
67 - display: none;  
68 } 73 }
69 74
70 .blk-header-title { 75 .blk-header-title {
@@ -103,13 +108,14 @@ @@ -103,13 +108,14 @@
103 right: 0; 108 right: 0;
104 left: 0; 109 left: 0;
105 z-index: 210; 110 z-index: 210;
106 - padding: 20px 34px;  
107 - height: 70px; 111 + padding: 0 34px;
  112 + height: $header-height;
108 max-width: 750px; 113 max-width: 750px;
109 margin-left: auto; 114 margin-left: auto;
110 margin-right: auto; 115 margin-right: auto;
111 - line-height: 70px;  
112 - font-size: 48px; 116 + line-height: $header-height;
  117 + font-size: $header-font-size;
  118 + font-weight: bold;
113 background-color: #fff; 119 background-color: #fff;
114 border-bottom: 1px solid #eee; 120 border-bottom: 1px solid #eee;
115 color: #000; 121 color: #000;
@@ -124,17 +130,16 @@ @@ -124,17 +130,16 @@
124 } 130 }
125 131
126 .icon { 132 .icon {
127 - min-width: 110px;  
128 - min-height: 110px;  
129 - line-height: 110px;  
130 - margin-top: -20px; 133 + min-width: $header-height;
  134 + min-height: $header-height;
  135 + line-height: $header-height;
131 margin-left: -32px; 136 margin-left: -32px;
132 text-indent: 32px; 137 text-indent: 32px;
133 display: inline-block; 138 display: inline-block;
134 } 139 }
135 140
136 .go-back-btn { 141 .go-back-btn {
137 - &:hover { 142 + &:active {
138 background: #ccc; 143 background: #ccc;
139 opacity: 0.5; 144 opacity: 0.5;
140 } 145 }
@@ -146,7 +151,7 @@ @@ -146,7 +151,7 @@
146 text-align: center; 151 text-align: center;
147 margin-left: auto; 152 margin-left: auto;
148 margin-right: auto; 153 margin-right: auto;
149 - font-size: 42px; 154 + font-size: $header-font-size;
150 overflow: hidden; 155 overflow: hidden;
151 white-space: nowrap; 156 white-space: nowrap;
152 text-overflow: ellipsis; 157 text-overflow: ellipsis;
@@ -176,7 +181,7 @@ @@ -176,7 +181,7 @@
176 } 181 }
177 182
178 .blk-header-gap { 183 .blk-header-gap {
179 - height: calc(70 + 20 * 2 + 1)px; 184 + height: calc($header-height + 2);
180 background-color: transparent; 185 background-color: transparent;
181 } 186 }
182 187
@@ -109,6 +109,7 @@ @@ -109,6 +109,7 @@
109 </script> 109 </script>
110 <style> 110 <style>
111 @import "../../../../scss/common/_color.css"; 111 @import "../../../../scss/common/_color.css";
  112 +@import "../../../../scss/common/_header.css";
112 113
113 .blk-header { 114 .blk-header {
114 padding-left: 26px; 115 padding-left: 26px;
@@ -131,10 +132,11 @@ @@ -131,10 +132,11 @@
131 } 132 }
132 133
133 .btn-clear { 134 .btn-clear {
134 - font-size: 32px; 135 + font-size: 30px;
135 border: none; 136 border: none;
136 width: 100px; 137 width: 100px;
137 background-color: #fff; 138 background-color: #fff;
  139 + line-height: 1;
138 } 140 }
139 } 141 }
140 142
@@ -189,7 +191,7 @@ @@ -189,7 +191,7 @@
189 191
190 .filter-sub-select { 192 .filter-sub-select {
191 position: absolute; 193 position: absolute;
192 - top: calc(70 + 20 * 2 + 1)px; 194 + top: calc($header-height + 2);
193 left: 0; 195 left: 0;
194 right: 0; 196 right: 0;
195 bottom: 0; 197 bottom: 0;
@@ -317,10 +317,12 @@ export default { @@ -317,10 +317,12 @@ export default {
317 </script> 317 </script>
318 <style> 318 <style>
319 @import "../../../../scss/common/_color.css"; 319 @import "../../../../scss/common/_color.css";
  320 +@import "../../../../scss/common/_header.css";
  321 +
320 322
321 .top-filter { 323 .top-filter {
322 position: fixed; 324 position: fixed;
323 - top: 110px; 325 + top: $header-height;
324 left: 0; 326 left: 0;
325 right: 0; 327 right: 0;
326 height: 81px; 328 height: 81px;
@@ -53,7 +53,6 @@ @@ -53,7 +53,6 @@
53 53
54 .product-name { 54 .product-name {
55 margin-top: 20px; 55 margin-top: 20px;
56 - max-width: 200px;  
57 font-size: 22px; 56 font-size: 22px;
58 color: #000; 57 color: #000;
59 white-space: nowrap; 58 white-space: nowrap;
@@ -3,7 +3,7 @@ @@ -3,7 +3,7 @@
3 <header-box> 3 <header-box>
4 <template slot="right"> 4 <template slot="right">
5 <a class="right-button no-intercept" @click="like"> 5 <a class="right-button no-intercept" @click="like">
6 - <span class="count">{{likeCount ? likeCount : ''}}</span> 6 + <span class="count icon">{{likeCount ? likeCount : ''}}</span>
7 <span class="icon" :class="{ 'icon-like': !isLiked, 'icon-liked': isLiked}"> 7 <span class="icon" :class="{ 'icon-like': !isLiked, 'icon-liked': isLiked}">
8 </span> 8 </span>
9 </a> 9 </a>
@@ -37,8 +37,6 @@ @@ -37,8 +37,6 @@
37 37
38 .count { 38 .count {
39 display: inline-block; 39 display: inline-block;
40 - vertical-align: text-bottom;  
41 - margin-bottom: -8px;  
42 } 40 }
43 } 41 }
44 } 42 }
@@ -89,7 +89,7 @@ @@ -89,7 +89,7 @@
89 </p> 89 </p>
90 </div> 90 </div>
91 <div class="group-list swiper-area" v-if="floor.length > 0"> 91 <div class="group-list swiper-area" v-if="floor.length > 0">
92 - <swipe class="swipe" :style="{height: floorHeight + 'px'}"> 92 + <swipe v-if="floor.length > 0" class="swipe" :style="{height: floorHeight + 'px'}">
93 <swipe-item v-for="item in floor" :key="item.src" :style="{backgroundColor: item.bgColor}"> 93 <swipe-item v-for="item in floor" :key="item.src" :style="{backgroundColor: item.bgColor}">
94 <a v-blk-href="item.url" :title="item.title" v-if="item.url"> 94 <a v-blk-href="item.url" :title="item.title" v-if="item.url">
95 <img v-img-src="{src: item.src, width: floorImgW, height: floorImgH}"> 95 <img v-img-src="{src: item.src, width: floorImgW, height: floorImgH}">
@@ -185,9 +185,18 @@ @@ -185,9 +185,18 @@
185 this.floor = ret[0].data.list; 185 this.floor = ret[0].data.list;
186 this.floorImgW = ret[0].data.imageWidth; 186 this.floorImgW = ret[0].data.imageWidth;
187 this.floorImgH = ret[0].data.imageHeight; 187 this.floorImgH = ret[0].data.imageHeight;
188 - setTimeout(() => {  
189 - this.floorHeight = $('.swipe img').height();  
190 - }, 200); 188 + this.$nextTick(() => {
  189 + let $img = document.querySelector('.swipe img');
  190 +
  191 + if ($img) {
  192 + let img = new Image();
  193 +
  194 + img.onload = () => {
  195 + this.floorHeight = document.querySelector('.swipe img').clientHeight;
  196 + };
  197 + img.src = $img.src;
  198 + }
  199 + });
191 } 200 }
192 }); 201 });
193 202
@@ -303,6 +312,7 @@ @@ -303,6 +312,7 @@
303 } 312 }
304 313
305 this.$refs.header.$el.classList.toggle('ghost', ghost); 314 this.$refs.header.$el.classList.toggle('ghost', ghost);
  315 + this.$refs.header.$el.classList.toggle('hide', ghost);
306 this.$refs.header.$el.classList.toggle('ghost-2', ghost2); 316 this.$refs.header.$el.classList.toggle('ghost-2', ghost2);
307 this.$refs.header.$el.classList.toggle('ghost-3', ghost3); 317 this.$refs.header.$el.classList.toggle('ghost-3', ghost3);
308 } 318 }
@@ -415,7 +425,7 @@ @@ -415,7 +425,7 @@
415 .vip-level { 425 .vip-level {
416 display: block; 426 display: block;
417 width: 100px; 427 width: 100px;
418 - height: 36px; 428 + height: 38px;
419 position: relative; 429 position: relative;
420 bottom: 50px; 430 bottom: 50px;
421 left: 185px; 431 left: 185px;
@@ -423,7 +433,7 @@ @@ -423,7 +433,7 @@
423 433
424 .level-1, 434 .level-1,
425 .level-2 { 435 .level-2 {
426 - background-size: 100%; 436 + background-size: contain;
427 } 437 }
428 438
429 .level-1 { 439 .level-1 {
@@ -192,6 +192,7 @@ @@ -192,6 +192,7 @@
192 192
193 </script> 193 </script>
194 <style> 194 <style>
  195 + @import "../../../scss/common/_header.css";
195 .list-header { 196 .list-header {
196 background-color: white; 197 background-color: white;
197 } 198 }