WEBSITE

src/components/commonComponents/headerNav.vue

-<template>
-  <div class="header transparent">
-    <div class=section>
-      <!-- <a class=header-logo href= /></a> -->
-      <!-- logo -->
-      <img src="../../assets/image/home/logo/logo.png" alt="">
-      <div class="header-right-block">
-        <ul class=nav-menu>
-          <li class="nav-item active">
-            首页
-          </li>
-          <li class="nav-item">
-            解决方案
-          </li>
-          <li class="nav-item">
-            产品中心
-          </li>
-          <li class="nav-item">
-            新闻资讯
-          </li>
-          
-          <li class="nav-item">
-            关于我们
-          </li>
-        </ul>
-      </div>
-    </div>
-    <div class="sub-nav-menu">
-      <div class="section">
-        <span >智慧案场</span>
-        <span >智慧社区</span>
-        <span>产品订制 </span>
-      </div>
-    </div>
-    <div class="sub-nav-menu">
-      <div class="section">
-        <span >智慧案场</span>
-        <span >智慧社区 </span>
-        <span>产品订制 </span>
-      </div>
-    </div>
-    </div>
-  <!-- </div> -->
-<!-- </div> -->
-</template>
-<script>
-export default {
-  data() {
-      return {
-        activeIndex: '1'
-      };
-    },
-    methods: {
-      
-    }
-
-}
-</script>
-<style>
-.section {
-      width: 1280px;
-      height: 100%;
-      margin: 0 auto;
-      position: relative
-    }
-    .clearfix:after,
-    .clearfix:before {
-      content: "";
-      display: table
-    }
-
-    .clearfix:after {
-      clear: both
-    }
-
-    .clearfix {
-      *zoom: 1
-    }
-
-    input:-ms-input-placeholder {
-      color: #ccc
-    }
-
-    input::placeholder {
-      color: #ccc
-    }
-
-    button,
-    input,
-    select,
-    textarea {
-      font-family: inherit;
-      font-size: inherit;
-      font-style: inherit;
-      font-weight: inherit
-    }
-
-    .hide {
-      display: none
-    }
-
-    .header {
-      height: 64px;
-      font-size: 16px;
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      z-index: 1;
-      transition: background-color .5s ease-out
-    }
-
-    .header .header-logo {
-      position: absolute;
-      width: 125px;
-      height: 35px;
-      top: 0;
-      bottom: 0;
-      left: 40px;
-      background-size: contain;
-      background-repeat: no-repeat;
-      margin: auto
-    }
-
-
-    .header .header-right-block {
-      position: relative;
-      float: right;
-      height: 64px;
-      width: 676px;
-      padding-right: 60px
-    }
-
-    .header .nav-menu {
-      display: table;
-      width: 100%;
-      height: 100%;
-      table-layout: fixed
-    }
-
-    .header .nav-menu li {
-      display: table-cell;
-      text-align: center;
-      vertical-align: middle;
-      position: relative
-    }
-
-    .header .nav-menu li:before {
-      content: "";
-      position: absolute;
-      top: 32px;
-      left: 0;
-      right: 0;
-      margin: auto;
-      display: inline-block;
-      width: 0;
-      height: 12px;
-      transition: width .3s ease-out
-    }
-
-    .header .nav-menu li.active:before,
-    .header .nav-menu li:hover:before {
-      width: 72px
-    }
-
-    .header .nav-menu span {
-      display: inline-block;
-      width: 100%;
-      height: 64px;
-      line-height: 64px
-    }
-
-    .header .sub-nav-menu {
-      position: absolute;
-      top: 64px;
-      width: 100%;
-      height: 0;
-      text-align: center;
-      overflow: hidden;
-      transition: height .3s ease-out
-    }
-
-    .header .sub-nav-menu span {
-      display: inline-block;
-      margin-right: 100px;
-      height: 72px;
-      line-height: 72px;
-    }
-
-    .header .sub-nav-menu span.last-item {
-      margin-right: 0
-    }
-
-    .header .sub-nav-menu.show {
-      height: 72px
-    }
-
-    .header.transparent {
-      background-color: hsla(0, 0%, 100%, 0);
-      color: red;
-    }
-    .header.transparent li.active:before,
-    .header.transparent li:hover:before {
-      background: #4e84ff;
-      opacity:0.7326;
-    }
-    body {
-      background: #0a0f2c
-    }
-
-    .header {
-      z-index: 2
-    }
-    body,
-    html {
-      height: 100%
-    }
-</style>
-
-

src/components/pages/productCenter/product.vue

-<template>
-  <div class="product">
-    <headerTab></headerTab>
-    <router-view></router-view>
-  </div>
-</template>
-<script>
-import headerTab from "@/components/commonComponents/headerTab";
-
-export default {
-  components:{
-    headerTab
-  }
-}
-</script>
-

src/router/index.js

 
 import solution from '@/components/pages/solution/solution' // 解决方案
 
-import product from '@/components/pages/productCenter/product'
-
 import productCenter from '@/components/pages/productCenter/productCenter' // 产品中心
 
 import online from '@/components/pages/productCenter/online'
 
 import aboutUs from '@/components/pages/aboutUs/aboutUs' // 关于我们
 
-import headerNav from '@/components/commonComponents/headerNav'
 
 
 Vue.use(Router)
       path: '/aboutUs',
       name: 'aboutUs',
       component: aboutUs
-    },
-
-
-    {
-      path: '/headerNav',
-      name: 'headerNav',
-      component: headerNav
     }
 
- 
   ]
 })