Authored by 张文文

channel ui fix review by lea.guo

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;
@@ -103,6 +103,7 @@ export default { @@ -103,6 +103,7 @@ export default {
103 right: 10px; 103 right: 10px;
104 bottom: 10px; 104 bottom: 10px;
105 height: 3px; 105 height: 3px;
  106 + border-radius: 1.5px;
106 background-color: #000; 107 background-color: #000;
107 } 108 }
108 } 109 }