fix channel style

 <template>
-  <LayoutApp :show-back="true" :hide-header="hideHeader">
-      <div class="fixed-nav" v-if="isShow && navList.length">
-        <ScrollNav :list="navList" :current="active"></ScrollNav>
+  <LayoutApp class="yohoufo-channel-page" :show-back="true" :hide-header="hideHeader">
+      <div class="fixed-nav scroll-nav-wrap" v-if="isShow && navList.length">
+        <ScrollNav :list="navList" :current="active" @transfer="getIndex"></ScrollNav>
       </div>
       <Scroll
         ref="scroll"
@@ -19,11 +19,11 @@
               <TwoBanner :list="item.data" :key="index" v-if="item.template_name == 'twoPicture'"/>
             </template>
           </div>
-          <div ref="scrollNav" v-if="navList.length">
+          <div ref="scrollNav" class="scroll-nav-wrap" v-if="navList.length">
             <ScrollNav :list="navList" :current="active" @transfer="getIndex"></ScrollNav>
           </div>
-          <div :style="{minHeight: total + 'px'}">
-            <ProductList :list="productList.list" v-if="productList.list.length > 0" class="bgColor"></ProductList>
+          <div class="list-wrap" :style="{minHeight: total + 'px'}">
+            <ProductList :list="productList.list" v-if="productList.list.length > 0"></ProductList>
             <UfoNoItem :tip="`暂无数据`" v-else></UfoNoItem>
           </div>
         </div>
@@ -135,35 +135,28 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.fixed-nav {
-  width: 100%;
-  position: absolute;
-  z-index: 10;
-  background-color: antiquewhite;
-}
-.scroll-app {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-  font-size: 0.6rem;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: column;
-  flex-direction: column;
+.yohoufo-channel-page {
+  background-color: #fefefe;
 }
 
-.scroll-flex {
-  -webkit-box-flex: 1;
-  -webkit-flex: 1;
-  flex: 1;
-  overflow: hidden;
+.scroll-nav-wrap {
   position: relative;
+
+  &:after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 0;
+    box-shadow: 0 0 120px 100px #f2f2f2;
+  }
+
+  &.fixed-nav {
+    width: 100%;
+    position: absolute;
+    z-index: 10;
+    background-color: #fefefe;
+    overflow: hidden;
+  }
 }
 
 .channel-body {
@@ -182,7 +175,7 @@ export default {
 }
 
 .channel-html {
-  padding: 20px 32px 0;
+  padding: 20px 24px 0;
 
   &:before {
     content: "";
@@ -206,7 +199,12 @@ export default {
   }
 }
 
-.bgColor {
-  background: #f5f5f5;
+.list-wrap {
+  background: #f2f2f2;
+
+  /deep/ .item {
+    position: relative;
+    z-index: 1;
+  }
 }
 </style>

 <template>
-  <div class="ScrollNav" v-if="labels.length > 0">
+  <div class="scroll-nav" v-if="labels.length > 0">
     <ScrollNavBar :current="this.list[current].title" :labels="labels" @change="changeHandler">
       <span slot-scope="props">
         {{props.txt}}
@@ -57,7 +57,7 @@ export default {
       let url = this.list[index].url.split("?");
       let urlParams = queryString.parse(url[1]);
       let params = urlParams;
-      params.isReset = true; 
+      params.isReset = true;
       this.fetchProductList(params);
       this.$emit('transfer',index);
       console.log(params)
@@ -67,10 +67,53 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.ScrollNav {
-  position: relative;
-  top: 0;
-  left: 0;
+.scroll-nav {
+  padding: 0 24px;
+}
+
+/deep/ {
+  .cube-scroll-nav-bar {
+    background: none;
+  }
+
+  .cube-scroll-wrapper {
+    text-align: left;
+  }
+
+  .cube-scroll-content {
+    display: block;
+  }
+
+  .cube-scroll-nav-bar-item {
+    padding: 0 12px;
+    line-height: 52px;
+    font-size: 15px;
+    color: #555;
+
+    > span {
+      font-weight: 300;
+    }
+  }
+
+  .cube-scroll-nav-bar-item_active {
+    color: #000;
+    font-size: 16px;
+    position: relative;
+
+    > span {
+      font-weight: 500;
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: 10px;
+      right: 10px;
+      bottom: 10px;
+      height: 3px;
+      background-color: #000;
+    }
+  }
 }
 
 </style>

 <template>
   <div v-if="list.length" class="swiper">
-    <LayoutLink :href="list[0].url" class="swiper-item swiper-item-left img-link">
-      <ImageFormat :lazy="false" class="item-imge" :src="list[0].src" :width="310" :height="402"></ImageFormat>
-    </LayoutLink>
+    <div class="swiper-item swiper-item-left">
+      <LayoutLink :href="list[0].url" class="img-link">
+        <ImageFormat :lazy="false" class="item-imge" :src="list[0].src" :width="310" :height="402"></ImageFormat>
+      </LayoutLink>
+    </div>
     <div class="swiper-item swiper-item-right">
       <LayoutLink :href="list[1].url" class="img-link">
         <ImageFormat :lazy="false" class="item-imge" :src="list[1].src" :width="380" :height="196"></ImageFormat>
@@ -32,6 +34,23 @@ export default {
   align-content: stretch;
   justify-content: space-between;
   height: 402px;
+  margin-left: 8px;
+  margin-right: 8px;
+
+  .swiper-item {
+    position: relative;
+
+    &:after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      z-index: -2;
+      border-radius: 8px;
+      box-shadow: 0 0 30px #dcdcdc;
+      bottom: 0;
+    }
+  }
 
   .swiper-item-left {
     width: 44%;
@@ -59,6 +78,5 @@ export default {
       display: block;
     }
   }
-
 }
 </style>