首页修改，公共组件

index.html

@@ -91,7 +91,6 @@
     vertical-align: baseline;
     background: transparent;
     outline-style: none;
-    /*FF*/
   }
 
   a {

package.json

@@ -33,6 +33,8 @@
     "file-loader": "^1.1.4",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "html-webpack-plugin": "^2.30.1",
+    "less": "^3.9.0",
+    "less-loader": "^5.0.0",
     "node-notifier": "^5.1.2",
     "optimize-css-assets-webpack-plugin": "^3.2.0",
     "ora": "^1.2.0",

src/App.vue

@@ -17,6 +17,8 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+}
+html,body,#app{
+ height: 100%;
 }
 </style>

src/components/commonComponents/footerNav.vue

@@ -25,10 +25,8 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .footer .footer-con{
-  /* height: 337px; */
+  position: static;
   width: 100%;
-  position: fixed;
-  bottom: 0;
   background: #0F1C38;
   padding: 120px 0;
 

src/components/commonComponents/headerTab.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="header-tab">
     <el-row>
-       <el-col :span="12"><img src="../../assets/image/home/logo/logo.png" alt=""></el-col>
+       <el-col :span="12"><img class="header-img" src="../../assets/image/home/logo/logo.png" alt=""></el-col>
   <el-col :span="12"><el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
-  <el-menu-item index="1">首页</el-menu-item>
+  <el-menu-item index="1" >首页</el-menu-item>
   <el-menu-item index="2">解决方案</el-menu-item>
   <el-menu-item index="3">产品中心</el-menu-item>
   <el-menu-item index="4">新闻资讯</el-menu-item>
@@ -66,21 +66,31 @@ export default {
   top: 0;
   margin: 20px 0;
   background-color: transparent;
+  z-index: 2;
 }
-.el-menu.el-menu--horizontal {
+.header-tab .header-img{
+  width: 248px;
+  height: 35px;
+}
+.header-tab .el-menu.el-menu--horizontal {
   border: none;
 }
-.el-menu--horizontal > .el-menu-item.is-active {
+.header-tab .el-menu{
+  padding-left: 30px; 
+  background-color: transparent;
+}
+.header-tab .el-menu--horizontal > .el-menu-item.is-active {
   border: none;
   background: repeating-linear-gradient(
-    rgba(0, 0, 0, 0),
-    rgba(78, 132, 255, 1) 100%
+    transparent ,
+    #4E84FF 100%
   );
 }
-.el-menu--horizontal > .el-menu-item {
+.header-tab .el-menu--horizontal > .el-menu-item {
   height: 20px;
   line-height: 20px;
   padding: 0;
   margin: 0 20px;
+  color: #fff;
 }
 </style>

src/components/pages/index.vue

@@ -1,12 +1,24 @@
 <template>
   <div class="hello">
     <headerTab></headerTab>
-    <div>
-
-    首页
-
+  <div class="fullpage-container">
+  <div class="fullpage-wp" v-fullpage="opts">
+    <div class="page-1 page">
+      <div class="part-1" v-animate="{value: 'bounceInLeft'}">
+        <!-- <p class="">荟房智慧管家</p> -->
 
+      </div>
+    </div>
+    <div class="page-2 page">
+      <p class="part-2" v-animate="{value: 'bounceInRight'}">vue-fullpage</p>
+    </div>
+    <div class="page-3 page">
+      <p class="part-3" v-animate="{value: 'bounceInLeft', delay: 0}">vue-fullpage</p>
+      <p class="part-3" v-animate="{value: 'bounceInRight', delay: 600}">vue-fullpage</p>
+      <p class="part-3" v-animate="{value: 'zoomInDown', delay: 1200}">vue-fullpage</p>
     </div>
+  </div>
+</div>
     <footerNav></footerNav>
 
   </div>
@@ -19,18 +31,48 @@ import footerNav from "@/components/commonComponents/footerNav";
 export default {
   components: { headerTab, footerNav },
   data() {
-    return {};
-  }
+    return {
+      opts: {
+        start: 0,
+        dir: "v",
+        loop: false,
+        duration: 500,
+        beforeChange: function(prev, next) {
+          console.log("before", prev, next);
+        },
+        afterChange: function(prev, next) {
+          console.log("after", prev, next);
+        }
+      }
+    };
+  },
+  methods: {}
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .hello {
+  width: 100%;
+  height: 100%;
+}
+.hello .page-1 {
   background: url("../../assets/image/home/background/Group2.jpg") no-repeat
-    center 100%;
+    center;
+  width: 100%;
+  height: 100%;
+  background-size: 100% 100%;
+}
+.page-container {
+  position: absolute;
+  left: 0;
+  top: 0;
   width: 100%;
   height: 100%;
 }
+.page-container .page {
+  height: 100%;
+  width: 100%;
+}
 </style>
 

src/main.js

@@ -7,7 +7,9 @@ import router from './router'
 Vue.config.productionTip = false
 
 import 'animate.css'
+
 import 'vue-fullpage/vue-fullpage.css'
+
 import VueFullpage from 'vue-fullpage'
 Vue.use(VueFullpage)