Merge pull request '邓洁 : 页面向下滚动, header改变效果' (#7) from dj into master

Reviewed-on: #7

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,5 +1,6 @@
 <template>
-  <div class="header_bg">
+  <div>
+    <div class="header_bg" id="header_bg">
       <el-row type="flex" class="up_header">
         <el-col :span="4">
         </el-col>
@@ -23,7 +24,7 @@
             </a>
           </div>
           <div class="down_right">
-          <ul >
+            <ul>
               <li v-for="(item,index) in navList" :key="index" class="nav">
                 <a :href="item.href" class="nav_item">
                   {{ item.title }}
@@ -41,6 +42,21 @@
         </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>
@@ -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>