channel ui fix review by lea.guo

 <template>
 <template>
   <LayoutApp class="yohoufo-channel-page" :show-back="true" :hide-header="hideHeader" :title="title">
   <LayoutApp class="yohoufo-channel-page" :show-back="true" :hide-header="hideHeader" :title="title">
-      <div class="fixed-nav scroll-nav-wrap" v-if="isShow && navList.length">
+      <div class="fixed-nav scroll-nav-wrap-fix" v-if="isShow && navList.length">
         <ScrollNav :list="navList" :current="active" @transfer="getIndex"></ScrollNav>
         <ScrollNav :list="navList" :current="active" @transfer="getIndex"></ScrollNav>
       </div>
       </div>
       <Scroll
       <Scroll
@@ -142,7 +142,7 @@ export default {
         this.navHeight = get(this.$refs, 'scrollNav.offsetHeight') || 0;
         this.navHeight = get(this.$refs, 'scrollNav.offsetHeight') || 0;
         this.total = this.$refs.scroll.$el.offsetHeight - this.navHeight;
         this.total = this.$refs.scroll.$el.offsetHeight - this.navHeight;
         this.refreshProductList(this.active);
         this.refreshProductList(this.active);
-        
+
         this.getReportEle()
         this.getReportEle()
       });
       });
     },
     },
@@ -164,20 +164,20 @@ export default {
           if(scrollHeight + scrollY > eleTop && item.template_name === 'guessLike') {
           if(scrollHeight + scrollY > eleTop && item.template_name === 'guessLike') {
             // console.log('guessLike report')
             // console.log('guessLike report')
               item.data.forEach((val, i) => {
               item.data.forEach((val, i) => {
-              this.reportYas(val.reportParams) 
+              this.reportYas(val.reportParams)
             })
             })
           }
           }
           if(scrollY < (eleTop + eleHeight) && item.template_name !== 'guessLike') {
           if(scrollY < (eleTop + eleHeight) && item.template_name !== 'guessLike') {
             // console.log(item.template_name)
             // console.log(item.template_name)
             item.data.forEach((val, i) => {
             item.data.forEach((val, i) => {
-              this.reportYas(val.reportParams) 
+              this.reportYas(val.reportParams)
             })
             })
           }
           }
         } else { // 默认进入时
         } else { // 默认进入时
           if(eleTop < scrollHeight) { //  获取每个元素距顶部高度 小于可视区高度即曝光
           if(eleTop < scrollHeight) { //  获取每个元素距顶部高度 小于可视区高度即曝光
             // console.log(item.template_name)
             // console.log(item.template_name)
             item.data.forEach((val, i) => {
             item.data.forEach((val, i) => {
-              this.reportYas(val.reportParams) 
+              this.reportYas(val.reportParams)
             })
             })
           }
           }
         }
         }
@@ -200,7 +200,7 @@ export default {
       this.getReportEle(scrollHeight)
       this.getReportEle(scrollHeight)
     },
     },
     scrollHandler({ y }) {
     scrollHandler({ y }) {
-      
+
       if (this.navTop) {
       if (this.navTop) {
         let scrollY = -y;
         let scrollY = -y;
         if (scrollY >= this.navTop) {
         if (scrollY >= this.navTop) {
@@ -338,6 +338,27 @@ export default {
   }
   }
 }
 }
 
 
+.scroll-nav-wrap-fix {
+  position: relative;
+
+  &:after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100px;
+    box-shadow: 0 0 120px 100px white !important;
+    z-index: -1;
+  }
+
+  &.fixed-nav {
+    width: 100%;
+    position: absolute;
+    z-index: 10;
+    background-color: white;
+    overflow: hidden;
+  }
+}
+
 .channel-body {
 .channel-body {
   height: 100%;
   height: 100%;
   position: relative;
   position: relative;
@@ -345,7 +366,7 @@ export default {
   &:before {
   &:before {
     content: "";
     content: "";
     width: 100%;
     width: 100%;
-    height: 330px;
+    height: 400px;
     background: #08304B;
     background: #08304B;
     position: absolute;
     position: absolute;
     top: 0;
     top: 0;
@@ -407,7 +428,7 @@ export default {
   background: #f5f5f5;
   background: #f5f5f5;
   height: 64px;
   height: 64px;
   font-size: 28px;
   font-size: 28px;
-  color: #999;
+  color: #000;
   flex: 1;
   flex: 1;
   border-radius: 4px;
   border-radius: 4px;
   padding: 14px 14px 14px 10px;
   padding: 14px 14px 14px 10px;

@@ -103,6 +103,7 @@ export default {
       right: 10px;
       right: 10px;
       bottom: 10px;
       bottom: 10px;
       height: 3px;
       height: 3px;
+      border-radius: 1.5px;
       background-color: #000;
       background-color: #000;
     }
     }
   }
   }