feats

src/App.vue

@@ -11,6 +11,10 @@ export default {
 </script>
 
 <style>
+*{
+  margin: 0;
+  padding: 0;
+}
 html,body,#app{
  height: 100%;
 }
@@ -21,8 +25,8 @@ html,body,#app{
   text-align: center;
   color: #2c3e50;
 }
-html,body,#app{
- height: 100%;
+html{
+   /* touch-action:none; */
 }
 .el-submenu__title i{
   display: none;
@@ -30,5 +34,40 @@ html,body,#app{
 .el-submenu__icon-arrow el-icon-arrow-down{
   display: none;
 }
+.el-carousel__mask{
+  background: rgba(0,0,0,0);
+  /* opacity: ;
+   */
+   /* background: linear-gradient() */
+   
+}
+.el-tabs__nav{
+  float: none;
+}
+.tab-bar el-tabs el-tabs--top{
+  width: 735px;
+  height: 110px;
+}
+
+.solution .solution-main .tab-bar {
+    height: 110px;
+    margin: 0 auto;
+    background-color: rgba(0,0,0,0) !important;
+    border-radius: 10px;
+    -webkit-box-shadow: 0px 0  !important;
+    box-shadow: 0px 0  !important;
+    margin-top: -55px;
+}
+.solution .solution-main .tab-bar .el-tabs__header{
+   z-index: 1000 ;
+    background-color: #fff !important;
+    width: 734px !important;
+    margin: auto !important;
+    border-radius: 10px !important;
+    box-shadow:0px 1px 14px 0px rgba(65,101,242,0.2);
+  }
+  .solution .solution-main .tab-bar .el-tabs__header .el-tabs__active-bar{
+    width: 95px !important;
+  }
 
 </style>

src/components/commonComponents/footerNav.vue

@@ -3,7 +3,7 @@
     <div class="footer-con">
       <p>友情链接：中华人民共和国公安部 ｜ 公安交警网 ｜ 中国人民保险 ｜ 中国平安 ｜ 阿里云 </p>
       <p>电话咨询: 025-57018336 周一到周日 9:00-18:00 ｜ 公司地址：南京市建邺区云锦路万达东坊630 ｜ 小鹿检测公众号 ｜ 小鹿检测小程序 </p>
-      <p> 2018 南京米鹿信息科技有限公司 苏ICP备17027893号-1</p>
+      <p> ©2018 南京米鹿信息科技有限公司 苏ICP备17027893号-1</p>
 
     </div>
 
@@ -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

@@ -5,12 +5,37 @@
         <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="2">解决方案</el-menu-item>
-          <el-menu-item index="3">产品中心</el-menu-item>
-          <el-menu-item index="4">新闻资讯</el-menu-item>
-          <el-menu-item index="5">关于我们</el-menu-item>
+        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" >
+          <el-menu-item index="1">
+            <div class="nav_tittle1">
+              <span>首页</span>
+              
+            </div>
+          </el-menu-item>
+          <el-menu-item index="2">
+            <div class="nav_tittle">
+              <span>解决方案</span>
+              
+            </div>
+          </el-menu-item>
+          <el-menu-item index="3">
+            <div class="nav_tittle">
+              <span>产品中心</span>
+              
+            </div>
+          </el-menu-item>
+          <el-menu-item index="4">
+            <div class="nav_tittle">
+              <span>新闻资讯</span>
+           
+            </div>
+          </el-menu-item>
+          <el-menu-item index="5">
+            <div class="nav_tittle">
+              <span>关于我们</span>
+              
+            </div>
+          </el-menu-item>
         </el-menu>
       </el-col>
     </el-row>
@@ -21,11 +46,44 @@
 export default {
   data () {
     return {
-      activeIndex: "1"
+      activeIndex: "1",
+      searchBarFixed: false
     };
   },
+  mounted() {
+    window.addEventListener("scroll", this.handleScroll);
+  },
+  created() {
+    this.changeTabBarActive();
+  },
   methods: {
-    handleSelect (key, keyPath) {
+    handleScroll() {
+      var scrollTop =
+        window.pageYOffset ||
+        document.documentElement.scrollTop ||
+        document.body.scrollTop;
+
+      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";
         this.$router.push("/solution");
@@ -43,30 +101,24 @@ 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";
-      }
     }
   }
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style scoped >
 .header-tab {
   width: 100%;
-  margin: 20px 0;
+  position: absolute;
+  top: 0;
+  padding: 20px 0;
   background-color: transparent;
-  z-index: 2;
+  z-index: 99;
+}
+.up {
+  background-color: #0f1c38;
+  transition: all 2s;
 }
 .topNav{
   display: flex;
@@ -83,9 +135,11 @@ export default {
   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%);
+  width: 80px;
+  background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #4e84ff 50%); 
 }
 .header-tab .el-menu--horizontal > .el-menu-item {
   height: 20px;
@@ -97,4 +151,5 @@ export default {
 .logo {
   height: 35px;
 }
+
 </style>

src/components/navicard/index.vue

@@ -0,0 +1,118 @@
+<template>
+<div>
+  <div :class="{'nav-card': true, 'active': active}" @click.stop="clickCard()">
+    <div class="header">
+      <div v-if="active" class="hat">&nbsp;</div>
+      <div>{{title}}</div>
+    </div>
+    <div class="body">
+      <div v-for="(item, index) in items" :key="index" @click="clickItem(item, index)" :class="{'item-active': itemActive == index }">
+        <img v-if="active" :src="item.icon" alt="">
+        <div>{{ item.text }}</div>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'NaviCard',
+  props: [
+    'id',
+    'title',
+    'items',
+    'active'
+  ],
+  data () {
+    return {
+      itemActive: -1,
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    clickCard() {
+      this.$emit('click', { type: 'card', item: this.id })
+    },
+    clickItem(item, index) {
+      this.itemActive = index
+      this.$emit('click', { type: 'item', item })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.nav-card {
+  background:rgba(255,255,255,1);
+  box-shadow:0px 1px 14px 0px rgba(65,101,242,0.2);
+  border-radius:10px;
+  padding: 12px 14px;
+  cursor: pointer;
+
+  &.active {
+    padding-top: 0;
+
+    .header {
+      font-size:15px;
+      font-weight:400;
+      color:rgba(0,0,0,1);
+      line-height:21px;
+
+      .hat {
+        margin: 0 auto;
+        width:73px;
+        height:13px;
+        background:rgba(78,132,255,1);
+        border-radius:0px 0px 70px 70px;
+      }
+    }
+
+    .body {
+      div {
+        text-align: center;
+        font-size:15px;
+        font-weight:400;
+        color:rgba(0,0,0,1);
+
+        &.item-active {
+          div {
+            color:rgba(78,132,255,1);
+          }
+        }
+        line-height:21px;
+      }
+    }
+  }
+
+
+  .header {
+    text-align: center;
+    font-size:12px;
+    color:rgba(153,153,153,1);
+    line-height:17px;
+    margin-bottom: 18px;
+
+  }
+  .body {
+    display: flex;
+    justify-content: space-between;
+    div {
+      text-align: center;
+      font-size:12px;
+      color:rgba(153,153,153,1);
+      line-height:17px;
+      padding: 0 5px;
+      img {
+        height:20px;
+      }
+      & + div {
+        border-left: 1px dotted #000;
+        
+      }
+    }
+  }
+}
+</style>
+

src/components/pages/aboutUs/aboutUs.vue

@@ -1,13 +1,42 @@
 <template>
   <div class="about-us">
       <headerTab></headerTab>
-  
- <div>
-
-   关于我们
-
+       <div class="title">
+        <p class="tit">定制专属专业平台运营服务</p>
+        <p class="desc">Customized exclusive professional platform operation servic</p>
+        <span></span>
+      </div>  
+      <div class="about-main">
+        <div class="main-left">
+          <div class="logo">
+          <img class="logo1" src="../../../assets/image/aboutUs/logo1.png" alt="">
+          </div>
+          <div class="logo">
+          <img class="logo2" src="../../../assets/image/aboutUs/logo2.png" alt="">
+          </div>
+          <div class="logo">
+          <img class="logo3" src="../../../assets/image/aboutUs/logo3.png" alt="">
+          </div>
+          <div class="logo">
+          <img class="logo4" src="../../../assets/image/aboutUs/logo4.png" alt="">
+          </div>
+        </div>
+        <div class="main-right">
+          <p class="main-tit">关于我们</p>
+          <div class="con">
+            <p>南京荟房网络科技有限公司是领先的智慧社区系统集成和解决方案提供商。</p>
+            <p>我们作为银城地产集团股份有限公司旗下的唯一互联网科技公司，自成立以来一直致力于智慧社区系统的集成及开发平台的搭建。基于客户需求持续创新，凭借自身强大的互联网和物联网技术，整合智能硬件接口，积极探索万物智联时代下的智慧生活服务运营生态系统。借助大数据分析处理和自动化调度管理，为社区数据信息化、小区治安智能化、环境治理精细化、生活底单高效化等社区管理需求提供实时、定制化的解决方案。</p>
+            <p>为了更好地顺应市场发展，以及提供高质量的互联网+服务，荟房网络科技重视自主创新不断加大研发投入，从软件定制逐步迈向产品化、平台化及开放运营的发展方向。现已自主研发出一系列创新型互联网+应用，并取得十多项专利及著作权。</p>
+            <p>融合创新，助力成长。荟房网络科技将矢志利用创新的互联网技术推动智慧社区的发展与变革，提升企业的核心竞争力，维护人类的长远发展和安全。</p>
+          </div>
+              <p class="main-tit">联系我们</p>
+              <p class="info">hurongkai@ycdc.com</p>
+              <p class="info">+86-13776686399</p>
+              <p class="info">江苏南京宁双路28号汇智大厦A区6楼</p>
+        </div>
 
-    </div>
+      </div>
+  
     <footerNav></footerNav>
 
   </div>
@@ -27,5 +56,96 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style lang="less" scoped>
+.about-us {
+  .title {
+    background: url("../../../assets/image/news/Bbanner.jpg") no-repeat center;
+    width: 100%;
+    height: 700px;
+    background-size: 100% 100%;
+    opacity: 1 !important;
+    color: #fff;
+    .tit {
+      font-size: 64px;
+      padding-top: 240px;
+      font-weight: 100;
+    }
+    .desc {
+      font-size: 12px;
+      letter-spacing: 4px;
+      line-height: 60px;
+    }
+    span {
+      display: inline-block;
+      width: 78px;
+      height: 11px;
+      background-color: #4e84ff;
+      margin-top: 20px;
+    }
+  }
+  .about-main {
+    padding: 40px 300px 100px 300px;
+    min-height: 600px;
+    position: relative;
+    .main-left {
+      position: absolute;
+      left: 400px;
+      .logo {
+        width: 303px;
+        height: 110px;
+        box-shadow: 0px 0px 5px 0 #4171f2;
+        margin-bottom: 20px;
+        border-radius: 4px;
+        .logo1 {
+          width: 240px;
+          height: 110px;
+        }
+        .logo2 {
+          width: 225px;
+          height: 38px;
+          margin: 36px 0;
+        }
+        .logo3 {
+          width: 200px;
+          height: 46px;
+          margin: 32px 0;
+        }
+        .logo4 {
+          width: 240px;
+          height: 110px;
+        }
+      }
+    }
+    .main-right {
+      width: 630px;
+      text-align: left;
+      position: absolute;
+      left: 840px;
+      .main-tit {
+        background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #4e84ff 50%); 
+        height: 30px;
+        text-align: center;
+        line-height: 30px;
+        font-size: 28px;
+        width: 120px;
+        color: #000;
+        margin-bottom: 20px;
+      }
+      .con {
+        font-size: 14px;
+        color: #808080;
+        padding-bottom: 10px;
+        p {
+          margin: 14px 0;
+          line-height: 21px;
+        }
+      }
+      .info{
+        margin-bottom:14px; 
+        font-size: 16px;
+        color: #666;
+      }
+    }
+  }
+}
 </style>

src/components/pages/index.vue

@@ -1,79 +1,409 @@
-<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="">荟房智慧管家</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>
-</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 scoped>
-.hello {
-  width: 100%;
-  height: 100%;
-}
-.hello .page-1 {
-  background: url("../../assets/image/home/background/Group2.jpg") no-repeat
-    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>
-
+<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" :class="page1 == true ? '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">
+          <div class="page-4-con">
+            <el-carousel :interval="4000" type="card" height="500px" indicator-position="none" arrow="never">
+              <el-carousel-item>
+                <p class="swiper-tittle">服务优势</p>
+                <div class="service">
+                  <p class="service-p1">定制化服务</p>
+                  <p class="service-p2">增值运维服务</p>
+                  <p class="service-p3">专业售后</p>
+                </div>
+              </el-carousel-item>
+              <el-carousel-item>
+                <p class="swiper-tittle">技术优势</p>
+                <div class="skill">
+                  <p class="skill-p1">超过十年的行业应用软件开发经验</p>
+                  <p class="skill-p2">丰富的智慧社区及智慧案场建设经验</p>
+                  <p class="skill-p3">长期的Java、Net、PHP、软件测试人才储备</p>
+                </div>
+              </el-carousel-item>
+              <el-carousel-item>
+                <p class="swiper-tittle">运营推广</p>
+                <div class="operation">
+                  <p class="Operation-p1">精准数字营销、专业策划设计</p>
+                  <p class="Operation-p2">DSP信息流广告</p>
+                  <p class="Operation-p3">线下社群活动</p>
+                </div>
+              </el-carousel-item>
+            </el-carousel>
+          </div>
+        </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;
+      }
+      if (this.fullPage == "0") {
+        this.page1 = true;
+      } else {
+        this.page1 = false;
+      }
+    }
+  }
+};
+</script>
+<style lang="less">
+.el-carousel__item h3 {
+  color: #475669;
+  font-size: 14px;
+  // opacity: 0.75;
+  // line-height: 200px;
+  margin: 0;
+}
+
+
+.swiper-tittle {
+  font-size: 60px;
+  margin: 0 auto 58px auto;
+  color: rgba(255, 255, 255, 1);
+}
+.service,.skill,.operation {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  p {
+    width: 573px;
+    height: 98px;
+    color: rgba(255, 255, 255, 1);
+    text-align: center;
+    line-height: 98px;
+    margin: 10px;
+    background: #2f2f80;
+    border-radius: 4px;
+    border: 1px solid rgba(151, 151, 151, 1);
+  }
+}
+.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%;
+    display: flex;
+    align-items: center;
+    .page-4-con {
+      width: 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/newsInformation/newsInformation.vue

@@ -1,12 +1,42 @@
 <template>
   <div class="news-information">
       <headerTab></headerTab>
-  <div>
-
-    新闻资讯
-
-
-    </div>
+      <div class="title">
+        <p class="tit">新闻资讯</p>
+        <p class="desc">News and information</p>
+        <span></span>
+      </div>  
+      <ul class="news-list">
+        <li class="list">
+          <img src="../../../assets/image/news/Bitmap1.jpg" alt="">
+          <div class="list-right">
+          <p class="list-tit">荟房网络将在浦口高新区建立分部全面支持悦见山智慧案场</p>
+          <p class="list-desc">悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持,</p>
+          </div>
+        </li>
+        <li class="list">
+          <img src="../../../assets/image/news/Bitmap2.jpg" alt="">
+          <div class="list-right">
+          <p class="list-tit">荟房网络将在浦口高新区建立分部全面支持悦见山智慧案场</p>
+          <p class="list-desc">悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持,</p>
+          </div>
+        </li>
+        <li class="list">
+          <img src="../../../assets/image/news/Bitmap3.jpg" alt="">
+          <div class="list-right">
+          <p class="list-tit">荟房网络将在浦口高新区建立分部全面支持悦见山智慧案场</p>
+          <p class="list-desc">悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持,</p>
+          </div>
+        </li>
+        <li class="list">
+          <img src="../../../assets/image/news/Bitmap4.jpg" alt="">
+          <div class="list-right">
+          <p class="list-tit">荟房网络将在浦口高新区建立分部全面支持悦见山智慧案场</p>
+          <p class="list-desc">悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持, 悦见山智慧案场作为荟房的一个项目, 在交付前将对此进行全面支持,</p>
+          </div>
+        </li>
+      </ul>
+ 
     <footerNav></footerNav>
 
   </div>
@@ -18,16 +48,86 @@ import footerNav from "@/components/commonComponents/footerNav";
 
 export default {
   components: { headerTab, footerNav },
- 
-  data () {
-    return {
-  
-    }
+
+  data() {
+    return {};
   }
-}
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-
+<style lang="less">
+.news-information {
+  .title {
+    background: url("../../../assets/image/news/Bbanner.jpg") no-repeat center;
+    width: 100%;
+    height: 700px;
+    background-size: 100% 100%;
+    opacity: 1 !important;
+    color: #fff;
+    .tit {
+      font-size: 64px;
+      padding-top: 240px;
+      font-weight: 100;
+    }
+    .desc {
+      font-size: 12px;
+      letter-spacing: 4px;
+      line-height: 60px;
+    }
+    span {
+      display: inline-block;
+      width: 78px;
+      height: 11px;
+      background-color: #4e84ff;
+      margin-top: 20px;
+    }
+  }
+  .news-list {
+    padding: 40px 300px 100px 300px;
+    list-style: none;
+    .list {
+      position: relative;
+      padding: 0;
+      height: 180px;
+      text-align: left;
+      margin: 5px 0;
+      img {
+        position: absolute;
+        width: 300px;
+        height: 168px;
+        left: 0;
+      }
+      .list-right {
+        position: absolute;
+        left: 320px;
+        border-bottom: 1px solid #e5e5e5;
+        height: 177px;
+        .list-tit {
+          font-size: 20px;
+          color: #000;
+          margin-top: 40px;
+          line-height: 40px;
+          font-weight: 600;
+              overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+        }
+        .list-desc {
+          font-size: 14px;
+          color: #808080;
+          padding-right: 30px;
+          line-height: 22px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 4;
+          -webkit-box-orient: vertical;
+        }
+      }
+    }
+  }
+}
 </style>

src/components/pages/productCenter/AIwelcome.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="product-center">
+    <div class="cover-bg">
+      <img src="../../../assets/image/program/bg3.jpg" alt>
+    </div>
     <headerTab></headerTab>
     <div class="product_box">
       <div class="product_top">
@@ -15,6 +18,11 @@
           </div>
         </div>
       </div>
+      <div class="nav">
+          <naviCard v-bind="productOrder" @click="handleCardClick" :active="activeCard == productOrder.id" style="width: 400px;"></naviCard>
+        <naviCard v-bind="smartScenes" @click="handleCardClick" :active="activeCard == smartScenes.id" style="width: 400px;"></naviCard>
+        <naviCard v-bind="smartCommunity" @click="handleCardClick" :active="activeCard == smartCommunity.id" style="width: 400px;"></naviCard>
+        </div>
       <!-- <div class="product_bar">
         <el-menu :default-active="activeIndex2" class="el-menu-demo"  @select="handleSelect" background-color="rgba(0,0,0,0)" text-color="#999999" active-text-color="#000000">
           <el-menu-item index="1" class="item1"  background-color="#fff">
@@ -185,9 +193,9 @@
 <script>
 import headerTab from "@/components/commonComponents/headerTab";
 import footerNav from "@/components/commonComponents/footerNav";
-
+import naviCard from "../../navicard";
 export default {
-  components: { headerTab, footerNav },
+  components: { headerTab, footerNav,naviCard },
 
   data () {
     return {
@@ -195,25 +203,132 @@ export default {
       P1: '全方位布控，人脸自动抓取，智能判客',
       P2: '',
       P3: 'Intelligent face risk control syste',
-      activeIndex2: '1'
+      activeIndex2: '1',
+      activeCard: undefined,
+      productOrder:
+        {
+          id: '1',
+          title:  '产品订制',
+          items: [
+            {
+              icon: require('../../../assets/image/logoicon/shape.png'),
+              text: '全渠道在线平台',
+              Url:'/productCenter/online'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/huijulogo.png'),
+              text: '二手房管理平台',
+              Url:'/productCenter'
+            }
+          ]
+        },
+        smartScenes:
+        {
+          id: '2',
+          title:  '智慧案场',
+          items: [
+            {
+              icon: require('../../../assets/image/logoicon/aicustomer.png'),
+              text: 'AI迎宾判客系统',
+              Url:'/productCenter/AIwelcome'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/Bitmap.png'),
+              text: '智慧大屏机',
+              Url:'/productCenter/bigscreen'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/yinchenglogo.png'),
+              text: '全案发布平台',
+               Url:'/productCenter/release'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/yuejian.png'),
+              text: '微楼书',
+               Url:'/productCenter/micro'
+            },
+          ]
+        },
+        smartCommunity:
+        {
+          id: '3',
+          title:  '智慧社区',
+          items: [
+            {
+              icon: require('../../../assets/image/logoicon/icon1.png'),
+              text: '银城慧家APP',
+               Url:'/productCenter/community'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/cityLOGO.png'),
+              text: '城的空间',
+               Url:'/productCenter/city'
+            }
+          ]
+        }
     }
   },
   methods: {
-    handleSelect (key, keyPath) {
-      console.log(key, keyPath);
-    }
+    handleCardClick({ type, item }) {
+      console.log('--------->', type, item)
+      this.$router.push({path:item.Url})
+      if (type == 'card') {
+        this.activeCard = item;
+        console.log('......',item)
+        
+      } else {
+
+      }
+    },
+    active1(){
+      this.order1 = false;
+      this.order_big = true;
+      this.wisdom_nav = true;
+      this.wisdom_big = false;
+    },
+    handleOpen(key, keyPath) {
+      // this.collapse == 'false'
+        console.log(key, keyPath);
+      },
+      handleClose(key, keyPath) {
+        console.log(key, keyPath);
+      }
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="less">
+.nav{
+  width: 1280px;
+  position: relative;
+  top: -64px;
+  // margin-top: -207px;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 .product-center {
-  background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
+  // background: url(../../../assets/image/program/bg3.jpg) no-repeat center;
   width: 100%;
   min-width: 1260px;
   height: 780px;
   background-size: cover;
+  position: relative;
+  .cover-bg {
+    position: absolute;
+    top: 0;
+    left: -50%;
+    z-index: -1;
+    width: 200%;
+    overflow: hidden;
+    border-radius: 0 0 60% 60%;
+    img {
+      width: 50%;
+      height: 779px;
+    }
+  }
 }
 .product_box {
   width: 1260px;
@@ -343,11 +458,11 @@ export default {
   }
 }
 .Features1 {
-     margin: 70px auto;
+     margin: 0 auto 70px auto;
       padding: 70px 0;
     }
 .Features2 {
-      margin: 70px auto;
+      margin: 70px auto 0 auto;
       padding: 70px 0;
     }
 .secondHouse_tittle {
@@ -401,7 +516,7 @@ export default {
 .box_img {
   margin-top: 30px;
   img {
-    width: 357px;
+    // width: 357px;
     height: 186px;
   }
 }

src/components/pages/productCenter/bigscreen.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="product-center">
+    <div class="cover-bg">
+      <img src="../../../assets/image/program/bg3.jpg" alt>
+    </div>
     <headerTab></headerTab>
     <div class="product_box">
       <div class="product_top">
@@ -16,6 +19,11 @@
           </div>
         </div>
       </div>
+      <div class="nav">
+          <naviCard v-bind="productOrder" @click="handleCardClick" :active="activeCard == productOrder.id" style="width: 400px;"></naviCard>
+        <naviCard v-bind="smartScenes" @click="handleCardClick" :active="activeCard == smartScenes.id" style="width: 400px;"></naviCard>
+        <naviCard v-bind="smartCommunity" @click="handleCardClick" :active="activeCard == smartCommunity.id" style="width: 400px;"></naviCard>
+        </div>
       <!-- <div class="product_bar">
         <el-menu :default-active="activeIndex2" class="el-menu-demo"  @select="handleSelect" background-color="rgba(0,0,0,0)" text-color="#999999" active-text-color="#000000">
           <el-menu-item index="1" class="item1"  background-color="#fff">
@@ -216,9 +224,9 @@
 <script>
 import headerTab from "@/components/commonComponents/headerTab";
 import footerNav from "@/components/commonComponents/footerNav";
-
+import naviCard from "../../navicard";
 export default {
-  components: { headerTab, footerNav },
+  components: { headerTab, footerNav,naviCard },
 
   data () {
     return {
@@ -226,25 +234,132 @@ export default {
       P1: '无人售楼终端机结合VR技术,沉浸式看房体验',
       P2: '',
       P3: 'INTELLIGENT SALES OFFICE',
-      activeIndex2: '1'
+      activeIndex2: '1',
+      activeCard: undefined,
+      productOrder:
+        {
+          id: '1',
+          title:  '产品订制',
+          items: [
+            {
+              icon: require('../../../assets/image/logoicon/shape.png'),
+              text: '全渠道在线平台',
+              Url:'/productCenter/online'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/huijulogo.png'),
+              text: '二手房管理平台',
+              Url:'/productCenter'
+            }
+          ]
+        },
+        smartScenes:
+        {
+          id: '2',
+          title:  '智慧案场',
+          items: [
+            {
+              icon: require('../../../assets/image/logoicon/aicustomer.png'),
+              text: 'AI迎宾判客系统',
+              Url:'/productCenter/AIwelcome'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/Bitmap.png'),
+              text: '智慧大屏机',
+              Url:'/productCenter/bigscreen'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/yinchenglogo.png'),
+              text: '全案发布平台',
+               Url:'/productCenter/release'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/yuejian.png'),
+              text: '微楼书',
+               Url:'/productCenter/micro'
+            },
+          ]
+        },
+        smartCommunity:
+        {
+          id: '3',
+          title:  '智慧社区',
+          items: [
+            {
+              icon: require('../../../assets/image/logoicon/icon1.png'),
+              text: '银城慧家APP',
+               Url:'/productCenter/community'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/cityLOGO.png'),
+              text: '城的空间',
+               Url:'/productCenter/city'
+            }
+          ]
+        }
     }
   },
   methods: {
-    handleSelect (key, keyPath) {
-      console.log(key, keyPath);
-    }
+    handleCardClick({ type, item }) {
+      console.log('--------->', type, item)
+      this.$router.push({path:item.Url})
+      if (type == 'card') {
+        this.activeCard = item;
+        console.log('......',item)
+        
+      } else {
+
+      }
+    },
+    active1(){
+      this.order1 = false;
+      this.order_big = true;
+      this.wisdom_nav = true;
+      this.wisdom_big = false;
+    },
+    handleOpen(key, keyPath) {
+      // this.collapse == 'false'
+        console.log(key, keyPath);
+      },
+      handleClose(key, keyPath) {
+        console.log(key, keyPath);
+      }
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="less">
+.nav{
+  width: 1280px;
+  position: relative;
+  top: -64px;
+  // margin-top: -207px;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 .product-center {
-  background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
+  // background: url(../../../assets/image/program/bg3.jpg) no-repeat center;
   width: 100%;
   min-width: 1260px;
   height: 780px;
   background-size: cover;
+  position: relative;
+  .cover-bg {
+    position: absolute;
+    top: 0;
+    left: -50%;
+    z-index: -1;
+    width: 200%;
+    overflow: hidden;
+    border-radius: 0 0 60% 60%;
+    img {
+      width: 50%;
+      height: 779px;
+    }
+  }
 }
 .product_box {
   width: 1260px;
@@ -377,10 +492,13 @@ export default {
     
   }
 }
-.Features1,.Features2,.Features3 {
+.Features1,.Features2 {
       margin: 0 auto 70px auto;
       padding: 70px 0;
     }
+    .Features3{
+      margin: 0 auto;
+    }
 .secondHouse_tittle {
   height: 80px;
   width: 218px;

src/components/pages/productCenter/city.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="product-center">
+    <div class="cover-bg">
+            <img src="../../../assets/image/program/bg1.jpg" alt="">
+          </div>
     <headerTab></headerTab>
     <div class="product_box">
       <div class="product_top">
@@ -17,6 +20,11 @@
           </div>
         </div>
       </div>
+      <div class="nav">
+          <naviCard v-bind="productOrder" @click="handleCardClick" :active="activeCard == productOrder.id" style="width: 400px;"></naviCard>
+        <naviCard v-bind="smartScenes" @click="handleCardClick" :active="activeCard == smartScenes.id" style="width: 400px;"></naviCard>
+        <naviCard v-bind="smartCommunity" @click="handleCardClick" :active="activeCard == smartCommunity.id" style="width: 400px;"></naviCard>
+        </div>
       <!-- <div class="product_bar">
         <el-menu :default-active="activeIndex2" class="el-menu-demo"  @select="handleSelect" background-color="rgba(0,0,0,0)" text-color="#999999" active-text-color="#000000">
           <el-menu-item index="1" class="item1"  background-color="#fff">
@@ -134,9 +142,9 @@
 <script>
 import headerTab from "@/components/commonComponents/headerTab";
 import footerNav from "@/components/commonComponents/footerNav";
-
+import naviCard from "../../navicard";
 export default {
-  components: { headerTab, footerNav },
+  components: { headerTab, footerNav,naviCard },
 
   data () {
     return {
@@ -144,25 +152,132 @@ export default {
       P1: '一站式社区服务共享空间',
       P2: '足不出户拓展生活空间 , 体验最便捷的品质生活',
       P3: 'INTELLIGENT FACE RISK CONTROL SYSTEM',
-      activeIndex2: '1'
+      activeIndex2: '1',
+      activeCard: undefined,
+      productOrder:
+        {
+          id: '1',
+          title:  '产品订制',
+          items: [
+            {
+              icon: require('../../../assets/image/logoicon/shape.png'),
+              text: '全渠道在线平台',
+              Url:'/productCenter/online'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/huijulogo.png'),
+              text: '二手房管理平台',
+              Url:'/productCenter'
+            }
+          ]
+        },
+        smartScenes:
+        {
+          id: '2',
+          title:  '智慧案场',
+          items: [
+            {
+              icon: require('../../../assets/image/logoicon/aicustomer.png'),
+              text: 'AI迎宾判客系统',
+              Url:'/productCenter/AIwelcome'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/Bitmap.png'),
+              text: '智慧大屏机',
+              Url:'/productCenter/bigscreen'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/yinchenglogo.png'),
+              text: '全案发布平台',
+               Url:'/productCenter/release'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/yuejian.png'),
+              text: '微楼书',
+               Url:'/productCenter/micro'
+            },
+          ]
+        },
+        smartCommunity:
+        {
+          id: '3',
+          title:  '智慧社区',
+          items: [
+            {
+              icon: require('../../../assets/image/logoicon/icon1.png'),
+              text: '银城慧家APP',
+               Url:'/productCenter/community'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/cityLOGO.png'),
+              text: '城的空间',
+               Url:'/productCenter/city'
+            }
+          ]
+        }
     }
   },
   methods: {
-    handleSelect (key, keyPath) {
-      console.log(key, keyPath);
-    }
+    handleCardClick({ type, item }) {
+      console.log('--------->', type, item)
+      this.$router.push({path:item.Url})
+      if (type == 'card') {
+        this.activeCard = item;
+        console.log('......',item)
+        
+      } else {
+
+      }
+    },
+    active1(){
+      this.order1 = false;
+      this.order_big = true;
+      this.wisdom_nav = true;
+      this.wisdom_big = false;
+    },
+    handleOpen(key, keyPath) {
+      // this.collapse == 'false'
+        console.log(key, keyPath);
+      },
+      handleClose(key, keyPath) {
+        console.log(key, keyPath);
+      }
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="less">
+.nav{
+  width: 1280px;
+  position: relative;
+  top: -64px;
+  // margin-top: -207px;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 .product-center {
-  background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
+  // background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
   width: 100%;
   min-width: 1260px;
   height: 780px;
   background-size: cover;
+  position: relative;
+  .cover-bg {
+      position: absolute;
+      top: 0;
+      left: -50%;
+      z-index: -1;
+      width: 200%;
+      overflow: hidden;
+      border-radius: 0 0 60% 60%;
+      img {
+        width: 50%;
+        height: 779px;
+      }
+    }
 }
 .product_box {
   width: 1260px;
@@ -325,10 +440,9 @@ export default {
 .city_content {
   background: url(../../../assets/image/program/bg.jpg) no-repeat center;
   background-size: 100%;
-
   .product_int {
     margin: 0 auto;
-    padding: 140px 0;
+    padding: 219px 0;
     width: 1260px;
     display: flex;
     align-items: center;
@@ -371,7 +485,7 @@ export default {
 }
 .func_con{
   width: 960px;
-  margin: 120px auto;
+  margin: 120px auto 0 auto;
   // display: 
   .func_con_top{
     display: flex;
@@ -381,7 +495,7 @@ export default {
   .func_con_bottom{
     display: flex;
     justify-content: space-between;
-    margin-bottom: 60px;
+    padding-bottom: 60px;
   }
 }
 .func_box{

src/components/pages/productCenter/community.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="product-center">
+     <div class="cover-bg">
+            <img src="../../../assets/image/program/bg1.jpg" alt="">
+          </div>
     <headerTab></headerTab>
     <div class="product_box">
       <div class="product_top">
@@ -19,6 +22,11 @@
           </div>
         </div>
       </div>
+      <div class="nav">
+          <naviCard v-bind="productOrder" @click="handleCardClick" :active="activeCard == productOrder.id" style="width: 400px;"></naviCard>
+        <naviCard v-bind="smartScenes" @click="handleCardClick" :active="activeCard == smartScenes.id" style="width: 400px;"></naviCard>
+        <naviCard v-bind="smartCommunity" @click="handleCardClick" :active="activeCard == smartCommunity.id" style="width: 400px;"></naviCard>
+        </div>
       <!-- <div class="product_bar">
         <el-menu :default-active="activeIndex2" class="el-menu-demo"  @select="handleSelect" background-color="rgba(0,0,0,0)" text-color="#999999" active-text-color="#000000">
           <el-menu-item index="1" class="item1"  background-color="#fff">
@@ -151,9 +159,9 @@
 <script>
 import headerTab from "@/components/commonComponents/headerTab";
 import footerNav from "@/components/commonComponents/footerNav";
-
+import naviCard from "../../navicard";
 export default {
-  components: { headerTab, footerNav },
+  components: { headerTab, footerNav,naviCard },
 
   data () {
     return {
@@ -161,24 +169,131 @@ export default {
       P1: '让业主享受智慧社区美好生活',
       P2: '整体掌控，一触即发；智能生活，全面掌控',
       P3: 'INTELLIGENT FACE RISK CONTROL SYSTEM',
-      activeIndex2: '1'
+      activeIndex2: '1',
+      activeCard: undefined,
+      productOrder:
+        {
+          id: '1',
+          title:  '产品订制',
+          items: [
+            {
+              icon: require('../../../assets/image/logoicon/shape.png'),
+              text: '全渠道在线平台',
+              Url:'/productCenter/online'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/huijulogo.png'),
+              text: '二手房管理平台',
+              Url:'/productCenter'
+            }
+          ]
+        },
+        smartScenes:
+        {
+          id: '2',
+          title:  '智慧案场',
+          items: [
+            {
+              icon: require('../../../assets/image/logoicon/aicustomer.png'),
+              text: 'AI迎宾判客系统',
+              Url:'/productCenter/AIwelcome'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/Bitmap.png'),
+              text: '智慧大屏机',
+              Url:'/productCenter/bigscreen'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/yinchenglogo.png'),
+              text: '全案发布平台',
+               Url:'/productCenter/release'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/yuejian.png'),
+              text: '微楼书',
+               Url:'/productCenter/micro'
+            },
+          ]
+        },
+        smartCommunity:
+        {
+          id: '3',
+          title:  '智慧社区',
+          items: [
+            {
+              icon: require('../../../assets/image/logoicon/icon1.png'),
+              text: '银城慧家APP',
+               Url:'/productCenter/community'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/cityLOGO.png'),
+              text: '城的空间',
+               Url:'/productCenter/city'
+            }
+          ]
+        }
     }
   },
   methods: {
-    handleSelect (key, keyPath) {
-      console.log(key, keyPath);
-    }
+    handleCardClick({ type, item }) {
+      console.log('--------->', type, item)
+      this.$router.push({path:item.Url})
+      if (type == 'card') {
+        this.activeCard = item;
+        console.log('......',item)
+        
+      } else {
+
+      }
+    },
+    active1(){
+      this.order1 = false;
+      this.order_big = true;
+      this.wisdom_nav = true;
+      this.wisdom_big = false;
+    },
+    handleOpen(key, keyPath) {
+      // this.collapse == 'false'
+        console.log(key, keyPath);
+      },
+      handleClose(key, keyPath) {
+        console.log(key, keyPath);
+      }
   }
 }
 </script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="less">
+.nav{
+  width: 1280px;
+  position: relative;
+  top: -64px;
+  // margin-top: -207px;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 .product-center {
-  background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
+  // background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
   width: 100%;
   min-width: 1260px;
   height: 780px;
   background-size: cover;
+  position: relative;
+  .cover-bg {
+      position: absolute;
+      top: 0;
+      left: -50%;
+      z-index: -1;
+      width: 200%;
+      overflow: hidden;
+      border-radius: 0 0 60% 60%;
+      img {
+        width: 50%;
+        height: 779px;
+      }
+    }
 }
 .product_box {
   width: 1260px;

src/components/pages/productCenter/micro.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="product-center">
+    <div class="cover-bg">
+            <img src="../../../assets/image/program/bg3.jpg" alt="">
+          </div>
     <headerTab></headerTab>
     <div class="product_box">
       <div class="product_top">
@@ -13,6 +16,11 @@
           <div class="product_top_con_right"></div>
         </div>
       </div>
+      <div class="nav">
+          <naviCard v-bind="productOrder" @click="handleCardClick" :active="activeCard == productOrder.id" style="width: 400px;"></naviCard>
+        <naviCard v-bind="smartScenes" @click="handleCardClick" :active="activeCard == smartScenes.id" style="width: 400px;"></naviCard>
+        <naviCard v-bind="smartCommunity" @click="handleCardClick" :active="activeCard == smartCommunity.id" style="width: 400px;"></naviCard>
+        </div>
       <!-- <div class="product_bar">
         <el-menu :default-active="activeIndex2" class="el-menu-demo"  @select="handleSelect" background-color="rgba(0,0,0,0)" text-color="#999999" active-text-color="#000000">
           <el-menu-item index="1" class="item1"  background-color="#fff">
@@ -202,9 +210,9 @@
 <script>
 import headerTab from "@/components/commonComponents/headerTab";
 import footerNav from "@/components/commonComponents/footerNav";
-
+import naviCard from "../../navicard";
 export default {
-  components: { headerTab, footerNav },
+  components: { headerTab, footerNav,naviCard },
 
   data () {
     return {
@@ -212,24 +220,132 @@ export default {
       P1: '传统楼书的v2.0版本',
       P2: '利用移动设备进行房地产推广',
       P3: 'INTELLIGENT FACE RISK CONTROL SYSTEM',
-      activeIndex2: '1'
+      activeIndex2: '1',
+      activeCard: undefined,
+      productOrder:
+        {
+          id: '1',
+          title:  '产品订制',
+          items: [
+            {
+              icon: require('../../../assets/image/logoicon/shape.png'),
+              text: '全渠道在线平台',
+              Url:'/productCenter/online'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/huijulogo.png'),
+              text: '二手房管理平台',
+              Url:'/productCenter'
+            }
+          ]
+        },
+        smartScenes:
+        {
+          id: '2',
+          title:  '智慧案场',
+          items: [
+            {
+              icon: require('../../../assets/image/logoicon/aicustomer.png'),
+              text: 'AI迎宾判客系统',
+              Url:'/productCenter/AIwelcome'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/Bitmap.png'),
+              text: '智慧大屏机',
+              Url:'/productCenter/bigscreen'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/yinchenglogo.png'),
+              text: '全案发布平台',
+               Url:'/productCenter/release'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/yuejian.png'),
+              text: '微楼书',
+               Url:'/productCenter/micro'
+            },
+          ]
+        },
+        smartCommunity:
+        {
+          id: '3',
+          title:  '智慧社区',
+          items: [
+            {
+              icon: require('../../../assets/image/logoicon/icon1.png'),
+              text: '银城慧家APP',
+               Url:'/productCenter/community'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/cityLOGO.png'),
+              text: '城的空间',
+               Url:'/productCenter/city'
+            }
+          ]
+        }
+    
     }
   },
   methods: {
-    handleSelect (key, keyPath) {
-      console.log(key, keyPath);
-    }
+    handleCardClick({ type, item }) {
+      console.log('--------->', type, item)
+      this.$router.push({path:item.Url})
+      if (type == 'card') {
+        this.activeCard = item;
+        console.log('......',item)
+        
+      } else {
+
+      }
+    },
+    active1(){
+      this.order1 = false;
+      this.order_big = true;
+      this.wisdom_nav = true;
+      this.wisdom_big = false;
+    },
+    handleOpen(key, keyPath) {
+      // this.collapse == 'false'
+        console.log(key, keyPath);
+      },
+      handleClose(key, keyPath) {
+        console.log(key, keyPath);
+      }
   }
 }
 </script>
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="less">
+.nav{
+  width: 1280px;
+  position: relative;
+  top: -64px;
+  // margin-top: -207px;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 .product-center {
-  background: url(../../../assets/image/program/bg3.jpg) no-repeat center;
+  // background: url(../../../assets/image/program/bg3.jpg) no-repeat center;
   width: 100%;
   min-width: 1260px;
   height: 780px;
   background-size: cover;
+  position: relative;
+  .cover-bg {
+    position: absolute;
+    top: 0;
+    left: -50%;
+    z-index: -1;
+    width: 200%;
+    overflow: hidden;
+    border-radius: 0 0 60% 60%;
+    img {
+      width: 50%;
+      height: 779px;
+    }
+  }
 }
 .product_box {
   width: 1260px;

src/components/pages/productCenter/online.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="product-center">
+    <div class="cover-bg">
+      <img src="../../../assets/image/program/bg2.jpg" alt>
+    </div>
     <div class="product_center_top">
       <headerTab></headerTab>
       <div class="product_box">
@@ -13,6 +16,12 @@
             </div>
           </div>
         </div>
+
+        <div class="nav">
+          <naviCard v-bind="productOrder" @click="handleCardClick" :active="activeCard == productOrder.id" style="width: 400px;"></naviCard>
+          <naviCard v-bind="smartScenes" @click="handleCardClick" :active="activeCard == smartScenes.id" style="width: 400px;"></naviCard>
+          <naviCard v-bind="smartCommunity" @click="handleCardClick" :active="activeCard == smartCommunity.id" style="width: 400px;"></naviCard>
+        </div>
         <!-- <div class="product_bar">
         <el-menu :default-active="activeIndex2" class="el-menu-demo"  @select="handleSelect" background-color="rgba(0,0,0,0)" text-color="#999999" active-text-color="#000000">
           <el-menu-item index="1" class="item1"  background-color="#fff">
@@ -126,7 +135,7 @@
               <div class="introduction_content_left">
                 <div class="introduction_content_registered">
                   <div class="introduction_content_img">
-                    <img src="../../../assets/image/platform/Group3.png" alt="">
+                    <img src="../../../assets/image/platform/Group3.png" alt>
                   </div>
                   <div class="registered_con">
                     <p class="registered_con_p1">经纪人注册</p>
@@ -137,12 +146,12 @@
 
                 <div class="introduction_content_registered">
                   <div class="introduction_content_img">
-                    <img src="../../../assets/image/platform/Group5.png" alt="">
+                    <img src="../../../assets/image/platform/Group5.png" alt>
                   </div>
                   <div class="registered_con">
                     <p class="registered_con_p1">客户报备</p>
                     <p class="registered_con_p2">楼盘页报备:</p>
-                    <p class="registered_con_p3">一个客户信息一次只能报备到一个楼盘 </p>
+                    <p class="registered_con_p3">一个客户信息一次只能报备到一个楼盘</p>
                     <p class="registered_con_p4">客户页报备:</p>
                     <p class="registered_con_p5">一个客户信息一次可以报备到多个楼盘</p>
                   </div>
@@ -150,7 +159,7 @@
 
                 <div class="introduction_content_registered">
                   <div class="introduction_content_img">
-                    <img src="../../../assets/image/platform/Group8.png" alt="">
+                    <img src="../../../assets/image/platform/Group8.png" alt>
                   </div>
                   <div class="registered_con">
                     <p class="registered_con_p1">报备管理</p>
@@ -163,7 +172,7 @@
 
                 <div class="introduction_content_registered">
                   <div class="introduction_content_img">
-                    <img src="../../../assets/image/platform/Group10.png" alt="">
+                    <img src="../../../assets/image/platform/Group10.png" alt>
                   </div>
                   <div class="registered_con">
                     <p class="registered_con_p1">案场管理</p>
@@ -174,7 +183,7 @@
               <div class="introduction_content_right">
                 <div class="introduction_content_registered">
                   <div class="introduction_content_img">
-                    <img src="../../../assets/image/platform/Group4.png" alt="">
+                    <img src="../../../assets/image/platform/Group4.png" alt>
                   </div>
                   <div class="registered_con">
                     <p class="registered_con_p1">楼盘查看</p>
@@ -185,7 +194,7 @@
 
                 <div class="introduction_content_registered">
                   <div class="introduction_content_img">
-                    <img src="../../../assets/image/platform/Group7.png" alt="">
+                    <img src="../../../assets/image/platform/Group7.png" alt>
                   </div>
                   <div class="registered_con">
                     <p class="registered_con_p1">客户管理</p>
@@ -198,7 +207,7 @@
 
                 <div class="introduction_content_registered">
                   <div class="introduction_content_img">
-                    <img src="../../../assets/image/platform/Group9.png" alt="">
+                    <img src="../../../assets/image/platform/Group9.png" alt>
                   </div>
                   <div class="registered_con">
                     <p class="registered_con_p1">跟踪管理</p>
@@ -208,7 +217,7 @@
 
                 <div class="introduction_content_registered">
                   <div class="introduction_content_img">
-                    <img src="../../../assets/image/platform/Group13.png" alt="">
+                    <img src="../../../assets/image/platform/Group13.png" alt>
                   </div>
                   <div class="registered_con">
                     <p class="registered_con_p1">个人信息</p>
@@ -217,7 +226,6 @@
                     <p class="registered_con_p4">建议和反馈</p>
                   </div>
                 </div>
-
               </div>
             </div>
           </div>
@@ -232,7 +240,7 @@
             <div class="height_content_left">
               <div class="height_content_box">
                 <div class="height_content_box_img">
-                  <img src="../../../assets/image/platform/Group6.jpg" alt="">
+                  <img src="../../../assets/image/platform/Group6.jpg" alt>
                 </div>
                 <div class="height_content_box_tittle">为代理公司搭建冠名的分销平台</div>
                 <div class="height_content_box_con">分销产品可以快速帮新房代理公司搭建属于自己品牌的新房分销平台，有便捷的业务员端、管理业务进度的项目专员端和强大的后台管理系统。</div>
@@ -240,7 +248,7 @@
 
               <div class="height_content_box">
                 <div class="height_content_box_img">
-                  <img src="../../../assets/image/platform/Group6Copy2.jpg" alt="">
+                  <img src="../../../assets/image/platform/Group6Copy2.jpg" alt>
                 </div>
                 <div class="height_content_box_tittle">到场流程系统化</div>
                 <div class="height_content_box_con">项目专员在项目现场使用手机进行商机确认、到场确认和成交确认，数据实时更新更有微信消息提醒，让项目现场客户管理更专业公正。</div>
@@ -248,7 +256,7 @@
 
               <div class="height_content_box">
                 <div class="height_content_box_img">
-                  <img src="../../../assets/image/platform/Group6Copy4.jpg" alt="">
+                  <img src="../../../assets/image/platform/Group6Copy4.jpg" alt>
                 </div>
                 <div class="height_content_box_tittle">系统全自动佣金结算</div>
                 <div class="height_content_box_con">强大的财务后台，统一对外进行业绩公布和佣金结算，大大提高平台的诚信度。</div>
@@ -256,7 +264,7 @@
 
               <div class="height_content_box">
                 <div class="height_content_box_img">
-                  <img src="../../../assets/image/platform/Group6Copy6.jpg" alt="">
+                  <img src="../../../assets/image/platform/Group6Copy6.jpg" alt>
                 </div>
                 <div class="height_content_box_tittle">系统自动统计报表输出</div>
                 <div class="height_content_box_con">分销产品可以快速帮新房代理公司搭建属于自己品牌的新房分销平台，有便捷的业务员端、管理业务进度的项目专员端和强大的后台管理系统。</div>
@@ -265,7 +273,7 @@
             <div class="height_content_right">
               <div class="height_content_box">
                 <div class="height_content_box_img">
-                  <img src="../../../assets/image/platform/Group6Copy.jpg" alt="">
+                  <img src="../../../assets/image/platform/Group6Copy.jpg" alt>
                 </div>
                 <div class="height_content_box_tittle">经纪人快速报备</div>
                 <div class="height_content_box_con">合作公司的经纪人可以通过微信端或APP端访问分销平台，进行快速客户报备和客户跟进，并实时了解最新的项目成交和分佣情况。</div>
@@ -273,7 +281,7 @@
 
               <div class="height_content_box">
                 <div class="height_content_box_img">
-                  <img src="../../../assets/image/platform/Group6Copy3.jpg" alt="">
+                  <img src="../../../assets/image/platform/Group6Copy3.jpg" alt>
                 </div>
                 <div class="height_content_box_tittle">销售进度全掌控</div>
                 <div class="height_content_box_con">公司管理层可以通过分销系统系统查询和管控最新的报备、到场、成交情况，一手掌握各个楼盘的最新客户信息和销售进度！</div>
@@ -281,7 +289,7 @@
 
               <div class="height_content_box">
                 <div class="height_content_box_img">
-                  <img src="../../../assets/image/platform/Group6Copy5.jpg" alt="">
+                  <img src="../../../assets/image/platform/Group6Copy5.jpg" alt>
                 </div>
                 <div class="height_content_box_tittle">微信消息动态提醒</div>
                 <div class="height_content_box_con">重要业务环节，如：报备确认，客户到场，保护期失效等环节，系统自动对经纪人和项目专员进行职能消息提醒。</div>
@@ -289,7 +297,7 @@
 
               <div class="height_content_box">
                 <div class="height_content_box_img">
-                  <img src="../../../assets/image/platform/Group6Copy7.jpg" alt="">
+                  <img src="../../../assets/image/platform/Group6Copy7.jpg" alt>
                 </div>
                 <div class="height_content_box_tittle">为代理公司搭建冠名的分销平台</div>
                 <div class="height_content_box_con">下游分销公司管理层可以通过手机实时查看公司员工的整体报表数据和成交分佣数据。</div>
@@ -302,13 +310,13 @@
     <footerNav></footerNav>
   </div>
 </template>
-
 <script>
 import headerTab from "@/components/commonComponents/headerTab";
 import footerNav from "@/components/commonComponents/footerNav";
+import naviCard from "../../navicard";
 
 export default {
-  components: { headerTab, footerNav },
+  components: { headerTab, footerNav, naviCard, },
 
   data () {
     return {
@@ -316,11 +324,95 @@ export default {
       P1: '线上售楼处平台，连接开发商与购房者的沟通桥梁',
       P2: '房产商借助微信小程序，基于微信生态圈，完成商业模式闭环',
       P3: 'Professional product customization',
-      activeIndex2: '1'
+      activeIndex2: '1',
+      activeCard: undefined,
+      productOrder:
+      {
+        id: '1',
+        title: '产品订制',
+        items: [
+          {
+            icon: require('../../../assets/image/logoicon/shape.png'),
+            text: '全渠道在线平台',
+            Url: '/productCenter/online'
+          },
+          {
+            icon: require('../../../assets/image/logoicon/huijulogo.png'),
+            text: '二手房管理平台',
+            Url: '/productCenter'
+          }
+        ]
+      },
+      smartScenes:
+      {
+        id: '2',
+        title: '智慧案场',
+        items: [
+          {
+            icon: require('../../../assets/image/logoicon/aicustomer.png'),
+            text: 'AI迎宾判客系统',
+            Url: '/productCenter/AIwelcome'
+          },
+          {
+            icon: require('../../../assets/image/logoicon/Bitmap.png'),
+            text: '智慧大屏机',
+            Url: '/productCenter/bigscreen'
+          },
+          {
+            icon: require('../../../assets/image/logoicon/yinchenglogo.png'),
+            text: '全案发布平台',
+            Url: '/productCenter/release'
+          },
+          {
+            icon: require('../../../assets/image/logoicon/yuejian.png'),
+            text: '微楼书',
+            Url: '/productCenter/micro'
+          },
+        ]
+      },
+      smartCommunity:
+      {
+        id: '3',
+        title: '智慧社区',
+        items: [
+          {
+            icon: require('../../../assets/image/logoicon/icon1.png'),
+            text: '银城慧家APP',
+            Url: '/productCenter/community'
+          },
+          {
+            icon: require('../../../assets/image/logoicon/cityLOGO.png'),
+            text: '城的空间',
+            Url: '/productCenter/city'
+          }
+        ]
+      }
+
     }
   },
   methods: {
-    handleSelect (key, keyPath) {
+    handleCardClick ({ type, item }) {
+      console.log('--------->', type, item)
+      this.$router.push({ path: item.Url })
+      if (type == 'card') {
+        this.activeCard = item;
+        console.log('......', item)
+
+      } else {
+
+      }
+    },
+    active1 () {
+      this.order1 = false;
+      this.order_big = true;
+      this.wisdom_nav = true;
+      this.wisdom_big = false;
+    },
+    handleOpen (key, keyPath) {
+      // this.collapse == 'false'
+      console.log(key, keyPath);
+    },
+    handleClose (key, keyPath) {
       console.log(key, keyPath);
     }
   }
@@ -329,15 +421,39 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="less">
+.nav {
+  width: 1280px;
+  position: relative;
+  top: -64px;
+  // margin-top: -207px;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 .product-center {
   // background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
   width: 100%;
   min-width: 1260px;
   // height: 780px;
   // background-size: cover;
+  position: relative;
+  .cover-bg {
+    position: absolute;
+    top: 0;
+    left: -50%;
+    z-index: -1;
+    width: 200%;
+    overflow: hidden;
+    border-radius: 0 0 60% 60%;
+    img {
+      width: 50%;
+      height: 779px;
+    }
+  }
 }
 .product_center_top {
-  background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
+  // background: url(../../../assets/image/program/bg2.jpg) no-repeat center;
   width: 100%;
   min-width: 1260px;
   height: 780px;
@@ -462,7 +578,8 @@ export default {
     margin: 72px auto 0;
     .online_features {
       height: 600px;
-      margin: 140px auto;
+      padding: 140px 0;
+      margin: 0 auto;
       .online_features_tittle {
         height: 80px;
         width: 218px;
@@ -532,14 +649,14 @@ export default {
     .introduction {
       width: 100%;
       margin: 140px auto;
-      .introduction_tittle{
-         height: 80px;
+      .introduction_tittle {
+        height: 80px;
         width: 218px;
         margin: 70px auto;
-        .introduction_tittle_words{
+        .introduction_tittle_words {
           font-weight: 500;
         }
-        .introduction_tittle_bg{
+        .introduction_tittle_bg {
           margin: -10px auto 0;
           width: 135px;
           height: 29px;
@@ -550,97 +667,105 @@ export default {
           color: rgba(78, 132, 255, 1);
         }
       }
-      .introduction_content_box{
-       width: 100%;
-       margin-top: 76px;
+      .introduction_content_box {
+        width: 100%;
+        margin-top: 76px;
 
-       .introduction_content{
-         display: flex;
-         justify-content: space-between;
-         .introduction_content_left{
-           width: 582px;
-          //  height: 50px;
-          //  background-color: orange;
-           .introduction_content_registered{
-             width: 100%;
-             height: 202px;
-             background-color: #fff;
-             box-shadow:0px 1px 14px 0px rgba(65,101,242,0.2);
-              border-radius:8px;
+        .introduction_content {
+          display: flex;
+          justify-content: space-between;
+          .introduction_content_left {
+            width: 582px;
+            //  height: 50px;
+            //  background-color: orange;
+            .introduction_content_registered {
+              width: 100%;
+              height: 202px;
+              background-color: #fff;
+              box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
+              border-radius: 8px;
               display: flex;
               justify-content: space-between;
               align-items: center;
               padding: 30px;
               margin-bottom: 20px;
-              .introduction_content_img{
-                width:156px;
-                img{
-                  width:224px;
+              .introduction_content_img {
+                width: 156px;
+                img {
+                  width: 224px;
                 }
               }
-              .registered_con{
+              .registered_con {
                 width: 306px;
-                font-size:18px;
-                .registered_con_p1{
-                  font-size:24px;
+                font-size: 18px;
+                .registered_con_p1 {
+                  font-size: 24px;
                   margin: 10px 0;
                 }
-                .registered_con_p1,.registered_con_p2,.registered_con_p3,.registered_con_p4,.registered_con_p5{
+                .registered_con_p1,
+                .registered_con_p2,
+                .registered_con_p3,
+                .registered_con_p4,
+                .registered_con_p5 {
                   display: flex;
                   justify-content: flex-start;
                 }
               }
-           }
-         }
-         .introduction_content_right{
-           margin-top: 44px;
-           width: 582px;
-          
-           .introduction_content_registered{
-             width: 100%;
-             height: 202px;
-             background-color: #fff;
-             box-shadow:0px 1px 14px 0px rgba(65,101,242,0.2);
-              border-radius:8px;
+            }
+          }
+          .introduction_content_right {
+            margin-top: 44px;
+            width: 582px;
+
+            .introduction_content_registered {
+              width: 100%;
+              height: 202px;
+              background-color: #fff;
+              box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
+              border-radius: 8px;
               display: flex;
               justify-content: space-between;
               align-items: center;
               padding: 30px;
               margin-bottom: 20px;
-              .introduction_content_img{
-                width:156px;
-                img{
-                  width:224px;
+              .introduction_content_img {
+                width: 156px;
+                img {
+                  width: 224px;
                 }
               }
-              .registered_con{
+              .registered_con {
                 width: 306px;
-                font-size:18px;
-                .registered_con_p1{
-                  font-size:24px;
+                font-size: 18px;
+                .registered_con_p1 {
+                  font-size: 24px;
                   margin: 10px 0;
                 }
-                .registered_con_p1,.registered_con_p2,.registered_con_p3,.registered_con_p4,.registered_con_p5{
+                .registered_con_p1,
+                .registered_con_p2,
+                .registered_con_p3,
+                .registered_con_p4,
+                .registered_con_p5 {
                   display: flex;
                   justify-content: flex-start;
                 }
               }
-           }
-         }
-       }
+            }
+          }
+        }
       }
     }
-    .highlight{
+    .highlight {
       width: 100%;
       margin: 140px auto;
-      .highlight_tittle{
-         height: 80px;
+      .highlight_tittle {
+        height: 80px;
         width: 218px;
         margin: 70px auto;
-        .highlight_tittle_words{
+        .highlight_tittle_words {
           font-weight: 500;
         }
-        .highlight_tittle_bg{
+        .highlight_tittle_bg {
           margin: -10px auto 0;
           width: 135px;
           height: 29px;
@@ -651,56 +776,54 @@ export default {
           color: rgba(78, 132, 255, 1);
         }
       }
-      .height_content{
+      .height_content {
         display: flex;
         justify-content: center;
         flex-wrap: nowrap;
-        .height_content_left{
+        .height_content_left {
           width: 500px;
 
           margin-top: 80px;
           margin-right: 30px;
-          
         }
 
-        .height_content_right{
+        .height_content_right {
           width: 500px;
-          
         }
       }
     }
   }
 }
-.height_content_box{
-            width: 500px;
-            height: 430px;
-            box-shadow:0px 1px 14px 0px rgba(65,101,242,0.2);
-            border-radius:6px;
-            position: relative;
-            margin-bottom: 30px;
-            .height_content_box_img{
-              img{
-                width: 500px;
-                height: 318px;
-                border-radius:6px 6px 0 0;
-              }
-            }
-            .height_content_box_tittle{
-              position: absolute;
-              top: 274px;
-              width: 452px;
-              height: 45px;
-              background:rgba(0,0,0,0.61);
-              line-height: 45px;
-              color: #fff;
-              display: flex;
-              justify-content: flex-start;
-              padding: 0 24px;
-            }
-            .height_content_box_con{
-              display: flex;
-              justify-content: flex-start;
-              padding: 22px 24px;
-            }
-          }
+.height_content_box {
+  width: 500px;
+  height: 430px;
+  box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
+  border-radius: 6px;
+  position: relative;
+  margin-bottom: 30px;
+  .height_content_box_img {
+    img {
+      width: 500px;
+      height: 318px;
+      border-radius: 6px 6px 0 0;
+    }
+  }
+  .height_content_box_tittle {
+    position: absolute;
+    top: 274px;
+    width: 452px;
+    height: 45px;
+    background: rgba(0, 0, 0, 0.61);
+    line-height: 45px;
+    color: #fff;
+    display: flex;
+    justify-content: flex-start;
+    padding: 0 24px;
+  }
+  .height_content_box_con {
+    display: flex;
+    justify-content: flex-start;
+    padding: 22px 24px;
+  }
+}
 </style>

src/components/pages/productCenter/productCenter.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="product-center">
+    <div class="cover-bg">
+            <img src="../../../assets/image/program/bg2.jpg" alt="">
+          </div>
     <headerTab></headerTab>
     <div class="product_box">
       <div class="product_top">
@@ -41,10 +44,13 @@
           </el-menu-item>
         </el-menu>
       </div>-->
+
+
+
       <div class="nav">
-        <div class="order_nav">
+        <!-- <div class="order_nav" v-show="order1" @click="active1">
           <div class="tittle">
-            <!-- <div class="blue_bar"></div> -->
+            
             <div class="product-order">产品订制</div>
           </div>
           <div class="product_order_nav">
@@ -56,7 +62,104 @@
                   二手房管理平台
                 </p>
           </div>
-        </div>
+        </div> -->
+       
+        <naviCard v-bind="productOrder" @click="handleCardClick" :active="activeCard == productOrder.id" style="width: 400px;"></naviCard>
+        <naviCard v-bind="smartScenes" @click="handleCardClick" :active="activeCard == smartScenes.id" style="width: 400px;"></naviCard>
+        <naviCard v-bind="smartCommunity" @click="handleCardClick" :active="activeCard == smartCommunity.id" style="width: 400px;"></naviCard>
+        
+        <!-- <div class="order_nav order_nav_big">
+          <div class="blue_bar"></div>
+          <div class="product-order product-order_big">产品订制</div>
+          <div class="product_order_nav_big">
+            <div class="order_bot_online">
+              <img src="../../../assets/image/logoicon/shape.png" alt="">
+              <span>全渠道在线平台</span>
+            </div>
+            <div  class="order_bot_secondHandHouse">
+              <img src="../../../assets/image/logoicon/huijulogo.png" alt="">
+            <span>二手房管理平台</span>
+            </div>
+          </div>
+        </div> -->
+
+        <!-- <div class="wisdom_nav" v-show="wisdom_nav" @click="active2">
+          <div class="tittle">
+            <div class="case_tittle">智慧案场</div>
+          </div>
+          <div class="case_nav">
+                <p class="AIwelcome">
+                  AI迎宾判客系统
+                </p>
+                <div class="vertical_line"></div>
+                <p class="bigScreen">
+                  智慧大屏机
+                </p>
+                <div class="vertical_line"></div>
+                <p class="release">
+                  全案发布平台
+                </p>
+                <div class="vertical_line"></div>
+                <p class="micro">
+                  微楼书
+                </p>
+          </div>
+        </div> -->
+
+        <!-- <div class="wisdom_nav_big" v-show="wisdom_big">
+          <div class="blue_bar"></div>
+          <div class="case_tittle_big">产品订制</div>
+          <div class="case_nav_big">
+            <div class="AIwelcome_big">
+              <img src="../../../assets/image/logoicon/aicustomer.png" alt="">
+              <span>AI迎宾判客系统</span>
+            </div>
+            <div  class="bigScreen_big">
+              <img src="../../../assets/image/logoicon/Bitmap.png" alt="">
+              <span>智慧大屏机</span>
+            </div>
+            <div  class="yinchenglogo_big">
+              <img src="../../../assets/image/logoicon/yinchenglogo.png" alt="">
+              <span>全案发布平台</span>
+            </div>
+            <div  class="yuejian_big">
+              <img src="../../../assets/image/logoicon/yuejian.png" alt="">
+              <span>微楼书</span>
+            </div>
+          </div>
+        </div> -->
+        
+        <!-- <div class="community" v-show="community" @click="active3">
+          <div class="tittle">
+            
+            <div class="community_tittle">智慧社区</div>
+          </div>
+          <div class="community_nav">
+                <p class="yincheng">
+                  银城慧家APP
+                </p>
+                <div class="vertical_line"></div>
+                <p class="city">
+                  城的空间
+                </p>
+          </div>
+        </div> -->
+
+        <!-- <div class="community_big" v-show="community_big">
+          <div class="blue_bar"></div>
+          <div class="community_tittle_big">智慧社区</div>
+          <div class="community_nav_big">
+            <div class="yincheng_big">
+              <img src="../../../assets/image/logoicon/icon1.png" alt="">
+              <span>智慧社区</span>
+            </div>
+            <div  class="city_big">
+              <img src="../../../assets/image/logoicon/cityLOGO.png" alt="">
+            <span>城的空间</span>
+            </div>
+          </div>
+        </div> -->
+
 
 
         <!-- ------------------------------------------------- -->
@@ -96,12 +199,10 @@
           </el-menu-item>
         </el-menu-item-group>
       </el-submenu>
-  
-      
     </el-menu>
-  </el-col>
+  </el-col> -->
 
-  <el-col :span="8">
+  <!-- <el-col :span="8">
     <el-menu
       default-active="1"
       class="el-menu-vertical-demo"
@@ -126,9 +227,9 @@
       </el-submenu>
      
     </el-menu>
-  </el-col>
+  </el-col> -->
 
-  <el-col :span="8">
+  <!-- <el-col :span="8">
     <el-menu
       default-active="1"
       class="el-menu-vertical-demo"
@@ -152,9 +253,8 @@
         </el-menu-item-group>
       </el-submenu>
     </el-menu>
-  </el-col>
-
-</el-row> -->
+  </el-col> -->
+<!-- </el-row> -->
       </div>
     </div>
     <div class="secondHouse-middle">
@@ -213,6 +313,7 @@
         </div>
       </div>
     </div>
+    
     <footerNav></footerNav>
   </div>
 </template>
@@ -220,9 +321,14 @@
 <script>
 import headerTab from "@/components/commonComponents/headerTab";
 import footerNav from "@/components/commonComponents/footerNav";
+import naviCard from "../../navicard";
 
 export default {
-  components: { headerTab, footerNav },
+  components: {
+    headerTab,
+    footerNav,
+    naviCard,
+  },
 
   data () {
     return {
@@ -233,9 +339,95 @@ export default {
       activeIndex2: '1',
       activeName: 'first',
       collapse:'true',
+      order1:true,
+      order_big:false,
+      wisdom_nav:true,
+      wisdom_big:false,
+      community:true,
+      community_big:false,
+
+      activeCard: undefined,
+      productOrder:
+        {
+          id: '1',
+          title:  '产品订制',
+          items: [
+            {
+              icon: require('../../../assets/image/logoicon/shape.png'),
+              text: '全渠道在线平台',
+              Url:'/productCenter/online'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/huijulogo.png'),
+              text: '二手房管理平台',
+              Url:'/productCenter'
+            }
+          ]
+        },
+        smartScenes:
+        {
+          id: '2',
+          title:  '智慧案场',
+          items: [
+            {
+              icon: require('../../../assets/image/logoicon/aicustomer.png'),
+              text: 'AI迎宾判客系统',
+              Url:'/productCenter/AIwelcome'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/Bitmap.png'),
+              text: '智慧大屏机',
+              Url:'/productCenter/bigscreen'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/yinchenglogo.png'),
+              text: '全案发布平台',
+               Url:'/productCenter/release'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/yuejian.png'),
+              text: '微楼书',
+               Url:'/productCenter/micro'
+            },
+          ]
+        },
+        smartCommunity:
+        {
+          id: '3',
+          title:  '智慧社区',
+          items: [
+            {
+              icon: require('../../../assets/image/logoicon/icon1.png'),
+              text: '银城慧家APP',
+               Url:'/productCenter/community'
+            },
+            {
+              icon: require('../../../assets/image/logoicon/cityLOGO.png'),
+              text: '城的空间',
+               Url:'/productCenter/city'
+            }
+          ]
+        },
     }
   },
   methods: {
+    handleCardClick({ type, item }) {
+      console.log('--------->', type, item)
+      this.$router.push({path:item.Url})
+      if (type == 'card') {
+        this.activeCard = item;
+        console.log('......',item)
+        
+      } else {
+
+      }
+    },
+    active1(){
+      this.order1 = false;
+      this.order_big = true;
+      this.wisdom_nav = true;
+      this.wisdom_big = false;
+    },
     handleOpen(key, keyPath) {
       // this.collapse == 'false'
         console.log(key, keyPath);
@@ -249,6 +441,27 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="less">
+
+.order_nav_big {
+  background-color: #fff;
+}
+
+
+.order_nav_big,.wisdom_nav_big,.community_big{
+  width: 430px;
+  height: 134px;
+  box-shadow:0px 1px 14px 0px rgba(65,101,242,0.2);
+  border-radius:10px;
+  span{
+    font-size: 12px;
+  }
+  
+}
+.product_order_nav_big,.case_nav_big,.community_nav_big{
+  display: flex;
+  justify-content: space-around;
+}
+
 .nav_logo {
   width: 414px;
   margin: auto;
@@ -260,19 +473,31 @@ export default {
     height: 42px;
   }
 }
-.order_nav {
-  width: 414px;
-  height: 134px;
+.nav{
+  width: 1280px;
+  position: relative;
+  top: -64px;
+  // margin-top: -207px;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.order_nav,.wisdom_nav,.community,.community_nav {
+  width: 320px;
+  height: 85px;
   box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
   border-radius: 10px;
+  // background-color: red;
   // margin: auto;
 }
-.product_order_nav {
+.product_order_nav,.case_nav,.community_nav_big {
   // margin: 0 auto;
   display: flex;
   justify-content: center;
   justify-content: space-around;
-  
+  color:rgba(153,153,153,1);
+  font-size: 12px;
 }
 .nav1,
 .nav2,
@@ -284,11 +509,27 @@ export default {
   border-radius: 4px;
 }
 .product-center {
-  background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
+  // background: url(../../../assets/image/program/bg2.jpg) no-repeat center;
   width: 100%;
   min-width: 1260px;
   height: 780px;
+  // background-color: red;
   background-size: cover;
+  // border-radius: 
+  position: relative;
+  .cover-bg {
+      position: absolute;
+      top: 0;
+      left: -50%;
+      z-index: -1;
+      width: 200%;
+      overflow: hidden;
+      border-radius: 0 0 60% 60%;
+      img {
+        width: 50%;
+        height: 779px;
+      }
+    }
 }
 .product_box {
   width: 1260px;
@@ -331,7 +572,7 @@ export default {
   display: inline-block;
   color: #fff;
   img {
-    width: 303px;
+    height: 303px;
   }
 }
 .product_top_con {
@@ -350,18 +591,22 @@ export default {
   margin: 5px 0;
   // line-height: 10px;
 }
-.order_bot_online {
+.order_bot_online,.order_bot_secondHandHouse,.AIwelcome_big,.bigScreen_big,.yinchenglogo_big,.yuejian_big,.yincheng_big,.city_big {
   height: 58px;
   width: 115px;
+  margin-top: 20px;
   display: flex;
-
   flex-wrap: wrap;
   justify-content: center;
   align-content: space-between;
   img {
-    width: 35px;
+    // width: 35px;
     height: 42px;
   }
+  span{
+    display: flex;
+    align-content: flex-end;
+  }
 }
 .blue_bar {
   width: 73px;
@@ -384,6 +629,11 @@ export default {
     width: 110px;
     height: 32px;
   }
+  span{
+    display: flex;
+    align-content: flex-end;
+    
+  }
 }
 .item1,
 .item2,
@@ -411,6 +661,7 @@ export default {
   width: 100%;
   // background-color: red;
   background: url(../../../assets/image/program/bg.jpg) no-repeat center;
+  
   background-size: 100%;
   .secondHouse_content {
     width: 1260px;
@@ -489,6 +740,7 @@ export default {
 .vertical_line{
   // width:px;
 height:15px;
-border:1px solid rgba(196,196,196,1);
+border:1px dashed rgba(196,196,196,1);
 }
+
 </style>

src/components/pages/productCenter/release.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="product-center">
+    <div class="cover-bg">
+      <img src="../../../assets/image/program/bg3.jpg" alt>
+    </div>
     <headerTab></headerTab>
     <div class="product_box">
       <div class="product_top">
@@ -13,6 +16,11 @@
           <div class="product_top_con_right"></div>
         </div>
       </div>
+      <div class="nav">
+        <naviCard v-bind="productOrder" @click="handleCardClick" :active="activeCard == productOrder.id" style="width: 400px;"></naviCard>
+        <naviCard v-bind="smartScenes" @click="handleCardClick" :active="activeCard == smartScenes.id" style="width: 400px;"></naviCard>
+        <naviCard v-bind="smartCommunity" @click="handleCardClick" :active="activeCard == smartCommunity.id" style="width: 400px;"></naviCard>
+      </div>
       <!-- <div class="product_bar">
         <el-menu :default-active="activeIndex2" class="el-menu-demo"  @select="handleSelect" background-color="rgba(0,0,0,0)" text-color="#999999" active-text-color="#000000">
           <el-menu-item index="1" class="item1"  background-color="#fff">
@@ -164,9 +172,9 @@
                   <div class="module_box_words">
                     <div class="product_int_P">
                       <p class="product_int_pA">购房工具</p>
-                    <p class="product_int_pB">购房资格测试</p>
-                    <p class="product_int_pC">积分落户政策</p>
-                    <p class="product_int_pD">购房百科，专业解答购房问题</p>
+                      <p class="product_int_pB">购房资格测试</p>
+                      <p class="product_int_pC">积分落户政策</p>
+                      <p class="product_int_pD">购房百科，专业解答购房问题</p>
                     </div>
                   </div>
                 </div>
@@ -188,9 +196,9 @@
 <script>
 import headerTab from "@/components/commonComponents/headerTab";
 import footerNav from "@/components/commonComponents/footerNav";
-
+import naviCard from "../../navicard";
 export default {
-  components: { headerTab, footerNav },
+  components: { headerTab, footerNav, naviCard },
 
   data () {
     return {
@@ -198,11 +206,94 @@ export default {
       P1: '线上售楼处平台，连接开发商与购房者的沟通桥梁',
       P2: '房产商借助微信小程序，基于微信生态圈，完成商业模式闭环',
       P3: 'INTELLIGENT FACE RISK CONTROL SYSTEM',
-      activeIndex2: '1'
+      activeIndex2: '1',
+      activeCard: undefined,
+      productOrder:
+      {
+        id: '1',
+        title: '产品订制',
+        items: [
+          {
+            icon: require('../../../assets/image/logoicon/shape.png'),
+            text: '全渠道在线平台',
+            Url: '/productCenter/online'
+          },
+          {
+            icon: require('../../../assets/image/logoicon/huijulogo.png'),
+            text: '二手房管理平台',
+            Url: '/productCenter'
+          }
+        ]
+      },
+      smartScenes:
+      {
+        id: '2',
+        title: '智慧案场',
+        items: [
+          {
+            icon: require('../../../assets/image/logoicon/aicustomer.png'),
+            text: 'AI迎宾判客系统',
+            Url: '/productCenter/AIwelcome'
+          },
+          {
+            icon: require('../../../assets/image/logoicon/Bitmap.png'),
+            text: '智慧大屏机',
+            Url: '/productCenter/bigscreen'
+          },
+          {
+            icon: require('../../../assets/image/logoicon/yinchenglogo.png'),
+            text: '全案发布平台',
+            Url: '/productCenter/release'
+          },
+          {
+            icon: require('../../../assets/image/logoicon/yuejian.png'),
+            text: '微楼书',
+            Url: '/productCenter/micro'
+          },
+        ]
+      },
+      smartCommunity:
+      {
+        id: '3',
+        title: '智慧社区',
+        items: [
+          {
+            icon: require('../../../assets/image/logoicon/icon1.png'),
+            text: '银城慧家APP',
+            Url: '/productCenter/community'
+          },
+          {
+            icon: require('../../../assets/image/logoicon/cityLOGO.png'),
+            text: '城的空间',
+            Url: '/productCenter/city'
+          }
+        ]
+      }
     }
   },
   methods: {
-    handleSelect (key, keyPath) {
+    handleCardClick ({ type, item }) {
+      console.log('--------->', type, item)
+      this.$router.push({ path: item.Url })
+      if (type == 'card') {
+        this.activeCard = item;
+        console.log('......', item)
+
+      } else {
+
+      }
+    },
+    active1 () {
+      this.order1 = false;
+      this.order_big = true;
+      this.wisdom_nav = true;
+      this.wisdom_big = false;
+    },
+    handleOpen (key, keyPath) {
+      // this.collapse == 'false'
+      console.log(key, keyPath);
+    },
+    handleClose (key, keyPath) {
       console.log(key, keyPath);
     }
   }
@@ -211,12 +302,36 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="less">
+.nav {
+  width: 1280px;
+  position: relative;
+  top: -64px;
+  // margin-top: -207px;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 .product-center {
-  background: url(../../../assets/image/program/bg3.jpg) no-repeat center;
+  // background: url(../../../assets/image/program/bg3.jpg) no-repeat center;
   width: 100%;
   min-width: 1260px;
   height: 780px;
   background-size: cover;
+  position: relative;
+  .cover-bg {
+    position: absolute;
+    top: 0;
+    left: -50%;
+    z-index: -1;
+    width: 200%;
+    overflow: hidden;
+    border-radius: 0 0 60% 60%;
+    img {
+      width: 50%;
+      height: 779px;
+    }
+  }
 }
 .product_box {
   width: 1260px;
@@ -458,13 +573,13 @@ export default {
     width: 100%;
     height: 276px;
     position: relative;
-     .product_int_P{
-       width: 100%;
-       position: absolute;
-    left: 50%;
-    top: 50%;
-     transform: translate(-50%, -50%);
-     }
+    .product_int_P {
+      width: 100%;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
   }
 }
 .module_box_topA,
@@ -478,8 +593,8 @@ export default {
   margin: 0 auto;
 }
 .product_int {
-  margin: 0 auto 70px auto;
-      padding: 70px 0;
+  margin: 0 auto;
+  padding: 70px 0;
 }
 .product_int_p {
   width: 100%;

src/components/pages/solution/solution.vue

@@ -1,14 +1,313 @@
 <template>
   <div class="solution">
       <headerTab></headerTab>
+        <div class="title">
+          <div class="cover-bg">
+            <img src="../../../assets/image/program/bannerbg.jpg" alt="">
+          </div>
+        <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"> 
+      <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>
+             <div class="img-box">
+               <div class="img-con"><img src="../../../assets/image/wisdom/wisdom01.jpg" alt="">营销费用高效果差</div>
+               <div class="img-con"><img src="../../../assets/image/wisdom/wisdom02.jpg" alt="">营销手段传统、数据反馈慢</div>
+               <div class="img-con"><img src="../../../assets/image/wisdom/wisdom03.jpg" alt="">渠道商载客、大量飞单</div>
+               <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:135px">解决方案</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>
 
-   <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>
+    
 
   </div>
 </template>
@@ -21,11 +320,602 @@ export default {
   components: { headerTab, footerNav },
 
   data() {
-    return {};
+    return {
+      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;
+    }
   }
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style lang="less" >
+
+.solution {
+  .title {
+    // background: url("../../../assets/image/program/bannerbg.jpg") no-repeat center;
+    width: 100%;
+    height: 760px;
+    
+    // border-radius: 0 0 200% 200%;
+    opacity: 1 !important;
+    color: #fff;
+    position: relative;
+    .cover-bg {
+      position: absolute;
+      top: 0;
+      left: -50%;
+      z-index: -1;
+      width: 200%;
+      overflow: hidden;
+      border-radius: 0 0 60% 60%;
+      img {
+        width: 50%;
+        height: 779px;
+      }
+    }
+
+    .tit {
+      font-size: 64px;
+      padding-top: 220px;
+      font-weight: 100;
+      line-height: 100px;
+    }
+    .label {
+      font-size: 40px;
+      line-height: 60px;
+      font-weight: 100;
+    }
+    .desc {
+      font-size: 12px;
+      letter-spacing: 4px;
+      line-height: 50px;
+    }
+    .bc_rai{
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 70px;
+      background-color: #fff;
+    }
+    .bc_radian{
+      width: 100%;
+      height: 70px;
+      border-radius: 0 0 50% 50%;
+      position: absolute;
+      bottom: 0;
+      background-color: red;
+    }
+  }
+
+  .solution .solution-main .tab-bar{
+    
+  }
+  
+  .solution-main {
+    width: 100%;
+    .tab-bar {
+      height: 110px;
+      margin: 0 auto;
+      
+      background-color: #fff;
+      border-radius: 10px;
+      box-shadow: 0px 1px 4px 0px #4165f2;
+      // margin-top: -255px;
+      .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 {
+          left: 10%;
+          top: 0;
+          // width: 95px !important;
+          
+          display: flex;
+          justify-content: center;
+          // text-align: center;
+          height: 95px;
+          height: 12px;
+          border-radius:0px 0px 100px 100px;
+          background-color: #4e84ff;
+          width: 20px;
+        }
+        .el-tabs__item.is-active {
+          color: #4e84ff;
+        }
+        .el-tabs__item {
+          height: 100px;
+          width: 230px;
+          img {
+            display: block;
+            width: 22px;
+            height: 22px;
+            margin: 30px auto 0 auto;
+          }
+        }
+      }
+      .main-box {
+        width: 100%;
+        margin-top: -120px;
+        padding: 110px 0;
+        .con-tit {
+          background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #4e84ff 50%); 
+          width: 135px;
+          margin: 0 auto;
+          font-size: 30px;
+          color: #000;
+          margin-top: 80px;
+        }
+        .con-desc {
+          font-size: 13px;
+          letter-spacing: 4px;
+          line-height: 40px;
+          color: #4e84ff;
+        }
+        .img-box {
+          margin: 20px auto 0 auto;
+          .img-con {
+            width: 288px;
+            height: 250px;
+            border-radius: 6px;
+            background-color: rgb(243, 240, 240);
+            margin: 0 5px;
+            display: inline-block;
+            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: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #4e84ff 50%); 
+          width: 135px;
+          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: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #4e84ff 50%); 
+          width: 135px;
+          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: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #4e84ff 50%); 
+          width: 195px;
+          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: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #4e84ff 50%); 
+          width: 225px;
+          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 100% 100%;
+        // background-size: 100% 7100px;
+        width: 100%;
+        .img-box {
+          .img-con {
+            margin: 0 26px;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

src/main.js

@@ -6,13 +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'
 
@@ -25,6 +25,8 @@ Vue.use(ElementUI)
 // })
 
 /* eslint-disable no-new */
+
+
 new Vue({
 
 

src/router/index.js

@@ -41,7 +41,6 @@ export default new Router({
       name: 'productCenter',
       component: productCenter,
       children:[
-
       ]
     },
     {