diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index 75f45f1..0000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/index.html b/public/index.html
index aaaece3..73928cd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+<!--    <link rel="icon" href="<%= BASE_URL %>favicon.ico">-->
     <title>艺鹏瓷砖|广东祥睿陶瓷有限公司</title>
     <script>
       fnResize();
diff --git a/src/views/header/index.vue b/src/views/header/index.vue
index a653af3..fa3c34e 100644
--- a/src/views/header/index.vue
+++ b/src/views/header/index.vue
@@ -1,45 +1,61 @@
 <template>
-  <div class="header_bg">
-    <el-row type="flex" class="up_header">
-      <el-col :span="4">
-      </el-col>
-      <el-col :span="16" style="z-index: 400;">
-          <span class="up_left">
-            艺鹏瓷砖 —— 拒绝千篇一律，艺术无处不在
-          </span>
-        <span class="up_right">
-            广东祥睿陶瓷有限公司
-          </span>
-      </el-col>
-    </el-row>
-    <el-row type="flex" class="down_header">
-      <el-col :span="4">
-      </el-col>
-      <el-col :span="16">
-        <div class="down_left">
-          <a href="/">
-            <el-image
-              src="http://www.yipengtaoci.com/images/logo.png"></el-image>
-          </a>
+  <div>
+    <div class="header_bg" id="header_bg">
+      <el-row type="flex" class="up_header">
+        <el-col :span="4">
+        </el-col>
+        <el-col :span="16" style="z-index: 400;">
+            <span class="up_left">
+              艺鹏瓷砖 —— 拒绝千篇一律，艺术无处不在
+            </span>
+          <span class="up_right">
+              广东祥睿陶瓷有限公司
+            </span>
+        </el-col>
+      </el-row>
+      <el-row type="flex" class="down_header">
+        <el-col :span="4">
+        </el-col>
+        <el-col :span="16">
+          <div class="down_left">
+            <a href="/">
+              <el-image
+                src="http://www.yipengtaoci.com/images/logo.png"></el-image>
+            </a>
+          </div>
+          <div class="down_right">
+            <ul>
+              <li v-for="(item,index) in navList" :key="index" class="nav">
+                <a :href="item.href" class="nav_item">
+                  {{ item.title }}
+                </a>
+                <ul class="subNav" v-if="item.children">
+                  <li v-for="(childrenItem,childrenIndex) in item.children" :key="childrenIndex">
+                    <a :href="childrenItem.href">
+                      {{ childrenItem.title }}
+                    </a>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="search_header" id="search_header">
+      <div class="headerItems">
+        <ul>
+          <li v-for="(item,index) in navList" :key="index" class="nav">
+            <a :href="item.href">
+              {{ item.title }}
+            </a>
+          </li>
+        </ul>
+        <div class="search">
+          <i class="el-icon-search"></i>
         </div>
-        <div class="down_right">
-          <ul >
-            <li v-for="(item,index) in navList" :key="index" class="nav">
-              <a :href="item.href" class="nav_item">
-                {{ item.title }}
-              </a>
-              <ul class="subNav" v-if="item.children">
-                <li v-for="(childrenItem,childrenIndex) in item.children" :key="childrenIndex">
-                  <a :href="childrenItem.href">
-                    {{ childrenItem.title }}
-                  </a>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </div>
-      </el-col>
-    </el-row>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -56,83 +72,83 @@ export default {
         {
           href: '',
           title: '关于我们',
-          children:[
+          children: [
             {
               href: '',
-              title:'企业简介'
+              title: '企业简介'
             },
             {
               href: '',
-              title:'品牌文化'
-            },{
+              title: '品牌文化'
+            }, {
               href: '',
-              title:'企业观点'
-            },{
+              title: '企业观点'
+            }, {
               href: '',
-              title:'企业文化'
+              title: '企业文化'
             }
           ]
         }, {
           href: '',
           title: '产品中心',
-          children:[
+          children: [
             {
               href: '',
-              title:'瓷抛大理石'
+              title: '瓷抛大理石'
             },
             {
               href: '',
-              title:'通体大理石'
-            },{
+              title: '通体大理石'
+            }, {
               href: '',
-              title:'中板通体大理石'
-            },{
+              title: '中板通体大理石'
+            }, {
               href: '',
-              title:'大板通体大理石'
-            },{
+              title: '大板通体大理石'
+            }, {
               href: '',
-              title:'银河系大板'
-            },{
+              title: '银河系大板'
+            }, {
               href: '',
-              title:'仿古砖600x600'
-            },{
+              title: '仿古砖600x600'
+            }, {
               href: '',
-              title:'金刚大理石'
-            },{
+              title: '金刚大理石'
+            }, {
               href: '',
-              title:'岩板'
-            },{
+              title: '岩板'
+            }, {
               href: '',
-              title:'微水泥'
+              title: '微水泥'
             }
           ]
         }, {
           href: '/news',
           title: '新闻资讯',
-          children:[
+          children: [
             {
               href: '/news',
-              title:'公司新闻'
+              title: '公司新闻'
             },
             {
               href: '',
-              title:'行业动态'
-            },{
+              title: '行业动态'
+            }, {
               href: '',
-              title:'瓷砖百科'
+              title: '瓷砖百科'
             }
           ]
         }, {
           href: '',
           title: '形象展示',
-          children:[
+          children: [
             {
               href: '',
-              title:'资质荣誉'
+              title: '资质荣誉'
             },
             {
               href: '',
-              title:'工程案例'
+              title: '工程案例'
             }
           ]
         }, {
@@ -141,11 +157,11 @@ export default {
           children: [
             {
               href: '',
-              title:'支持策略'
+              title: '支持策略'
             },
             {
               href: '',
-              title:'加盟条件'
+              title: '加盟条件'
             },
           ]
         }, {
@@ -154,12 +170,37 @@ export default {
         }
       ]
     }
-  }
+  },
+  mounted() {
+    let header_bg = document.getElementById('header_bg')
+    let search_header = document.getElementById('search_header')
+
+    window.onscroll = () => {
+      // 获取滚动距离
+      let top = document.documentElement.scrollTop || document.body.scrollTop;
+      if (top >= 140) {
+        header_bg.style = 'display:none;transition:  all 0.6s;'
+        search_header.style = 'position: fixed;top: 0;;display:block;transition:  all 0.6s;'
+      } else if (top === 0) {
+        header_bg.style = 'position: static;'
+        search_header.style = 'display:none'
+      }
+    }
+    const that = this
+    window.onresize = () => {
+      return (() => {
+        //这里写要操作的函数
+        window.screenWidth = document.body.clientWidth
+        that.width = window.screenWidth >= 1200
+      })()
+    }
+  },
 }
 </script>
 
 <style scoped lang="scss">
 .header_bg {
+  transition: all 0.6s;
   height: 130px;
   width: 100%;
   background-color: #111;
@@ -208,11 +249,11 @@ export default {
       position: relative;
       float: right;
 
-      >ul {
+      > ul {
         display: inline;
         float: left;
 
-        >.nav {
+        > .nav {
           position: relative;
           display: inline;
           width: 100px;
@@ -226,11 +267,12 @@ export default {
             line-height: 85px;
             font-size: 14px;
           }
-          .nav_item:hover{
+
+          .nav_item:hover {
             text-decoration: underline;
           }
 
-          .subNav{
+          .subNav {
             display: none;
             clear: both;
             position: absolute;
@@ -239,24 +281,28 @@ export default {
             width: 100px;
             background-color: #000;
             padding: 12px 0;
-            >li{
+
+            > li {
               width: 100%;
               text-align: center;
               height: 35px;
               line-height: 35px;
-              >a{
+
+              > a {
                 color: #fff;
                 font-size: 12px;
               }
-              >a:hover{
+
+              > a:hover {
                 text-decoration: underline;
               }
             }
           }
 
         }
-        >.nav:hover {
-          .subNav{
+
+        > .nav:hover {
+          .subNav {
             display: block;
           }
         }
@@ -264,4 +310,65 @@ export default {
     }
   }
 }
+
+.search_header {
+  width: 100%;
+  display: none;
+  background-color: #000;
+  min-width: 1290px;
+  z-index: 99999;
+
+  .headerItems {
+    position: relative;
+    padding: 8px 0;
+    width: 66%;
+    margin: 0 auto;
+
+    ul {
+      display: flex;
+      width: 100%;
+      padding-left: 100px;
+
+      li {
+        position: relative;
+        display: inline-block;
+        width: 12%;
+        z-index: 300;
+
+        a:hover {
+          text-decoration: underline;
+        }
+
+        a {
+          color: #fff;
+          display: inline-block;
+          position: relative;
+          width: 100%;
+          height: 40px;
+          line-height: 40px;
+          font-size: 14px;
+          text-align: center;
+          text-decoration: none;
+          cursor: pointer;
+          z-index: 200;
+        }
+      }
+    }
+
+    .search {
+      cursor: pointer;
+      position: absolute;
+      right: 10px;
+      top: 0;
+      line-height: 62px;
+
+      i {
+        font-size: 20px;
+        color: #fff;
+      }
+    }
+  }
+
+
+}
 </style>