diff --git a/assets/img/layout/icon-shop-sticky.png b/assets/img/layout/icon-shop-sticky.png
index c22a37a..5f2c27f 100644
Binary files a/assets/img/layout/icon-shop-sticky.png and b/assets/img/layout/icon-shop-sticky.png differ
diff --git a/layouts/module/header/index.vue b/layouts/module/header/index.vue
index 948e686..525cd51 100644
--- a/layouts/module/header/index.vue
+++ b/layouts/module/header/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="layout-header">
     <!-- 滚动吸顶头部 -->
-    <template v-if="isSticky">
+    <div v-show="isSticky">
       <div class="sticky-bar-header">
         <div class="sticky-bar-header__wrap flex flex-middle flex-between">
           <div class="flex flex-middle">
@@ -23,12 +23,19 @@
             </el-menu>
           </div>
           <div class="bar-header-wrap__icons flex flex-middle">
-            <img src="~/assets/img/layout/icon-search-sticky.png" />
-            <div class="header-wrap-icons__shop">
+            <img
+              src="~/assets/img/layout/icon-search-sticky.png"
+              @click="$router.push('/goods/list')"
+            />
+            <div class="header-wrap-icons__shop" @click="$router.push('/cart')">
               <img src="~/assets/img/layout/icon-shop-sticky.png" />
               <span class="">3</span>
             </div>
-            <div v-if="token" class="header-wrap-icons__login">
+            <div
+              v-if="token"
+              class="header-wrap-icons__login"
+              @click="$router.push('/account/home')"
+            >
               <img :src="userInfo.avatar" />
             </div>
             <div
@@ -41,7 +48,7 @@
           </div>
         </div>
       </div>
-    </template>
+    </div>
     <template>
       <HeaderInfoBar />
       <div class="default-bar-header">
@@ -207,7 +214,7 @@ export default {
           label: "开发书籍",
           value: `/goods/list?id=6&levelType=${CATEGROY_LEVEL.ONE}`,
         },
-        { label: "限时秒杀", value: "/sckill" },
+        { label: "限时秒杀", value: "/seckill" },
       ],
       categroyTwoVisible: false, // 是否展示二级分类
       categroyVisible: false, // 是否展示一级分类
@@ -343,6 +350,7 @@ export default {
           width: 34px;
           height: 34px;
           border-radius: 50%;
+          object-fit: cover;
         }
       }
       .header-wrap-icons__unlogin {
diff --git a/pages/account/index/home/index.vue b/pages/account/index/home/index.vue
index 4f938e0..819cbfe 100644
--- a/pages/account/index/home/index.vue
+++ b/pages/account/index/home/index.vue
@@ -135,6 +135,7 @@ export default {
         height: 65px;
         border-radius: 50%;
         margin-right: 16px;
+        object-fit: cover;
       }
       .home-head-info__wrap {
         color: #666666;
diff --git a/pages/seckill/index.vue b/pages/seckill/index.vue
index 3b82556..b7733a6 100644
--- a/pages/seckill/index.vue
+++ b/pages/seckill/index.vue
@@ -6,51 +6,50 @@
  * @Description: file content
 -->
 <template>
-  <div class="sckill">
+  <div class="seckill">
+    <div v-show="isSticky" class="seckill-header-sticky">
+      <TabBar
+        v-model="query.activityTimeId"
+        :list="tabList"
+        @tab-click="getGoodsList"
+      />
+    </div>
     <!-- 秒杀时间段 -->
     <div
-      class="sckill-header"
+      class="seckill-header"
       :style="{ backgroundImage: `url(${bkgSckill})` }"
     >
-      <div class="sckill-header-tabbar flex">
-        <div
-          v-for="item in tabList"
-          :key="item.id"
-          @click="onTabSelect(item.id)"
-          class="sckill-header-tabbar__item flex flex-middle flex-center"
-          :class="{
-            'sckill-header-tabbar__item--active':
-              item.id === query.activityTimeId,
-          }"
-        >
-          <strong class="header-tabbar-item__time">18:00</strong>
-          <div class="header-tabbar-item__tip">抢购中</div>
-        </div>
+      <div class="seckill-header-tabbar">
+        <TabBar
+          v-model="query.activityTimeId"
+          :list="tabList"
+          @tab-click="getGoodsList"
+        />
       </div>
     </div>
-    <div class="sckill-bar flex flex-middle flex-center">
+    <div class="seckill-bar flex flex-middle flex-center">
       <p>本场秒杀即将开抢，距开始还剩</p>
-      <div class="sckill-bar-countdown flex flex-middle">
-        <div class="sckill-bar-countdown__time">{{ countdown.hour }}</div>
-        <span class="sckill-bar-countdown--mark">:</span>
-        <div class="sckill-bar-countdown__time">{{ countdown.minute }}</div>
-        <span class="sckill-bar-countdown--mark">:</span>
-        <div class="sckill-bar-countdown__time">{{ countdown.second }}</div>
+      <div class="seckill-bar-countdown flex flex-middle">
+        <div class="seckill-bar-countdown__time">{{ countdown.hour }}</div>
+        <span class="seckill-bar-countdown--mark">:</span>
+        <div class="seckill-bar-countdown__time">{{ countdown.minute }}</div>
+        <span class="seckill-bar-countdown--mark">:</span>
+        <div class="seckill-bar-countdown__time">{{ countdown.second }}</div>
       </div>
     </div>
     <!-- 秒杀商品列表 -->
-    <div v-loading="loading" class="sckill-products flex flex-wrap">
+    <div v-loading="loading" class="seckill-products flex flex-wrap">
       <div
         v-for="item in goodsList"
         :key="item.productId"
         @click="onJumpGoodsDetail(item.productId)"
-        class="sckill-products-wrap"
+        class="seckill-products-wrap"
       >
         <img
           :src="item.productMainPicture"
-          class="sckill-products-wrap__cover"
+          class="seckill-products-wrap__cover"
         />
-        <div class="sckill-products-wrap__content">
+        <div class="seckill-products-wrap__content">
           <p class="products-wrap-content__title">{{ item.productName }}</p>
           <div class="products-wrap-content__price">
             <strong>￥{{ item.activityPrice }}</strong>
@@ -69,7 +68,7 @@
       </div>
     </div>
     <!-- 分页 -->
-    <div class="sckill-pagination flex flex-right">
+    <div class="seckill-pagination flex flex-right">
       <el-pagination
         background
         :current-page="currentPage"
@@ -86,21 +85,26 @@
 </template>
 <script>
 import { ApiGetSeckillTimes, ApiGetSeckillGoods } from "@/plugins/api/seckill";
+import TabBar from "./module/TabBar.vue";
+
 export default {
   name: "Sckill",
+  components: { TabBar },
   data() {
     return {
       bkgSckill: require("~/assets/img/sckill/bkg-large.png"),
-      tabList: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }], // 秒杀时间段
+      tabList: [], // 秒杀时间段
       goodsList: [], // 商品列表
       total: 0,
       currentPage: 0,
       loading: false,
       query: {
         pageIndex: 1,
-        length: 12,
+        length: 16,
         activityTimeId: 1,
       },
+      ticking: false,
+      isSticky: false,
     };
   },
   computed: {
@@ -115,7 +119,25 @@ export default {
   created() {
     this.getSeckillTimes();
   },
+  mounted() {
+    // 监听滚动事件
+    window.addEventListener("scroll", this.scrollEventMethod);
+  },
+  destroyed() {
+    window.removeEventListener("scroll", this.scrollEventMethod);
+  },
   methods: {
+    scrollEventMethod() {
+      const that = this;
+      // 节流
+      if (!that.ticking) {
+        window.requestAnimationFrame(function () {
+          that.ticking = false;
+          that.isSticky = window.scrollY > 400;
+        });
+        that.ticking = true;
+      }
+    },
     async getSeckillTimes() {
       const { result } = await ApiGetSeckillTimes();
       if (result && result.length > 0) {
@@ -144,72 +166,48 @@ export default {
       this.query.pageIndex = page;
       this.getGoodsList();
     },
-    onTabSelect(id) {
+    handleTabSelect(id) {
       this.query.activityTimeId = id;
       Object.assign(this.query, {
         pageIndex: 1,
-        length: 10,
+        length: 16,
       });
     },
   },
 };
 </script>
 <style lang="scss" scoped>
-.sckill {
+.seckill {
   background: #f8f8f8;
   padding-bottom: 42px;
-  .sckill-header {
+  .seckill-header-sticky {
+    position: fixed;
+    left: 50%;
+    transform: translate(-50%);
+    top: 50px;
+    z-index: 1;
+    @include layout-box;
+  }
+  .seckill-header {
     position: relative;
     width: 100%;
     height: 156px;
     background-size: 100% 100%;
-    .sckill-header-tabbar {
+    .seckill-header-tabbar {
+      @include layout-box;
       position: absolute;
       left: 50%;
       bottom: 0;
       transform: translate(-50%);
-      height: 60px;
-      border-radius: 4px 4px 0px 0px;
-      overflow: hidden;
-      cursor: pointer;
-      .sckill-header-tabbar__item {
-        width: 240px;
-        font-size: 12px;
-        background: #ffffff;
-        color: #666666;
-        .header-tabbar-item__time {
-          font-size: 18px;
-          color: #333333;
-          margin-right: 22px;
-        }
-        .header-tabbar-item__tip {
-          width: 69px;
-          height: 22px;
-          text-align: center;
-          border: 1px solid #999999;
-          border-radius: 2px;
-        }
-        &--active {
-          background: linear-gradient(270deg, #ffa25a 0%, #ff7f39 100%);
-          color: #ffffff;
-          .header-tabbar-item__time {
-            font-size: 24px;
-            color: #ffffff;
-          }
-          .header-tabbar-item__tip {
-            border-color: #ffffff;
-          }
-        }
-      }
     }
   }
-  .sckill-bar {
+  .seckill-bar {
     height: 60px;
     line-height: 60px;
     text-align: center;
     font-size: 14px;
     color: #666666;
-    .sckill-bar-countdown {
+    .seckill-bar-countdown {
       margin-left: 25px;
       font-weight: bold;
       &__time {
@@ -228,23 +226,24 @@ export default {
       }
     }
   }
-  .sckill-products,
-  .sckill-pagination {
+  .seckill-products,
+  .seckill-pagination {
     @include layout-box;
   }
-  .sckill-products {
-    .sckill-products-wrap {
+  .seckill-products {
+    .seckill-products-wrap {
       width: 24%;
       background: #ffffff;
       margin: 15px 0 60px 0;
+      cursor: pointer;
       &:not(:nth-child(4n)) {
         margin-right: calc(4% / 3);
       }
-      .sckill-products-wrap__cover {
+      .seckill-products-wrap__cover {
         width: 100%;
         height: 288px;
       }
-      .sckill-products-wrap__content {
+      .seckill-products-wrap__content {
         padding: 20px 16px;
         .products-wrap-content__title {
           @include ellipsis;
@@ -287,7 +286,7 @@ export default {
       }
     }
   }
-  .sckill-pagination {
+  .seckill-pagination {
     margin-top: 60px;
     /deep/.el-pagination {
       .btn-prev,
diff --git a/pages/seckill/module/TabBar.vue b/pages/seckill/module/TabBar.vue
new file mode 100644
index 0000000..4b5c3b2
--- /dev/null
+++ b/pages/seckill/module/TabBar.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="seckill-tabbar flex flex-between">
+    <div
+      v-for="item in list"
+      :key="item.id"
+      @click="onTabClick(item.id)"
+      class="sckill-header-tabbar__item flex flex-middle flex-center"
+      :class="{
+        'sckill-header-tabbar__item--active': item.id === value,
+      }"
+    >
+      <strong class="header-tabbar-item__time">18:00</strong>
+      <div class="header-tabbar-item__tip">抢购中</div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "SeckillTabBar",
+  props: {
+    list: {
+      type: Array,
+      default: () => [],
+    },
+    value: {
+      type: Number,
+      default: 0,
+    },
+  },
+  methods: {
+    onTabClick(id) {
+      // 点击同一个tab
+      if (id === this.value) {
+        return;
+      }
+      this.$emit("input", id);
+      this.$emit("tab-click");
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.seckill-tabbar {
+  width: 100%;
+  height: 60px;
+  cursor: pointer;
+  overflow: hidden;
+  .sckill-header-tabbar__item {
+    width: 100%;
+    font-size: 12px;
+    background: #ffffff;
+    color: #666666;
+    .header-tabbar-item__time {
+      font-size: 18px;
+      color: #333333;
+      margin-right: 22px;
+    }
+    .header-tabbar-item__tip {
+      width: 69px;
+      height: 22px;
+      line-height: 22px;
+      text-align: center;
+      border: 1px solid #999999;
+      border-radius: 2px;
+    }
+    &--active {
+      background: linear-gradient(270deg, #ffa25a 0%, #ff7f39 100%);
+      color: #ffffff;
+      .header-tabbar-item__time {
+        font-size: 24px;
+        color: #ffffff;
+      }
+      .header-tabbar-item__tip {
+        border-color: #ffffff;
+      }
+    }
+  }
+}
+</style>