element導(dǎo)航欄的樣式修改、包括子菜單的樣式、但是還未實(shí)現(xiàn)子菜單根據(jù)父級(jí)設(shè)置成不同寬度
效果圖：

image.png

代碼部分：

    <div id="nav"  :style="headStyle" v-cloak>
        <div class="nav wrapper">
      <div class="logo" :style="{backgroundImage:'url('+logoStyle+')'}"></div>
      <div class="nav-content">
          <el-menu  background="transparent"  :router="true" :default-active="activeIndex"  class="el-menu-demo" mode="horizontal" :unique-opened="true"
          @open="open">
          <el-menu-item index="1"><a href="javascript:void(0);" class="font">首頁</a></el-menu-item>
          <el-submenu index="2" >
            <template slot="title" ><a href="javascript:void(0);" class="font">產(chǎn)品&解決方案</a></template>
            <el-menu-item index="2-1"><a class="item" href="javascript:void(0);">選項(xiàng)1</a></el-menu-item>
            <el-menu-item index="2-2"><a class="item" href="javascript:void(0);">選項(xiàng)2</a></el-menu-item>
            <el-menu-item index="2-3"><a class="item" href="javascript:void(0);">選項(xiàng)3</a></el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><a href="javascript:void(0);" class="font">關(guān)于</a></template>
            <el-menu-item index="3-1"><a class="item" href="javascript:void(0);">公司新聞</a></el-menu-item>
            <el-menu-item index="3-2"><a class="item" href="javascript:void(0);">客戶動(dòng)態(tài)</a></el-menu-item>
            <el-menu-item index="3-3"><a class="item" href="javascript:void(0);">行業(yè)資訊</a></el-menu-item>
          </el-submenu>
          <el-submenu index="4" >
            <template slot="title"><a href="javascript:void(0);" class="font">投資者關(guān)系</a></template>
            <el-menu-item index="4-1"><a class="item" href="javascript:void(0);">選項(xiàng)1</a></el-menu-item>
            <el-menu-item index="4-2"><a class="item" href="javascript:void(0);">選項(xiàng)2</a></el-menu-item>
            <el-menu-item index="4-3"><a class="item" href="javascript:void(0);">選項(xiàng)3</a></el-menu-item>
          </el-submenu>
          <el-submenu index="5" >
            <template slot="title"><a href="javascript:void(0);" class="font">聯(lián)系我們</a></template>
            <el-menu-item index="5-1"><a class="item" href="javascript:void(0);">選項(xiàng)1</a></el-menu-item>
            <el-menu-item index="5-2"><a class="item" href="javascript:void(0);">選項(xiàng)2</a></el-menu-item>
            <el-menu-item index="5-3"><a class="item" href="javascript:void(0);">選項(xiàng)3</a></el-menu-item>
          </el-submenu>
          <el-menu-item index="6"><a class="font" href="javascript:void(0);">生態(tài)合作</a></el-menu-item>
        </el-menu>
      </div>
    </div>
  </div>
css部分
``` #nav {
    z-index: 999;
    overflow: hidden;
    width: 100%;
    position: fixed;
    top: 100px;
    height: 100px;
    background: white;
    box-shadow: -10px 0px 30px 10px rgba(0,0,0,0.08);
  }
  .nav{
    width: 1920px;
    height: 100px;
    overflow:hidden;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    background:transparent;

  }
  .nav .logo{
      float: left;
      width: 216px;
      height: 53px;
      margin:25px 40px 23px 360px;
      background-size: cover;
    }
    .nav .nav-content{
      float: left;
      margin: 25px 0;
      border:none

    }
    .nav a{
      text-decoration: none;
    }
  .el-menu-demo{
    background:transparent;
  }
    .el-menu.el-menu--horizontal{
          border:none;
    }
    .el-menu.el-menu--horizontal .el-menu-item  .is-active a{
          font-size: 16px;
          color:white;
          }
    /* 無下拉 */
    ::v-deep .el-menu--horizontal>.el-menu-item{
        boder: none !important;
    }
    ::v-deep .el-menu--horizontal>.el-menu-item a{
      /* color: #333333; */
      color: white;
      font-size: 16px;
      width: 100%;
      height: 100%;
      text-align: left;
    }
    /* 有下拉 */
    ::v-deep .nav .nav-content .el-menu--horizontal>.el-submenu .el-submenu__title {
      /* color:#333; */
      color: white;
      font-size: 16px;
      text-align: center;
      border: none !important;
      padding: 0 30px;
    }
    ::v-deep .el-menu--horizontal>.el-submenu .el-submenu__title a{
      /* color:#333; */
      color: white;

      /* width: 100%; */
      height: 100%;

    }
    ::v-deep .el-menu--horizontal>.el-submenu .el-submenu__title:hover {
      background:  #0078ff;
    }
    ::v-deep .el-menu--horizontal>.el-submenu .el-submenu__title:hover a{
      color:#ffffff !important
    }
    ::v-deep .el-submenu.is-active .el-submenu__title{
    border: none;
    }

    /* 生態(tài) */
    ::v-deep .el-menu--horizontal > .el-menu-item a{
      display: inline-block;
      width: 100%;
      height: 100%;
      padding: 0 30px;
    }
  /*/首頁 */
  ::v-deep  .el-menu--horizontal>.el-menu-item.is-active{
    border:none;
  }
  /* 二級(jí)菜單 */
  ::v-deep .el-submenu.is-opened .el-submenu__title {
      background-color:  #0078ff;
      color: #ffffff;
    }
    ::v-deep .el-submenu.is-opened .el-submenu__title i{
      color: #ffffff;
  }
  ::v-deep .el-submenu.is-opened .el-submenu__title a{
  color:#ffffff !important
  }
  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover{
    background:  #0078ff;
    color: #ffffff;
  }
  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover a{
  color: #ffffff !important
  }
  .el-menu--horizontal .el-menu-item:not(.is-disabled) .item{
   display: inline-block;
    width: 100%;
    height:100%;
    text-decoration: none;
    color: #333;
    font-size: 16px;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    text-align: center;
    line-height: 36px;
    text-shadow: -10px 0px 30px 10px rgba(0,0,0,0.08);
  };

  ::v-deep .el-menu--horizontal .el-menu-item:hover{
   background:  #0078ff;
  }
  .el-menu--horizontal>.el-menu-item .is-active{
    color:#333;
    font-size: 16px;
    padding:   0 30px;
  }
  ::v-deep .el-menu--horizontal  .el-menu--popup{
      border-radius: 0px 0px 8px 8px !important;
    }
   ::v-deep .el-menu--collapse .el-menu .el-submenu, .el-menu--popup{
      min-width:0 !important;
  }
  .el-menu--horizontal>.el-submenu .el-submenu__title i{
    color: #333;
  }
  /* icon */
  ::v-deep .el-icon-arrow-down:before {
    content: "";
    font-size: 20px;
  }
  ::v-deep .el-menu--horizontal>.el-submenu .el-submenu__title:hover i{
   color: #ffffff !important
  }

  ::v-deep  .el-submenu.is-active .el-submenu__title{
    border: none;
    }
    ::v-deep  .el-menu--horizontal>.el-submenu .el-submenu__icon-arrow{
    /* color: #333 */
    color:rgb(255, 255, 255)
    }

導(dǎo)航欄根據(jù)滾動(dòng)變換字體以及左側(cè)logo
```  name: 'one',
  data () {
    return {
      opacity: 0,
      activeIndex:'1',
      top: 0,
      headStyle: { background: 'transparent', color: 'rgba(0,0,0)' },
      logoStyle: require('@/assets/logo@2x.png')
    }
  },
  watch: {
    '$router.path':
      {handler(routerPath){
        this.initMenuActive(routerPath)
      },
        immediate:true
      }
,    
      top (val) {
      const font = document.querySelectorAll('.font')
      const icon = document.querySelectorAll('.el-submenu__icon-arrow')
      if (val >= 20) {
        this.headStyle.background = 'rgb(255,255,255)'
        this.logoStyle = require('@/assets/logo.png')
        for (let i = 0; i < font.length; i++) {
          font[i].style.color = 'rgb(0,0,0)'
        }
        for (let i = 0; i < icon.length; i++) {
          icon[i].style.color = 'rgb(0,0,0)'
        }
      }
      if (val <= 20) {
        this.headStyle.background = 'transparent'
        this.logoStyle = require('@/assets/logo@2x.png')
        for (let i = 0; i < font.length; i++) {
          font[i].style.color = 'rgb(255,255,255)'
        }
        for (let i = 0; i < icon.length; i++) {
          icon[i].style.color = 'rgb(255,255,255)'
        }
      }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.scrolllHandle)
  },
  methods: {
    initMenuActive(routerPath){
      this.activeIndex=routerPath
    },
    scrolllHandle (e) {
      this.top = e.srcElement.scrollingElement.scrollTop // 獲取頁面滾動(dòng)高度
      this.opacity = Math.abs(Math.round(this.top)) / 250
    },
    open (index) {
      const element = document.querySelector('.el-menu--popup')
      // const item = document.querySelector('.el-submenu__title')
      // element.style.minWidth = item.style.width
      // eslint-disable-next-line no-constant-condition
      if (index === '3' || '5') {
        element.style.minWidth = '152px'
      } else if (index === '4') {
        element.style.minWidth = '170px'
      }
    }
  }