web

.babelrc

@@ -8,5 +8,5 @@
     }],
     "stage-2"
   ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"]
+  "plugins": ["transform-vue-jsx"]
 }

package.json

@@ -45,6 +45,7 @@
     "rimraf": "^2.6.0",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
+    "swiper": "^2.7.6",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
     "vue-loader": "^13.3.0",

src/App.vue

@@ -67,7 +67,24 @@ html{
     box-shadow:0px 1px 14px 0px rgba(65,101,242,0.2);
   }
   .solution .solution-main .tab-bar .el-tabs__header .el-tabs__active-bar{
+    left: 12%;
     width: 95px !important;
   }
+.el-carousel{
+    min-width: 960px !important;
+  }
+  
+.el-tabs__item{
+  width: 230px !important;
+}
+  .el-tabs--top .el-tabs__item.is-top:last-child{
+    padding: 0 20px !important;
+  }
+  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
+    padding: 0 40px 0 0 !important;
+}
+.solution .solution-main .tab-bar .el-tabs__header .el-tabs__active-bar{
+  left: 9.5% !important;
+}
 
 </style>

src/components/commonComponents/headerNav.vue

@@ -9,7 +9,6 @@
           <li class="nav-item active">
             首页
           </li>
-          
           <li class="nav-item">
             解决方案
           </li>
@@ -185,7 +184,7 @@ export default {
       display: inline-block;
       margin-right: 100px;
       height: 72px;
-      line-height: 72px
+      line-height: 72px;
     }
 
     .header .sub-nav-menu span.last-item {
@@ -202,7 +201,6 @@ export default {
     }
     .header.transparent li.active:before,
     .header.transparent li:hover:before {
-      
       background: #4e84ff;
       opacity:0.7326;
     }

src/components/commonComponents/headerTab.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="header-tab">
+  <div class="header-tab transparent">
     <el-row class="topNav">
       <el-col :span="12">
         <img class="header-img" src="../../assets/image/home/logo/logo.png" alt>
@@ -7,39 +7,63 @@
       <el-col :span="12">
         <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" >
           <el-menu-item index="1">
-            <div class="tittle">
+            <!-- <div class="tittle"> -->
               <div class="nav_tittle">
               <span>首页</span>
             </div>
-            </div>
+            <!-- </div> -->
           </el-menu-item>
           <el-menu-item index="2">
             <div class="nav_tittle">
               <span>解决方案</span>
-              
             </div>
           </el-menu-item>
           <el-menu-item index="3">
             <div class="nav_tittle">
-              <span>产品中心</span>
-              
+              <span @mouseenter="enter">产品中心</span>
             </div>
           </el-menu-item>
           <el-menu-item index="4">
             <div class="nav_tittle">
               <span>新闻资讯</span>
-           
             </div>
           </el-menu-item>
           <el-menu-item index="5">
             <div class="nav_tittle">
               <span>关于我们</span>
-              
             </div>
           </el-menu-item>
         </el-menu>
       </el-col>
     </el-row>
+    <div class="sub-nav-menu" v-show="section" @mouseleave="over">
+      <div class="section">
+        <router-link to="/productCenter/online">
+          <span>全渠道在线平台</span>
+        </router-link>
+        <router-link to="/productCenter">
+          <span>二手房管理平台</span>
+        </router-link>
+        <router-link to="/productCenter/AIwelcome">
+          <span>AI迎宾判客系统</span>
+        </router-link>
+        <router-link to="/productCenter/bigscreen">
+          <span >智慧大屏机</span>
+        </router-link>
+        <router-link to="/productCenter/release">
+          <span >全案发布平台</span>
+        </router-link>
+        <router-link to="/productCenter/micro">
+          <span>微楼书</span>
+        </router-link>
+        <router-link to="/productCenter/community">
+          <span >银城慧家APP</span>
+        </router-link>
+        <router-link to="/productCenter/city">
+          <span >城的空间</span>
+        </router-link>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -48,7 +72,8 @@ export default {
   data () {
     return {
       activeIndex: "1",
-      searchBarFixed: false
+      searchBarFixed: false,
+      section:false
     };
   },
   mounted() {
@@ -58,6 +83,12 @@ export default {
     this.changeTabBarActive();
   },
   methods: {
+    enter(){
+      this.section = true;
+    },
+    over(){
+      this.section = false;
+    },
     handleScroll() {
       var scrollTop =
         window.pageYOffset ||
@@ -106,7 +137,6 @@ export default {
   }
 };
 </script>
-
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped >
 .header-tab {
@@ -133,15 +163,12 @@ export default {
   border: none;
 }
 .header-tab .el-menu {
-  /* padding-left: 30px; */
   background-color: transparent;
 }
-
-.header-tab .el-menu--horizontal > .el-menu-item.is-active {
+.el-menu--horizontal>.el-menu-item.is-active{
   border: none;
-  width: 80px;
-  background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #4e84ff 50%); 
 }
+
 .header-tab .el-menu--horizontal > .el-menu-item {
   height: 20px;
   line-height: 20px;
@@ -150,31 +177,83 @@ export default {
   color: #fff;
   background-color: rgba(0,0,0,0);
 }
+
 .logo {
   height: 35px;
 }
-.header-tab .el-menu--horizontal > .el-menu-item:hover{
-  width: 80px;
-  /* margin: auto; */
-  
+.header-tab .el-menu--horizontal > .el-menu-item.is-active:before,
+.header-tab .el-menu--horizontal > .el-menu-item:hover:before{
+   content: "";
+    position: absolute;
+    top: 12px;
+    left: 0;
+    right: 0;
+    margin: auto;
+    display: inline-block;
+    width: 80px;
+     background-color:#4e84ff;
+     opacity:0.7326;
+    height: 12px;
+    animation: Width .3s ease-out;
 }
-@keyframes slide{
-  from {
-    /* margin: auto; */
+@keyframes Width{
+  from{
     width: 0;
+     background-color:#4e84ff;
+    opacity:0.7326;
   }
   to{
-    /* margin: auto; */
     width: 80px;
+     background-color:#4e84ff;
+    opacity:0.7326;
   }
 }
+
 .tittle{
   width: 80px;
 }
-.nav_tittle:hover {
+
+   
+.header-tab.transparent .nav_tittle{
   width: 80px;
-  margin: auto;
-  background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #4e84ff 50%); 
-  animation: slide 0.5s ;
+  text-align: center;
+  vertical-align: middle;
+  color: #fff;
+  position: relative;
+}
+.sub-nav-menu{
+  
+  
+}
+.section{
+  display: flex;
+  justify-content: space-around;
+  width: 100%;
+  height: 60px;
+  overflow: hidden;
+  line-height: 60px;
+  color: #fff;
+  /* background-color: #fff; */
+  animation: Height 1s;
+}
+@keyframes Height {
+  from{
+    height: 0;
+  }
+  to{
+    height: 60px;
+  }
+}
+.nav_tittle span{
+  z-index: 100;
+  
+}
+a {
+  text-decoration: none;
+  color: #fff;
+}
+ 
+.router-link-active {
+  text-decoration: none;
 }
 </style>

src/components/navicard/index.vue

@@ -8,13 +8,12 @@
     <div class="body">
       <div v-for="(item, index) in items" :key="index" @click="clickItem(item, index)" :class="{'item-active': itemActive == index }">
         <img v-if="active" :src="item.icon" alt="">
-        <div>{{ item.text }}</div>
+        <div >{{ item.text }}</div>
       </div>
     </div>
   </div>
 </div>
 </template>
-
 <script>
 export default {
   name: 'NaviCard',
@@ -88,8 +87,6 @@ export default {
       }
     }
   }
-
-
   .header {
     text-align: center;
     font-size:12px;
@@ -113,7 +110,7 @@ export default {
         height:20px;
       }
       & + div {
-        border-left: 1px dotted #000;
+        border-left: 1px dotted #C4C4C4;
         
       }
     }

src/components/pages/index.vue

@@ -14,36 +14,129 @@
           </div>
         </div>
         <div class="page-2 fp-auto-height">
-          <p class="title">一站式解决方案</p>
-          <img :class="page2 == true ? 'animated flipInX' :''" src="../../assets/image/home/littleImg/second.png" alt>
+          <div class="page-2_con">
+            <p class="title">一站式解决方案</p>
+            <div class="swiper">
+              <div class="frame">
+                <div class="frame1"></div>
+                <div class="frame2"></div>
+                <div class="frame3"></div>
+                <div class="frame4"></div>
+              </div>
+              <div class="swiper-container">
+                <div class="swiper-wrapper">
+                  <div class="swiper-slide red-slide" style="width:960px;">
+                    <div class="Tittle">
+                      <div class="con">
+                        <div class="content_left">
+                          <img src="../../assets/image/home/littleImg/01.png" alt>
+                          <div class="left_con">
+                            <p class="Trad">传统案场</p>
+                            <p class="trad_p1">营销费用高，效果差</p>
+                            <p class="trad_p2">营销手段传统，数据反馈慢</p>
+                            <p class="trad_p3">渠道商载客、大量飞单</p>
+                            <p class="trad_p4">客户归属、划分不清</p>
+                          </div>
+                        </div>
+                        <div class="content_right">
+                          <div class="right_con">
+                            <p class="case">智慧案场</p>
+                            <p class="case_p1">智慧人脸风控系统</p>
+                            <p class="case_p1">支撑从人像抓拍、到访识别、销售跟进、置业顾问管理到数据分析等闭环场景</p>
+                            <p class="case_p1">极大地提升了案场管理效率和客户跟进效率</p>
+                            <p class="case_p1">实现传统案场工作的智慧升级</p>
+                          </div>
+                        </div>
+                        <div class="vs">VS</div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="swiper-slide blue-slide" style="width:960px;">
+                    <div class="Tittle">
+                      <div class="con">
+                        <div class="content_left">
+                          <img src="../../assets/image/home/littleImg/02.png" alt>
+                          <div class="left_con">
+                            <p class="Trad">传统社区</p>
+                            <p class="trad_p1">传统物业管理效率低、成本高</p>
+                            <p class="trad_p2">居民生活体验不佳，便捷度不够</p>
+                            <p class="trad_p3">社区安全有待提高</p>
+                          </div>
+                        </div>
+
+                        <div class="content_right">
+                          <div class="right_con">
+                            <p class="case">智慧社区</p>
+                            <p class="case_p1">一个全系平台，四大集群系统</p>
+                            <p class="case_p1">智慧物业、智慧物联、生活服务、社区活动、公共服务、社区大数据</p>
+                            <p class="case_p1">实现多元化、人性化、社会化的智慧社区智能服务</p>
+                          </div>
+                        </div>
+                        <div class="vs">VS</div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="swiper-slide orange-slide" style="width:960px;">
+                    <div class="Tittle">
+                      <div class="con">
+                        <div class="content_left">
+                          <img src="../../assets/image/home/littleImg/03.png" alt>
+                          <div class="left_con">
+                            <p class="Trad">产品开发</p>
+                            <p class="trad_p1">自建团队费时费力成本高</p>
+                            <p class="trad_p2">存在技术壁垒，项目周期长</p>
+                            <p class="trad_p3">企业业务分散，难专注</p>
+                          </div>
+                        </div>
+
+                        <div class="content_right">
+                          <div class="right_con">
+                            <p class="case">产品定制</p>
+                            <p class="case_p1">按需定制、软件开发、工具软件定制</p>
+                            <p class="case_p1">创新的互联网技术整合智能硬件接口</p>
+                            <p class="case_p1">你想要的服务我们都有，实现与客户的共赢</p>
+                          </div>
+                        </div>
+                        <div class="vs">VS</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="pagination"></div>
+              </div>
+            </div>
+          </div>
         </div>
         <div class="page-3 fp-auto-height">
-          <p class="title">产品简介</p>
-          <div class="produce">
-            <div class="list first" :class="page3 == true ? 'animated bounceInLeft' :''">
-              <p class="list-name">AI迎宾判客系统</p>
-              <img src="../../assets/image/home/produce/Group45.png" alt>
-              <p class="list-desc">智慧人脸风控应用于案场、地铁、银行等</p>
-            </div>
-            <div class="list" :class="page3 == true ? 'animated rotateInDownRight' :''">
-              <p class="list-name">智慧大屏机</p>
-              <img src="../../assets/image/home/produce/Group46.png" alt>
-              <p class="list-desc">无人售楼终端机结合VR技术, 沉浸式看房体验</p>
-            </div>
-            <div class="list" :class="page3 == true ? 'animated bounceInDown' :''">
-              <p class="list-name">银城慧家APP</p>
-              <img src="../../assets/image/home/produce/Group47.png" alt>
-              <p class="list-desc">智慧社区管理软件,一键开启智慧社区美好生活</p>
-            </div>
-            <div class="list" :class="page3 == true ? 'animated bounceInRight' :''">
-              <p class="list-name">全楼盘</p>
-              <img src="../../assets/image/home/produce/Group48.png" alt>
-              <p class="list-desc">线上售楼处平台, 满足开发商和购房者共同需求</p>
+          <div class="page-3_con">
+            <p class="title">产品简介</p>
+            <div class="produce">
+              <div class="list first" :class="page3 == true ? 'animation fadeIn1' :''">
+                <p class="list-name">AI迎宾判客系统</p>
+                <img src="../../assets/image/home/produce/Group45.png" alt>
+                <p class="list-desc">智慧人脸风控应用于案场、地铁、银行等</p>
+              </div>
+              <div class="list" :class="page3 == true ? 'animation fadeIn2' :''">
+                <p class="list-name">智慧大屏机</p>
+                <img src="../../assets/image/home/produce/Group46.png" alt>
+                <p class="list-desc">无人售楼终端机结合VR技术, 沉浸式看房体验</p>
+              </div>
+              <div class="list" :class="page3 == true ? 'animation fadeIn3' :''">
+                <p class="list-name">银城慧家APP</p>
+                <img src="../../assets/image/home/produce/Group47.png" alt>
+                <p class="list-desc">智慧社区管理软件,一键开启智慧社区美好生活</p>
+              </div>
+              <div class="list" :class="page3 == true ? 'animation fadeIn4' :''">
+                <p class="list-name">全楼盘</p>
+                <img src="../../assets/image/home/produce/Group48.png" alt>
+                <p class="list-desc">线上售楼处平台, 满足开发商和购房者共同需求</p>
+              </div>
             </div>
           </div>
         </div>
         <div class="page-4 fp-auto-height">
           <div class="page-4-con">
+            <img class="opt" src="../../assets/image/home/background/opt.png" alt="">
             <el-carousel :interval="4000" type="card" height="500px" indicator-position="none" arrow="never">
               <el-carousel-item>
                 <p class="swiper-tittle">服务优势</p>
@@ -93,8 +186,7 @@
             <img src="../../assets/image/home/logo/Group38.png" alt>
             <img src="../../assets/image/home/logo/Group43.png" alt>
           </div>
-
-          <footerNav></footerNav>
+          <footerNav class="foot"></footerNav>
         </div>
       </div>
       <div class="fixed-list">
@@ -103,12 +195,23 @@
     </div>
   </div>
 </template>
+
+
 <script>
+import Swiper from '../../static/js/idangerous.swiper.min.js';
 import headerTab from "@/components/commonComponents/headerTab";
 import footerNav from "@/components/commonComponents/footerNav";
 
+// window.onload = function() {
+//   var mySwiper = new Swiper('.swiper-container', {
+//       centeredSlides: true,
+//       slidesPerView: 'auto',
+//       loop: true
+//     })
+// }
+
 export default {
-  components: { headerTab, footerNav },
+  components: { headerTab, footerNav, Swiper },
   data () {
     return {
       bannerList: [
@@ -129,15 +232,19 @@ export default {
           width: "100%"
         }
       ],
+
       offsetheight: document.documentElement.clientHeight, //获取当前页面的高度
       fullPage: 0, //当前在第几页
       fullPageNum: false, //是否在滑动
+      page1: true,
       page2: false, //是否在第二页
       page3: false, //是否在第三页
     };
   },
   mounted () {
-    //
+
+
+
 
     //在元素加载完毕的时候添加鼠标滑动事件
     //
@@ -145,6 +252,12 @@ export default {
       document.addEventListener("DOMMouseScroll", this.scroll, false);
     }
     window.onmousewheel = document.onmousewheel = this.scroll;
+    var mySwiper = new Swiper('.swiper-container', {
+      centeredSlides: true,
+      slidesPerView: 'auto',
+      loop: true,
+      autoplay : 4000,
+    });
   },
   methods: {
     //
@@ -213,6 +326,7 @@ export default {
 };
 </script>
 <style lang="less">
+@import "../../static/css/idangerous.swiper.css";
 .el-carousel__item h3 {
   color: #475669;
   font-size: 14px;
@@ -223,10 +337,13 @@ export default {
 
 .swiper-tittle {
   font-size: 60px;
+  font-weight: 500;
   margin: 0 auto 58px auto;
   color: rgba(255, 255, 255, 1);
 }
-.service,.skill,.operation {
+.service,
+.skill,
+.operation {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
@@ -236,10 +353,9 @@ export default {
     color: rgba(255, 255, 255, 1);
     text-align: center;
     line-height: 98px;
-    margin: 10px;
+    margin-bottom: 10px;
     background: #2f2f80;
     border-radius: 4px;
-    border: 1px solid rgba(151, 151, 151, 1);
   }
 }
 .section {
@@ -250,6 +366,7 @@ export default {
     width: 100%;
     height: 100%;
     background-size: 100% 100%;
+    overflow: hidden;
     .part-1 {
       color: #fff;
       position: relative;
@@ -289,15 +406,26 @@ export default {
     background: url("../../assets/image/home/background/Group26.jpg") no-repeat
       center;
     width: 100%;
-    height: 1080px;
+    height: 100%;
     background-size: 100% 100%;
     color: #fff;
-    .title {
-      font-size: 56px;
-      padding-top: 200px;
-    }
-    img {
-      width: 100%;
+    overflow: hidden;
+    position: relative;
+    // display: flex;
+    // align-items: center;
+    // justify-content: center;
+    .page-2_con {
+      // position: absolute;
+      // top: 50%;
+      // left: 50%;
+      // transform: translate(-50%,-50%);
+      .title {
+        font-size: 56px;
+        padding-top: 10%;
+      }
+      img {
+        width: 100%;
+      }
     }
   }
   .page-3 {
@@ -306,38 +434,45 @@ export default {
     width: 100%;
     height: 100%;
     background-size: 100% 100%;
-    .title {
-      font-size: 56px;
-      padding-top: 140px;
-      color: #fff;
-    }
-    .produce {
-      width: 1000px;
-      height: 680px;
-      margin: 20px auto;
-      .list {
-        width: 400px;
-        height: 300px;
-        background-color: #fff;
-        border-radius: 4px;
-        padding: 0 40px;
-        margin: 10px;
-        float: left;
-        .list-name {
-          color: #03033f;
-          border-bottom: 2px dashed #040445;
-          padding: 30px 0 18px 0;
-          font-size: 30px;
-        }
-        img {
-          width: 330px;
-          height: 150px;
-          margin-top: 16px;
-        }
-        .list-desc {
-          font-size: 18px;
-          line-height: 36px;
-          color: #000;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    // position: relative;
+    .page-3_con {
+      padding-top: 5%;
+      .title {
+        font-size: 56px;
+        // padding-top: 5%;
+        color: #fff;
+      }
+      .produce {
+        width: 1000px;
+        height: 680px;
+        margin: 20px auto;
+        .list {
+          width: 400px;
+          height: 300px;
+          background-color: #fff;
+          border-radius: 4px;
+          padding: 0 40px;
+          margin: 10px;
+          float: left;
+          .list-name {
+            color: #03033f;
+            border-bottom: 2px dashed #040445;
+            padding: 30px 0 18px 0;
+            font-size: 30px;
+          }
+          img {
+            width: 330px;
+            height: 150px;
+            margin-top: 16px;
+          }
+          .list-desc {
+            font-size: 18px;
+            line-height: 36px;
+            color: #000;
+          }
         }
       }
     }
@@ -350,8 +485,22 @@ export default {
     background-size: 100% 100%;
     display: flex;
     align-items: center;
+    overflow: hidden;
     .page-4-con {
       width: 100%;
+      margin: auto;
+      position: relative;
+      // background: url("../../assets/image/home/background/opt.jpg") no-repeat
+      // center;
+      // background-size:
+      .opt{
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 10;
+      }
     }
     .title {
       font-size: 60px;
@@ -359,15 +508,18 @@ export default {
       color: #fff;
     }
   }
+
   .page-5 {
+    position: relative;
     background: url("../../assets/image/home/background/Group29.jpg") no-repeat
       center;
     width: 100%;
     height: 100%;
     background-size: 100% 100%;
+    overflow: hidden;
     .title {
       font-size: 56px;
-      padding-top: 180px;
+      padding-top: 5%;
       color: #fff;
     }
     .logo-box {
@@ -405,4 +557,250 @@ export default {
     background: #4e84ff;
   }
 }
+
+//一站式轮播
+
+.swiper {
+  position: relative;
+}
+.swiper-container {
+  margin: 80px auto;
+  width: 100%;
+  /* background: #000; */
+  height: 250px;
+  color: #fff;
+
+  /* text-align: center; */
+}
+
+.frame {
+  width: 967px;
+  height: 397px;
+  margin: auto;
+  /* box-shadow: 0px 2px 4px 0px rgba(78, 132, 255, 1); */
+  /* border: 2px solid rgba(190, 190, 190, 1); */
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.frame1 {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 65px;
+  height: 65px;
+  border-left: 2px solid rgba(190, 190, 190, 1);
+  border-top: 2px solid rgba(190, 190, 190, 1);
+}
+.frame2 {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 65px;
+  height: 65px;
+  border-right: 2px solid rgba(190, 190, 190, 1);
+  border-top: 2px solid rgba(190, 190, 190, 1);
+}
+.frame3 {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 65px;
+  height: 65px;
+  border-left: 2px solid rgba(190, 190, 190, 1);
+  border-bottom: 2px solid rgba(190, 190, 190, 1);
+}
+.frame4 {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 65px;
+  height: 65px;
+  border-right: 2px solid rgba(190, 190, 190, 1);
+  border-bottom: 2px solid rgba(190, 190, 190, 1);
+}
+
+.swiper-slide {
+  height: 100%;
+  opacity: 0.4;
+  margin: 0 auto;
+  -webkit-transition: 300ms;
+  -moz-transition: 300ms;
+  -ms-transition: 300ms;
+  -o-transition: 300ms;
+  transition: 300ms;
+}
+
+.swiper-slide-active {
+  opacity: 1;
+  margin: 0 auto;
+}
+.swiper-slide .title {
+  margin-bottom: 0;
+}
+
+.pagination {
+  position: absolute;
+  z-index: 20;
+  left: 10px;
+  bottom: 10px;
+}
+
+.swiper-pagination-switch {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 8px;
+  background: #222;
+  margin-right: 8px;
+  opacity: 0.8;
+  border: 1px solid #fff;
+  cursor: pointer;
+}
+
+.swiper-visible-switch {
+  background: #aaa;
+}
+
+.swiper-active-switch {
+  background: #fff;
+}
+
+.con {
+  width: 864px;
+  height: 248px;
+  margin: 0 auto;
+  position: relative;
+}
+
+.content_left {
+  width: 396px;
+  height: 218px;
+  background: rgba(2, 2, 56, 1);
+  border-radius: 10px;
+  /* display: inline-block; */
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding: 15px 36px 15px 0;
+}
+
+.content_left img {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.content_right {
+  width: 360px;
+  height: 218px;
+  background: rgba(78, 132, 255, 1);
+  border-radius: 10px;
+  /* display: inline-block; */
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 15px 36px;
+}
+
+.vs {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  color: rgba(78, 132, 255, 1);
+  text-align: center;
+  line-height: 60px;
+  font-size: 34px;
+}
+
+.swiper-slide .title {
+  /* position: relative; */
+}
+
+.content_left img {
+  width: 142px !important;
+  height: 144px;
+}
+
+.left_con {
+  margin-left: 115px;
+}
+
+.Trad,
+.case {
+  margin: 0 !important;
+  font-size: 40px;
+  color: rgba(255, 255, 255, 1);
+  line-height: 56px;
+}
+
+.trad_p1,
+.trad_p2,
+.trad_p3,
+.trad_p4,
+.case_p1,
+.case_p2,
+.case_p3,
+.case_p4 {
+  margin: 0 !important;
+  font-size: 18px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 1);
+  line-height: 30px;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeIn2 {
+  from {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.fadeIn1 {
+  animation: fadeIn 1s;
+}
+.fadeIn2 {
+  animation: fadeIn2 2s;
+}
+.fadeIn3 {
+  animation: fadeIn2 3s;
+}
+.fadeIn4 {
+  animation: fadeIn2 4s;
+}
+.foot{
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+}
 </style>

src/components/pages/productCenter/AIwelcome.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="product-center">
     <div class="cover-bg">
-      <img src="../../../assets/image/program/bg3.jpg" alt>
+      <img src="../../../assets/image/program/bg3.png" alt>
     </div>
     <headerTab></headerTab>
     <div class="product_box">
@@ -244,18 +244,15 @@ export default {
   background-size: cover;
   position: relative;
   .cover-bg {
-    position: absolute;
-    top: 0;
-    left: -50%;
-    z-index: -1;
-    width: 200%;
-    overflow: hidden;
-    border-radius: 0 0 60% 60%;
-    img {
-      width: 50%;
-      height: 779px;
+      position: absolute;
+      top: 0;
+      z-index: -1;
+      overflow: hidden;
+      img {
+        width: 100%;
+        height: 779px;
+      }
     }
-  }
 }
 .product_box {
   width: 1260px;
@@ -298,7 +295,7 @@ export default {
   display: inline-block;
   color: #fff;
   img {
-    width: 303px;
+    width: 650px;
   }
 }
 .product_top_con {
@@ -386,11 +383,11 @@ export default {
 }
 .Features1 {
      margin: 0 auto 70px auto;
-      padding: 70px 0;
+      padding: 80px 0;
     }
 .Features2 {
       margin: 70px auto 0 auto;
-      padding: 70px 0;
+      padding-bottom: 80px;
     }
 .secondHouse_tittle {
   height: 80px;
@@ -398,10 +395,11 @@ export default {
   background-color: #fff;
   margin: 72px auto;
   .secondHouse_tittle_words {
+    font-size: 30px;
     font-weight: 500;
   }
   .secondHouse_tittle_bg {
-    margin: -10px auto 0;
+    margin: -16px auto 0;
     width: 135px;
     height: 29px;
     background-color: #4e84ff;

src/components/pages/productCenter/bigscreen.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="product-center">
     <div class="cover-bg">
-      <img src="../../../assets/image/program/bg3.jpg" alt>
+      <img src="../../../assets/image/program/bg3.png" alt>
     </div>
     <headerTab></headerTab>
     <div class="product_box">
@@ -247,18 +247,15 @@ export default {
   background-size: cover;
   position: relative;
   .cover-bg {
-    position: absolute;
-    top: 0;
-    left: -50%;
-    z-index: -1;
-    width: 200%;
-    overflow: hidden;
-    border-radius: 0 0 60% 60%;
-    img {
-      width: 50%;
-      height: 779px;
+      position: absolute;
+      top: 0;
+      z-index: -1;
+      overflow: hidden;
+      img {
+        width: 100%;
+        height: 779px;
+      }
     }
-  }
 }
 .product_box {
   width: 1260px;
@@ -391,10 +388,15 @@ export default {
     
   }
 }
-.Features1,.Features2 {
+.Features2{
+  margin: 0 auto 70px auto;
+      padding-bottom: 80px;
+}
+.Features1 {
       margin: 0 auto 70px auto;
-      padding: 70px 0;
+      padding: 80px 0;
     }
+
     .Features3{
       margin: 0 auto;
     }
@@ -404,10 +406,11 @@ export default {
   background-color: #fff;
   margin: 72px auto;
   .secondHouse_tittle_words {
+    font-size: 30px;
     font-weight: 500;
   }
   .secondHouse_tittle_bg {
-    margin: -10px auto 0;
+    margin: -16px auto 0;
     width: 135px;
     height: 29px;
     background-color: #4e84ff;

src/components/pages/productCenter/city.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="product-center">
     <div class="cover-bg">
-            <img src="../../../assets/image/program/bg1.jpg" alt="">
+            <img src="../../../assets/image/program/bg1.png" alt="">
           </div>
     <headerTab></headerTab>
     <div class="product_box">
@@ -168,13 +168,10 @@ export default {
   .cover-bg {
       position: absolute;
       top: 0;
-      left: -50%;
       z-index: -1;
-      width: 200%;
       overflow: hidden;
-      border-radius: 0 0 60% 60%;
       img {
-        width: 50%;
+        width: 100%;
         height: 779px;
       }
     }
@@ -343,7 +340,7 @@ export default {
   background-size: 100%;
   .product_int {
     margin: 0 auto;
-    padding: 219px 0;
+    padding: 80px 0;
     width: 1260px;
     display: flex;
     align-items: center;
@@ -400,6 +397,7 @@ export default {
   }
 }
 .func_box{
+  width: 210px;
   img{
     width:39px;
     height: 37px;

src/components/pages/productCenter/community.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="product-center">
      <div class="cover-bg">
-            <img src="../../../assets/image/program/bg1.jpg" alt="">
+            <img src="../../../assets/image/program/bg1.png" alt="">
           </div>
     <headerTab></headerTab>
     <div class="product_box">
@@ -174,7 +174,7 @@ export default {
   align-items: center;
 }
 .product-center {
-  // background: url(../../../assets/image/program/bg1.jpg) no-repeat center;
+  
   width: 100%;
   min-width: 1260px;
   height: 780px;
@@ -183,13 +183,10 @@ export default {
   .cover-bg {
       position: absolute;
       top: 0;
-      left: -50%;
       z-index: -1;
-      width: 200%;
       overflow: hidden;
-      border-radius: 0 0 60% 60%;
       img {
-        width: 50%;
+        width: 100%;
         height: 779px;
       }
     }

src/components/pages/productCenter/micro.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="product-center">
     <div class="cover-bg">
-            <img src="../../../assets/image/program/bg3.jpg" alt="">
+            <img src="../../../assets/image/program/bg3.png" alt="">
           </div>
     <headerTab></headerTab>
     <div class="product_box">
@@ -25,7 +25,7 @@
         <div class="Features">
           <div class="secondHouse_tittle">
             <div class="secondHouse_tittle_words">传统楼书痛点描述</div>
-            <div class="secondHouse_tittle_bg"></div>
+            <div class="secondHouse_tittle_bg1"></div>
             <div class="secondHouse_tittle_eng">EXSTING PROBLEMS</div>
           </div>
           <div class="discribe">
@@ -71,7 +71,8 @@
                     <p class="int_box_p3">官方制作发布，更准确</p>
                     <p class="int_box_p4">内容实时更新，更便捷</p>
                     <div class="dot">
-                      <div class="dot_center"></div>
+                      <img src="../../../assets/image/micro/Group7.png" alt="">
+                      <!-- <div class="dot_center"></div> -->
                     </div>
                   </div>
                 </div>
@@ -83,7 +84,8 @@
                     <p class="int_box_p3">让户型更生动，客户体验佳</p>
                     <!-- <p class="int_box_p4">内容实时更新，更便捷</p> -->
                     <div class="dot">
-                      <div class="dot_center"></div>
+                      <img src="../../../assets/image/micro/Group7.png" alt="">
+                      <!-- <div class="dot_center"></div> -->
                     </div>
                   </div>
                 </div>
@@ -95,7 +97,8 @@
                     <p class="int_box_p3">清晰标注，更具体</p>
                     <!-- <p class="int_box_p4">内容实时更新，更便捷</p> -->
                     <div class="dot">
-                      <div class="dot_center"></div>
+                      <img src="../../../assets/image/micro/Group7.png" alt="">
+                      <!-- <div class="dot_center"></div> -->
                     </div>
                   </div>
                 </div>
@@ -104,7 +107,8 @@
                 <div class="priduct_int_box">
                   <div class="priduct_int_box_con">
                     <div class="dot">
-                      <div class="dot_center"></div>
+                      <img src="../../../assets/image/micro/Group7.png" alt="">
+                      <!-- <div class="dot_center"></div> -->
                     </div>
                     <p class="int_box_p1">富媒体形象展示</p>
                     <p class="int_box_p2">小视频、动图、AI多重表现形式</p>
@@ -115,7 +119,8 @@
                 <div class="priduct_int_box">
                   <div class="priduct_int_box_con">
                     <div class="dot">
-                      <div class="dot_center"></div>
+                      <img src="../../../assets/image/micro/Group7.png" alt="">
+                      <!-- <div class="dot_center"></div> -->
                     </div>
                     <p class="int_box_p1">各类小工具，一应俱全</p>
                     <p class="int_box_p2">一键导航、一键拨号</p>
@@ -225,25 +230,22 @@ export default {
   align-items: center;
 }
 .product-center {
-  // background: url(../../../assets/image/program/bg3.jpg) no-repeat center;
+  
   width: 100%;
   min-width: 1260px;
   height: 780px;
   background-size: cover;
   position: relative;
   .cover-bg {
-    position: absolute;
-    top: 0;
-    left: -50%;
-    z-index: -1;
-    width: 200%;
-    overflow: hidden;
-    border-radius: 0 0 60% 60%;
-    img {
-      width: 50%;
-      height: 779px;
+      position: absolute;
+      top: 0;
+      z-index: -1;
+      overflow: hidden;
+      img {
+        width: 100%;
+        height: 779px;
+      }
     }
-  }
 }
 .product_box {
   width: 1260px;
@@ -373,22 +375,24 @@ export default {
   .secondHouse_content {
     // width: 1260px;
     margin: 0 auto;
-    padding: 140px 0;
+    padding: 80px 0;
     .Features {
-      margin: 140px auto;
+      margin: 80px auto;
     }
   }
 }
 .secondHouse_tittle {
   height: 80px;
-  width: 218px;
+  width: 250px;
   background-color: #fff;
   margin: 72px auto;
   .secondHouse_tittle_words {
+    font-size: 30px;
     font-weight: 500;
   }
+
   .secondHouse_tittle_bg {
-    margin: -10px auto 0;
+    margin: -16px auto 0;
     width: 135px;
     height: 29px;
     background-color: #4e84ff;
@@ -398,6 +402,12 @@ export default {
     color: rgba(78, 132, 255, 1);
   }
 }
+.secondHouse_tittle_bg1 {
+    margin: -16px auto 0;
+    width: 252px;
+    height: 29px;
+    background-color: #4e84ff;
+  }
 .module_box {
   width: 960px;
   margin: auto;
@@ -444,7 +454,7 @@ export default {
         width: 1400px;
       }
       .product_int_box_top {
-        margin: 0 auto 90px auto;
+        margin: 0 auto 85px auto;
         width: 900px;
         display: flex;
         justify-content: space-between;
@@ -490,21 +500,24 @@ export default {
   color: rgba(128, 128, 128, 1);
 }
 .dot {
-  width: 25px;
-  height: 25px;
-  border-radius: 50%;
-  border: 2px dashed rgba(78, 132, 255, 1);
+  // width: 25px;
+  // height: 25px;
+  // border-radius: 50%;
+  // border: 2px dashed rgba(78, 132, 255, 1);
   margin: 20px auto;
   display: flex;
-  background-color: #fff;
+  // background-color: #fff;
   justify-content: center;
   align-items: center;
-  .dot_center {
-    width: 13px;
-    height: 13px;
-    border-radius: 50%;
-    background-color: #4e84ff;
+  img{
+    width: 25px;
   }
+  // .dot_center {
+  //   width: 13px;
+  //   height: 13px;
+  //   border-radius: 50%;
+  //   background-color: #4e84ff;
+  // }
 }
 .product_adv_box {
   height: 180px;
@@ -545,5 +558,6 @@ export default {
 }
 .product_adv{
   margin: 140px auto;
+  width: 1400px;
 }
 </style>

src/components/pages/productCenter/online.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="product-center">
     <div class="cover-bg">
-      <img src="../../../assets/image/program/bg2.jpg" alt>
+      <img src="../../../assets/image/program/bg2.png" alt>
     </div>
     <div class="product_center_top">
       <headerTab></headerTab>
@@ -124,7 +124,7 @@
           <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 class="introduction_tittle_eng">PRODUCT INTRODUCTION</div>
           </div>
           <div class="introduction_content_box">
             <div class="introduction_content">
@@ -230,7 +230,7 @@
           <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 class="highlight_tittle_eng">PRODUCT ADVANTAGE</div>
           </div>
           <div class="height_content">
             <div class="height_content_left">
@@ -365,21 +365,17 @@ export default {
   // background-size: cover;
   position: relative;
   .cover-bg {
-    position: absolute;
-    top: 0;
-    left: -50%;
-    z-index: -1;
-    width: 200%;
-    overflow: hidden;
-    border-radius: 0 0 60% 60%;
-    img {
-      width: 50%;
-      height: 779px;
+      position: absolute;
+      top: 0;
+      z-index: -1;
+      overflow: hidden;
+      img {
+        width: 100%;
+        height: 779px;
+      }
     }
-  }
 }
 .product_center_top {
-  // background: url(../../../assets/image/program/bg2.jpg) no-repeat center;
   width: 100%;
   min-width: 1260px;
   height: 780px;
@@ -504,20 +500,21 @@ export default {
     margin: 72px auto 0;
     .online_features {
       height: 600px;
-      padding: 140px 0;
+      padding: 80px 0;
       margin: 0 auto;
       .online_features_tittle {
         height: 80px;
         width: 218px;
         margin: 0 auto;
         .online_features_tittle_words {
+          font-size: 30px;
           font-weight: 500;
         }
         .online_features_tittle_bg {
           // position: absolute;
           // left: 41px;
           // top: 13px;
-          margin: -10px auto 0;
+          margin: -16px auto 0;
           width: 135px;
           height: 29px;
           background-color: #4e84ff;
@@ -574,16 +571,17 @@ export default {
     }
     .introduction {
       width: 100%;
-      margin: 140px auto;
+      margin: 0 auto;
       .introduction_tittle {
         height: 80px;
         width: 218px;
         margin: 70px auto;
         .introduction_tittle_words {
+          font-size: 30px;
           font-weight: 500;
         }
         .introduction_tittle_bg {
-          margin: -10px auto 0;
+          margin: -16px auto 0;
           width: 135px;
           height: 29px;
           background-color: #4e84ff;
@@ -689,10 +687,11 @@ export default {
         width: 218px;
         margin: 70px auto;
         .highlight_tittle_words {
+          font-size: 30px;
           font-weight: 500;
         }
         .highlight_tittle_bg {
-          margin: -10px auto 0;
+          margin: -16px auto 0;
           width: 135px;
           height: 29px;
           background-color: #4e84ff;
@@ -749,6 +748,7 @@ export default {
   .height_content_box_con {
     display: flex;
     justify-content: flex-start;
+    text-align: left;
     padding: 22px 24px;
   }
 }

src/components/pages/productCenter/product.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="product">
+    <headerTab></headerTab>
+    <router-view></router-view>
+  </div>
+</template>
+<script>
+import headerTab from "@/components/commonComponents/headerTab";
+
+export default {
+  components:{
+    headerTab
+  }
+}
+</script>
+

src/components/pages/productCenter/productCenter.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="product-center">
     <div class="cover-bg">
-            <img src="../../../assets/image/program/bg2.jpg" alt="">
+            <img src="../../../assets/image/program/bg2.png" alt="">
           </div>
     <headerTab></headerTab>
     <div class="product_box">
@@ -236,13 +236,10 @@ export default {
   .cover-bg {
       position: absolute;
       top: 0;
-      left: -50%;
       z-index: -1;
-      width: 200%;
       overflow: hidden;
-      border-radius: 0 0 60% 60%;
       img {
-        width: 50%;
+        width: 100%;
         height: 779px;
       }
     }
@@ -384,7 +381,7 @@ export default {
     margin: 0 auto;
     .Features {
       margin: 0 auto;
-      padding: 140px 0 70px 0;
+      padding: 80px 0;
     }
   }
 }
@@ -394,10 +391,11 @@ export default {
   background-color: #fff;
   margin: 70px auto;
   .secondHouse_tittle_words {
+    font-size: 30px;
     font-weight: 500;
   }
   .secondHouse_tittle_bg {
-    margin: -10px auto 0;
+    margin: -16px auto 0;
     width: 135px;
     height: 29px;
     background-color: #4e84ff;

src/components/pages/productCenter/release.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="product-center">
     <div class="cover-bg">
-      <img src="../../../assets/image/program/bg3.jpg" alt>
+      <img src="../../../assets/image/program/bg3.png" alt>
     </div>
     <headerTab></headerTab>
     <div class="product_box">
@@ -17,7 +17,6 @@
         </div>
       </div>
       <prod-navi class="nav" default="case"></prod-navi>
-      
     </div>
 
     <div class="secondHouse-middle">
@@ -32,44 +31,44 @@
             <div class="module_box">
               <div class="module_box_top">
                 <div class="boxes">
-                  <div class="boxes_img">
+                  <div class="problems_boxes_img">
                     <img src="../../../assets/image/release/area.png" alt>
                   </div>
-                  <div class="module_box_words">传统营销地域限制大</div>
+                  <div class="module_box_problems">传统营销地域限制大</div>
                 </div>
                 <div class="boxes">
-                  <div class="boxes_img">
+                  <div class="problems_boxes_img">
                     <img src="../../../assets/image/release/lag.png" alt>
                   </div>
 
-                  <div class="module_box_words">信息滞后</div>
+                  <div class="module_box_problems">信息滞后</div>
                 </div>
                 <div class="boxes">
-                  <div class="boxes_img">
+                  <div class="problems_boxes_img">
                     <img src="../../../assets/image/release/lost.png" alt>
                   </div>
 
-                  <div class="module_box_words">数据管理模式繁琐，数据易丢失</div>
+                  <div class="module_box_problems">数据管理模式繁琐，数据易丢失</div>
                 </div>
               </div>
               <div class="module_box_bottom">
                 <div class="boxes">
-                  <div class="boxes_img">
+                  <div class="problems_boxes_img">
                     <img src="../../../assets/image/release/cost.png" alt>
                   </div>
-                  <div class="module_box_words">造价成本高，展现形式单一</div>
+                  <div class="module_box_problems">造价成本高，展现形式单一</div>
                 </div>
                 <div class="boxes">
-                  <div class="boxes_img">
+                  <div class="problems_boxes_img">
                     <img src="../../../assets/image/release/Evaluation.png" alt>
                   </div>
-                  <div class="module_box_words">营销效果无法评估</div>
+                  <div class="module_box_problems">营销效果无法评估</div>
                 </div>
                 <div class="boxes">
-                  <div class="boxes_img">
+                  <div class="problems_boxes_img">
                     <img src="../../../assets/image/release/system.png" alt>
                   </div>
-                  <div class="module_box_words">没有科学有效的老客户管理系统</div>
+                  <div class="module_box_problems">没有科学有效的老客户管理系统</div>
                 </div>
               </div>
             </div>
@@ -146,12 +145,11 @@
                       <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 class="boxes_img_L">
+                    <img class="img_L" src="../../../assets/image/release/Group5.jpg" alt>
                   </div>
                 </div>
+                <div class="product_int_boxes"></div>
               </div>
             </div>
           </div>
@@ -182,7 +180,7 @@ export default {
     }
   },
   methods: {
-    active1(){
+    active1 () {
       this.order1 = false;
       this.order_big = true;
       this.wisdom_nav = true;
@@ -219,18 +217,15 @@ export default {
   background-size: cover;
   position: relative;
   .cover-bg {
-    position: absolute;
-    top: 0;
-    left: -50%;
-    z-index: -1;
-    width: 200%;
-    overflow: hidden;
-    border-radius: 0 0 60% 60%;
-    img {
-      width: 50%;
-      height: 779px;
+      position: absolute;
+      top: 0;
+      z-index: -1;
+      overflow: hidden;
+      img {
+        width: 100%;
+        height: 779px;
+      }
     }
-  }
 }
 .product_box {
   width: 1260px;
@@ -360,8 +355,8 @@ export default {
     width: 1260px;
     margin: 0 auto;
     .Features {
-      margin: 0 auto 70px auto;
-      padding: 70px 0;
+      margin: 0 auto;
+      padding: 80px 0;
     }
   }
 }
@@ -371,10 +366,11 @@ export default {
   background-color: #fff;
   margin: 72px auto;
   .secondHouse_tittle_words {
+    font-size: 30px;
     font-weight: 500;
   }
   .secondHouse_tittle_bg {
-    margin: -10px auto 0;
+    margin: -16px auto 0;
     width: 135px;
     height: 29px;
     background-color: #4e84ff;
@@ -419,61 +415,73 @@ export default {
   width: 252px;
   // height: 60px;
 
-  .boxes_img {
+  .problems_boxes_img {
     width: 63px;
     height: 63px;
+    margin: auto;
+    margin-bottom: 12px;
+    border-radius: 50%;
     background: rgba(255, 255, 255, 1);
     box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
-    border-radius: 50%;
-
-    margin: 15px auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     img {
-      margin-top: 17px;
       height: 29px;
     }
   }
-  .module_box_words {
+  .module_box_problems {
     font-size: 18px;
     color: rgba(0, 0, 0, 1);
   }
 }
+.boxes_img_L {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.img_L {
+  width: 370px;
+  height: 276px;
+  border-radius: 0 6px 6px;
+}
 
-.product_int_boxes {
+.boxes_img {
   width: 370px;
   height: 276px;
   border-radius: 6px;
-  box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
-  position: relative;
-  .boxes_img {
+  img {
     width: 370px;
     height: 276px;
     border-radius: 6px;
-    img {
-      width: 370px;
-      height: 276px;
-      border-radius: 6px;
-    }
   }
+}
+.module_box_words {
+  position: absolute;
+  top: 0;
+  width: 393px;
+  height: 276px;
+  background: rgba(0, 0, 0, 0.4975);
+  border-radius: 6px;
+}
+.product_int_boxes {
+  position: relative;
   .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;
+  width: 762px;
   height: 276px;
+  position: relative;
   border-radius: 6px;
   box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
   .module_box_words {
-    width: 100%;
+    width: 393px;
     height: 276px;
+    background-color: #fff;
     position: relative;
     .product_int_P {
-      width: 100%;
       position: absolute;
       left: 50%;
       top: 50%;
@@ -493,7 +501,7 @@ export default {
 }
 .product_int {
   margin: 0 auto;
-  padding: 70px 0;
+  padding-bottom: 70px;
 }
 .product_int_p {
   width: 100%;

src/main.js

@@ -16,8 +16,9 @@ Vue.use(animate)
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 
- 
 Vue.use(ElementUI)
+
+
  
 // new Vue({
 //   el: '#app',

src/router/index.js

@@ -5,6 +5,8 @@ import index from '@/components/pages/index' // 首页
 
 import solution from '@/components/pages/solution/solution' // 解决方案
 
+import product from '@/components/pages/productCenter/product'
+
 import productCenter from '@/components/pages/productCenter/productCenter' // 产品中心
 
 import online from '@/components/pages/productCenter/online'
@@ -19,7 +21,8 @@ import newsInformation from '@/components/pages/newsInformation/newsInformation'
 
 import aboutUs from '@/components/pages/aboutUs/aboutUs' // 关于我们
 
-import headerNav from '@/components/commonComponents/headerNav' 
+import headerNav from '@/components/commonComponents/headerNav'
+
 
 Vue.use(Router)
 
@@ -38,12 +41,48 @@ export default new Router({
       component: solution
     },
     // 产品中心
+    
     {
       path: '/productCenter',
       name: 'productCenter',
       component: productCenter,
-      children:[
-      ]
+      // children:[
+    //     {
+    //       path:'/online',
+    //       name:'online',
+    //       component:online
+    //     },
+    //     {
+    //       path:'/AIwelcome',
+    //       name:'AIwelcome',
+    //       component:AIwelcome
+    //     },
+    //     {
+    //       path:'/bigscreen',
+    //       name:'bigscreen',
+    //       component:bigscreen
+    //     },
+    //     {
+    //   path:'/release',
+    //   name:'release',
+    //   component:release
+    // },
+    // {
+    //   path:'/micro',
+    //   name:'micro',
+    //   component:micro
+    // },
+    // {
+    //   path:'/community',
+    //   name:'community',
+    //   component:community
+    // },
+    // {
+    //   path:'/city',
+    //   name:'city',
+    //   component:city
+    // },
+      // ]
     },
     {
       path:'/productCenter/online',
@@ -98,7 +137,8 @@ export default new Router({
       path: '/headerNav',
       name: 'headerNav',
       component: headerNav
-    },
+    }
+
  
   ]
 })

src/static/css/idangerous.swiper.css

@@ -0,0 +1,125 @@
+/*
+ * Swiper 2.7.6
+ * Mobile touch slider and framework with hardware accelerated transitions
+ *
+ * http://www.idangero.us/sliders/swiper/
+ *
+ * Copyright 2010-2015, Vladimir Kharlampidi
+ * The iDangero.us
+ * http://www.idangero.us/
+ *
+ * Licensed under GPL & MIT
+ *
+ * Released on: February 11, 2015
+*/
+/* ===============================================================
+Basic Swiper Styles 
+================================================================*/
+.swiper-container {
+	margin:0 auto;
+	position:relative;
+	overflow:hidden;
+	direction:ltr;
+	-webkit-backface-visibility:hidden;
+	-moz-backface-visibility:hidden;
+	-ms-backface-visibility:hidden;
+	-o-backface-visibility:hidden;
+	backface-visibility:hidden;
+	/* Fix of Webkit flickering */
+	z-index:1;
+}
+.swiper-wrapper {
+	position:relative;
+	width:100%;
+	-webkit-transition-property:-webkit-transform, left, top;
+	-webkit-transition-duration:0s;
+	-webkit-transform:translate3d(0px,0,0);
+	-webkit-transition-timing-function:ease;
+	
+	-moz-transition-property:-moz-transform, left, top;
+	-moz-transition-duration:0s;
+	-moz-transform:translate3d(0px,0,0);
+	-moz-transition-timing-function:ease;
+	
+	-o-transition-property:-o-transform, left, top;
+	-o-transition-duration:0s;
+	-o-transform:translate3d(0px,0,0);
+	-o-transition-timing-function:ease;
+	-o-transform:translate(0px,0px);
+	
+	-ms-transition-property:-ms-transform, left, top;
+	-ms-transition-duration:0s;
+	-ms-transform:translate3d(0px,0,0);
+	-ms-transition-timing-function:ease;
+	
+	transition-property:transform, left, top;
+	transition-duration:0s;
+	transform:translate3d(0px,0,0);
+	transition-timing-function:ease;
+
+	-webkit-box-sizing: content-box;
+	-moz-box-sizing: content-box;
+	box-sizing: content-box;
+}
+.swiper-free-mode > .swiper-wrapper {
+	-webkit-transition-timing-function: ease-out;
+	-moz-transition-timing-function: ease-out;
+	-ms-transition-timing-function: ease-out;
+	-o-transition-timing-function: ease-out;
+	transition-timing-function: ease-out;
+	margin: 0 auto;
+}
+.swiper-slide {
+	float: left;
+	-webkit-box-sizing: content-box;
+	-moz-box-sizing: content-box;
+	box-sizing: content-box;
+}
+
+/* IE10 Windows Phone 8 Fixes */
+.swiper-wp8-horizontal {
+	-ms-touch-action: pan-y;
+}
+.swiper-wp8-vertical {
+	-ms-touch-action: pan-x;
+}
+
+/* ===============================================================
+Your custom styles, here you need to specify container's and slide's
+sizes, pagination, etc.
+================================================================*/
+.swiper-container {
+	/* Specify Swiper's Size: */
+
+	/*width:200px;
+	height: 100px;*/
+}
+.swiper-slide {
+	/* Specify Slides's Size: */
+	
+	/*width: 100%;
+	height: 100%;*/
+}
+.swiper-slide-active {
+	/* Specific active slide styling: */
+	
+}
+.swiper-slide-visible {
+	/* Specific visible slide styling: */	
+
+}
+/* ===============================================================
+Pagination Styles
+================================================================*/
+.swiper-pagination-switch {
+	/* Stylize pagination button: */	
+
+}
+.swiper-active-switch {
+	/* Specific active button style: */	
+	
+}
+.swiper-visible-switch {
+	/* Specific visible button style: */	
+	
+}