product

index.html

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

package.json

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

src/App.vue

@@ -21,4 +21,14 @@ html,body,#app{
   text-align: center;
   color: #2c3e50;
 }
+html,body,#app{
+ height: 100%;
+}
+.el-submenu__title i{
+  display: none;
+}
+.el-submenu__icon-arrow el-icon-arrow-down{
+  display: none;
+}
+
 </style>

src/components/commonComponents/footerNav.vue

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

src/components/commonComponents/headerTab.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="header-tab">
-    <el-row>
+    <el-row class="topNav">
       <el-col :span="12">
-        <img class="logo" src="../../assets/image/home/logo/logo.png" alt>
+        <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">
@@ -63,29 +63,38 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .header-tab {
-  position: fixed;
   width: 100%;
-  top: 0;
   margin: 20px 0;
   background-color: transparent;
+  z-index: 2;
 }
-.el-menu.el-menu--horizontal {
+.topNav{
+  display: flex;
+  align-items: center;
+}
+.header-tab .header-img {
+  width: 248px;
+  height: 35px;
+}
+.header-tab .el-menu.el-menu--horizontal {
   border: none;
 }
-.el-menu--horizontal > .el-menu-item.is-active {
+.header-tab .el-menu {
+  padding-left: 30px;
+  background-color: transparent;
+}
+.header-tab .el-menu--horizontal > .el-menu-item.is-active {
   border: none;
-  background: repeating-linear-gradient(
-    rgba(0, 0, 0, 0),
-    rgba(78, 132, 255, 1) 100%
-  );
+  background: repeating-linear-gradient(transparent, #4e84ff 100%);
 }
-.el-menu--horizontal > .el-menu-item {
+.header-tab .el-menu--horizontal > .el-menu-item {
   height: 20px;
   line-height: 20px;
   padding: 0;
   margin: 0 20px;
+  color: #fff;
 }
-.logo{
+.logo {
   height: 35px;
 }
 </style>

src/components/pages/index.vue

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

src/components/pages/productCenter/AIwelcome.vue

@@ -0,0 +1,441 @@
+<template>
+  <div class="product-center">
+    <headerTab></headerTab>
+    <div class="product_box">
+      <div class="product_top">
+        <div class="product_top_con">
+          <div class="product_top_con_left">
+            <h3>{{tittle}}</h3>
+            <p class="p1">{{P1}}</p>
+            <p class="p2">{{P2}}</p>
+            <p class="p3">{{P3}}</p>
+          </div>
+          <div class="product_top_con_right">
+            <img src="../../../assets/image/AIwelcome/Group1222.png" alt>
+          </div>
+        </div>
+      </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">
+            <div class="order">
+              <div class="blue_bar"></div>
+              <div class="product-order">产品订制</div>
+              <div class="order_bot">
+                <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>
+          </el-menu-item>
+          <el-menu-item index="2" class="item2">
+            智慧案场
+          </el-menu-item>
+          <el-menu-item index="3" class="item3">
+            智慧社区
+          </el-menu-item>
+        </el-menu>
+      </div>-->
+    </div>
+
+    <div class="secondHouse-middle">
+      <div class="secondHouse_content">
+        <div class="Features1">
+          <div class="secondHouse_tittle">
+            <div class="secondHouse_tittle_words">痛点描述</div>
+            <div class="secondHouse_tittle_bg"></div>
+            <div class="secondHouse_tittle_eng">EXISTING PROBLEMS</div>
+          </div>
+          <div class="discribe">
+            <div class="discribe_box">
+              <div class="dis_box_img">
+                <img src="../../../assets/image/AIwelcome/Reception.jpg" alt>
+              </div>
+              <div class="box_dis">
+                <p class="dis_p1">客户接待不及时</p>
+                <p class="dis_p2">体验不佳</p>
+              </div>
+            </div>
+            <div class="discribe_box">
+              <div class="dis_box_img">
+                <img src="../../../assets/image/AIwelcome/consultant.jpg" alt>
+              </div>
+              <div class="box_dis">
+                <p class="dis_p1">置业顾问藏客</p>
+                <p class="dis_p2">内单外挂</p>
+              </div>
+            </div>
+            <div class="discribe_box">
+              <div class="dis_box_img">
+                <img src="../../../assets/image/AIwelcome/Attribution.jpg" alt>
+              </div>
+              <div class="box_dis">
+                <p class="dis_p1">客户归属</p>
+                <p class="dis_p2">划分不清</p>
+              </div>
+            </div>
+            <div class="discribe_box">
+              <div class="dis_box_img">
+                <img src="../../../assets/image/AIwelcome/huaxiangbuming.jpg" alt>
+              </div>
+              <div class="box_dis">
+                <p class="dis_p1">客户画像不明晰</p>
+                <p class="dis_p2">营销决策不明确</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="Features2">
+          <div class="secondHouse_tittle">
+            <div class="secondHouse_tittle_words">解决方案</div>
+            <div class="secondHouse_tittle_bg"></div>
+            <div class="secondHouse_tittle_eng">THE SOLUTION</div>
+          </div>
+          <div class="secondHouse_content_Features">
+            <div class="secondHouse_content_left">
+              <div class="secondHouse_content_box">
+                <div class="box_tittle">
+                  <p class="box_tittle_p1">先报备再到访</p>
+                  <p class="box_tittle_p2">专业报备系统、实现案场精细化管理</p>
+                </div>
+                <div class="box_img">
+                  <img src="../../../assets/image/AIwelcome/Group18.png" alt>
+                </div>
+              </div>
+              <div class="secondHouse_content_box">
+                <div class="box_tittle">
+                  <p class="box_tittle_p1">访客信息实时推送</p>
+                  <p class="box_tittle_p2">岗亭、专属置业顾问, 快速开启VIP接待流程</p>
+                </div>
+                <div class="box_img">
+                  <img src="../../../assets/image/AIwelcome/Group16.png" alt>
+                </div>
+              </div>
+              <div class="secondHouse_content_box">
+                <div class="box_tittle">
+                  <p class="box_tittle_p1">人脸、车牌、手机号多环节判客</p>
+                  <p class="box_tittle_p2">轻松判定访客来访渠道, 有效防止飞单、归属不清</p>
+                </div>
+                <div class="box_img">
+                  <img src="../../../assets/image/AIwelcome/Group20.png" alt>
+                </div>
+              </div>
+
+              <div class="secondHouse_content_box">
+                <div class="box_tittle">
+                  <p class="box_tittle_p1">结合CRM系统</p>
+                  <p class="box_tittle_p2">分析用户历史记录, 实现精准营销</p>
+                </div>
+                <div class="box_img">
+                  <img src="../../../assets/image/AIwelcome/Group5.png" alt>
+                </div>
+              </div>
+            </div>
+            <div class="secondHouse_content_right">
+              
+
+              <div class="secondHouse_content_box">
+                <div class="box_tittle">
+                  <p class="box_tittle_p1">客户到访</p>
+                  <p class="box_tittle_p2">卡口相机车牌、司乘抓拍, 云端智能匹配</p>
+                  <p class="box_tittle_p3">有效识别访客身份</p>
+                </div>
+                <div class="box_img">
+                  <img src="../../../assets/image/AIwelcome/Group19.png" alt>
+                </div>
+              </div>
+
+              <div class="secondHouse_content_box">
+                <div class="box_tittle">
+                  <p class="box_tittle_p1">非配合式无感人脸识别</p>
+                  <p class="box_tittle_p2">语音播报欢迎致辞, 智慧大屏展示迎宾信息</p>
+                </div>
+                <div class="box_img">
+                  <img src="../../../assets/image/AIwelcome/Group15.png" alt>
+                </div>
+              </div>
+
+              <div class="secondHouse_content_box">
+                <div class="box_tittle">
+                  <p class="box_tittle_p1">专业地产营销场景设计</p>
+                  <p class="box_tittle_p2">合理规划营销动线</p>
+                  <p class="box_tittle_p3">全面了解记录客户偏好</p>
+                </div>
+                <div class="box_img">
+                  <img src="../../../assets/image/AIwelcome/Group17.png" alt>
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </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 {
+      tittle: 'AI迎宾判客系统',
+      P1: '全方位布控，人脸自动抓取，智能判客',
+      P2: '',
+      P3: 'Intelligent face risk control syste',
+      activeIndex2: '1'
+    }
+  },
+  methods: {
+    handleSelect (key, keyPath) {
+      console.log(key, keyPath);
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+.product-center {
+  background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
+  width: 100%;
+  min-width: 1260px;
+  height: 780px;
+  background-size: cover;
+}
+.product_box {
+  width: 1260px;
+  height: 780px;
+  margin: 0 auto;
+}
+.product_top {
+  width: 1260px;
+  height: 780px;
+  display: flex;
+  justify-content: center;
+}
+.product_top_con_left {
+  display: inline-block;
+  color: #fff;
+  h3 {
+    font-size: 66px;
+    font-weight: 100;
+    margin: 0 5px;
+    display: flex;
+    align-items: flex-start;
+  }
+  .p1,
+  .p2 {
+    // float: left;
+    font-size: 25px;
+    display: flex;
+    align-items: flex-start;
+  }
+  .p3 {
+    display: flex;
+    align-items: flex-start;
+    color: rgba(255, 255, 255, 1);
+    font-weight: 100;
+    font-size: 12px;
+    margin: 19px 0;
+  }
+}
+.product_top_con_right {
+  display: inline-block;
+  color: #fff;
+  img {
+    width: 303px;
+  }
+}
+.product_top_con {
+  width: 100%;
+  margin: 0 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.el-menu-demo {
+  display: flex;
+  justify-content: space-around;
+}
+
+.product-order {
+  margin: 5px 0;
+  // line-height: 10px;
+}
+.order_bot_online {
+  height: 58px;
+  width: 115px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: space-between;
+  img {
+    width: 35px;
+    height: 42px;
+  }
+}
+.blue_bar {
+  width: 73px;
+  height: 13px;
+  background: rgba(78, 132, 255, 1);
+  border-radius: 0px 0px 70px 70px;
+}
+.order_bot {
+  display: flex;
+  justify-content: space-between;
+}
+.order_bot_secondHandHouse {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: space-between;
+  height: 58px;
+  width: 115px;
+  img {
+    width: 110px;
+    height: 32px;
+  }
+}
+.item1,
+.item2,
+.item3 {
+  width: 314px;
+  height: 78px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: rgba(153, 153, 153, 1);
+}
+.item1 {
+  width: 414px;
+  height: 134px;
+}
+.blue_bar {
+  display: inline-block;
+}
+.order {
+  text-align: center;
+}
+.secondHouse-middle {
+  width: 100%;
+  // background-color: red;
+  background: url(../../../assets/image/program/bg.jpg) no-repeat center;
+  background-size: 100%;
+  .secondHouse_content {
+    width: 1260px;
+    margin: 0 auto;
+    
+  }
+}
+.Features1 {
+     margin: 70px auto;
+      padding: 70px 0;
+    }
+.Features2 {
+      margin: 70px auto;
+      padding: 70px 0;
+    }
+.secondHouse_tittle {
+  height: 80px;
+  width: 218px;
+  background-color: #fff;
+  margin: 72px auto;
+  .secondHouse_tittle_words {
+    font-weight: 500;
+  }
+  .secondHouse_tittle_bg {
+    margin: -10px auto 0;
+    width: 135px;
+    height: 29px;
+    background-color: #4e84ff;
+  }
+  .secondHouse_tittle_eng {
+    margin: 10px 0;
+    color: rgba(78, 132, 255, 1);
+  }
+}
+.secondHouse_content_Features {
+  width: 980px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  justify-content: space-between;
+  .secondHouse_content_left {
+  }
+  .secondHouse_content_right {
+    margin-top: 20px;
+  }
+}
+.secondHouse_content_box {
+  width: 475px;
+  height: 351px;
+  margin: 0 0 30px 30px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
+  border-radius: 7px;
+}
+.box_tittle {
+  width: 406px;
+  margin: 0 35px;
+  padding: 30px 0;
+  // background-color: red;
+  border-bottom: 3px dashed #a2c2ff;
+  color: rgba(102, 102, 102, 1);
+  font-size: 18px;
+}
+.box_img {
+  margin-top: 30px;
+  img {
+    width: 357px;
+    height: 186px;
+  }
+}
+.discribe {
+  margin: auto;
+  width: 1125px;
+  display: flex;
+  justify-content: space-between;
+  .discribe_box {
+    width: 265px;
+    height: 267px;
+    box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
+    border-radius: 6px;
+    .dis_box_img {
+      img{
+        width: 265px;
+      height: 191px;
+      }
+    }
+    .box_dis{
+      margin: 14px;
+      .dis_p1,.dis_p2{
+        color:rgba(128,128,128,1);
+        font-size: 16px;
+      }
+    }
+  }
+}
+.box_tittle_p1{
+  color:rgba(78,132,255,1);
+  font-size: 26px;
+}
+.box_tittle_p2,.box_tittle_p3{
+  font-size: 18px;
+  color:rgba(102,102,102,1);
+}
+</style>

src/components/pages/productCenter/bigscreen.vue

@@ -0,0 +1,509 @@
+<template>
+  <div class="product-center">
+    <headerTab></headerTab>
+    <div class="product_box">
+      <div class="product_top">
+        <div class="product_top_con">
+          <div class="product_top_con_left">
+            <h3>{{tittle}}</h3>
+            <p class="p1">{{P1}}</p>
+            <p class="p2">{{P2}}</p>
+            <p class="p3">{{P3}}</p>
+          </div>
+          <div class="product_top_con_right">
+            <img src="../../../assets/image/bigScreen/side.png" alt>
+            <img src="../../../assets/image/bigScreen/machine.png" alt>
+          </div>
+        </div>
+      </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">
+            <div class="order">
+              <div class="blue_bar"></div>
+              <div class="product-order">产品订制</div>
+              <div class="order_bot">
+                <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>
+          </el-menu-item>
+          <el-menu-item index="2" class="item2">
+            智慧案场
+          </el-menu-item>
+          <el-menu-item index="3" class="item3">
+            智慧社区
+          </el-menu-item>
+        </el-menu>
+      </div>-->
+    </div>
+
+    <div class="secondHouse-middle">
+      <div class="secondHouse_content">
+        <div class="Features1">
+          <div class="secondHouse_tittle">
+            <div class="secondHouse_tittle_words">产品亮点</div>
+            <div class="secondHouse_tittle_bg"></div>
+            <div class="secondHouse_tittle_eng">EXISTING PROBLEMS</div>
+          </div>
+          <div class="discribe">
+            <div class="discribe_box">
+              <div class="dis_box_img">
+                <img src="../../../assets/image/bigScreen/1.jpg" alt>
+              </div>
+              <div class="box_dis">
+                <p class="dis_p1">海量楼盘，虚拟看房</p>
+                <p class="dis_p2">利用全景技术，不用奔波于各个案场，一站式看房，为用户提供沉浸式看房体验</p>
+              </div>
+            </div>
+            <div class="discribe_box">
+              <div class="dis_box_img">
+                <img src="../../../assets/image/bigScreen/Bitmap.jpg" alt>
+              </div>
+              <div class="box_dis">
+                <p class="dis_p1">冠军楼盘，见证楼盘</p>
+                <p class="dis_p2">根据实时的楼盘销售排名，实时见证楼盘销量变换</p>
+              </div>
+            </div>
+            <div class="discribe_box">
+              <div class="dis_box_img">
+                <img src="../../../assets/image/bigScreen/23.jpg" alt>
+              </div>
+              <div class="box_dis">
+                <p class="dis_p1">线上线下，无缝连接</p>
+                <p class="dis_p2">线上信息连接线下活动，充分了解房产信息</p>
+              </div>
+            </div>
+            <div class="discribe_box">
+              <div class="dis_box_img">
+                <img src="../../../assets/image/bigScreen/4.jpg" alt>
+              </div>
+              <div class="box_dis">
+                <p class="dis_p1">智能推荐，择优选择</p>
+                <p class="dis_p2">根据用户真正的需求，选择最合适的房源</p>
+              </div>
+            </div>
+            <div class="discribe_box">
+              <div class="dis_box_img">
+                <img src="../../../assets/image/bigScreen/4.jpg" alt>
+              </div>
+              <div class="box_dis">
+                <p class="dis_p1">楼市资讯，一站获取</p>
+                <p class="dis_p2">最全最新的楼市信息，可以方便用户一站式获取</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="Features2">
+          <div class="secondHouse_tittle">
+            <div class="secondHouse_tittle_words">应用领域</div>
+            <div class="secondHouse_tittle_bg"></div>
+            <div class="secondHouse_tittle_eng">APPLICATION FIELD</div>
+          </div>
+          <div class="discribe">
+            <div class="filed_box">
+              <div class="filed_box_top">
+                <div class="salesOffice">
+                  <img src="../../../assets/image/bigScreen/66.jpg" alt>
+                  <div class="filed_tittle">售楼处</div>
+                </div>
+                <div class="salesOffice">
+                  <img src="../../../assets/image/bigScreen/77.jpg" alt>
+                  <div class="filed_tittle">银行</div>
+                </div>
+                <div class="salesOffice">
+                  <img src="../../../assets/image/bigScreen/888.jpg" alt>
+                  <div class="filed_tittle">购物中心</div>
+                </div>
+                <div class="salesOffice">
+                  <img src="../../../assets/image/bigScreen/99.jpg" alt>
+                  <div class="filed_tittle">展厅</div>
+                </div>
+              </div>
+              <div class="filed_box_bottom">
+                <div class="salesOffice">
+                  <img src="../../../assets/image/bigScreen/11.jpg" alt>
+                  <div class="filed_tittle">商场</div>
+                </div>
+                <div class="salesOffice">
+                  <img src="../../../assets/image/bigScreen/22.jpg" alt>
+                  <div class="filed_tittle">小区</div>
+                </div>
+                <div class="salesOffice">
+                  <img src="../../../assets/image/bigScreen/33.jpg" alt>
+                  <div class="filed_tittle">机场</div>
+                </div>
+                <div class="salesOffice">
+                  <img src="../../../assets/image/bigScreen/44.jpg" alt>
+                  <div class="filed_tittle">地铁站</div>
+                </div>
+                <div class="salesOffice">
+                  <img src="../../../assets/image/bigScreen/55.jpg" alt>
+                  <div class="filed_tittle">汽车站</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="Features3">
+          <div class="secondHouse_tittle">
+            <div class="secondHouse_tittle_words">硬件模块</div>
+            <div class="secondHouse_tittle_bg"></div>
+            <div class="secondHouse_tittle_eng">HARDWARE MODULE</div>
+          </div>
+          <div class="discribe">
+            <div class="module_box">
+              <div class="module_box_top">
+                <div class="boxes">
+                  <div class="boxes_img">
+                    <img src="../../../assets/image/bigScreen/00.png" alt>
+                  </div>
+                  <div class="module_box_words">49寸触摸显示屏</div>
+                </div>
+                <div class="boxes">
+                  <div class="boxes_img">
+                    <img src="../../../assets/image/bigScreen/000000.png" alt>
+                  </div>
+
+                  <div class="module_box_words">A4彩色激光打印机</div>
+                </div>
+                <div class="boxes">
+                  <div class="boxes_img">
+                    <img src="../../../assets/image/bigScreen/00000.png" alt>
+                  </div>
+
+                  <div class="module_box_words">双目人脸识别摄像头</div>
+                </div>
+              </div>
+              <div class="module_box_bottom">
+                <div class="boxes">
+                  <div class="boxes_img">
+                    <img src="../../../assets/image/bigScreen/0.png" alt>
+                  </div>
+                  <div class="module_box_words">4G模块+WIFI模块</div>
+                </div>
+                <div class="boxes">
+                  <div class="boxes_img">
+                    <img src="../../../assets/image/bigScreen/0000.png" alt>
+                  </div>
+                  <div class="module_box_words">语音识别</div>
+                </div>
+                <div class="boxes">
+                  <div class="boxes_img">
+                    <img src="../../../assets/image/bigScreen/000.png" alt>
+                  </div>
+                  <div class="module_box_words">工控主机</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </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 {
+      tittle: '智慧大屏机',
+      P1: '无人售楼终端机结合VR技术,沉浸式看房体验',
+      P2: '',
+      P3: 'INTELLIGENT SALES OFFICE',
+      activeIndex2: '1'
+    }
+  },
+  methods: {
+    handleSelect (key, keyPath) {
+      console.log(key, keyPath);
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+.product-center {
+  background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
+  width: 100%;
+  min-width: 1260px;
+  height: 780px;
+  background-size: cover;
+}
+.product_box {
+  width: 1260px;
+  height: 780px;
+  margin: 0 auto;
+}
+.product_top {
+  width: 1260px;
+  height: 780px;
+  display: flex;
+  justify-content: center;
+}
+.product_top_con_left {
+  display: inline-block;
+  color: #fff;
+  h3 {
+    font-size: 66px;
+    font-weight: 100;
+    margin: 0 5px;
+    display: flex;
+    align-items: flex-start;
+  }
+  .p1,
+  .p2 {
+    // float: left;
+    font-size: 25px;
+    display: flex;
+    align-items: flex-start;
+  }
+  .p3 {
+    display: flex;
+    align-items: flex-start;
+    color: rgba(255, 255, 255, 1);
+    font-weight: 100;
+    font-size: 12px;
+    margin: 19px 0;
+  }
+}
+.product_top_con_right {
+  display: inline-block;
+  color: #fff;
+  img:first-child {
+    margin-right: 32px;
+  }
+  img {
+    width: 197px;
+    height: 569px;
+  }
+}
+.product_top_con {
+  width: 100%;
+  margin: 0 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.el-menu-demo {
+  display: flex;
+  justify-content: space-around;
+}
+
+.product-order {
+  margin: 5px 0;
+  // line-height: 10px;
+}
+.order_bot_online {
+  height: 58px;
+  width: 115px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: space-between;
+  img {
+    width: 35px;
+    height: 42px;
+  }
+}
+.blue_bar {
+  width: 73px;
+  height: 13px;
+  background: rgba(78, 132, 255, 1);
+  border-radius: 0px 0px 70px 70px;
+}
+.order_bot {
+  display: flex;
+  justify-content: space-between;
+}
+.order_bot_secondHandHouse {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: space-between;
+  height: 58px;
+  width: 115px;
+  img {
+    width: 110px;
+    height: 32px;
+  }
+}
+.item1,
+.item2,
+.item3 {
+  width: 314px;
+  height: 78px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: rgba(153, 153, 153, 1);
+}
+.item1 {
+  width: 414px;
+  height: 134px;
+}
+.blue_bar {
+  display: inline-block;
+}
+.order {
+  text-align: center;
+}
+.secondHouse-middle {
+  width: 100%;
+  // background-color: red;
+  background: url(../../../assets/image/program/bg.jpg) no-repeat center;
+  background-size: 100%;
+  .secondHouse_content {
+    width: 1260px;
+    margin: 0 auto;
+    
+  }
+}
+.Features1,.Features2,.Features3 {
+      margin: 0 auto 70px auto;
+      padding: 70px 0;
+    }
+.secondHouse_tittle {
+  height: 80px;
+  width: 218px;
+  background-color: #fff;
+  margin: 72px auto;
+  .secondHouse_tittle_words {
+    font-weight: 500;
+  }
+  .secondHouse_tittle_bg {
+    margin: -10px auto 0;
+    width: 135px;
+    height: 29px;
+    background-color: #4e84ff;
+  }
+  .secondHouse_tittle_eng {
+    margin: 10px 0;
+    color: rgba(78, 132, 255, 1);
+  }
+}
+
+.discribe {
+  margin: 72px auto;
+  width: 1234px;
+  display: flex;
+  justify-content: space-between;
+  .discribe_box {
+    width: 234px;
+    height: 361px;
+    background-color: #fff;
+    box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
+    border-radius: 6px;
+    .dis_box_img {
+      img {
+        width: 234px;
+        height: 234px;
+        border-radius: 6px 6px 0 0;
+      }
+    }
+    .box_dis {
+      margin: 14px;
+    }
+  }
+}
+.dis_p1 {
+  color: rgba(0, 0, 0, 1);
+  font-size: 15px;
+}
+.dis_p2 {
+  font-size: 15px;
+  color: rgba(128, 128, 128, 1);
+  line-height: 21px;
+}
+.filed_box {
+  margin: auto;
+  .filed_box_top {
+    margin: 0 auto 35px;
+    width: 949px;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.filed_box_bottom {
+  margin: 0 auto;
+  width: 1210px;
+  display: flex;
+  justify-content: space-between;
+}
+.salesOffice {
+  width: 226px;
+  height: 197px;
+  box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
+  border-radius: 6px;
+  position: relative;
+  img {
+    width: 226px;
+    height: 197px;
+    border-radius: 6px;
+  }
+  .filed_tittle {
+    position: absolute;
+    bottom: 0;
+    left: 67px;
+    color: #fff;
+    font-size: 15px;
+    line-height: 27px;
+    margin: auto;
+    width: 92px;
+    height: 27px;
+    background-color: #4e84ff;
+    border-radius: 82px 82px 0 0;
+  }
+}
+.module_box {
+  width: 960px;
+  margin: auto;
+  .module_box_top {
+    width: 960px;
+    display: flex;
+    justify-content: space-between;
+
+    
+  }
+}
+.module_box_bottom{
+  margin: 80px auto;
+  display: flex;
+  justify-content: space-between;
+}
+.boxes {
+      width: 135px;
+      // height: 60px;
+
+      .boxes_img {
+        width: 34px;
+        height: 44px;
+        margin: 15px auto;
+        img {
+          width: 34px;
+        }
+      }
+      .module_box_words {
+        font-size: 15px;
+        color: rgba(0, 0, 0, 1);
+      }
+    }
+</style>

src/components/pages/productCenter/city.vue

@@ -0,0 +1,403 @@
+<template>
+  <div class="product-center">
+    <headerTab></headerTab>
+    <div class="product_box">
+      <div class="product_top">
+        <div class="product_top_con">
+          <div class="product_top_con_left">
+            <h3>{{tittle}}</h3>
+            <p class="p1">{{P1}}</p>
+            <p class="p2">{{P2}}</p>
+            <p class="p3">{{P3}}</p>
+          </div>
+          <div class="product_top_con_right">
+            <img src="../../../assets/image/city/11.png" alt class="top_img1">
+            <img src="../../../assets/image/city/13.png" alt class="top_img3">
+            <img src="../../../assets/image/city/12.png" alt class="top_img2">
+          </div>
+        </div>
+      </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">
+            <div class="order">
+              <div class="blue_bar"></div>
+              <div class="product-order">产品订制</div>
+              <div class="order_bot">
+                <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>
+          </el-menu-item>
+          <el-menu-item index="2" class="item2">
+            智慧案场
+          </el-menu-item>
+          <el-menu-item index="3" class="item3">
+            智慧社区
+          </el-menu-item>
+        </el-menu>
+      </div>-->
+    </div>
+
+    <div class="city_content">
+      <div class="product_int">
+        <img src="../../../assets/image/city/GroupCopy.png" alt class="product_img">
+        <div class="int">
+          <div class="tittle">
+            <div>
+              <div class="tittle_words">产品介绍</div>
+              <div class="tittle_bg"></div>
+            </div>
+            <div class="tittle_eng">PRODUCT INTRODUCTION</div>
+          </div>
+          <p class="int_p1">利用“城的空间”微信平台</p>
+          <p class="int_p2">以社区自有会所服务为依托</p>
+          <p class="int_p3">为居民推送健康、教育、健身、社交、文化、饮食等方面的课程、活动及服务</p>
+        </div>
+      </div>
+      <div class="func">
+          <div class="secondHouse_tittle">
+            <div class="secondHouse_tittle_words">硬件模块</div>
+            <div class="secondHouse_tittle_bg"></div>
+            <div class="secondHouse_tittle_eng">FUNCTION IS INTRODUCED</div>
+          </div>
+          <div class="func_con">
+            <div class="func_con_top">
+              <div class="func_box">
+                <img src="../../../assets/image/city/classroom.png" alt="">
+                <p class="func_p1">智慧课堂</p>
+                <p class="func_p2">富媒体形式展现课程活动 </p>
+                <p class="func_p2">客户在线及时获取相关资讯</p>
+                <p class="func_p3">线上上单，线下核销</p>
+                <p class="func_p4">智慧快人一步</p>
+              </div>
+
+              <div class="func_box">
+                <img src="../../../assets/image/city/Gym.png" alt="">
+                <p class="func_p1">24h健身房</p>
+                <p class="func_p2">自助刷脸进入健身房 </p>
+                <p class="func_p2">扫码启动健身器材</p>
+                <p class="func_p3">在线支付费用</p>
+                <p class="func_p4">更有智能魔镜提供几十项身体数据</p>
+              </div>
+
+              <div class="func_box">
+                <img src="../../../assets/image/city/health.png" alt="">
+                <p class="func_p1">健康小屋</p>
+                <p class="func_p2">线下借助智能体检设备进行检查 </p>
+                <p class="func_p2">手机系统实时查看健康档案</p>
+                <p class="func_p3">长期数据留存，方便监测健康状况</p>
+              </div>
+            </div>
+            <div class="func_con_bottom">
+              <div class="func_box">
+                <img src="../../../assets/image/city/coffee.png" alt="">
+                <p class="func_p1">智慧社交空间</p>
+                <p class="func_p2">业主在线下单 </p>
+                <p class="func_p2">无需排队点单</p>
+                <p class="func_p3"> 更有有机果蔬在线订购 </p>
+                <p class="func_p4">送货到家</p>
+              </div>
+
+              <div class="func_box">
+                <img src="../../../assets/image/city/book.png" alt="">
+                <p class="func_p1">在线书吧</p>
+                <p class="func_p2">万本书籍在线查询预借 </p>
+                <p class="func_p2">线下自助扫码借还书</p>
+                <p class="func_p3">更有上新、还书提醒，好贴心</p>
+              </div>
+
+              <div class="func_box">
+                <img src="../../../assets/image/city/vip.png" alt="">
+                <p class="func_p1">会员系统</p>
+                <p class="func_p2">在线查看社区活动记录 </p>
+                <p class="func_p2">会员系统电子化</p>
+                <p class="func_p3">用户体验更加便捷</p>
+              </div>
+            </div>
+          </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 {
+      tittle: '城的空间',
+      P1: '一站式社区服务共享空间',
+      P2: '足不出户拓展生活空间 , 体验最便捷的品质生活',
+      P3: 'INTELLIGENT FACE RISK CONTROL SYSTEM',
+      activeIndex2: '1'
+    }
+  },
+  methods: {
+    handleSelect (key, keyPath) {
+      console.log(key, keyPath);
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+.product-center {
+  background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
+  width: 100%;
+  min-width: 1260px;
+  height: 780px;
+  background-size: cover;
+}
+.product_box {
+  width: 1260px;
+  height: 780px;
+  margin: 0 auto;
+}
+.product_top {
+  width: 1260px;
+  height: 780px;
+  display: flex;
+  justify-content: center;
+}
+.product_top_con_left {
+  display: inline-block;
+  color: #fff;
+  h3 {
+    font-size: 66px;
+    font-weight: 100;
+    margin: 0 5px;
+    display: flex;
+    align-items: flex-start;
+  }
+  .p1,
+  .p2 {
+    // float: left;
+    font-size: 25px;
+    display: flex;
+    align-items: flex-start;
+  }
+  .p3 {
+    display: flex;
+    align-items: flex-start;
+    color: rgba(255, 255, 255, 1);
+    font-weight: 100;
+    font-size: 12px;
+    margin: 19px 0;
+  }
+}
+.product_top_con_right {
+  display: inline-block;
+  color: #fff;
+  position: relative;
+  width: 530px;
+  .top_img1 {
+    position: absolute;
+    left: 0;
+    top: 22px;
+    width: 175px;
+    height: 312px;
+  }
+  .top_img2 {
+    position: absolute;
+    left: 143px;
+    top: 0;
+    width: 200px;
+    height: 356px;
+  }
+  .top_img3 {
+    position: absolute;
+    left: 315px;
+    top: 22px;
+    width: 175px;
+    height: 312px;
+  }
+}
+.product_top_con {
+  width: 100%;
+  margin: 0 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.el-menu-demo {
+  display: flex;
+  justify-content: space-around;
+}
+
+.product-order {
+  margin: 5px 0;
+  // line-height: 10px;
+}
+.order_bot_online {
+  height: 58px;
+  width: 115px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: space-between;
+  img {
+    width: 35px;
+    height: 42px;
+  }
+}
+.blue_bar {
+  width: 73px;
+  height: 13px;
+  background: rgba(78, 132, 255, 1);
+  border-radius: 0px 0px 70px 70px;
+}
+.order_bot {
+  display: flex;
+  justify-content: space-between;
+}
+.order_bot_secondHandHouse {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: space-between;
+  height: 58px;
+  width: 115px;
+  img {
+    width: 110px;
+    height: 32px;
+  }
+}
+.item1,
+.item2,
+.item3 {
+  width: 314px;
+  height: 78px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: rgba(153, 153, 153, 1);
+}
+.item1 {
+  width: 414px;
+  height: 134px;
+}
+.blue_bar {
+  display: inline-block;
+}
+.order {
+  text-align: center;
+}
+.tittle {
+  height: 80px;
+  // width: 218px;
+  // margin: 72px auto;
+  display: flex;
+  align-items: center;
+  .tittle_words {
+    font-size: 30px;
+    font-weight: 500;
+  }
+  .tittle_bg {
+    margin: -17px auto 0;
+    width: 126px;
+    height: 29px;
+    background-color: #4e84ff;
+  }
+  .tittle_eng {
+    margin-left: 30px;
+    color: rgba(78, 132, 255, 1);
+    font-size: 13px;
+  }
+}
+.city_content {
+  background: url(../../../assets/image/program/bg.jpg) no-repeat center;
+  background-size: 100%;
+
+  .product_int {
+    margin: 0 auto;
+    padding: 140px 0;
+    width: 1260px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .product_img {
+      width: 540px;
+      height: 470px;
+    }
+  }
+}
+.int{
+  width: 476px;
+  // background-color: rgba(0,0,0,0);
+  .int_p1,.int_p2,.int_p3{
+    font-size:14px;
+    color:rgba(128,128,128,1);
+    display: flex;
+    align-items: flex-start;
+  }
+}
+.secondHouse_tittle {
+  height: 80px;
+  width: 218px;
+  background-color: #fff;
+  margin: 72px auto;
+  .secondHouse_tittle_words {
+    font-weight: 500;
+    font-size: 30px;
+  }
+  .secondHouse_tittle_bg {
+    margin: -10px auto 0;
+    width: 135px;
+    height: 29px;
+    background-color: #4e84ff;
+  }
+  .secondHouse_tittle_eng {
+    margin: 10px 0;
+    color: rgba(78, 132, 255, 1);
+  }
+}
+.func_con{
+  width: 960px;
+  margin: 120px auto;
+  // display: 
+  .func_con_top{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 60px;
+  }
+  .func_con_bottom{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 60px;
+  }
+}
+.func_box{
+  img{
+    width:39px;
+    height: 37px;
+    margin: 10px 0;
+  }
+}
+.func_p1{
+  font-size:20px;
+  color:rgba(0,0,0,1);
+  line-height: 28px;
+}
+.func_p2,.func_p3,.func_p4,.func_p5{
+  font-size:14px;
+  line-height: 20px;
+}
+</style>

src/components/pages/productCenter/community.vue

@@ -0,0 +1,542 @@
+<template>
+  <div class="product-center">
+    <headerTab></headerTab>
+    <div class="product_box">
+      <div class="product_top">
+        <div class="product_top_con">
+          <div class="product_top_con_left">
+            <h3>{{tittle}}</h3>
+            <p class="p1">{{P1}}</p>
+            <p class="p2">{{P2}}</p>
+            <p class="p3">{{P3}}</p>
+          </div>
+          <div class="product_top_con_right">
+            <div class="top_con_right_img">
+              <img src="../../../assets/image/yincheng/home1116-1copy2.png" alt>
+              <img src="../../../assets/image/yincheng/home1116-1copy4.png" alt>
+              <img src="../../../assets/image/yincheng/home1116-1copy5.png" alt>
+            </div>
+          </div>
+        </div>
+      </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">
+            <div class="order">
+              <div class="blue_bar"></div>
+              <div class="product-order">产品订制</div>
+              <div class="order_bot">
+                <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>
+          </el-menu-item>
+          <el-menu-item index="2" class="item2">
+            智慧案场
+          </el-menu-item>
+          <el-menu-item index="3" class="item3">
+            智慧社区
+          </el-menu-item>
+        </el-menu>
+      </div>-->
+    </div>
+
+    <div class="community">
+      <div class="community_content">
+        <div class="community_contentA">
+          <div class="community_content_word">
+            <p class="community_content_p1">智能门禁管理</p>
+            <p class="community_content_p2">人员管理更安全、物业提高效率、用户便捷通行</p>
+            <p class="community_content_p3">支持手机APP、人脸识别、二维码扫码、刷卡等多种方式开门，无感通行</p>
+            <p class="community_content_p4">更清晰的追溯方式，高性价比的安防系统</p>
+            <p class="community_content_p5">发送访客二维码，亲友来访宾至如归</p>
+          </div>
+          <div class="community_content_img">
+            <div class="community_content_img1">
+              <img class="main_img" src="../../../assets/image/yincheng/Group15.png" alt>
+              <img src="../../../assets/image/yincheng/Group12.png" alt class="assist_img1">
+              <img src="../../../assets/image/yincheng/Group13.png" alt class="assist_img2">
+              <img src="../../../assets/image/yincheng/Group14.png" alt class="assist_img3">
+            </div>
+          </div>
+        </div>
+        <div class="community_contentB">
+          <div class="community_content_img">
+            <div class="community_content_img1">
+              <img class="main_img" src="../../../assets/image/yincheng/Group2.png" alt>
+              <img src="../../../assets/image/yincheng/Group4.png" alt class="assist_img1">
+              <img src="../../../assets/image/yincheng/Group6.png" alt class="assist_img2">
+              <img src="../../../assets/image/yincheng/Group5.png" alt class="assist_img3">
+              <img src="../../../assets/image/yincheng/Group3.png" alt class="assist_img4">
+              <img src="../../../assets/image/yincheng/camera.png" alt class="assist_img5">
+            </div>
+          </div>
+          <div class="community_content_word">
+            <p class="community_content_p1">智能出行优化</p>
+            <p class="community_content_p2">物业减员增效、车主便捷通行</p>
+            <p class="community_content_p3">停车快速通行，无需刷卡/取票，视频识别车辆自动出入</p>
+            <p class="community_content_p4">可脱机运行，前置数据存储功能，网络中断后仍可运行</p>
+            <p class="community_content_p5">支持微信/APP/扫码等多种方式缴费</p>
+          </div>
+        </div>
+        <div class="community_contentC">
+          <div class="community_content_word">
+            <p class="community_content_p1">社区安全监护</p>
+            <p class="community_content_p2">脉冲式电子围栏，防止外来入侵</p>
+            <p class="community_content_p3">云视频监控，消除安全隐患，方便查看保存</p>
+            <p class="community_content_p4">智慧巡更，APP一键查看巡查轨迹及结果</p>
+            <p class="community_content_p5">户外儿童智能监控，家长更放心</p>
+          </div>
+          <div class="community_content_img">
+            <div class="community_content_img1">
+              <img class="main_img" src="../../../assets/image/yincheng/Group2Copy.png" alt>
+
+              <img src="../../../assets/image/yincheng/Group3Copy7.png" alt class="assist_img2">
+              <img src="../../../assets/image/yincheng/Group3Copy8.png" alt class="assist_img1">
+              <img src="../../../assets/image/yincheng/Group3Copy5.png" alt class="assist_img3">
+              <img src="../../../assets/image/yincheng/Group3Copy3.png" alt class="assist_img4">
+              <img src="../../../assets/image/yincheng/Group3Copy4.png" alt class="assist_img5">
+            </div>
+          </div>
+        </div>
+        <div class="community_contentD">
+          <div class="community_content_img">
+            <div class="community_content_img1">
+              <img class="main_img" src="../../../assets/image/yincheng/cost.png" alt>
+              <img src="../../../assets/image/yincheng/Propertycosts.png" alt class="assist_img1">
+              <img src="../../../assets/image/yincheng/water.png" alt class="assist_img2">
+              <img src="../../../assets/image/yincheng/family.png" alt class="assist_img3">
+              <img src="../../../assets/image/yincheng/pay.png" alt class="assist_img4">
+            </div>
+          </div>
+          <div class="community_content_word">
+            <p class="community_content_p1">物管智能贴心</p>
+            <p class="community_content_p2">多渠道报事，快速处理工单，响应业主诉求</p>
+            <p class="community_content_p3">服务质量有监控，服务价值可评估。</p>
+            <p class="community_content_p4">工单处理结果智能分析，数据产生智能报表</p>
+          </div>
+        </div>
+        <div class="community_contentE">
+          <div class="community_content_word">
+            <p class="community_content_p1">家居智能控制</p>
+            <p class="community_content_p2">远程控制、语音控制，多重家电控制方式</p>
+            <p class="community_content_p3">多种实时探测器，为居家安全保驾护航</p>
+            <p class="community_content_p4">老人独自在家，一键报警更安心</p>
+            <p class="community_content_p5">支持多种模式定制，让家更懂你</p>
+          </div>
+          <div class="community_content_img">
+            <div class="community_content_img1">
+              <img class="main_img" src="../../../assets/image/yincheng/GroupCopy3.png" alt>
+              <img src="../../../assets/image/yincheng/microphone.png" alt class="assist_img1">
+              <img src="../../../assets/image/yincheng/alarm.png" alt class="assist_img2">
+              <img src="../../../assets/image/yincheng/light.png" alt class="assist_img3">
+              <img src="../../../assets/image/yincheng/bright.png" alt class="assist_img4">
+            </div>
+          </div>
+        </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 {
+      tittle: '银城慧家APP',
+      P1: '让业主享受智慧社区美好生活',
+      P2: '整体掌控，一触即发；智能生活，全面掌控',
+      P3: 'INTELLIGENT FACE RISK CONTROL SYSTEM',
+      activeIndex2: '1'
+    }
+  },
+  methods: {
+    handleSelect (key, keyPath) {
+      console.log(key, keyPath);
+    }
+  }
+}
+</script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+.product-center {
+  background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
+  width: 100%;
+  min-width: 1260px;
+  height: 780px;
+  background-size: cover;
+}
+.product_box {
+  width: 1260px;
+  height: 780px;
+  margin: 0 auto;
+}
+.product_top {
+  width: 1260px;
+  height: 780px;
+  display: flex;
+  justify-content: center;
+}
+.product_top_con_left {
+  display: inline-block;
+  color: #fff;
+  h3 {
+    font-size: 66px;
+    font-weight: 100;
+    margin: 0 5px;
+    display: flex;
+    align-items: flex-start;
+  }
+  .p1,
+  .p2 {
+    // float: left;
+    font-size: 25px;
+    display: flex;
+    align-items: flex-start;
+  }
+  .p3 {
+    display: flex;
+    align-items: flex-start;
+    color: rgba(255, 255, 255, 1);
+    font-weight: 100;
+    font-size: 12px;
+    margin: 19px 0;
+  }
+}
+.product_top_con_right {
+  display: inline-block;
+  color: #fff;
+  .top_con_right_img {
+    width: 604px;
+    display: flex;
+    justify-content: space-between;
+    img {
+      width: 188px;
+      height: 406px;
+    }
+  }
+}
+.product_top_con {
+  width: 100%;
+  margin: 0 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.el-menu-demo {
+  display: flex;
+  justify-content: space-around;
+}
+
+.product-order {
+  margin: 5px 0;
+  // line-height: 10px;
+}
+.order_bot_online {
+  height: 58px;
+  width: 115px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: space-between;
+  img {
+    width: 35px;
+    height: 42px;
+  }
+}
+.blue_bar {
+  width: 73px;
+  height: 13px;
+  background: rgba(78, 132, 255, 1);
+  border-radius: 0px 0px 70px 70px;
+}
+.order_bot {
+  display: flex;
+  justify-content: space-between;
+}
+.order_bot_secondHandHouse {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: space-between;
+  height: 58px;
+  width: 115px;
+  img {
+    width: 110px;
+    height: 32px;
+  }
+}
+.item1,
+.item2,
+.item3 {
+  width: 314px;
+  height: 78px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: rgba(153, 153, 153, 1);
+}
+.item1 {
+  width: 414px;
+  height: 134px;
+}
+.blue_bar {
+  display: inline-block;
+}
+.order {
+  text-align: center;
+}
+.community {
+  width: 100%;
+  // height: 100%;
+  background-color: red;
+  background: url(../../../assets/image/yincheng/bg.jpg) no-repeat center;
+  background-size: 100% 100%;
+  .community_content {
+    margin: 0 auto 70px auto;
+      padding: 140px 0;
+    width: 960px;
+    // display: flex;
+    // justify-content: space-between;
+    .community_contentA,
+    .community_contentB,
+    .community_contentC,
+    .community_contentD,
+    .community_contentE,
+    .community_contentF {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+}
+.community_contentA {
+  .community_content_img {
+    position: relative;
+    .main_img {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+    .assist_img1 {
+      position: absolute;
+      top: 18%;
+      left: 60%;
+      height: 54px;
+    }
+    .assist_img2 {
+      position: absolute;
+      top: 40%;
+      left: 10%;
+      width: 150px;
+    }
+    .assist_img3 {
+      position: absolute;
+      top: 70%;
+      left: 63%;
+      width: 36px;
+    }
+  }
+}
+.community_contentB {
+  .community_content_img {
+    position: relative;
+    .main_img {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+    .assist_img1 {
+      position: absolute;
+      top: 60%;
+      left: 15%;
+      height: 80px;
+    }
+    .assist_img2 {
+      position: absolute;
+      top: 28%;
+      left: 63%;
+      width: 36px;
+    }
+    .assist_img3 {
+      position: absolute;
+      top: 40%;
+      left: 68%;
+      width: 36px;
+    }
+    .assist_img4 {
+      position: absolute;
+      top: 70%;
+      left: 63%;
+      width: 80px;
+    }
+    .assist_img5 {
+      position: absolute;
+      top: 60%;
+      left: 46%;
+      width: 36px;
+    }
+  }
+}
+
+.community_contentC {
+  .community_content_img {
+    position: relative;
+    .main_img {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+    .assist_img1 {
+      position: absolute;
+      top: 40%;
+      left: 28%;
+      height: 36px;
+    }
+    .assist_img2 {
+      position: absolute;
+      top: 43%;
+      left: 25%;
+      width: 36px;
+    }
+    .assist_img3 {
+      position: absolute;
+      top: 80%;
+      left: 31%;
+      width: 36px;
+    }
+    .assist_img4 {
+      position: absolute;
+      top: 15%;
+      left: 68%;
+      width: 80px;
+    }
+    .assist_img5 {
+      position: absolute;
+      top: 60%;
+      left: 61%;
+      height: 36px;
+    }
+  }
+}
+
+.community_contentD {
+  .community_content_img {
+    position: relative;
+    .main_img {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+    .assist_img1 {
+      position: absolute;
+      top: 20%;
+      left: 24%;
+      height: 32px;
+    }
+    .assist_img2 {
+      position: absolute;
+      top: 60%;
+      left: 25%;
+      width: 30px;
+    }
+    .assist_img3 {
+      position: absolute;
+      top: 31%;
+      left: 64%;
+      width: 30px;
+    }
+    .assist_img4 {
+      position: absolute;
+      top: 48%;
+      left: 50%;
+      width: 152px;
+    }
+  }
+}
+.community_contentE {
+  .community_content_img {
+    position: relative;
+    .main_img {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+    .assist_img1 {
+      position: absolute;
+      top: 37%;
+      left: 28%;
+      height: 38px;
+    }
+    .assist_img2 {
+      position: absolute;
+      top: 65%;
+      left: 28%;
+      width: 52px;
+    }
+    .assist_img3 {
+      position: absolute;
+      top: 20%;
+      left: 64%;
+      width: 38px;
+    }
+    .assist_img4 {
+      position: absolute;
+      top: 65%;
+      left: 58%;
+      height: 36px;
+    }
+  }
+}
+.community_content_img1 {
+  width: 464px;
+  height: 354px;
+  .main_img {
+    width: 181px;
+  }
+}
+
+.community_content_word {
+  // margin: 45px 0;
+  height: 125px;
+  // background-color: red;
+  .community_content_p1 {
+    display: flex;
+    align-items: flex-start;
+    line-height: 35px;
+    font-size: 18px;
+    color: rgba(0, 0, 0, 1);
+  }
+  .community_content_p2,
+  .community_content_p3,
+  .community_content_p4,
+  .community_content_p5 {
+    font-size: 14px;
+    color: rgba(128, 128, 128, 1);
+    line-height: 20px;
+    display: flex;
+    align-items: flex-start;
+  }
+}
+</style>

src/components/pages/productCenter/micro.vue

@@ -0,0 +1,535 @@
+<template>
+  <div class="product-center">
+    <headerTab></headerTab>
+    <div class="product_box">
+      <div class="product_top">
+        <div class="product_top_con">
+          <div class="product_top_con_left">
+            <h3>{{tittle}}</h3>
+            <p class="p1">{{P1}}</p>
+            <p class="p2">{{P2}}</p>
+            <p class="p3">{{P3}}</p>
+          </div>
+          <div class="product_top_con_right"></div>
+        </div>
+      </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">
+            <div class="order">
+              <div class="blue_bar"></div>
+              <div class="product-order">产品订制</div>
+              <div class="order_bot">
+                <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>
+          </el-menu-item>
+          <el-menu-item index="2" class="item2">
+            智慧案场
+          </el-menu-item>
+          <el-menu-item index="3" class="item3">
+            智慧社区
+          </el-menu-item>
+        </el-menu>
+      </div>-->
+    </div>
+
+    <div class="secondHouse-middle">
+      <div class="secondHouse_content">
+        <div class="Features">
+          <div class="secondHouse_tittle">
+            <div class="secondHouse_tittle_words">传统楼书痛点描述</div>
+            <div class="secondHouse_tittle_bg"></div>
+            <div class="secondHouse_tittle_eng">EXSTING PROBLEMS</div>
+          </div>
+          <div class="discribe">
+            <div class="module_box">
+              <div class="module_box_top">
+                <div class="boxes">
+                  <div class="boxes_img">
+                    <img src="../../../assets/image/micro/11.jpg" alt>
+                  </div>
+                  <div class="module_box_words">传播范围窄，传播速度慢</div>
+                </div>
+                <div class="boxes">
+                  <div class="boxes_img">
+                    <img src="../../../assets/image/micro/22.jpg" alt>
+                  </div>
+                  <div class="module_box_words">成本较高，且内容不能更新</div>
+                </div>
+                <div class="boxes">
+                  <div class="boxes_img">
+                    <img src="../../../assets/image/micro/33.jpg" alt>
+                  </div>
+                  <div class="module_box_words">阅读耗时较久，携带不便</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="product_int">
+          <div class="secondHouse_tittle">
+            <div class="secondHouse_tittle_words">产品介绍</div>
+            <div class="secondHouse_tittle_bg"></div>
+            <div class="secondHouse_tittle_eng">PRODUCT INTRODUCTION</div>
+          </div>
+          <div class="product_int_con">
+            <div class="product_int_box">
+              <img src="../../../assets/image/micro/Path6.png" alt class="line1">
+              <div class="product_int_box_top">
+                <div class="priduct_int_box">
+                  <div class="priduct_int_box_con">
+                    <p class="int_box_p1">楼盘基本信息</p>
+                    <p class="int_box_p2">更全面的楼盘信息</p>
+                    <p class="int_box_p3">官方制作发布，更准确</p>
+                    <p class="int_box_p4">内容实时更新，更便捷</p>
+                    <div class="dot">
+                      <div class="dot_center"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="priduct_int_box">
+                  <div class="priduct_int_box_con">
+                    <p class="int_box_p1">AI全景户型在线浏览</p>
+                    <p class="int_box_p2">结合最新的AI技术</p>
+                    <p class="int_box_p3">让户型更生动，客户体验佳</p>
+                    <!-- <p class="int_box_p4">内容实时更新，更便捷</p> -->
+                    <div class="dot">
+                      <div class="dot_center"></div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="priduct_int_box">
+                  <div class="priduct_int_box_con">
+                    <p class="int_box_p1">电子区域地图</p>
+                    <p class="int_box_p2">周边交通、教育、医疗、商业</p>
+                    <p class="int_box_p3">清晰标注，更具体</p>
+                    <!-- <p class="int_box_p4">内容实时更新，更便捷</p> -->
+                    <div class="dot">
+                      <div class="dot_center"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="product_int_box_bottom">
+                <div class="priduct_int_box">
+                  <div class="priduct_int_box_con">
+                    <div class="dot">
+                      <div class="dot_center"></div>
+                    </div>
+                    <p class="int_box_p1">富媒体形象展示</p>
+                    <p class="int_box_p2">小视频、动图、AI多重表现形式</p>
+                    <p class="int_box_p3">更友好的页面交互</p>
+                    <p class="int_box_p4">让您的楼书活起来</p>
+                  </div>
+                </div>
+                <div class="priduct_int_box">
+                  <div class="priduct_int_box_con">
+                    <div class="dot">
+                      <div class="dot_center"></div>
+                    </div>
+                    <p class="int_box_p1">各类小工具，一应俱全</p>
+                    <p class="int_box_p2">一键导航、一键拨号</p>
+                    <p class="int_box_p3">在线咨询、预约看房</p>
+                    <p class="int_box_p4">活动报名、发表评论</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="product_adv">
+          <div class="secondHouse_tittle">
+            <div class="secondHouse_tittle_words">产品优势</div>
+            <div class="secondHouse_tittle_bg"></div>
+            <div class="secondHouse_tittle_eng">PRODUCT ADVANTAGE</div>
+          </div>
+          <div class="product_adv_box">
+            <img src="../../../assets/image/micro/Path8.png" alt="" class="line2">
+            <div class="product_adv_box1">
+              <div class="product_adv_box_con1">
+                <div class="product_adv-icon">
+                  <img src="../../../assets/image/micro/speed.png" alt>
+                </div>
+                <p class="product_adv_int">网络传播，范围广、速度快</p>
+              </div>
+            </div>
+            <div class="product_adv_box2">
+              <div class="product_adv_box_con2">
+                <div class="product_adv-icon">
+                  <img src="../../../assets/image/micro/speedCopy.png" alt>
+                </div>
+                <p class="product_adv_int">制作成本低，更新及时迅速</p>
+              </div>
+            </div>
+            <div class="product_adv_box1">
+              <div class="product_adv_box_con1">
+                <div class="product_adv-icon">
+                  <img src="../../../assets/image/micro/speedCopy2.png" alt>
+                </div>
+                <p class="product_adv_int">一键分享，轻松便捷</p>
+              </div>
+            </div>
+            <div class="product_adv_box2">
+              <div class="product_adv_box_con2">
+                <div class="product_adv-icon">
+                  <img src="../../../assets/image/micro/speedCopy3.png" alt>
+                </div>
+                <p class="product_adv_int">多重互动，拉进客户距离</p>
+              </div>
+            </div>
+          </div>
+        </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 {
+      tittle: '线上微楼书',
+      P1: '传统楼书的v2.0版本',
+      P2: '利用移动设备进行房地产推广',
+      P3: 'INTELLIGENT FACE RISK CONTROL SYSTEM',
+      activeIndex2: '1'
+    }
+  },
+  methods: {
+    handleSelect (key, keyPath) {
+      console.log(key, keyPath);
+    }
+  }
+}
+</script>
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+.product-center {
+  background: url(../../../assets/image/program/bg3.jpg) no-repeat center;
+  width: 100%;
+  min-width: 1260px;
+  height: 780px;
+  background-size: cover;
+}
+.product_box {
+  width: 1260px;
+  height: 780px;
+  margin: 0 auto;
+}
+.product_top {
+  width: 1260px;
+  height: 780px;
+  display: flex;
+  justify-content: center;
+}
+.product_top_con_left {
+  display: inline-block;
+  color: #fff;
+  h3 {
+    font-size: 66px;
+    font-weight: 100;
+    margin: 0 5px;
+    display: flex;
+    align-items: flex-start;
+  }
+  .p1,
+  .p2 {
+    // float: left;
+    font-size: 25px;
+    display: flex;
+    align-items: flex-start;
+  }
+  .p3 {
+    display: flex;
+    align-items: flex-start;
+    color: rgba(255, 255, 255, 1);
+    font-weight: 100;
+    font-size: 12px;
+    margin: 19px 0;
+  }
+}
+.product_top_con_right {
+  display: inline-block;
+  color: #fff;
+  img:first-child {
+    margin-right: 32px;
+  }
+  img {
+    width: 197px;
+    height: 569px;
+  }
+}
+.product_top_con {
+  width: 100%;
+  margin: 0 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.el-menu-demo {
+  display: flex;
+  justify-content: space-around;
+}
+
+.product-order {
+  margin: 5px 0;
+  // line-height: 10px;
+}
+.order_bot_online {
+  height: 58px;
+  width: 115px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: space-between;
+  img {
+    width: 35px;
+    height: 42px;
+  }
+}
+.blue_bar {
+  width: 73px;
+  height: 13px;
+  background: rgba(78, 132, 255, 1);
+  border-radius: 0px 0px 70px 70px;
+}
+.order_bot {
+  display: flex;
+  justify-content: space-between;
+}
+.order_bot_secondHandHouse {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: space-between;
+  height: 58px;
+  width: 115px;
+  img {
+    width: 110px;
+    height: 32px;
+  }
+}
+.item1,
+.item2,
+.item3 {
+  width: 314px;
+  height: 78px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: rgba(153, 153, 153, 1);
+}
+.item1 {
+  width: 414px;
+  height: 134px;
+}
+.blue_bar {
+  display: inline-block;
+}
+.order {
+  text-align: center;
+}
+.secondHouse-middle {
+  width: 100%;
+  // background-color: red;
+  background: url(../../../assets/image/program/bg.jpg) no-repeat center;
+  background-size: 100%;
+  .secondHouse_content {
+    // width: 1260px;
+    margin: 0 auto;
+    padding: 140px 0;
+    .Features {
+      margin: 140px auto;
+    }
+  }
+}
+.secondHouse_tittle {
+  height: 80px;
+  width: 218px;
+  background-color: #fff;
+  margin: 72px auto;
+  .secondHouse_tittle_words {
+    font-weight: 500;
+  }
+  .secondHouse_tittle_bg {
+    margin: -10px auto 0;
+    width: 135px;
+    height: 29px;
+    background-color: #4e84ff;
+  }
+  .secondHouse_tittle_eng {
+    margin: 10px 0;
+    color: rgba(78, 132, 255, 1);
+  }
+}
+.module_box {
+  width: 960px;
+  margin: auto;
+  .module_box_top {
+    width: 960px;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.boxes {
+  width: 288px;
+  height: 250px;
+  background-color: #fff;
+  border-radius: 6px;
+  box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
+  .boxes_img {
+    width: 288px;
+    border-radius: 6px 6px 0 0;
+    img {
+      width: 288px;
+      height: 186px;
+      border-radius: 6px 6px 0 0;
+    }
+  }
+  .module_box_words {
+    line-height: 64px;
+    font-size: 16px;
+    color: rgba(0, 0, 0, 1);
+  }
+}
+.product_int {
+  width: 1400px;
+  margin: 140px auto;
+  // background-color: red;
+  .product_int_con {
+    // width: 94
+    .product_int_box {
+      // height: 380px;
+      position: relative;
+      .line1 {
+        position: absolute;
+        top: 27%;
+        left: -2%;
+        width: 1400px;
+      }
+      .product_int_box_top {
+        margin: 0 auto 90px auto;
+        width: 900px;
+        display: flex;
+        justify-content: space-between;
+        .priduct_int_box {
+          width: 195px;
+          height: 125px;
+          position: relative;
+          .priduct_int_box_con {
+            position: absolute;
+            bottom: 0;
+          }
+        }
+      }
+
+      .product_int_box_bottom {
+        margin: auto;
+        width: 622px;
+        display: flex;
+        justify-content: space-between;
+        .priduct_int_box {
+          width: 210px;
+          height: 125px;
+          position: relative;
+          .priduct_int_box_con {
+            position: absolute;
+            bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}
+.int_box_p1 {
+  font-size: 18px;
+  line-height: 25px;
+  color: rgba(0, 0, 0, 1);
+}
+.int_box_p2,
+.int_box_p3,
+.int_box_p4 {
+  font-size: 15px;
+  line-height: 21px;
+  color: rgba(128, 128, 128, 1);
+}
+.dot {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  border: 2px dashed rgba(78, 132, 255, 1);
+  margin: 20px auto;
+  display: flex;
+  background-color: #fff;
+  justify-content: center;
+  align-items: center;
+  .dot_center {
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    background-color: #4e84ff;
+  }
+}
+.product_adv_box {
+  height: 180px;
+  width: 755px;
+  font-size: 14px;
+  margin: auto;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  position: relative;
+  .product_adv-icon {
+    img {
+      width: 70px;
+    }
+  }
+}
+.product_adv_box1{
+  height: 180px;
+  width: 170px;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  .product_adv_box_con1{
+    position: absolute;
+    bottom: 0
+  }
+}
+.line2{
+  width: 577px;
+  height: 76px;
+  position: absolute;
+  left: 13%;
+  top: 20%;
+}
+
+.product_adv_box2{
+  position: relative;
+}
+.product_adv{
+  margin: 140px auto;
+}
+</style>

src/components/pages/productCenter/online.vue

@@ -0,0 +1,706 @@
+<template>
+  <div class="product-center">
+    <div class="product_center_top">
+      <headerTab></headerTab>
+      <div class="product_box">
+        <div class="product_top">
+          <div class="product_top_con">
+            <div class="product_top_con_left">
+              <h3>{{tittle}}</h3>
+              <p class="p1">{{P1}}</p>
+              <p class="p2">{{P2}}</p>
+              <p class="p3">{{P3}}</p>
+            </div>
+          </div>
+        </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">
+            <div class="order">
+              <div class="blue_bar"></div>
+              <div class="product-order">产品订制</div>
+              <div class="order_bot">
+                <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>
+          </el-menu-item>
+          <el-menu-item index="2" class="item2">
+            智慧案场
+          </el-menu-item>
+          <el-menu-item index="3" class="item3">
+            智慧社区
+          </el-menu-item>
+        </el-menu>
+        </div>-->
+      </div>
+    </div>
+    <div class="online_middle">
+      <div class="online_content">
+        <div class="online_features">
+          <div class="online_features_tittle">
+            <div class="online_features_tittle_words">8大功能</div>
+            <div class="online_features_tittle_bg"></div>
+            <div class="online_features_tittle_eng">Eight big functions</div>
+          </div>
+          <div class="online_features_content">
+            <div class="online_features_content_top">
+              <div class="online_features_content_project">
+                <div class="online_features_content_project_logo">
+                  <img src="../../../assets/image/platform/project.png" alt>
+                </div>
+                <div class="online_features_content_project_tittle">多项目</div>
+                <div class="online_features_content_project_con">支持一个平台下多项目营销</div>
+              </div>
+              <div class="online_features_content_project">
+                <div class="online_features_content_project_logo">
+                  <img src="../../../assets/image/platform/Multi-business.png" alt>
+                </div>
+                <div class="online_features_content_project_tittle">多业态</div>
+                <div class="online_features_content_project_con">支持新房、二手房、租赁等多种业态模式</div>
+              </div>
+              <div class="online_features_content_project">
+                <div class="online_features_content_project_logo">
+                  <img src="../../../assets/image/platform/mechanism.png" alt>
+                </div>
+                <div class="online_features_content_project_tittle">多机构</div>
+                <div class="online_features_content_project_con">支持多级机构架构、支持渠道销售管控</div>
+              </div>
+              <div class="online_features_content_project">
+                <div class="online_features_content_project_logo">
+                  <img src="../../../assets/image/platform/Character.png" alt>
+                </div>
+                <div class="online_features_content_project_tittle">多角色</div>
+                <div class="online_features_content_project_con">支持内部销售、代理销售、老带新粉丝销售等多种角色参与</div>
+              </div>
+            </div>
+            <div class="online_features_content_top">
+              <div class="online_features_content_project">
+                <div class="online_features_content_project_logo">
+                  <img src="../../../assets/image/platform/level.png" alt>
+                </div>
+                <div class="online_features_content_project_tittle">多层级</div>
+                <div class="online_features_content_project_con">支持团队分销模式的朋友圈推广营销</div>
+              </div>
+              <div class="online_features_content_project">
+                <div class="online_features_content_project_logo">
+                  <img src="../../../assets/image/platform/data.png" alt>
+                </div>
+                <div class="online_features_content_project_tittle">数据通道</div>
+                <div class="online_features_content_project_con">打通销控状态ERP数据通道全面支持“明源”，“用友”数据同步</div>
+              </div>
+              <div class="online_features_content_project">
+                <div class="online_features_content_project_logo">
+                  <img src="../../../assets/image/platform/customize.png" alt>
+                </div>
+                <div class="online_features_content_project_tittle">自定义</div>
+                <div class="online_features_content_project_con">支持销售状态、佣金比例、结算 方案等多环节参数自定义</div>
+              </div>
+              <div class="online_features_content_project">
+                <div class="online_features_content_project_logo">
+                  <img src="../../../assets/image/platform/platform.png" alt>
+                </div>
+                <div class="online_features_content_project_tittle">全平台</div>
+                <div class="online_features_content_project_con">不止微信，支持PC网站，QQ微博，邮件，短信等多媒介传播</div>
+              </div>
+            </div>
+            <div class="online_features_content_line"></div>
+          </div>
+        </div>
+        <div class="introduction">
+          <div class="introduction_tittle">
+            <div class="introduction_tittle_words">产品介绍</div>
+            <div class="introduction_tittle_bg"></div>
+            <div class="introduction_tittle_eng">Eight big functions</div>
+          </div>
+          <div class="introduction_content_box">
+            <div class="introduction_content">
+              <div class="introduction_content_left">
+                <div class="introduction_content_registered">
+                  <div class="introduction_content_img">
+                    <img src="../../../assets/image/platform/Group3.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>
+                  </div>
+                </div>
+
+                <div class="introduction_content_registered">
+                  <div class="introduction_content_img">
+                    <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_p4">客户页报备:</p>
+                    <p class="registered_con_p5">一个客户信息一次可以报备到多个楼盘</p>
+                  </div>
+                </div>
+
+                <div class="introduction_content_registered">
+                  <div class="introduction_content_img">
+                    <img src="../../../assets/image/platform/Group8.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_p4">跟进记录管理</p>
+                    <p class="registered_con_p5">客户意向度管理</p>
+                  </div>
+                </div>
+
+                <div class="introduction_content_registered">
+                  <div class="introduction_content_img">
+                    <img src="../../../assets/image/platform/Group10.png" alt="">
+                  </div>
+                  <div class="registered_con">
+                    <p class="registered_con_p1">案场管理</p>
+                    <p class="registered_con_p2">案场管理人员对报备的处理</p>
+                  </div>
+                </div>
+              </div>
+              <div class="introduction_content_right">
+                <div class="introduction_content_registered">
+                  <div class="introduction_content_img">
+                    <img src="../../../assets/image/platform/Group4.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>
+                  </div>
+                </div>
+
+                <div class="introduction_content_registered">
+                  <div class="introduction_content_img">
+                    <img src="../../../assets/image/platform/Group7.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_p4">客户报备信息和跟进记录</p>
+                    <p class="registered_con_p5">重复报备提醒</p>
+                  </div>
+                </div>
+
+                <div class="introduction_content_registered">
+                  <div class="introduction_content_img">
+                    <img src="../../../assets/image/platform/Group9.png" alt="">
+                  </div>
+                  <div class="registered_con">
+                    <p class="registered_con_p1">跟踪管理</p>
+                    <p class="registered_con_p2">新增跟进记录</p>
+                  </div>
+                </div>
+
+                <div class="introduction_content_registered">
+                  <div class="introduction_content_img">
+                    <img src="../../../assets/image/platform/Group13.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_p4">建议和反馈</p>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="highlight">
+          <div class="highlight_tittle">
+            <div class="highlight_tittle_words">产品亮点</div>
+            <div class="highlight_tittle_bg"></div>
+            <div class="highlight_tittle_eng">Eight big functions</div>
+          </div>
+          <div class="height_content">
+            <div class="height_content_left">
+              <div class="height_content_box">
+                <div class="height_content_box_img">
+                  <img src="../../../assets/image/platform/Group6.jpg" alt="">
+                </div>
+                <div class="height_content_box_tittle">为代理公司搭建冠名的分销平台</div>
+                <div class="height_content_box_con">分销产品可以快速帮新房代理公司搭建属于自己品牌的新房分销平台，有便捷的业务员端、管理业务进度的项目专员端和强大的后台管理系统。</div>
+              </div>
+
+              <div class="height_content_box">
+                <div class="height_content_box_img">
+                  <img src="../../../assets/image/platform/Group6Copy2.jpg" alt="">
+                </div>
+                <div class="height_content_box_tittle">到场流程系统化</div>
+                <div class="height_content_box_con">项目专员在项目现场使用手机进行商机确认、到场确认和成交确认，数据实时更新更有微信消息提醒，让项目现场客户管理更专业公正。</div>
+              </div>
+
+              <div class="height_content_box">
+                <div class="height_content_box_img">
+                  <img src="../../../assets/image/platform/Group6Copy4.jpg" alt="">
+                </div>
+                <div class="height_content_box_tittle">系统全自动佣金结算</div>
+                <div class="height_content_box_con">强大的财务后台，统一对外进行业绩公布和佣金结算，大大提高平台的诚信度。</div>
+              </div>
+
+              <div class="height_content_box">
+                <div class="height_content_box_img">
+                  <img src="../../../assets/image/platform/Group6Copy6.jpg" alt="">
+                </div>
+                <div class="height_content_box_tittle">系统自动统计报表输出</div>
+                <div class="height_content_box_con">分销产品可以快速帮新房代理公司搭建属于自己品牌的新房分销平台，有便捷的业务员端、管理业务进度的项目专员端和强大的后台管理系统。</div>
+              </div>
+            </div>
+            <div class="height_content_right">
+              <div class="height_content_box">
+                <div class="height_content_box_img">
+                  <img src="../../../assets/image/platform/Group6Copy.jpg" alt="">
+                </div>
+                <div class="height_content_box_tittle">经纪人快速报备</div>
+                <div class="height_content_box_con">合作公司的经纪人可以通过微信端或APP端访问分销平台，进行快速客户报备和客户跟进，并实时了解最新的项目成交和分佣情况。</div>
+              </div>
+
+              <div class="height_content_box">
+                <div class="height_content_box_img">
+                  <img src="../../../assets/image/platform/Group6Copy3.jpg" alt="">
+                </div>
+                <div class="height_content_box_tittle">销售进度全掌控</div>
+                <div class="height_content_box_con">公司管理层可以通过分销系统系统查询和管控最新的报备、到场、成交情况，一手掌握各个楼盘的最新客户信息和销售进度！</div>
+              </div>
+
+              <div class="height_content_box">
+                <div class="height_content_box_img">
+                  <img src="../../../assets/image/platform/Group6Copy5.jpg" alt="">
+                </div>
+                <div class="height_content_box_tittle">微信消息动态提醒</div>
+                <div class="height_content_box_con">重要业务环节，如：报备确认，客户到场，保护期失效等环节，系统自动对经纪人和项目专员进行职能消息提醒。</div>
+              </div>
+
+              <div class="height_content_box">
+                <div class="height_content_box_img">
+                  <img src="../../../assets/image/platform/Group6Copy7.jpg" alt="">
+                </div>
+                <div class="height_content_box_tittle">为代理公司搭建冠名的分销平台</div>
+                <div class="height_content_box_con">下游分销公司管理层可以通过手机实时查看公司员工的整体报表数据和成交分佣数据。</div>
+              </div>
+            </div>
+          </div>
+        </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 {
+      tittle: '全渠道在线平台',
+      P1: '线上售楼处平台，连接开发商与购房者的沟通桥梁',
+      P2: '房产商借助微信小程序，基于微信生态圈，完成商业模式闭环',
+      P3: 'Professional product customization',
+      activeIndex2: '1'
+    }
+  },
+  methods: {
+    handleSelect (key, keyPath) {
+      console.log(key, keyPath);
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+.product-center {
+  // background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
+  width: 100%;
+  min-width: 1260px;
+  // height: 780px;
+  // background-size: cover;
+}
+.product_center_top {
+  background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
+  width: 100%;
+  min-width: 1260px;
+  height: 780px;
+  background-size: cover;
+}
+.product_box {
+  width: 1260px;
+  height: 780px;
+  margin: 0 auto;
+}
+.product_top {
+  width: 1260px;
+  height: 780px;
+  display: flex;
+  justify-content: center;
+}
+.product_top_con_left {
+  display: inline-block;
+  color: #fff;
+  h3 {
+    font-size: 66px;
+    font-weight: 100;
+    margin: 0 5px;
+    display: flex;
+    align-items: flex-start;
+  }
+  .p1,
+  .p2 {
+    // float: left;
+    font-size: 25px;
+    display: flex;
+    align-items: flex-start;
+  }
+  .p3 {
+    display: flex;
+    align-items: flex-start;
+    color: rgba(255, 255, 255, 1);
+    font-weight: 100;
+    font-size: 12px;
+    margin: 19px 0;
+  }
+}
+.product_top_con {
+  width: 100%;
+  margin: 0 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.el-menu-demo {
+  display: flex;
+  justify-content: space-around;
+}
+
+.product-order {
+  margin: 5px 0;
+  // line-height: 10px;
+}
+.order_bot_online {
+  height: 58px;
+  width: 115px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: space-between;
+  img {
+    width: 35px;
+    height: 42px;
+  }
+}
+.blue_bar {
+  width: 73px;
+  height: 13px;
+  background: rgba(78, 132, 255, 1);
+  border-radius: 0px 0px 70px 70px;
+}
+.order_bot {
+  display: flex;
+  justify-content: space-between;
+}
+.order_bot_secondHandHouse {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: space-between;
+  height: 58px;
+  width: 115px;
+  img {
+    width: 110px;
+    height: 32px;
+  }
+}
+.item1,
+.item2,
+.item3 {
+  width: 314px;
+  height: 78px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: rgba(153, 153, 153, 1);
+}
+.item1 {
+  width: 414px;
+  height: 134px;
+}
+.blue_bar {
+  display: inline-block;
+}
+.order {
+  text-align: center;
+}
+.online_middle {
+  background: url(../../../assets/image/program/bg.jpg) no-repeat center;
+  width: 100%;
+  min-width: 1300px;
+  background-size: cover;
+  .online_content {
+    width: 1260px;
+    margin: 72px auto 0;
+    .online_features {
+      height: 600px;
+      margin: 140px auto;
+      .online_features_tittle {
+        height: 80px;
+        width: 218px;
+        margin: 0 auto;
+        .online_features_tittle_words {
+          font-weight: 500;
+        }
+        .online_features_tittle_bg {
+          // position: absolute;
+          // left: 41px;
+          // top: 13px;
+          margin: -10px auto 0;
+          width: 135px;
+          height: 29px;
+          background-color: #4e84ff;
+        }
+        .online_features_tittle_eng {
+          margin: 10px 0;
+          color: rgba(78, 132, 255, 1);
+        }
+      }
+      .online_features_content {
+        margin-top: 70px;
+        .online_features_content_line {
+          width: 1007px;
+          height: 203px;
+          border: 1px dashed rgba(162, 194, 255, 1);
+          margin: -375px auto 0;
+        }
+        .online_features_content_top {
+          width: 1290px;
+          margin-left: -15px;
+          display: flex;
+          justify-content: space-between;
+          .online_features_content_project {
+            width: 280px;
+            height: 205px;
+            // background-color: red;
+            .online_features_content_project_logo {
+              width: 63px;
+              height: 63px;
+              border-radius: 50%;
+              background: rgba(255, 255, 255, 1);
+              box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
+              margin: 0 auto;
+              img {
+                padding-top: 16.5px;
+                width: 30px;
+                height: 30px;
+              }
+            }
+            .online_features_content_project_tittle {
+              font-size: 20px;
+              font-weight: 500;
+              color: rgba(0, 0, 0, 1);
+              margin: 15px 0;
+            }
+            .online_features_content_project_con {
+              font-size: 16px;
+              font-weight: 400;
+              color: rgba(102, 102, 102, 1);
+            }
+          }
+        }
+      }
+    }
+    .introduction {
+      width: 100%;
+      margin: 140px auto;
+      .introduction_tittle{
+         height: 80px;
+        width: 218px;
+        margin: 70px auto;
+        .introduction_tittle_words{
+          font-weight: 500;
+        }
+        .introduction_tittle_bg{
+          margin: -10px auto 0;
+          width: 135px;
+          height: 29px;
+          background-color: #4e84ff;
+        }
+        .introduction_tittle_eng {
+          margin: 10px 0;
+          color: rgba(78, 132, 255, 1);
+        }
+      }
+      .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;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              padding: 30px;
+              margin-bottom: 20px;
+              .introduction_content_img{
+                width:156px;
+                img{
+                  width:224px;
+                }
+              }
+              .registered_con{
+                width: 306px;
+                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{
+                  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;
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              padding: 30px;
+              margin-bottom: 20px;
+              .introduction_content_img{
+                width:156px;
+                img{
+                  width:224px;
+                }
+              }
+              .registered_con{
+                width: 306px;
+                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{
+                  display: flex;
+                  justify-content: flex-start;
+                }
+              }
+           }
+         }
+       }
+      }
+    }
+    .highlight{
+      width: 100%;
+      margin: 140px auto;
+      .highlight_tittle{
+         height: 80px;
+        width: 218px;
+        margin: 70px auto;
+        .highlight_tittle_words{
+          font-weight: 500;
+        }
+        .highlight_tittle_bg{
+          margin: -10px auto 0;
+          width: 135px;
+          height: 29px;
+          background-color: #4e84ff;
+        }
+        .highlight_tittle_eng {
+          margin: 10px 0;
+          color: rgba(78, 132, 255, 1);
+        }
+      }
+      .height_content{
+        display: flex;
+        justify-content: center;
+        flex-wrap: nowrap;
+        .height_content_left{
+          width: 500px;
+
+          margin-top: 80px;
+          margin-right: 30px;
+          
+        }
+
+        .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;
+            }
+          }
+</style>

src/components/pages/productCenter/productCenter.vue

@@ -6,9 +6,209 @@
         <div class="product_top_con">
           <div class="product_top_con_left">
             <h3>{{tittle}}</h3>
+            <p class="p1">{{P1}}</p>
+            <p class="p2">{{P2}}</p>
+            <p class="p3">{{P3}}</p>
           </div>
           <div class="product_top_con_right">
-            <h3>{{tittle}}</h3>
+            <img src="../../../assets/image/secondHandHouse/macbook.png" alt>
+          </div>
+        </div>
+      </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">
+            <div class="order">
+              <div class="blue_bar"></div>
+              <div class="product-order">产品订制</div>
+              <div class="order_bot">
+                <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>
+          </el-menu-item>
+          <el-menu-item index="2" class="item2">
+            智慧案场
+          </el-menu-item>
+          <el-menu-item index="3" class="item3">
+            智慧社区
+          </el-menu-item>
+        </el-menu>
+      </div>-->
+      <div class="nav">
+        <div class="order_nav">
+          <div class="tittle">
+            <!-- <div class="blue_bar"></div> -->
+            <div class="product-order">产品订制</div>
+          </div>
+          <div class="product_order_nav">
+                <p class="online">
+                  全渠道在线平台
+                </p>
+                <div class="vertical_line"></div>
+                <p class="second_house">
+                  二手房管理平台
+                </p>
+          </div>
+        </div>
+
+
+        <!-- ------------------------------------------------- -->
+        
+        <!-- <el-row class="tac">
+  <el-col :span="8">
+    <el-menu
+      default-active="1"
+      class="el-menu-vertical-demo"
+      @open="handleOpen"
+      @close="handleClose"
+      background-color="#fff"
+       text-color="rgba(153,153,153,1)"
+       active-text-color="rgba(78,132,255,1)"
+      >
+
+        <el-submenu index="1">
+        <template slot="title">
+          <div class="tittle">
+           
+            <div class="product-order">产品订制</div>
+          </div>
+        </template>
+        <el-menu-item-group>
+          <el-menu-item index="1-1" style="display:inline-block">
+            <div class="order_bot_online">
+              <img src="../../../assets/image/logoicon/shape.png" alt="">
+              <span>全渠道在线平台</span>
+            </div>
+            
+          </el-menu-item>
+          <el-menu-item index="1-2" style="display:inline-block">
+            <div  class="order_bot_secondHandHouse">
+              <img src="../../../assets/image/logoicon/huijulogo.png" alt="">
+            <span>二手房管理平台</span>
+            </div>
+          </el-menu-item>
+        </el-menu-item-group>
+      </el-submenu>
+  
+      
+    </el-menu>
+  </el-col>
+
+  <el-col :span="8">
+    <el-menu
+      default-active="1"
+      class="el-menu-vertical-demo"
+      @open="handleOpen"
+      @close="handleClose"
+      background-color="#fff"
+       text-color="rgba(153,153,153,1)"
+       active-text-color="rgba(78,132,255,1)"
+      >
+      
+      <el-submenu index="2" >
+        <template slot="title">
+          <div class="tittle">
+            
+            <div class="product-order">产品订制</div>
+          </div>
+        </template>
+        <el-menu-item-group>
+          <el-menu-item index="2-1" style="display:inline-block">选项1</el-menu-item>
+          <el-menu-item index="2-2" style="display:inline-block">选项2</el-menu-item>
+        </el-menu-item-group>
+      </el-submenu>
+     
+    </el-menu>
+  </el-col>
+
+  <el-col :span="8">
+    <el-menu
+      default-active="1"
+      class="el-menu-vertical-demo"
+      @open="handleOpen"
+      @close="handleClose"
+      background-color="#fff"
+       text-color="rgba(153,153,153,1)"
+       active-text-color="rgba(78,132,255,1)"
+       v-model="collapse"
+      >
+      <el-submenu index="3">
+        <template slot="title">
+          <div class="tittle">
+          
+            <div class="product-order">产品订制</div>
+          </div>
+        </template>
+        <el-menu-item-group>
+          <el-menu-item index="3-1" style="display:inline-block">选项1</el-menu-item>
+          <el-menu-item index="3-2" style="display:inline-block">选项2</el-menu-item>
+        </el-menu-item-group>
+      </el-submenu>
+    </el-menu>
+  </el-col>
+
+</el-row> -->
+      </div>
+    </div>
+    <div class="secondHouse-middle">
+      <div class="secondHouse_content">
+        <div class="Features">
+          <div class="secondHouse_tittle">
+            <div class="secondHouse_tittle_words">主要功能</div>
+            
+            <div class="secondHouse_tittle_bg"></div>
+            <div class="secondHouse_tittle_eng">THE MAIN FUNCTION</div>
+          </div>
+          <div class="secondHouse_content_Features">
+            <div class="secondHouse_content_left">
+              <div class="secondHouse_content_box">
+                <div class="box_tittle">
+                  <p class="box_tittle_p1">全品类房源管理, 涵盖专业的房地产类型</p>
+                  <p class="box_tittle_p2">多平台同步发布, 源曝光一步实现</p>
+                </div>
+                <div class="box_img">
+                  <img src="../../../assets/image/secondHandHouse/Group6.png" alt>
+                </div>
+              </div>
+              <div class="secondHouse_content_box">
+                <div class="box_tittle">
+                  <p class="box_tittle_p1">大数据楼盘字典, 全楼盘基础字段</p>
+                  <p class="box_tittle_p2">OA办公协同,公司效率成倍提</p>
+                </div>
+                <div class="box_img">
+                  <img src="../../../assets/image/secondHandHouse/Group8.png" alt>
+                </div>
+              </div>
+            </div>
+            <div class="secondHouse_content_right">
+              <div class="secondHouse_content_box">
+                <div class="box_tittle">
+                  <p class="box_tittle_p1">全方位公司管控, 满足您的管理需求</p>
+                  <p class="box_tittle_p2">自定义房客源字段, 满足您本土化的管理需求</p>
+                </div>
+                <div class="box_img">
+                  <img src="../../../assets/image/secondHandHouse/Group7.png" alt>
+                </div>
+              </div>
+
+              <div class="secondHouse_content_box">
+                <div class="box_tittle">
+                  <p class="box_tittle_p1">金融级数据安全, 微软支付核心技术</p>
+                  <p class="box_tittle_p2">更多，更强大的专业功能</p>
+                  <p class="box_tittle_p3">为房产中介公司提供澎湃的发展动力</p>
+                </div>
+                <div class="box_img">
+                  <img src="../../../assets/image/secondHandHouse/Group9.png" alt>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -26,46 +226,269 @@ export default {
 
   data () {
     return {
-      tittle: '二手房管理平台'
+      tittle: '二手房管理平台',
+      P1: '荟房通3.0',
+      P2: '专业级房产中介管理系统',
+      P3: 'Professional product customization',
+      activeIndex2: '1',
+      activeName: 'first',
+      collapse:'true',
     }
+  },
+  methods: {
+    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>
+<style scoped lang="less">
+.nav_logo {
+  width: 414px;
+  margin: auto;
+  // margin: auto;
+  display: flex;
+  // justify-content: center;
+  justify-content: space-around;
+  img {
+    height: 42px;
+  }
+}
+.order_nav {
+  width: 414px;
+  height: 134px;
+  box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
+  border-radius: 10px;
+  // margin: auto;
+}
+.product_order_nav {
+  // margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  justify-content: space-around;
+  
+}
+.nav1,
+.nav2,
+.nav3 {
+  border-radius: 6px;
+  margin: 10px;
+}
+.el-radio-button:first-child .el-radio-button__inner {
+  border-radius: 4px;
+}
 .product-center {
   background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
   width: 100%;
   min-width: 1260px;
-  height: 390px;
+  height: 780px;
   background-size: cover;
 }
 .product_box {
   width: 1260px;
-  height: 390px;
+  height: 780px;
   margin: 0 auto;
 }
 .product_top {
   width: 1260px;
-  height: 390px;
+  height: 780px;
+  display: flex;
+  justify-content: center;
 }
 .product_top_con_left {
   display: inline-block;
   color: #fff;
-}
-.product_top_con_left h3{
-  font-size:33px;
-  font-weight:100;
+  h3 {
+    font-size: 66px;
+    font-weight: 100;
+    margin: 0 5px;
+    display: flex;
+    align-items: flex-start;
+  }
+  .p1,
+  .p2 {
+    // float: left;
+    font-size: 25px;
+    display: flex;
+    align-items: flex-start;
+  }
+  .p3 {
+    display: flex;
+    align-items: flex-start;
+    color: rgba(255, 255, 255, 1);
+    font-weight: 100;
+    font-size: 12px;
+    margin: 19px 0;
+  }
 }
 .product_top_con_right {
   display: inline-block;
   color: #fff;
+  img {
+    width: 303px;
+  }
 }
 .product_top_con {
+  width: 100%;
+  margin: 0 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.el-menu-demo {
+  display: flex;
+  justify-content: space-around;
+}
+
+.product-order {
+  margin: 5px 0;
+  // line-height: 10px;
+}
+.order_bot_online {
+  height: 58px;
+  width: 115px;
+  display: flex;
+
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: space-between;
+  img {
+    width: 35px;
+    height: 42px;
+  }
+}
+.blue_bar {
+  width: 73px;
+  height: 13px;
+  background: rgba(78, 132, 255, 1);
+  border-radius: 0px 0px 70px 70px;
+}
+.order_bot {
+  display: flex;
+  justify-content: space-between;
+}
+.order_bot_secondHandHouse {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: space-between;
+  height: 58px;
+  width: 115px;
+  img {
+    width: 110px;
+    height: 32px;
+  }
+}
+.item1,
+.item2,
+.item3 {
+  width: 314px;
+  height: 78px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: rgba(153, 153, 153, 1);
+}
+.item1 {
+  width: 414px;
+  height: 134px;
+}
+.blue_bar {
+  display: inline-block;
+}
+.order {
   text-align: center;
-  line-height: 390px;
+}
+.secondHouse-middle {
+  width: 100%;
+  // background-color: red;
+  background: url(../../../assets/image/program/bg.jpg) no-repeat center;
+  background-size: 100%;
+  .secondHouse_content {
+    width: 1260px;
+    margin: 0 auto;
+    .Features {
+      margin: 0 auto;
+      padding: 140px 0 70px 0;
+    }
+  }
+}
+.secondHouse_tittle {
+  height: 80px;
+  width: 218px;
+  background-color: #fff;
+  margin: 70px auto;
+  .secondHouse_tittle_words {
+    font-weight: 500;
+  }
+  .secondHouse_tittle_bg {
+    margin: -10px auto 0;
+    width: 135px;
+    height: 29px;
+    background-color: #4e84ff;
+  }
+  .secondHouse_tittle_eng {
+    margin: 10px 0;
+    color: rgba(78, 132, 255, 1);
+  }
+}
+.tittle{
+  padding: 15px 0;
+  color:rgba(153,153,153,1);
+  font-size: 12px;
+}
+.product_order_nav{
+  
+  color:rgba(153,153,153,1);
+  font-size: 12px;
+}
+.secondHouse_content_Features {
+  width: 980px;
+  margin: auto;
   display: flex;
+  justify-content: center;
   justify-content: space-between;
+  .secondHouse_content_left {
+  }
+  .secondHouse_content_right {
+    margin-top: 20px;
+  }
+}
+.secondHouse_content_box {
+  width: 475px;
+  height: 351px;
+  margin: 0 0 30px 30px;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
+  border-radius: 7px;
+}
+.box_tittle {
+  width: 406px;
+  margin: 0 35px;
+  padding: 30px 0;
+  // background-color: red;
+  border-bottom: 3px dashed #a2c2ff;
+  color: rgba(102, 102, 102, 1);
+  font-size: 18px;
+}
+.box_img {
+  margin-top: 30px;
+  img {
+    width: 357px;
+    height: 186px;
+  }
+}
+.vertical_line{
+  // width:px;
+height:15px;
+border:1px solid rgba(196,196,196,1);
 }
 </style>

src/components/pages/productCenter/release.vue

@@ -0,0 +1,500 @@
+<template>
+  <div class="product-center">
+    <headerTab></headerTab>
+    <div class="product_box">
+      <div class="product_top">
+        <div class="product_top_con">
+          <div class="product_top_con_left">
+            <h3>{{tittle}}</h3>
+            <p class="p1">{{P1}}</p>
+            <p class="p2">{{P2}}</p>
+            <p class="p3">{{P3}}</p>
+          </div>
+          <div class="product_top_con_right"></div>
+        </div>
+      </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">
+            <div class="order">
+              <div class="blue_bar"></div>
+              <div class="product-order">产品订制</div>
+              <div class="order_bot">
+                <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>
+          </el-menu-item>
+          <el-menu-item index="2" class="item2">
+            智慧案场
+          </el-menu-item>
+          <el-menu-item index="3" class="item3">
+            智慧社区
+          </el-menu-item>
+        </el-menu>
+      </div>-->
+    </div>
+
+    <div class="secondHouse-middle">
+      <div class="secondHouse_content">
+        <div class="Features">
+          <div class="secondHouse_tittle">
+            <div class="secondHouse_tittle_words">痛点描述</div>
+            <div class="secondHouse_tittle_bg"></div>
+            <div class="secondHouse_tittle_eng">EXSTING PROBLEMS</div>
+          </div>
+          <div class="discribe">
+            <div class="module_box">
+              <div class="module_box_top">
+                <div class="boxes">
+                  <div class="boxes_img">
+                    <img src="../../../assets/image/release/area.png" alt>
+                  </div>
+                  <div class="module_box_words">传统营销地域限制大</div>
+                </div>
+                <div class="boxes">
+                  <div class="boxes_img">
+                    <img src="../../../assets/image/release/lag.png" alt>
+                  </div>
+
+                  <div class="module_box_words">信息滞后</div>
+                </div>
+                <div class="boxes">
+                  <div class="boxes_img">
+                    <img src="../../../assets/image/release/lost.png" alt>
+                  </div>
+
+                  <div class="module_box_words">数据管理模式繁琐，数据易丢失</div>
+                </div>
+              </div>
+              <div class="module_box_bottom">
+                <div class="boxes">
+                  <div class="boxes_img">
+                    <img src="../../../assets/image/release/cost.png" alt>
+                  </div>
+                  <div class="module_box_words">造价成本高，展现形式单一</div>
+                </div>
+                <div class="boxes">
+                  <div class="boxes_img">
+                    <img src="../../../assets/image/release/Evaluation.png" alt>
+                  </div>
+                  <div class="module_box_words">营销效果无法评估</div>
+                </div>
+                <div class="boxes">
+                  <div class="boxes_img">
+                    <img src="../../../assets/image/release/system.png" alt>
+                  </div>
+                  <div class="module_box_words">没有科学有效的老客户管理系统</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="product_int">
+          <div class="secondHouse_tittle">
+            <div class="secondHouse_tittle_words">产品介绍</div>
+            <div class="secondHouse_tittle_bg"></div>
+            <div class="secondHouse_tittle_eng">PRODUCT INTROD CTION</div>
+          </div>
+          <div class="discribe">
+            <div class="module_boxA">
+              <div class="module_box_topA">
+                <div class="product_int_boxes">
+                  <div class="boxes_img">
+                    <img src="../../../assets/image/release/Group2.jpg" alt>
+                  </div>
+                  <div class="module_box_words">
+                    <div class="product_int_p">
+                      <p class="product_int_p1">实时沟通</p>
+                      <p class="product_int_p2">400免费通话，无缝对接售楼处</p>
+                      <p class="product_int_p3">微信客服机器人，线上咨询</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="product_int_boxes">
+                  <div class="boxes_img">
+                    <img src="../../../assets/image/release/Group3.jpg" alt>
+                  </div>
+                  <div class="module_box_words">
+                    <div class="product_int_p">
+                      <p class="product_int_p1">用户报名</p>
+                      <p class="product_int_p2">用户可以在线预约看房</p>
+                      <p class="product_int_p3">在线报名参与开发商举办的活动</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="product_int_boxes">
+                  <div class="boxes_img">
+                    <img src="../../../assets/image/release/Group4.jpg" alt>
+                  </div>
+
+                  <div class="module_box_words">
+                    <div class="product_int_p">
+                      <p class="product_int_p1">数据采集</p>
+                      <p class="product_int_p2">获取用户行为数据</p>
+                      <p class="product_int_p3">收集用户有效信息、完善用户画像</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="module_box_bottomA">
+                <div class="product_int_boxes">
+                  <div class="boxes_img">
+                    <img src="../../../assets/image/release/Group6.jpg" alt>
+                  </div>
+                  <div class="module_box_words">
+                    <div class="product_int_p">
+                      <p class="product_int_p1">楼盘展示</p>
+                      <p class="product_int_p2">通过地图形式展示楼盘矩阵</p>
+                      <p class="product_int_p3">楼盘基本信息展示以及动态更新</p>
+                      <p class="product_int_p4">360全景看房、VR看房、实景相册、视频</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="product_int_boxes_A">
+                  <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>
+                    </div>
+                  </div>
+                </div>
+                <div class="product_int_boxes">
+                  <div class="boxes_img">
+                    <img src="../../../assets/image/release/Group5.jpg" alt>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </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 {
+      tittle: '全案发布平台',
+      P1: '线上售楼处平台，连接开发商与购房者的沟通桥梁',
+      P2: '房产商借助微信小程序，基于微信生态圈，完成商业模式闭环',
+      P3: 'INTELLIGENT FACE RISK CONTROL SYSTEM',
+      activeIndex2: '1'
+    }
+  },
+  methods: {
+    handleSelect (key, keyPath) {
+      console.log(key, keyPath);
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="less">
+.product-center {
+  background: url(../../../assets/image/program/bg3.jpg) no-repeat center;
+  width: 100%;
+  min-width: 1260px;
+  height: 780px;
+  background-size: cover;
+}
+.product_box {
+  width: 1260px;
+  height: 780px;
+  margin: 0 auto;
+}
+.product_top {
+  width: 1260px;
+  height: 780px;
+  display: flex;
+  justify-content: center;
+}
+.product_top_con_left {
+  display: inline-block;
+  color: #fff;
+  h3 {
+    font-size: 66px;
+    font-weight: 100;
+    margin: 0 5px;
+    display: flex;
+    align-items: flex-start;
+  }
+  .p1,
+  .p2 {
+    // float: left;
+    font-size: 25px;
+    display: flex;
+    align-items: flex-start;
+  }
+  .p3 {
+    display: flex;
+    align-items: flex-start;
+    color: rgba(255, 255, 255, 1);
+    font-weight: 100;
+    font-size: 12px;
+    margin: 19px 0;
+  }
+}
+.product_top_con_right {
+  display: inline-block;
+  color: #fff;
+  img:first-child {
+    margin-right: 32px;
+  }
+  img {
+    width: 197px;
+    height: 569px;
+  }
+}
+.product_top_con {
+  width: 100%;
+  margin: 0 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.el-menu-demo {
+  display: flex;
+  justify-content: space-around;
+}
+
+.product-order {
+  margin: 5px 0;
+  // line-height: 10px;
+}
+.order_bot_online {
+  height: 58px;
+  width: 115px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: space-between;
+  img {
+    width: 35px;
+    height: 42px;
+  }
+}
+.blue_bar {
+  width: 73px;
+  height: 13px;
+  background: rgba(78, 132, 255, 1);
+  border-radius: 0px 0px 70px 70px;
+}
+.order_bot {
+  display: flex;
+  justify-content: space-between;
+}
+.order_bot_secondHandHouse {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-content: space-between;
+  height: 58px;
+  width: 115px;
+  img {
+    width: 110px;
+    height: 32px;
+  }
+}
+.item1,
+.item2,
+.item3 {
+  width: 314px;
+  height: 78px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: rgba(153, 153, 153, 1);
+}
+.item1 {
+  width: 414px;
+  height: 134px;
+}
+.blue_bar {
+  display: inline-block;
+}
+.order {
+  text-align: center;
+}
+.secondHouse-middle {
+  width: 100%;
+  background: url(../../../assets/image/program/bg.jpg) no-repeat center;
+  background-size: 100%;
+  .secondHouse_content {
+    width: 1260px;
+    margin: 0 auto;
+    .Features {
+      margin: 0 auto 70px auto;
+      padding: 70px 0;
+    }
+  }
+}
+.secondHouse_tittle {
+  height: 80px;
+  width: 218px;
+  background-color: #fff;
+  margin: 72px auto;
+  .secondHouse_tittle_words {
+    font-weight: 500;
+  }
+  .secondHouse_tittle_bg {
+    margin: -10px auto 0;
+    width: 135px;
+    height: 29px;
+    background-color: #4e84ff;
+  }
+  .secondHouse_tittle_eng {
+    margin: 10px 0;
+    color: rgba(78, 132, 255, 1);
+  }
+}
+
+.filed_box {
+  margin: auto;
+  .filed_box_top {
+    margin: 0 auto 35px;
+    width: 949px;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.filed_box_bottom {
+  margin: 0 auto;
+  width: 1210px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.module_box {
+  width: 960px;
+  margin: auto;
+  .module_box_top {
+    width: 960px;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.module_box_bottom {
+  margin: 80px auto;
+  display: flex;
+  justify-content: space-between;
+}
+.boxes {
+  width: 252px;
+  // height: 60px;
+
+  .boxes_img {
+    width: 63px;
+    height: 63px;
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
+    border-radius: 50%;
+
+    margin: 15px auto;
+    img {
+      margin-top: 17px;
+      height: 29px;
+    }
+  }
+  .module_box_words {
+    font-size: 18px;
+    color: rgba(0, 0, 0, 1);
+  }
+}
+
+.product_int_boxes {
+  width: 370px;
+  height: 276px;
+  border-radius: 6px;
+  box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
+  position: relative;
+  .boxes_img {
+    width: 370px;
+    height: 276px;
+    border-radius: 6px;
+    img {
+      width: 370px;
+      height: 276px;
+      border-radius: 6px;
+    }
+  }
+  .module_box_words {
+    position: absolute;
+    top: 0;
+    width: 370px;
+    height: 276px;
+    background: rgba(0, 0, 0, 0.4975);
+    border-radius: 6px;
+  }
+}
+.product_int_boxes_A {
+  width: 370px;
+  height: 276px;
+  border-radius: 6px;
+  box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
+  .module_box_words {
+    width: 100%;
+    height: 276px;
+    position: relative;
+     .product_int_P{
+       width: 100%;
+       position: absolute;
+    left: 50%;
+    top: 50%;
+     transform: translate(-50%, -50%);
+     }
+  }
+}
+.module_box_topA,
+.module_box_bottomA {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 22px;
+}
+.module_boxA {
+  width: 1154px;
+  margin: 0 auto;
+}
+.product_int {
+  margin: 0 auto 70px auto;
+      padding: 70px 0;
+}
+.product_int_p {
+  width: 100%;
+  margin: 0 auto;
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #fff;
+  .product_int_p1 {
+    font-size: 18px;
+  }
+  .product_int_p2,
+  .product_int_p3 {
+    font-size: 15px;
+  }
+}
+</style>

src/main.js

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

src/router/index.js

@@ -7,6 +7,14 @@ import solution from '@/components/pages/solution/solution' // 解决方案
 
 import productCenter from '@/components/pages/productCenter/productCenter' // 产品中心
 
+import online from '@/components/pages/productCenter/online'
+import AIwelcome from '@/components/pages/productCenter/AIwelcome'
+import bigscreen from '@/components/pages/productCenter/bigscreen'
+import release from '@/components/pages/productCenter/release'
+import micro from '@/components/pages/productCenter/micro'
+import community from '@/components/pages/productCenter/community'
+import city from '@/components/pages/productCenter/city'
+
 import newsInformation from '@/components/pages/newsInformation/newsInformation' // 新闻资讯
 
 import aboutUs from '@/components/pages/aboutUs/aboutUs' // 关于我们
@@ -31,7 +39,45 @@ export default new Router({
     {
       path: '/productCenter',
       name: 'productCenter',
-      component: productCenter
+      component: productCenter,
+      children:[
+
+      ]
+    },
+    {
+      path:'/productCenter/online',
+      name:'online',
+      component:online
+    },
+    {
+      path:'/productCenter/AIwelcome',
+      name:'AIwelcome',
+      component:AIwelcome
+    },
+    {
+      path:'/productCenter/bigscreen',
+      name:'bigscreen',
+      component:bigscreen
+    },
+    {
+      path:'/productCenter/release',
+      name:'release',
+      component:release
+    },
+    {
+      path:'/productCenter/micro',
+      name:'micro',
+      component:micro
+    },
+    {
+      path:'/productCenter/community',
+      name:'community',
+      component:community
+    },
+    {
+      path:'/productCenter/city',
+      name:'city',
+      component:city
     },
     // 新闻资讯
     {