channel ui fix review by lea.guo
Showing
2 changed files
with
25 additions
and
3 deletions
1 | <template> | 1 | <template> |
2 | <LayoutApp class="yohoufo-channel-page" :show-back="true" :hide-header="hideHeader" :title="title"> | 2 | <LayoutApp class="yohoufo-channel-page" :show-back="true" :hide-header="hideHeader" :title="title"> |
3 | - <div class="fixed-nav scroll-nav-wrap" v-if="isShow && navList.length"> | 3 | + <div class="fixed-nav scroll-nav-wrap-fix" v-if="isShow && navList.length"> |
4 | <ScrollNav :list="navList" :current="active" @transfer="getIndex"></ScrollNav> | 4 | <ScrollNav :list="navList" :current="active" @transfer="getIndex"></ScrollNav> |
5 | </div> | 5 | </div> |
6 | <Scroll | 6 | <Scroll |
@@ -338,6 +338,27 @@ export default { | @@ -338,6 +338,27 @@ export default { | ||
338 | } | 338 | } |
339 | } | 339 | } |
340 | 340 | ||
341 | +.scroll-nav-wrap-fix { | ||
342 | + position: relative; | ||
343 | + | ||
344 | + &:after { | ||
345 | + content: ""; | ||
346 | + position: absolute; | ||
347 | + width: 100%; | ||
348 | + height: 100px; | ||
349 | + box-shadow: 0 0 120px 100px white !important; | ||
350 | + z-index: -1; | ||
351 | + } | ||
352 | + | ||
353 | + &.fixed-nav { | ||
354 | + width: 100%; | ||
355 | + position: absolute; | ||
356 | + z-index: 10; | ||
357 | + background-color: white; | ||
358 | + overflow: hidden; | ||
359 | + } | ||
360 | +} | ||
361 | + | ||
341 | .channel-body { | 362 | .channel-body { |
342 | height: 100%; | 363 | height: 100%; |
343 | position: relative; | 364 | position: relative; |
@@ -345,7 +366,7 @@ export default { | @@ -345,7 +366,7 @@ export default { | ||
345 | &:before { | 366 | &:before { |
346 | content: ""; | 367 | content: ""; |
347 | width: 100%; | 368 | width: 100%; |
348 | - height: 330px; | 369 | + height: 400px; |
349 | background: #08304B; | 370 | background: #08304B; |
350 | position: absolute; | 371 | position: absolute; |
351 | top: 0; | 372 | top: 0; |
@@ -407,7 +428,7 @@ export default { | @@ -407,7 +428,7 @@ export default { | ||
407 | background: #f5f5f5; | 428 | background: #f5f5f5; |
408 | height: 64px; | 429 | height: 64px; |
409 | font-size: 28px; | 430 | font-size: 28px; |
410 | - color: #999; | 431 | + color: #000; |
411 | flex: 1; | 432 | flex: 1; |
412 | border-radius: 4px; | 433 | border-radius: 4px; |
413 | padding: 14px 14px 14px 10px; | 434 | padding: 14px 14px 14px 10px; |
-
Please register or login to post a comment