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();

src/views/header/index.vue

@@ -1,6 +1,5 @@
 <template>
-  <div>
+  <div class="header_bg">
-    <div class="header_bg" id="header_bg">
     <el-row type="flex" class="up_header">
       <el-col :span="4">
       </el-col>
@@ -42,21 +41,6 @@
       </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>
-    </div>
-  </div>
 </template>
 
 <script>
@@ -170,37 +154,12 @@ 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;
@@ -267,7 +226,6 @@ export default {
             line-height: 85px;
             font-size: 14px;
           }
-
           .nav_item:hover{
             text-decoration: underline;
           }
@@ -281,18 +239,15 @@ export default {
             width: 100px;
             background-color: #000;
             padding: 12px 0;
-
             >li{
               width: 100%;
               text-align: center;
               height: 35px;
               line-height: 35px;
-
               >a{
                 color: #fff;
                 font-size: 12px;
               }
-
               >a:hover{
                 text-decoration: underline;
               }
@@ -300,7 +255,6 @@ export default {
           }
 
         }
-
         >.nav:hover {
           .subNav{
             display: block;
@@ -310,65 +264,4 @@ 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>