ceramic/src/views/header/index.vue

<template>
  <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>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      navList: [
        {
          href: '/',
          title: '网站首页',
        },
        {
          href: '',
          title: '关于我们',
          children: [
            {
              href: '',
              title: '企业简介'
            },
            {
              href: '',
              title: '品牌文化'
            }, {
              href: '',
              title: '企业观点'
            }, {
              href: '',
              title: '企业文化'
            }
          ]
        }, {
          href: '',
          title: '产品中心',
          children: [
            {
              href: '',
              title: '瓷抛大理石'
            },
            {
              href: '',
              title: '通体大理石'
            }, {
              href: '',
              title: '中板通体大理石'
            }, {
              href: '',
              title: '大板通体大理石'
            }, {
              href: '',
              title: '银河系大板'
            }, {
              href: '',
              title: '仿古砖600x600'
            }, {
              href: '',
              title: '金刚大理石'
            }, {
              href: '',
              title: '岩板'
            }, {
              href: '',
              title: '微水泥'
            }
          ]
        }, {
          href: '/news',
          title: '新闻资讯',
          children: [
            {
              href: '/news',
              title: '公司新闻'
            },
            {
              href: '',
              title: '行业动态'
            }, {
              href: '',
              title: '瓷砖百科'
            }
          ]
        }, {
          href: '',
          title: '形象展示',
          children: [
            {
              href: '',
              title: '资质荣誉'
            },
            {
              href: '',
              title: '工程案例'
            }
          ]
        }, {
          href: '',
          title: '招商加盟',
          children: [
            {
              href: '',
              title: '支持策略'
            },
            {
              href: '',
              title: '加盟条件'
            },
          ]
        }, {
          href: '',
          title: '联系我们'
        }
      ]
    }
  },
  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;
  color: #fff;

  .up_header {
    border-bottom: 1px solid #333;
    height: 36px;

    .up_left {
      color: #fff;
      display: inline;
      line-height: 36px;
      float: left;
      margin-left: 90px;
      font-size: 12px;
    }

    .up_right {
      color: #ccc;
      display: inline;
      float: right;
      line-height: 35px;
      font-size: 12px;
    }
  }

  .down_header {
    position: relative;
    width: 100%;
    float: left;
    padding: 4px 0;
    z-index: 30;

    .down_left {
      position: absolute;
      top: -30px;
      float: left;

      > a:hover:after {
        border: none;
      }
    }

    .down_right {
      position: relative;
      float: right;

      > ul {
        display: inline;
        float: left;

        > .nav {
          position: relative;
          display: inline;
          width: 100px;
          float: left;

          > .nav_item {
            color: #fff;
            display: inline-block;
            position: relative;
            height: 85px;
            line-height: 85px;
            font-size: 14px;
          }

          .nav_item:hover {
            text-decoration: underline;
          }

          .subNav {
            display: none;
            clear: both;
            position: absolute;
            top: 85px;
            left: 0;
            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;
              }
            }
          }

        }

        > .nav:hover {
          .subNav {
            display: block;
          }
        }
      }
    }
  }
}

.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>