change

src/components/commonComponents/headerNav.vue

@@ -0,0 +1,222 @@
+<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/commonComponents/headerTab.vue

@@ -7,9 +7,10 @@
       <el-col :span="12">
         <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" >
           <el-menu-item index="1">
-            <div class="nav_tittle1">
+            <div class="tittle">
+              <div class="nav_tittle">
               <span>首页</span>
-              
+            </div>
             </div>
           </el-menu-item>
           <el-menu-item index="2">
@@ -132,7 +133,7 @@ export default {
   border: none;
 }
 .header-tab .el-menu {
-  padding-left: 30px;
+  /* padding-left: 30px; */
   background-color: transparent;
 }
 
@@ -147,9 +148,33 @@ export default {
   padding: 0;
   margin: 0 20px;
   color: #fff;
+  background-color: rgba(0,0,0,0);
 }
 .logo {
   height: 35px;
 }
-
+.header-tab .el-menu--horizontal > .el-menu-item:hover{
+  width: 80px;
+  /* margin: auto; */
+  
+}
+@keyframes slide{
+  from {
+    /* margin: auto; */
+    width: 0;
+  }
+  to{
+    /* margin: auto; */
+    width: 80px;
+  }
+}
+.tittle{
+  width: 80px;
+}
+.nav_tittle:hover {
+  width: 80px;
+  margin: auto;
+  background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #4e84ff 50%); 
+  animation: slide 0.5s ;
+}
 </style>

src/components/pages/index.vue

@@ -3,8 +3,8 @@
     <div class="section" :style="{'height':offsetheight+'px'}">
       <headerTab></headerTab>
       <div class="container" :style="{'transform': 'translate3d(0px,-'+ fullPage*offsetheight +'px, 0px)'}">
-        <div class="page-1 page">
-          <div class="part-1" :class="page1 == true ? 'animated bounceInLeft' :''">
+        <div class="page-1 page fp-auto-height">
+          <div class="part-1" :class="page1 == true ? 'animated zoomIn 3s' :''">
             <p class="part1-tit">荟房智慧管家</p>
             <span>智慧案场</span>
             <span>迎宾系统</span>
@@ -13,11 +13,11 @@
             <p class="part1-tip">银城旗下品牌</p>
           </div>
         </div>
-        <div class="page-2">
+        <div class="page-2 fp-auto-height">
           <p class="title">一站式解决方案</p>
           <img :class="page2 == true ? 'animated flipInX' :''" src="../../assets/image/home/littleImg/second.png" alt>
         </div>
-        <div class="page-3">
+        <div class="page-3 fp-auto-height">
           <p class="title">产品简介</p>
           <div class="produce">
             <div class="list first" :class="page3 == true ? 'animated bounceInLeft' :''">
@@ -42,7 +42,7 @@
             </div>
           </div>
         </div>
-        <div class="page-4">
+        <div class="page-4 fp-auto-height">
           <div class="page-4-con">
             <el-carousel :interval="4000" type="card" height="500px" indicator-position="none" arrow="never">
               <el-carousel-item>
@@ -72,7 +72,7 @@
             </el-carousel>
           </div>
         </div>
-        <div class="page-5">
+        <div class="page-5 fp-auto-height">
           <p class="title">我们的客户</p>
           <div class="logo-box">
             <img src="../../assets/image/home/logo/Group29.png" alt>
@@ -289,7 +289,7 @@ export default {
     background: url("../../assets/image/home/background/Group26.jpg") no-repeat
       center;
     width: 100%;
-    height: 100%;
+    height: 1080px;
     background-size: 100% 100%;
     color: #fff;
     .title {

src/router/index.js

@@ -19,6 +19,8 @@ import newsInformation from '@/components/pages/newsInformation/newsInformation'
 
 import aboutUs from '@/components/pages/aboutUs/aboutUs' // 关于我们
 
+import headerNav from '@/components/commonComponents/headerNav' 
+
 Vue.use(Router)
 
 export default new Router({
@@ -90,6 +92,13 @@ export default new Router({
       name: 'aboutUs',
       component: aboutUs
     },
+
+
+    {
+      path: '/headerNav',
+      name: 'headerNav',
+      component: headerNav
+    },
  
   ]
 })