首页、解决方案

index.html

@@ -92,7 +92,7 @@
     background: transparent;
     outline-style: none;
   }
-
+  * { touch-action: pan-y; } 
   a {
     margin: 0;
     padding: 0;

src/App.vue

@@ -22,4 +22,7 @@ html,body,#app{
  height: 100%;
 
 }
+html{
+   touch-action:none;
+}
 </style>

src/components/commonComponents/footerNav.vue

@@ -28,7 +28,7 @@ export default {
   position: static;
   width: 100%;
   background: #0F1C38;
-  padding: 120px 0;
+  padding: 106px 0;
 
 }
 .footer .footer-con p{

src/components/commonComponents/headerTab.vue

@@ -20,22 +20,42 @@ export default {
   data() {
     return {
       activeIndex: "1",
-      searchBarFixed:false,
+      searchBarFixed: false
     };
   },
-  mounted () {
-  window.addEventListener('scroll', this.handleScroll)
-},
+  mounted() {
+    window.addEventListener("scroll", this.handleScroll);
+  },
+  created() {
+    this.changeTabBarActive();
+  },
   methods: {
-    handleScroll () {
-  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+    handleScroll() {
+      var scrollTop =
+        window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop;
 
-  if (scrollTop > 200) {
-    this.searchBarFixed = true
-  } else {
-    this.searchBarFixed = false
-  }
-},
+      if (scrollTop > 200) {
+        this.searchBarFixed = true;
+      } else {
+        this.searchBarFixed = false;
+      }
+    },
+    changeTabBarActive() {
+      this.nowPath = this.$route.path;
+      if (this.nowPath == "/") {
+        this.activeIndex = "1";
+      } else if (this.nowPath == "/solution") {
+        this.activeIndex = "2";
+      } else if (this.nowPath == "/productCenter") {
+        this.activeIndex = "3";
+      } else if (this.nowPath == "/newsInformation") {
+        this.activeIndex = "4";
+      } else {
+        this.activeIndex = "5";
+      }
+    },
     handleSelect(key, keyPath) {
       if (key === "2") {
         this.activeIndex = "2";
@@ -54,18 +74,6 @@ export default {
         this.$router.push("/");
       }
       console.log(key, keyPath);
-      this.nowPath = this.$route.path;
-      if (this.nowPath == "/") {
-        this.activeIndex = "1";
-      } else if (this.nowPath == "/solution") {
-        this.activeIndex = "2";
-      } else if (this.nowPath == "/productCenter") {
-        this.activeIndex = "3";
-      } else if (this.nowPath == "/newsInformation") {
-        this.activeIndex = "4";
-      } else {
-        this.activeIndex = "5";
-      }
     }
   }
 };
@@ -79,29 +87,26 @@ export default {
   top: 0;
   padding: 20px 0;
   background-color: transparent;
-  z-index: 2;
+  z-index: 99;
 }
-.up{
-   background-color: #0F1C38;
-   transition: all 2s;
+.up {
+  background-color: #0f1c38;
+  transition: all 2s;
 }
-.header-tab .header-img{
+.header-tab .header-img {
   width: 248px;
   height: 35px;
 }
 .header-tab .el-menu.el-menu--horizontal {
   border: none;
 }
-.header-tab .el-menu{
-  padding-left: 30px; 
+.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(
-    transparent ,
-    #4E84FF 100%
-  );
+  background: repeating-linear-gradient(transparent, #4e84ff 100%);
 }
 .header-tab .el-menu--horizontal > .el-menu-item {
   height: 20px;

src/components/pages/aboutUs/aboutUs.vue

@@ -93,7 +93,7 @@ export default {
       .logo {
         width: 303px;
         height: 110px;
-        box-shadow: 0px 1px 3px 0 #4165f2;
+        box-shadow: 0px 0px 5px 0 #4171f2;
         margin-bottom: 20px;
         border-radius: 4px;
         .logo1 {

src/components/pages/index.vue

@@ -1,170 +1,349 @@
-<template>
-  <div class="hello">
-    <headerTab></headerTab>
-  <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="part1-tit">荟房智慧管家</p>
-        <span>智慧案场</span>
-        <span>迎宾系统</span>
-        <span>智慧社区</span>
-        <p class="part1-desc">您最贴心的地产智慧管家</p>
-        <p class="part1-tip">银城旗下品牌</p>
-
-      </div>
-    </div>
-    <div class="page-2 page">
-          <div class="part-1" v-animate="{value: 'bounceInRight'}">
-        <p class="part1-tit">荟房智慧管家</p>
-        <span>智慧案场</span>
-        <span>迎宾系统</span>
-        <span>智慧社区</span>
-        <p class="part1-desc">您最贴心的地产智慧管家</p>
-        <p class="part1-tip">银城旗下品牌</p>
-      </div>
-    </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>
-</template>
-
-<script>
-import headerTab from "@/components/commonComponents/headerTab";
-import footerNav from "@/components/commonComponents/footerNav";
-
-export default {
-  components: { headerTab, footerNav },
-  data() {
-    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 lang="less">
-html{
-  overflow:auto;
-}
-.hello {
-  width: 100%;
-  height: 100%;
-  .page-container {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    .page {
-      height: 100%;
-      width: 100%;
-    }
-  }
-  .page-1 {
-    background: url("../../assets/image/home/background/Group2.jpg") no-repeat
-      center;
-    width: 100%;
-    height: 100%;
-    background-size: 100% 100%;
-    .part-1 {
- 
-      color: #fff;
-      position: relative;
-      top: 50%;
-      margin-top: -140px;
-      // transform: translateX(605px);
-      .part1-tit{
-        width: 480px;
-        font-size: 80px;
-        border-bottom: 4px solid #3B99FC;
-        margin: 0 auto;
-      }
-      span{
-        display: inline-block;
-        font-size: 34px;
-        margin: 15px 30px 10px 30px ;
-        letter-spacing:9px;
-      }
-      .part1-desc{
-        font-size: 34px;
-         letter-spacing:9px;
-      }
-      .part1-tip{
-        background-color: #4E84FF;
-        font-size: 24px;
-        margin: 20px auto;
-        width: 350px;
-         letter-spacing:26px;
-         height: 40px;
-         line-height: 40px;
-         border-radius: 4px;
-         padding-left: 16px;
-      }
-    }
-  }
-  .page-2 {
-    background: url("../../assets/image/home/background/Group26.jpg") no-repeat
-      center;
-    width: 100%;
-    height: 100%;
-    background-size: 100% 100%;
-    .part-1 {
- 
-      color: #fff;
-      position: relative;
-      top: 50%;
-      margin-top: -140px;
-      // transform: translateX(605px);
-      .part1-tit{
-        width: 480px;
-        font-size: 80px;
-        border-bottom: 4px solid #3B99FC;
-        margin: 0 auto;
-      }
-      span{
-        display: inline-block;
-        font-size: 34px;
-        margin: 15px 30px 10px 30px ;
-        letter-spacing:9px;
-      }
-      .part1-desc{
-        font-size: 34px;
-         letter-spacing:9px;
-      }
-      .part1-tip{
-        background-color: #4E84FF;
-        font-size: 24px;
-        margin: 20px auto;
-        width: 350px;
-         letter-spacing:26px;
-         height: 40px;
-         line-height: 40px;
-         border-radius: 4px;
-         padding-left: 16px;
-      }
-    }
-  }
-}
-</style>
-
+<template>
+<div>
+	<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 animated bounceInLeft" >
+        <p class="part1-tit">荟房智慧管家</p>
+        <span>智慧案场</span>
+        <span>迎宾系统</span>
+        <span>智慧社区</span>
+        <p class="part1-desc">您最贴心的地产智慧管家</p>
+        <p class="part1-tip">银城旗下品牌</p>
+		
+
+      </div>
+    </div>
+			<div class="page-2">
+				<p class="title">一站式解决方案</p>
+				<img  :class="page2 == true ? 'animated flipInX' :''" src="../../assets/image/home/littleImg/second.png" alt="">
+			</div>
+			<div class="page-3">
+				<p class="title">产品简介</p>
+				<div class="produce">
+					<div class="list first"  :class="page3 == true ? 'animated bounceInLeft' :''">
+						<p class="list-name">AI迎宾判客系统</p>
+							<img src="../../assets/image/home/produce/Group45.png" alt="">
+							<p class="list-desc">智慧人脸风控应用于案场、地铁、银行等</p>
+					</div>
+					<div class="list"  :class="page3 == true ? 'animated rotateInDownRight' :''">
+						<p class="list-name">智慧大屏机</p>
+							<img src="../../assets/image/home/produce/Group46.png" alt="">
+							<p class="list-desc">无人售楼终端机结合VR技术, 沉浸式看房体验</p>
+					</div>
+					<div class="list"  :class="page3 == true ? 'animated bounceInDown' :''">
+						<p class="list-name">银城慧家APP</p>
+							<img src="../../assets/image/home/produce/Group47.png" alt="">
+							<p class="list-desc">智慧社区管理软件,一键开启智慧社区美好生活</p>
+					</div>
+					<div class="list"  :class="page3 == true ? 'animated bounceInRight' :''">
+						<p class="list-name">全楼盘</p>
+							<img src="../../assets/image/home/produce/Group48.png" alt="">
+							<p class="list-desc">线上售楼处平台, 满足开发商和购房者共同需求</p>
+					</div>
+				
+					
+				</div>
+			</div>
+			<div  class="page-4">
+					<p class="title">技术优势</p>
+			</div>
+			<div  class="page-5">
+					<p class="title">我们的客户</p>
+					<div class="logo-box">
+						<img src="../../assets/image/home/logo/Group29.png" alt="">
+						<img src="../../assets/image/home/logo/Group32.png" alt="">
+						<img src="../../assets/image/home/logo/Group35.png" alt="">
+						<img src="../../assets/image/home/logo/Group40.png" alt="">
+						<img src="../../assets/image/home/logo/Group41.png" alt="">
+
+						<img src="../../assets/image/home/logo/Group30.png" alt="">
+						<img src="../../assets/image/home/logo/Group33.png" alt="">
+						<img src="../../assets/image/home/logo/Group36.png" alt="">
+						<img src="../../assets/image/home/logo/Group39.png" alt="">
+						<img src="../../assets/image/home/logo/Group42.png" alt="">
+
+						<img src="../../assets/image/home/logo/Group31.png" alt="">
+						<img src="../../assets/image/home/logo/Group34.png" alt="">
+						<img src="../../assets/image/home/logo/Group37.png" alt="">
+						<img src="../../assets/image/home/logo/Group38.png" alt="">
+						<img src="../../assets/image/home/logo/Group43.png" alt="">
+					</div>
+					
+					<footerNav></footerNav>
+			</div>
+		</div>
+		<div class="fixed-list">
+			<div v-for="(i,index) in bannerList" :class="fullPage==index?'color':''" @click="pageInfo(index)"  :key="index+'fiexd'">
+			</div>
+		</div>
+
+	</div>
+
+	</div>
+</template>
+<script>
+import headerTab from "@/components/commonComponents/headerTab";
+import footerNav from "@/components/commonComponents/footerNav";
+
+export default {
+  components: { headerTab, footerNav },
+  data() {
+    return {
+      bannerList: [
+        //盒子背景颜色
+        {
+          width: "100%"
+        },
+        {
+          width: "100%"
+        },
+        {
+          width: "100%"
+        },
+        {
+          width: "100%"
+        },
+        {
+          width: "100%"
+        }
+      ],
+      offsetheight: document.documentElement.clientHeight, //获取当前页面的高度
+      fullPage: 0, //当前在第几页
+      fullPageNum: false, //是否在滑动
+      page2: false, //是否在第二页
+      page3: false, //是否在第三页
+    };
+  },
+  mounted() {
+    //
+
+    //在元素加载完毕的时候添加鼠标滑动事件
+    //
+    if (document.addEventListener) {
+      document.addEventListener("DOMMouseScroll", this.scroll, false);
+    }
+    window.onmousewheel = document.onmousewheel = this.scroll;
+  },
+  methods: {
+    //
+    //点击左侧小点时跳转到相应的page
+    //
+    pageInfo(index) {
+      this.fullPage = index;
+    },
+    //
+    //鼠标事件
+    //
+    scroll(e) {
+      e = e || window.event;
+      //
+      //是否正在滑动
+      //
+      if (this.fullPageNum) {
+        return false;
+      }
+      //
+      //   e.wheelDelta为负数时向下滑动
+      //
+      if (e.wheelDelta < 0) {
+        if (this.fullPage >= 4) {
+          return false;
+        }
+        this.fullPageNum = true;
+        this.pageInfo(this.fullPage + 1);
+        //
+        //  css设置动画事件为1000，所以等到1000ms后滚动状态为false
+        //
+        setTimeout(() => {
+          this.fullPageNum = false;
+        }, 500);
+        //
+        //   否则就是向上划
+        //
+      } else {
+        if (this.fullPage <= 0) {
+          return false;
+        }
+        this.fullPageNum = true;
+        this.pageInfo(this.fullPage - 1);
+        setTimeout(() => {
+          this.fullPageNum = false;
+        }, 1000);
+      }
+      console.log(this.fullPage, "fullPage");
+      if (this.fullPage == "2") {
+        this.page3 = true;
+      }else{
+		   this.page3 = false;
+	  }
+      if (this.fullPage == "1") {
+        this.page2 = true;
+      }else{
+		   this.page2 = false;
+	  }
+    }
+  }
+};
+</script>
+<style lang="less">
+.section {
+  overflow: hidden;
+  .page-1 {
+    background: url("../../assets/image/home/background/Group2.jpg") no-repeat
+      center;
+    width: 100%;
+    height: 100%;
+    background-size: 100% 100%;
+    .part-1 {
+      color: #fff;
+      position: relative;
+      top: 50%;
+      margin-top: -140px;
+      // transform: translateX(605px);
+      .part1-tit {
+        width: 480px;
+        font-size: 80px;
+        border-bottom: 4px solid #3b99fc;
+        margin: 0 auto;
+      }
+      span {
+        display: inline-block;
+        font-size: 34px;
+        margin: 15px 30px 10px 30px;
+        letter-spacing: 9px;
+      }
+      .part1-desc {
+        font-size: 34px;
+        letter-spacing: 9px;
+      }
+      .part1-tip {
+        background-color: #4e84ff;
+        font-size: 24px;
+        margin: 20px auto;
+        width: 350px;
+        letter-spacing: 26px;
+        height: 40px;
+        line-height: 40px;
+        border-radius: 4px;
+        padding-left: 16px;
+      }
+    }
+  }
+  .page-2 {
+    background: url("../../assets/image/home/background/Group26.jpg") no-repeat
+      center;
+    width: 100%;
+    height: 100%;
+    background-size: 100% 100%;
+    color: #fff;
+    .title {
+      font-size: 56px;
+      padding-top: 200px;
+    }
+    img {
+      width: 100%;
+    }
+  }
+  .page-3 {
+    background: url("../../assets/image/home/background/Group27.jpg") no-repeat
+      center;
+    width: 100%;
+    height: 100%;
+    background-size: 100% 100%;
+    .title {
+      font-size: 56px;
+      padding-top: 140px;
+      color: #fff;
+    }
+    .produce {
+      width: 1000px;
+      height: 680px;
+      margin: 20px auto;
+      .list {
+        width: 400px;
+        height: 300px;
+        background-color: #fff;
+        border-radius: 4px;
+        padding: 0 40px;
+        margin: 10px;
+        float: left;
+        .list-name {
+          color: #03033f;
+          border-bottom: 2px dashed #040445;
+          padding: 30px 0 18px 0;
+          font-size: 30px;
+        }
+        img {
+          width: 330px;
+          height: 150px;
+          margin-top: 16px;
+        }
+        .list-desc {
+          font-size: 18px;
+          line-height: 36px;
+          color: #000;
+        }
+      }
+    }
+  }
+  .page-4 {
+    background: url("../../assets/image/home/background/Group28.jpg") no-repeat
+      center;
+    width: 100%;
+    height: 100%;
+    background-size: 100% 100%;
+    .title {
+      font-size: 60px;
+      padding-top: 140px;
+      color: #fff;
+    }
+  }
+  .page-5 {
+    background: url("../../assets/image/home/background/Group29.jpg") no-repeat
+      center;
+    width: 100%;
+    height: 100%;
+    background-size: 100% 100%;
+    .title {
+      font-size: 56px;
+      padding-top: 180px;
+      color: #fff;
+    }
+    .logo-box {
+      width: 1200px;
+      height: 320px;
+      margin: 50px auto 60px auto;
+      img {
+        width: 230px;
+        height: 100px;
+        float: left;
+        margin: 5px;
+      }
+    }
+  }
+}
+.container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transform: translate3d(0px, 0px, 0px);
+  transition: all 1000ms ease;
+}
+.fixed-list {
+  position: fixed;
+  top: 46%;
+  right: 20px;
+  z-index: 2;
+  div {
+    width: 10px;
+    height: 10px;
+    background: #ccc;
+    margin-bottom: 14px;
+  }
+  div.color {
+    background: #4e84ff;
+  }
+}
+</style>

src/components/pages/solution/solution.vue

@@ -2,16 +2,16 @@
   <div class="solution">
       <headerTab></headerTab>
         <div class="title">
-        <p class="tit">智慧案场</p>
-        <p class="label">精准营销、人脸抓取、智能判客</p>
-        <p class="desc">Intelligent face risk control system</p>
+        <p class="tit">{{title}}</p>
+        <p class="label">{{desc}}</p>
+        <p class="label">{{desc2}}</p>
+        <p class="desc">{{engdesc}}</p>
       </div>  
-      <div class="solution-main">
-
-      
+      <div class="solution-main"> 
       <el-tabs class="tab-bar" v-model="activeName" @tab-click="handleClick">
         <el-tab-pane name="first">
             <span slot="label"> <img src="../../../assets/image/program/building.png" alt="">智慧案场</span>
+            <div class="problem-box">
            <div class="main-box">
              <p class="con-tit">痛点描述</p>
              <span class="con-desc">Existing problem</span>
@@ -22,18 +22,288 @@
                <div class="img-con"><img src="../../../assets/image/wisdom/wisdom04.jpg" alt="">客户归属、划分不清</div>
              </div>
            </div>
+           <div class="programme-box">
+                 <p class="con-tit">解决实践</p>
+             <span class="con-desc">The solution</span>
+             <div class="programme-con">
+               <img class="hudong" src="../../../assets/image/wisdom/group01.png" alt="">
+               <img class="shuzi" src="../../../assets/image/wisdom/group02.png" alt="">
+               <img class="zhineng" src="../../../assets/image/wisdom/group03.png" alt="">
+               <img class="yunduan" src="../../../assets/image/wisdom/group04.png" alt="">
+               <img class="line-one" src="../../../assets/image/wisdom/line/3.png" alt="">
+               <img class="line-two" src="../../../assets/image/wisdom/line/2.png" alt="">
+               <img class="line-three" src="../../../assets/image/wisdom/line/1.png" alt="">
+               <div class="con-one text-con">
+                 <img src="../../../assets/image/wisdom/hudong.png" alt="">
+                 <p class="text-tit">刷脸互动，精准营销</p>
+                 <p class="text-desc">多点部署刷脸广告机，以增加趣味性</p>
+                 <p class="text-desc">楼盘信息精准推送</p>
+               </div>
+               <div class="con-two text-con">
+                 <img src="../../../assets/image/wisdom/yinxiao.png" alt="">
+                 <p class="text-tit">数字化营销手段更易传播</p>
+                 <p class="text-desc">自媒体时代新工具 </p>
+                 <p class="text-desc">楼盘信息小程序一键分享，不受时间空间限制、线上预约更方便</p>
+               </div>
+               <div class="con-three text-con">
+                 <img src="../../../assets/image/wisdom/zhuapai.png" alt="">
+                 <p class="text-tit">智能人脸、车牌抓拍</p>
+                 <p class="text-desc">无感自适应识别，准确率达99%、专业地产案场场景设计</p>
+                 <p class="text-desc">VIP迎宾，提升接待服务</p>
+               </div>
+               <div class="con-four text-con">
+                 <img src="../../../assets/image/wisdom/pipei.png" alt="">
+                 <p class="text-tit">云端智能匹配到数据库</p>
+                 <p class="text-desc">自动识别标记自然访客与渠道客户、有效防止截客、飞单 </p>
+                 <p class="text-desc">低成本，高效率</p>
+               </div>
+          
+             </div>
+           </div>
+           <div class="best-box">
+               <p class="con-tit">最佳方案</p>
+             <span class="con-desc">Successful cases</span>
+             <div class="best-con">
+               <div class="logo">
+                 <img src="../../../assets/image/logoicon/Bitmap.png" alt="">
+                 <span>智慧大屏机</span>
+               </div>
+               <div class="logo">
+                 <img src="../../../assets/image/logoicon/yinchenglogo.png" alt="">
+                 <span>全案发布平台</span>
+               </div>
+               <div class="logo">
+                 <img src="../../../assets/image/logoicon/aicustomer.png" alt="">
+                 <span>AI迎宾判客系统</span>
+               </div>
+             </div>
+           </div>
+           </div>
+           <footerNav></footerNav>
         </el-tab-pane>
+        
         <el-tab-pane  name="second">
             <span slot="label"><img src="../../../assets/image/program/house.png" alt="">智慧社区</span>
-            智慧社区
+            <div class="second-box">
+            <div class="community-box">
+              <p class="con-tit">智慧社区组成</p>
+              <p class="con-desc">Smart community composition</p>
+              <div class="community-con">
+                <div class="make-up">
+                  <div class="make-img">
+                    <img src="../../../assets/image/program/community/group10.png" alt="">
+                  </div>
+                  <p>智能门禁</p>
+                </div>
+                <div class="make-up">
+                     <div class="make-img">
+                  <img src="../../../assets/image/program/community/group01.png" alt="">
+                  </div>
+                  <p>智慧出行</p>
+                </div>
+                <div class="make-up">
+                  <div class="make-img">
+                    <img src="../../../assets/image/program/community/group07.png" alt="">
+                  </div>
+                  <p>智慧家居</p>
+                </div>
+                <div class="make-up">
+                  <div class="make-img">
+                    <img src="../../../assets/image/program/community/group02.png" alt="">
+                  </div>
+                  <p>智慧安防</p>
+                </div>
+                <div class="make-up">
+                  <div class="make-img">
+                    <img src="../../../assets/image/program/community/group09.png" alt="">
+                  </div>
+                  <p>智慧空间</p>
+                </div>
+                <div class="make-up">
+                  <div class="make-img">
+                    <img src="../../../assets/image/program/community/group04.png" alt="">
+                  </div>
+                  <p>自助大堂</p>
+                </div>
+                <div class="make-up">
+                  <div class="make-img">
+                    <img src="../../../assets/image/program/community/group05.png" alt="">
+                  </div>
+                  <p>智慧管家</p>
+                </div>
+              </div>
+            </div>
+            <div class="page-main main-first">
+              <p class="con-tit">智慧社区拓扑图</p>
+              <p class="con-desc">Topology of smart community</p>
+              <div class="page-box">
+                <img class="smart-img" src="../../../assets/image/program/community/Resource01.png" alt="">
+              </div>
+            </div>
+            <div class="page-main">
+              <p class="con-tit" style="width:120px;">解决方案</p>
+              <p class="con-desc">The solution</p>
+             <img class="solution-img" src="../../../assets/image/program/community/G2.png" alt="">
+            </div>
+               <div class="page-main super-box">
+                 <p class="con-tit" style="width:60px;">超脑</p>
+              <p class="con-desc">Super brain</p>
+              <div class="page-box"> 
+                <img class="img-up" src="../../../assets/image/program/community/group03.png" alt="">
+                 <img class="img-down" src="../../../assets/image/program/community/group06.png" alt="">
+                <img class="super-img" src="../../../assets/image/program/community/Resource02.png" alt="">
+                <div class="super-con super-one">
+                  <p class="super-tit">整合操作系统</p>
+                  <p class="super-desc">超脑平台一方面可以整合Windows和linux两个操作系统，通过操作系统内部署硬件厂商的软件系统来管理硬件。</p>
+                </div>
+                <div class="super-con super-two">
+                  <p class="super-tit">软件整合便于管理</p>
+                  <p class="super-desc">超脑平台通过荟房自主研发技术整合各个厂商的软件系统，形成统一的界面，便于管理社区各个硬件。</p>
+                </div>
+                <div class="super-con super-three">
+                  <img src="../../../assets/image/program/community/group08.png" alt="">
+                  <p class="super-tit">加快建设步伐</p>
+                  <p class="super-desc">不同的社区采购的硬件类别可能不同，厂商也可能不同。此时，只需接入超脑平台，即可打破各协议标准的屏障，加快智慧社区建设步伐。</p>
+                </div>
+                <div class="super-con super-four">
+                  <img src="../../../assets/image/program/community/group11.png" alt="">
+                  <p class="super-tit">方便用户使用</p>
+                  <p class="super-desc">对物业工作人员而言，不光免除需记住多个厂商的账号密码来进入社区各管理系统的繁杂。对于社区居民则大大提高了其用户体验，只需通过一个APP，即可在社区内畅行无阻。</p>
+                </div>
+              </div>
+              <p class="super-text">智慧社区作为新形势下社会管理创新的一种新模式，充分利用物联网、云计算、移动互联网等新一代信息技术的集成应用，为社区居民提供一个安全、舒适、便利的现代化、智慧化生活环境。而作为智慧社区不可或缺的智能硬件品类繁多，产品开发还面临多种协议标准的抉择，导致归属不同厂商的的不同硬件很难做到相互兼容，限制了各智能硬件的协同集成发展，故而提出“智慧社区超脑计划”。 </p>
+              <p class="super-text">为了更加快速有效的进行硬件对接及调试，我们倾尽开发能力打造了“超脑平台”。该平台可实现不同品牌、不同类型、不同接口的硬件设备轻松对接，对接完成后，再由超脑对接云端。在智慧社区建设中可以减轻后期开发量，缩短开发时间，提升效率。</p>
+            </div>
+              <div class="page-main">
+              <p class="con-tit" style="width:120px;">智慧家居</p>
+              <p class="con-desc">Intelligent household</p>
+             <img class="solution-img" src="../../../assets/image/program/community/Resource08.jpg" alt="">
+            </div>
+              <div class="page-main">
+              <p class="con-tit">美好生活畅想</p>
+              <p class="con-desc">Imagine a better life</p>
+             <img class="life-img" style="margin-top:40px;" src="../../../assets/image/program/community/Resource06.jpg" alt="">
+             <img class="life-img" src="../../../assets/image/program/community/Resource05.jpg" alt="">
+             <img class="life-img" src="../../../assets/image/program/community/Resource07.jpg" alt="">
+             <img class="life-img" src="../../../assets/image/program/community/Resource04.jpg" alt="">
+             <img class="life-img" style="margin-bottom:60px;" src="../../../assets/image/program/community/Resource03.jpg" alt="">
+            </div>
+            </div>
+            <footerNav></footerNav>
+
         </el-tab-pane>
         <el-tab-pane name="third">
             <span slot="label" ><img src="../../../assets/image/program/orderImg.png" alt="">产品定制</span>
-            产品定制
+            <div class="third-box">
+          <div class="main-box">
+             <p class="con-tit">痛点描述</p>
+             <span class="con-desc">Existing problem</span>
+             <div class="img-box">
+             <div class="img-con"><img src="../../../assets/image/program/order/Bitmap.jpg" alt="">自建团队费时费力成本高</div>
+             <div class="img-con"><img src="../../../assets/image/program/order/Bitmap2.jpg" alt="">存在技术壁垒，项目周期长</div>
+             <div class="img-con"><img src="../../../assets/image/program/order/Bitmap3.jpg" alt="">企业业务分散，难专注</div>
+            </div>
+          </div>
+             <div class="main-box">
+             <p class="con-tit">解决方案</p>
+             <span class="con-desc">The solution</span>
+             <div class="label-box">
+               <div class="label-con" :class="bgHover==1?'hover-div':''"  @mouseenter="divHover(1)">
+                 <div class="label-img">
+                 <img v-if="bgHover==1" src="../../../assets/image/program/order/team1.png" alt="">
+                 <img v-if="bgHover!=1" src="../../../assets/image/program/order/team.png" alt="">
+                 </div>
+                 <p class="label-tit">专业开发团队</p>
+                 <p class="label-desc">团队拥有丰富实战经验，千万金额成功项目，实力不容小觑</p>
+               </div>
+               <div class="label-con" :class="bgHover==2?'hover-div':''"  @mouseenter="divHover(2)">
+                 <div class="label-img">
+                 <img v-if="bgHover==2" src="../../../assets/image/program/order/cost1.png" alt="">
+                 <img v-if="bgHover!=2" src="../../../assets/image/program/order/cost.png" alt="">
+                 </div>
+                 <p class="label-tit">开发费用透明</p>
+                 <p class="label-desc">消除行业壁垒，信息不对称问题，价格透明，比肩行业水平</p>
+               </div>
+               <div class="label-con" :class="bgHover==3?'hover-div':''"  @mouseenter="divHover(3)">
+                 <div class="label-img">
+                 <img v-if="bgHover==3" src="../../../assets/image/program/order/time1.png" alt="">
+                 <img v-if="bgHover!=3" src="../../../assets/image/program/order/time.png" alt="">
+                 </div>
+                 <p class="label-tit">高质按时交付</p>
+                 <p class="label-desc">不随意拖延开发工期，保证高质量按时交付成品</p>
+               </div>
+               <div class="label-con" :class="bgHover==4?'hover-div':''"  @mouseenter="divHover(4)">
+                 <div class="label-img">
+                 <img v-if="bgHover==4" src="../../../assets/image/program/order/Operation.png" alt="">
+                 <img v-if="bgHover!=4" src="../../../assets/image/program/order/Operation1.png" alt="">
+                 </div>
+                 <p class="label-tit">持续运营支持</p>
+                 <p class="label-desc">按需提供软件上线后运营支持，修复漏洞服务</p>
+               </div>
+               <div class="label-con" :class="bgHover==5?'hover-div':''"  @mouseenter="divHover(5)">
+                 <div class="label-img">
+                 <img  v-if="bgHover==5" src="../../../assets/image/program/order/afterSale1.png" alt="">
+                 <img  v-if="bgHover!=5" src="../../../assets/image/program/order/afterSale.png" alt="">
+                 </div>
+                 <p class="label-tit">售后服务周到</p>
+                 <p class="label-desc">秉承顾客至上理念，全方位跟进需求，专业解答您的所有疑惑</p>
+               </div>
+             
+            </div>
+           </div>
+               <div class="main-box">
+             <p class="con-tit">业务范围</p>
+             <span class="con-desc">The business scope</span>
+             <div class="business-box">
+               <div class="business-con" :class="colorHover==0?'hover-con':''"  @mouseenter="spanHover(0)">
+                 <img src="../../../assets/image/program/order/web.png" alt="">
+                 <p class="business-tit">web应用程序</p>
+                 <p class="business-desc">基于互联网，浏览器端的应用程序</p>
+               </div>
+               <div class="business-con" :class="colorHover==1?'hover-con':''"  @mouseenter="spanHover(1)">
+                 <img src="../../../assets/image/program/order/app.png" alt="">
+                 <p class="business-tit">APP软件开发</p>
+                 <p class="business-desc">基于iOS/Android应用开发 掌控智能终端时代</p>
+               </div>
+               <div class="business-con" :class="colorHover==2?'hover-con':''"  @mouseenter="spanHover(2)">
+                 <img src="../../../assets/image/program/order/wx.png" alt="">
+                 <p class="business-tit">微信二次开发</p>
+                 <p class="business-desc">定制手机网站 制作 布局移动互联网</p>
+               </div>
+               <div class="business-con" :class="colorHover==3?'hover-con':''"  @mouseenter="spanHover(3)">
+                 <img src="../../../assets/image/program/order/Applets.png" alt="">
+                 <p class="business-tit">小程序/H5定制</p>
+                 <p class="business-desc">满足各类移动营销需求</p>
+               </div>
+               <div class="business-con" :class="colorHover==4?'hover-con':''"  @mouseenter="spanHover(4)">
+                 <img src="../../../assets/image/program/order/software.png" alt="">
+                 <p class="business-tit">系统软件开发</p>
+                 <p class="business-desc">CRM\ERP\OA等软件系统的设计开发</p>
+               </div>
+               <div class="business-con" :class="colorHover==5?'hover-con':''"  @mouseenter="spanHover(5)">
+                 <img src="../../../assets/image/program/order/UI.png" alt="">
+                 <p class="business-tit">界面品牌设计</p>
+                 <p class="business-desc">专业高端视角页面设计 树立品牌形象</p>
+               </div>
+            </div>
+          <div class="main-box">
+             <p class="con-tit">最佳实践</p>
+             <span class="con-desc">Successful cases</span>
+             <div class="cases-box">
+                    <div class="cases-con"><img src="../../../assets/image/program/order/huiju.png" alt="">二手房</div>
+                    <div class="cases-con"><img src="../../../assets/image/program/order/quan.png" alt="">全渠道在线平台</div>
+                    <div class="cases-con" ><img style="height:40px;margin:50px auto;" src="../../../assets/image/program/order/yuejian.png" alt="">微楼书</div>
+                    <div class="cases-con"><img src="../../../assets/image/program/order/h5.png" alt="">H5</div>
+                    <div class="cases-con"><img src="../../../assets/image/program/order/Applets.png" alt="">小程序</div>
+            </div>
+            </div>
+            </div>
+            </div>
+            <footerNav></footerNav>
         </el-tab-pane>
       </el-tabs>
   </div>
-    <footerNav></footerNav>
+    
 
   </div>
 </template>
@@ -47,12 +317,41 @@ export default {
 
   data() {
     return {
-      activeName: "first"
+      activeName: "first",
+      title: "智慧案场",
+      desc: "精准营销、人脸抓取、智能判客",
+      desc2: "",
+      engdesc: "Intelligent face risk control system",
+      colorHover: 2,
+      bgHover: 3
     };
   },
   methods: {
     handleClick(tab, event) {
       console.log(tab, event);
+      if (this.activeName === "second") {
+        this.title = "智慧社区服务平台 ";
+        this.desc = "一个全系平台，四大集群系统";
+        this.desc2 = "";
+        this.engdesc = "Intelligent face risk control system";
+      } else if (this.activeName === "third") {
+        this.title = "按需定制";
+        this.desc = "软件开发 我们更懂你 ";
+        this.desc2 = "我们提供的就是您想要的服务";
+        this.engdesc = "We provide the service you want";
+      } else {
+        this.title = "智慧案场";
+        this.desc = "精准营销、人脸抓取、智能判客";
+        this.desc2 = "";
+        this.engdesc = "Intelligent face risk control system";
+      }
+    },
+
+    spanHover(index) {
+      this.colorHover = index;
+    },
+    divHover(index) {
+      this.bgHover = index;
     }
   }
 };
@@ -71,23 +370,22 @@ export default {
     color: #fff;
     .tit {
       font-size: 64px;
-      padding-top: 240px;
+      padding-top: 220px;
       font-weight: 100;
+      line-height: 100px;
     }
     .label {
       font-size: 40px;
-      line-height: 90px;
+      line-height: 60px;
+      font-weight: 100;
     }
     .desc {
       font-size: 12px;
       letter-spacing: 4px;
-      line-height: 40px;
+      line-height: 50px;
     }
   }
   .solution-main {
-    background: url("../../../assets/image/bg.png") no-repeat center;
-    background-size: 100% 6000px;
-    height: -webkit-fill-available;
     width: 100%;
     .tab-bar {
       height: 100px;
@@ -96,8 +394,14 @@ export default {
       border-radius: 10px;
       box-shadow: 0px 1px 4px 0px #4165f2;
       margin-top: -55px;
+      .problem-box {
+        background-size: 100% 7300px;
+        background-image: -webkit-linear-gradient(#ebf1fc, #fdfcff, #e9f0fe);
+        background: url("../../../assets/image/bg.png") no-repeat 0 70px;
+      }
       .el-tabs__header {
         height: 100px;
+        margin: 0;
         .el-tabs__active-bar {
           top: 0;
           height: 10px;
@@ -120,6 +424,8 @@ export default {
       }
       .main-box {
         width: 100%;
+        margin-top: -120px;
+        padding: 110px 0;
         .con-tit {
           background: repeating-linear-gradient(transparent, #4e84ff 100%);
           width: 120px;
@@ -134,21 +440,429 @@ export default {
           line-height: 40px;
           color: #4e84ff;
         }
-        .img-box{
-
-          margin:  0 auto;
-          .img-con{
+        .img-box {
+          margin: 20px auto 0 auto;
+          .img-con {
             width: 288px;
             height: 250px;
             border-radius: 6px;
-            background-color: #999;
+            background-color: rgb(243, 240, 240);
+            margin: 0 5px;
             display: inline-block;
-            img{
+            line-height: 50px;
+            color: #808080;
+            img {
               display: block;
               width: 100%;
-              
+              border-radius: 6px 6px 0 0;
+            }
+          }
+        }
+        .label-box {
+          margin: 20px auto 0 auto;
+          width: 1300px;
+          .label-con {
+            width: 230px;
+            height: 160px;
+            box-shadow: 0px 0px 4px 0px #4181f2;
+            display: inline-block;
+            border-radius: 4px;
+            background-color: #fff;
+            margin: 0 10px;
+            .label-img {
+              width: 40px;
+              height: 40px;
+              background-color: #4e84ff;
+              border-radius: 20px;
+              margin: -20px auto 0 auto;
+              img {
+                width: 22px;
+                margin-top: 9px;
+              }
+            }
+            .label-tit {
+              font-size: 17px;
+              color: #000;
+              font-weight: 600;
+              margin-top: 20px;
+              line-height: 34px;
+            }
+            .label-desc {
+              font-size: 13px;
+              color: #808080;
+              text-align: left;
+              padding: 0 20px;
+              line-height: 20px;
+            }
+          }
+          .hover-div {
+            background-color: #4e84ff;
+            .label-tit {
+              color: #fff;
+            }
+            .label-desc {
+              color: #fff;
+            }
+            .label-img {
+              background-color: #fff;
+              box-shadow: 0px 0px 4px 0px #4181f2;
+            }
+          }
+        }
+        .business-box {
+          margin: 30px auto;
+          width: 816px;
+          height: 360px;
+          .business-con {
+            width: 230px;
+            height: 150px;
+            margin: 10px 20px;
+            float: left;
+            border-radius: 4px;
+            img {
+              height: 38px;
+              margin-top: 12px;
+            }
+            .business-tit {
+              font-size: 18px;
+              color: #000;
+              font-weight: 600;
+              line-height: 36px;
+            }
+            .business-desc {
+              font-size: 13px;
+              color: #444;
+              line-height: 20px;
+              width: 130px;
+              margin: 0 auto;
+            }
+          }
+          .hover-con {
+            box-shadow: 0px 0px 4px 0px #4181f2;
+          }
+        }
+        .cases-box {
+          margin: 40px auto;
+          width: 1050px;
+          height: 30px;
+          .cases-con {
+            width: 190px;
+            height: 186px;
+            border-radius: 6px;
+            margin: 0 10px;
+            box-shadow: 0px 0px 4px 0px #4181f2;
+            font-size: 18px;
+            color: #000;
+            float: left;
+            img {
+              display: block;
+              height: 60px;
+              margin: 40px auto;
+            }
+          }
+        }
+      }
+      .programme-box {
+        // background-color: #e3e9fd;
+        min-height: 1000px;
+        padding-top: 80px;
+        .con-tit {
+          background: repeating-linear-gradient(transparent, #4e84ff 100%);
+          width: 120px;
+          margin: 0 auto;
+          font-size: 30px;
+          color: #000;
+        }
+        .con-desc {
+          font-size: 13px;
+          letter-spacing: 4px;
+          line-height: 40px;
+          color: #4e84ff;
+        }
+        .programme-con {
+          width: 940px;
+          min-height: 1160px;
+          margin: 40px auto 0 auto;
+          position: relative;
+          .hudong {
+            width: 300px;
+            position: absolute;
+            left: 80px;
+          }
+          .shuzi {
+            width: 340px;
+            position: absolute;
+            right: 0;
+            top: 230px;
+          }
+          .zhineng {
+            width: 330px;
+            position: absolute;
+            left: 0;
+            top: 550px;
+          }
+          .yunduan {
+            width: 280px;
+            position: absolute;
+            right: 100px;
+            top: 840px;
+          }
+          .line-one {
+            width: 490px;
+            height: 230px;
+            position: absolute;
+            right: 360px;
+            top: 60px;
+          }
+          .line-two {
+            width: 484px;
+            position: absolute;
+            left: 88px;
+            top: 320px;
+          }
+          .line-three {
+            width: 530px;
+            position: absolute;
+            right: 360px;
+            top: 560px;
+          }
+          .text-con {
+            text-align: left;
+            img {
+              width: 36px;
+            }
+            .text-tit {
+              font-size: 22px;
+              color: #000;
+              line-height: 40px;
+            }
+            .text-desc {
+              font-size: 17px;
+              color: #808080;
+            }
+          }
+          .con-one {
+            position: absolute;
+            right: 100px;
+            top: 20px;
+          }
+          .con-two {
+            position: absolute;
+            left: 70px;
+            top: 290px;
+          }
+          .con-three {
+            position: absolute;
+            right: -40px;
+            top: 580px;
+          }
+          .con-four {
+            position: absolute;
+            left: 40px;
+            top: 870px;
+          }
+        }
+      }
+      .best-box {
+        padding-top: 100px;
+        .con-tit {
+          background: repeating-linear-gradient(transparent, #4e84ff 100%);
+          width: 120px;
+          margin: 0 auto;
+          font-size: 30px;
+          color: #000;
+        }
+        .con-desc {
+          font-size: 13px;
+          letter-spacing: 4px;
+          line-height: 40px;
+          color: #4e84ff;
+        }
+        .best-con {
+          width: 930px;
+          height: 240px;
+          margin: 60px auto 0 auto;
+          .logo {
+            float: left;
+            width: 280px;
+            height: 130px;
+            box-shadow: 0px 0px 5px 0 #4171f2;
+            margin: 0 15px;
+            border-radius: 4px;
+            img {
+              margin-top: 30px;
+            }
+            span {
+              float: right;
+              margin: 60px 20px 0 0;
+              font-size: 18px;
+            }
+          }
+        }
+      }
+      .second-box {
+        background: url("../../../assets/image/bg.png") no-repeat 0 70px;
+        background-size: 100% 7300px;
+        width: 100%;
+      }
+      .community-box {
+        width: 100%;
+        margin-top: -120px;
+        background-image: -webkit-linear-gradient(#ebf1fc, #fdfcff, #e9f0fe);
+        padding: 110px 0;
+        z-index: 1;
+        .con-tit {
+          background: repeating-linear-gradient(transparent, #4e84ff 100%);
+          width: 180px;
+          font-size: 30px;
+          color: #000;
+          margin: 90px auto 0 auto;
+        }
+        .con-desc {
+          font-size: 13px;
+          letter-spacing: 4px;
+          line-height: 40px;
+          color: #4e84ff;
+        }
+        .community-con {
+          width: 980px;
+          margin: 60px auto 0 auto;
+          height: 120px;
+
+          .make-up {
+            width: 100px;
+            float: left;
+            margin: 0 20px;
+            .make-img {
+              width: 50px;
+              margin: 0 auto;
+              height: 46px;
+              img {
+                width: 40px;
+                max-height: 46px;
+                display: block;
+                margin: 0 auto;
+              }
+            }
+
+            p {
+              line-height: 40px;
+              font-size: 18px;
+              color: #000;
+              height: 40px;
+            }
+          }
+        }
+      }
 
+      .page-main {
+        width: 100%;
+        padding: 20px 0;
+        .con-tit {
+          background: repeating-linear-gradient(transparent, #4e84ff 100%);
+          width: 210px;
+          font-size: 30px;
+          color: #000;
+          margin: 50px auto 0 auto;
+        }
+        .con-desc {
+          font-size: 13px;
+          letter-spacing: 4px;
+          line-height: 40px;
+          color: #4e84ff;
+        }
+        .page-box {
+          width: 1000px;
+          box-shadow: 0px 0px 6px 0px #4e6ef0;
+          padding: 40px 0;
+          margin: 40px auto;
+          border-radius: 6px;
+          background-color: #fff;
+          .smart-img {
+            width: 820px;
+          }
+        }
+        .solution-img {
+          width: 1000px;
+          margin: 20px auto;
+        }
+        .life-img {
+          width: 1000px;
+        }
+      }
+      .main-first {
+        padding-top: 60px;
+      }
+      .super-box {
+        .page-box {
+          position: relative;
+          padding: 20px;
+          margin: 40px auto 20px auto;
+          .img-up {
+            position: absolute;
+            left: 20px;
+            top: -160px;
+            width: 36px;
+          }
+          .img-down {
+            position: absolute;
+            left: 20px;
+            top: -40px;
+            width: 36px;
+          }
+          .super-img {
+            width: 340px;
+          }
+          .super-con {
+            position: absolute;
+            width: 260px;
+            text-align: left;
+            .super-tit {
+              font-size: 16px;
+              color: #000;
+              line-height: 30px;
             }
+            .super-desc {
+              font-size: 13px;
+              color: #666;
+            }
+            img {
+              width: 34px;
+            }
+          }
+          .super-one {
+            left: 30px;
+            top: 120px;
+          }
+          .super-two {
+            left: 30px;
+            top: 260px;
+          }
+          .super-three {
+            right: 30px;
+            top: 50px;
+          }
+          .super-four {
+            right: 20px;
+            top: 200px;
+          }
+        }
+        .super-text {
+          font-size: 13px;
+          color: #666;
+          width: 1040px;
+          margin: 0 auto;
+          text-align: left;
+          line-height: 20px;
+        }
+      }
+      .third-box {
+        background: url("../../../assets/image/bg.png") no-repeat 0 90px;
+        background-size: 100% 7100px;
+        width: 100%;
+        .img-box {
+          .img-con {
+            margin: 0 26px;
           }
         }
       }

src/main.js

@@ -6,11 +6,13 @@ import router from './router'
 
 Vue.config.productionTip = false
 
-import 'animate.css'
+import animate from 'animate.css'
 import 'vue-fullpage/vue-fullpage.css'
 import VueFullpage from 'vue-fullpage'
 Vue.use(VueFullpage)
 
+Vue.use(animate)
+
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'