webchange

src/components/commonComponents/footerNav.vue

 .footer .footer-con{
   position: static;
   width: 100%;
-  padding: 0.93% 0;
+  padding: 5.3% 0;
   background: #0F1C38;
 
 }

src/components/commonComponents/headerTab.vue

 .logo {
   height: 35px;
 }
-.header-tab .el-menu--horizontal > .el-menu-item.is-active:before,
+
 .header-tab .el-menu--horizontal > .el-menu-item:hover:before{
    content: "";
     position: absolute;
     right: 0;
     margin: auto;
     display: inline-block;
-    width: 80px;
-     background-color:#4e84ff;
-     opacity:0.7326;
+    background-color:#4e84ff;
+    opacity:0.7326;
     height: 12px;
     animation: Width .3s ease-out;
 }
+.header-tab .el-menu--horizontal > .el-menu-item.is-active:before{
+  content: "";
+    position: absolute;
+    top: 12px;
+    left: 0;
+    right: 0;
+    margin: auto;
+    display: inline-block;
+    background-color:#4e84ff;
+    opacity:0.7326;
+    height: 12px;
+}
 @keyframes Width{
   from{
     width: 0;
-     background-color:#4e84ff;
+    background-color:#4e84ff;
     opacity:0.7326;
   }
   to{
-    width: 80px;
+    width: 100%;
      background-color:#4e84ff;
     opacity:0.7326;
   }
 
    
 .header-tab.transparent .nav_tittle{
-  width: 80px;
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  padding: 0 4px;
   vertical-align: middle;
   color: #fff;
   position: relative;

src/components/pages/aboutUs/aboutUs.vue

       .logo {
         width: 303px;
         height: 110px;
-        box-shadow: 0px 0px 5px 0 #4171f2;
+        box-shadow:0px 1px 14px 0px rgba(65,101,242,0.2);
         margin-bottom: 20px;
         border-radius: 4px;
         .logo1 {

src/components/pages/index.vue

       <headerTab></headerTab>
       <div class="container" :style="{'transform': 'translate3d(0px,-'+ fullPage*offsetheight +'px, 0px)'}">
         <div class="page-1 page fp-auto-height">
-          <div class="part-1" :class="page1 == true ? 'animated zoomIn 3s' :''">
+          <div class="part-1" :class="page1 == true ? 'animated fadeIn5' :''">
             <p class="part1-tit">荟房智慧管家</p>
             <span>智慧案场</span>
             <span>迎宾系统</span>
         <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>
-                <div class="service">
-                  <p class="service-p1">定制化服务</p>
-                  <p class="service-p2">增值运维服务</p>
-                  <p class="service-p3">专业售后</p>
-                </div>
-              </el-carousel-item>
-              <el-carousel-item>
-                <p class="swiper-tittle">技术优势</p>
-                <div class="skill">
-                  <p class="skill-p1">超过十年的行业应用软件开发经验</p>
-                  <p class="skill-p2">丰富的智慧社区及智慧案场建设经验</p>
-                  <p class="skill-p3">长期的Java、Net、PHP、软件测试人才储备</p>
-                </div>
-              </el-carousel-item>
-              <el-carousel-item>
-                <p class="swiper-tittle">运营推广</p>
-                <div class="operation">
-                  <p class="Operation-p1">精准数字营销、专业策划设计</p>
-                  <p class="Operation-p2">DSP信息流广告</p>
-                  <p class="Operation-p3">线下社群活动</p>
-                </div>
-              </el-carousel-item>
-            </el-carousel>
+            <div class="page-4-swiper-container">
+    <div class="swiper-wrapper">
+      <div class="swiper-slide green-slide">
+
+        <p class="swiper-tittle">服务优势</p>
+        <div class="service">
+          <p class="service-p1">定制化服务</p>
+          <p class="service-p2">增值运维服务</p>
+          <p class="service-p3">专业售后</p>
+        </div>
+
+      </div>
+      <div class="swiper-slide blue-slide">
+
+        <p class="swiper-tittle">技术优势</p>
+        <div class="skill">
+          <p class="skill-p1">超过十年的行业应用软件开发经验</p>
+          <p class="skill-p2">丰富的智慧社区及智慧案场建设经验</p>
+          <p class="skill-p3">长期的Java、Net、PHP、软件测试人才储备</p>
+        </div>
+      </div>
+
+      <div class="swiper-slide orange-slide">
+
+        <p class="swiper-tittle">运营推广</p>
+        <div class="operation">
+          <p class="Operation-p1">精准数字营销、专业策划设计</p>
+          <p class="Operation-p2">DSP信息流广告</p>
+          <p class="Operation-p3">线下社群活动</p>
+        </div>
+      </div>
+    </div>
+  </div>
           </div>
         </div>
         <div class="page-5 fp-auto-height">
       loop: true,
       autoplay : 4000,
     });
+    var mySwiper = new Swiper('.page-4-swiper-container', {
+      centeredSlides: true,
+      slidesPerView: 3,
+      loop: true,
+      autoplay : 4000,
+    });
   },
   methods: {
     //
     .part-1 {
       color: #fff;
       position: relative;
-      top: 50%;
-      margin-top: -140px;
+      top: 25.8%;
+      // margin-top: 31.8%;
       // transform: translateX(605px);
       .part1-tit {
         width: 480px;
     // align-items: center;
     // justify-content: center;
     .page-2_con {
-      // position: absolute;
-      // top: 50%;
-      // left: 50%;
-      // transform: translate(-50%,-50%);
+      margin-top: 14.5%;
       .title {
         font-size: 56px;
-        padding-top: 10%;
       }
       img {
         width: 100%;
     align-items: center;
     // position: relative;
     .page-3_con {
+      padding-top: 8.5%;
       .title {
         font-size: 56px;
         // padding-top: 5%;
         color: #fff;
       }
       .produce {
-        width: 1000px;
+        width: 1250px;
         height: 680px;
         margin: 20px auto;
         .list {
-          width: 400px;
-          height: 300px;
+          width: 523px;
+          height: 322px;
           background-color: #fff;
           border-radius: 4px;
           padding: 0 40px;
           float: left;
           .list-name {
             color: #03033f;
-            border-bottom: 2px dashed #040445;
+            border-bottom: 1.5px dashed #040445;
             padding: 30px 0 18px 0;
             font-size: 30px;
           }
           img {
-            width: 330px;
-            height: 150px;
+            height: 143px;
             margin-top: 16px;
           }
           .list-desc {
             font-size: 18px;
-            line-height: 36px;
+            line-height: 72px;
             color: #000;
           }
         }
       // background: url("../../assets/image/home/background/opt.jpg") no-repeat
       // center;
       // background-size:
+      .page-4-swiper-container{
+        width: 87%;
+
+        overflow: hidden;
+        .swiper-wrapper{
+          margin: auto;
+          width: 87%;
+          overflow: hidden;
+        }
+      }
       .opt{
-        width: 100%;
+        width: 87%;
         height: 100%;
         position: absolute;
         top: 0;
-        left: 0;
+        left: 6.5%;
         z-index: 10;
       }
+      .page-4-swiper-container {
+      width: 87%;
+      /* height: 250px; */
+      // background-color: #fff;
+      margin: 0 6.5%;
+      text-align: center;
+    }
+    .swiper-wrapper{
+      display: flex;
+      justify-content: space-between;
+    }
+    .swiper-slide {
+      opacity: 1;
+      /* height: 100%; */
+      -webkit-transition: 300ms;
+      -moz-transition: 300ms;
+      -ms-transition: 300ms;
+      -o-transition: 300ms;
+      transition: 300ms;
+      -webkit-transform: scale(0.6735);
+      -moz-transform: scale(0.6735);
+      -ms-transform: scale(0.6735);
+      -o-transform: scale(0.6735);
+      transform: scale(0.6735);
+    }
+
+    .swiper-slide-visible {
+      opacity: 1;
+      -webkit-transform: scale(0.6735);
+      -moz-transform: scale(0.6735);
+      -ms-transform: scale(0.6735);
+      -o-transform: scale(0.6735);
+      transform: scale(0.6735);
+    }
+
+    .swiper-slide-active {
+      /* top: 0; */
+      opacity: 1;
+      -webkit-transform: scale(1);
+      -moz-transform: scale(1);
+      -ms-transform: scale(1);
+      -o-transform: scale(1);
+      transform: scale(1);
+    }
+
+    // .blue-slide {
+      
+    //   width: 573px !important;
+    //   height: 500px !important;
+    // }
+
+    // .orange-slide {
+      
+    //   width: 573px !important;
+    //   height: 500px !important;
+    // }
+
+    // .green-slide {
+      
+    //   width: 573px !important;
+    //   height: 500px !important;
+    // }
+
+
+
+
+    .swiper-tittle {
+      font-size: 60px;
+      font-weight: 500;
+      margin: 0 auto 58px auto;
+      color: rgba(255, 255, 255, 1);
+    }
+
+    .service,
+    .skill,
+    .operation {
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+
+    .operation p,
+    .skill p,
+    .service p {
+      width: 573px !important;
+      height: 98px;
+      color: rgba(255, 255, 255, 1);
+      text-align: center;
+      line-height: 98px;
+      margin-bottom: 10px;
+      background: #2f2f80;
+      border-radius: 4px;
+    }
     }
     .title {
       font-size: 60px;
     overflow: hidden;
     .title {
       font-size: 56px;
-      padding-top: 5%;
+      padding-top: 9.2%;
       color: #fff;
     }
     .logo-box {
   right: 0;
   top: 0;
   padding: 15px 36px;
+  .right_con{
+    text-align: left;
+  }
 }
 
 .vs {
 }
 
 .left_con {
+  text-align: left;
   margin-left: 115px;
 }
 
 .fadeIn4 {
   animation: fadeIn2 4s;
 }
+.fadeIn5 {
+  animation: fadeIn 5s;
+}
 .foot{
   width: 100%;
   position: absolute;

src/components/pages/productCenter/city.vue

 .city_content {
   background: url(../../../assets/image/program/bg.jpg) no-repeat center;
   background-size: 100%;
+  margin-top: 174px;
   .product_int {
     margin: 0 auto;
     padding: 80px 0;

src/components/pages/productCenter/release.vue

                     <img class="img_L" src="../../../assets/image/release/Group5.jpg" alt>
                   </div>
                 </div>
-                <div class="product_int_boxes"></div>
               </div>
             </div>
           </div>

src/components/pages/solution/solution.vue

     <div class="title">
       <!-- <div class="cover-bg">
         <img src="../../../assets/image/program/bannerbg.png" alt>
-      </div> -->
+      </div>-->
       <div>
         <p class="tit">{{title}}</p>
-      <p class="label">{{desc}}</p>
-      <p class="label">{{desc2}}</p>
-      <p class="desc">{{engdesc}}</p>
+        <p class="label">{{desc}}</p>
+        <p class="label">{{desc2}}</p>
+        <p class="desc">{{engdesc}}</p>
       </div>
     </div>
     <div class="solution-main">
             <div class="main-box">
               <p class="con-tit">痛点描述</p>
               <span class="con-desc">Existing problem</span>
-              <div class="img-box">
+              <div class="img-box" style="width: 1203px;">
                 <div class="discribe_box">
                   <div class="dis_box_img">
                     <img src="../../../assets/image/wisdom/wisdom01.jpg" alt>
                     <p class="dis_p1">客户归属、划分不清</p>
                   </div>
                 </div>
-                
               </div>
             </div>
             <div class="programme-box">
               <span class="con-desc">Successful cases</span>
               <div class="best-con">
                 <div class="logo">
-                  <img src="../../../assets/image/logoicon/Bitmap.png" alt style="height:40px">
+                  <img src="../../../assets/image/logoicon/Bitmap.png" alt style="height: 40px;width:136px">
                   <span>智慧大屏机</span>
                 </div>
                 <div class="logo">
               <p class="con-tit" style="width:60px;">超脑</p>
               <p class="con-desc">Super brain</p>
               <div class="page-box">
-                
-                
                 <img class="super-img" src="../../../assets/image/program/community/Resource02.png" alt>
                 <div class="super-con super-one">
                   <img class="img-up" src="../../../assets/image/program/community/group03.png" alt>
                 <div class="label-con" :class="bgHover==1?'hover-div':''" @mouseenter="divHover(1)" @mouseleave="leaveHover(1)">
                   <div class="label-img">
                     <img v-if="bgHover==1" src="../../../assets/image/program/order/team1.png" alt>
-                    <img  v-if="bgHover!=1" src="../../../assets/image/program/order/team.png" alt>
+                    <img v-if="bgHover!=1" src="../../../assets/image/program/order/team.png" alt>
                   </div>
                   <p class="label-tit">专业开发团队</p>
                   <p class="label-desc">团队拥有丰富实战经验，千万金额成功项目，实力不容小觑</p>
                 <div class="label-con" :class="bgHover==2?'hover-div':''" @mouseenter="divHover(2)" @mouseleave="leaveHover(2)">
                   <div class="label-img">
                     <img v-if="bgHover==2" src="../../../assets/image/program/order/cost1.png" alt>
-                    <img   v-else src="../../../assets/image/program/order/cost.png" alt>
+                    <img v-else src="../../../assets/image/program/order/cost.png" alt>
                   </div>
                   <p class="label-tit">开发费用透明</p>
                   <p class="label-desc">消除行业壁垒，信息不对称问题，价格透明，比肩行业水平</p>
                 <div class="label-con" :class="bgHover==3?'hover-div':''" @mouseenter="divHover(3)" @mouseleave="leaveHover(3)">
                   <div class="label-img">
                     <img v-if="bgHover==3" src="../../../assets/image/program/order/time1.png" alt>
-                    <img  v-else src="../../../assets/image/program/order/time.png" alt>
+                    <img v-else src="../../../assets/image/program/order/time.png" alt>
                   </div>
                   <p class="label-tit">高质按时交付</p>
                   <p class="label-desc">不随意拖延开发工期，保证高质量按时交付成品</p>
                 </div>
-                <div class="label-con" :class="bgHover==4?'hover-div':''" @mouseenter="divHover(4)"  @mouseleave="leaveHover(4)">
+                <div class="label-con" :class="bgHover==4?'hover-div':''" @mouseenter="divHover(4)" @mouseleave="leaveHover(4)">
                   <div class="label-img">
                     <img v-if="bgHover==4" src="../../../assets/image/program/order/Operation.png" alt>
-                    <img  v-else src="../../../assets/image/program/order/Operation1.png" alt>
+                    <img v-else src="../../../assets/image/program/order/Operation1.png" alt>
                   </div>
                   <p class="label-tit">持续运营支持</p>
                   <p class="label-desc">按需提供软件上线后运营支持，修复漏洞服务</p>
                 <div class="label-con" :class="bgHover==5?'hover-div':''" @mouseenter="divHover(5)" @mouseleave="leaveHover(5)">
                   <div class="label-img">
                     <img v-if="bgHover==5" src="../../../assets/image/program/order/afterSale1.png" alt>
-                    <img  v-else src="../../../assets/image/program/order/afterSale.png" alt>
+                    <img v-else src="../../../assets/image/program/order/afterSale.png" alt>
                   </div>
                   <p class="label-tit">售后服务周到</p>
                   <p class="label-desc">秉承顾客至上理念，全方位跟进需求，专业解答您的所有疑惑</p>
               <p class="con-tit">业务范围</p>
               <span class="con-desc">The business scope</span>
               <div class="business-box">
-                <div class="business-con" >
+                <div class="business-con">
                   <img src="../../../assets/image/program/order/web.png" alt>
                   <p class="business-tit">web应用程序</p>
                   <p class="business-desc">基于互联网，浏览器端的应用程序</p>
       desc2: "",
       engdesc: "Intelligent face risk control system",
       colorHover: 2,
-      bgHover: 3,
-     
+      bgHover: 0,
+
     };
   },
   methods: {
         this.engdesc = "Intelligent face risk control system";
       }
     },
-    leaveHover(index){
+    leaveHover (index) {
       this.bgHover != index;
       this.bgHover = '';
     },
     spanHover (index) {
       this.colorHover = index;
-      
+
     },
     divHover (index) {
       this.bgHover = index;
     width: 100%;
     min-width: 1260px;
     height: 90%;
-    background: url('../../../assets/image/program/bannerbg.png') no-repeat center;
+    background: url("../../../assets/image/program/bannerbg.png") no-repeat
+      center;
     background-size: 100% 100%;
     // border-radius: 0 0 200% 200%;
     opacity: 1 !important;
       background-color: red;
     }
   }
-  .solution .solution-main .tab-bar {
-  }
 
   .solution-main {
     width: 100%;
         .el-tabs__item.is-active {
           color: #4e84ff;
         }
-        
-    
+
         .el-tabs__item {
           height: 100px;
           width: 250px;
         }
         .img-box {
           margin: 20px auto 0 auto;
-          width:1260px;
+          width: 1026px;
           display: flex;
           justify-content: space-between;
           .img-con {
             width: 288px;
-            height: 250px;
-            border-radius: 6px;
-            background-color: rgb(243, 240, 240);
-            margin: 0 5px;
+            height: 252px;
+            box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
+            border-radius: 10px;
+            background-color: #fff;
             display: inline-block;
             line-height: 50px;
             color: #808080;
           .label-con {
             width: 230px;
             height: 160px;
-            box-shadow:0px 1px 14px 0px rgba(65,101,242,0.2);
-            border-radius:10px;
+            box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
+            border-radius: 10px;
             display: inline-block;
             border-radius: 5px;
             background-color: #fff;
               line-height: 20px;
             }
           }
-          .label-con:hover{
+          .label-con:hover {
             background-color: #4e84ff;
             .label-tit {
               color: #fff;
               font-size: 13px;
               color: #444;
               line-height: 20px;
-              width: 130px;
+              width: 135px;
               margin: 0 auto;
             }
           }
-          .business-con:hover{
-            box-shadow:0px 1px 14px 0px rgba(65,101,242,0.2);
-            border-radius:10px;
+          .business-con:hover {
+            box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
+            border-radius: 10px;
           }
-          
         }
         .cases-box {
           margin: 40px auto;
           width: 1050px;
           height: 30px;
-          .cases-con:hover{
-            box-shadow:0px 1px 14px 0px rgba(65,101,242,0.2);
-            border-radius:10px;
-          }
+          
           .cases-con {
             width: 190px;
             height: 186px;
             border-radius: 6px;
             margin: 0 10px;
-            
+            background-color: #fff;
+            box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
+            border-radius: 10px;
             font-size: 18px;
             color: #000;
             float: left;
           color: #4e84ff;
         }
         .best-con {
-          width: 1260px;
+          width: 945px;
           height: 240px;
           margin: 60px auto 0 auto;
           display: flex;
             padding: 0 20px;
             width: 255px;
             height: 140px;
-            box-shadow: 0px 0px 5px 0 #4171f2;
+            box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
             border-radius: 10px;
             img {
-              height: 80px;
+              width: 80px;
             }
             span {
               // margin-left:
       }
       .second-box {
         background: url("../../../assets/image/bg.png") no-repeat 0 100%;
-        
+
         width: 100%;
       }
       .community-box {
           color: #4e84ff;
         }
         .page-box {
-          width:1225px;
-height:563px;
-background:rgba(255,255,255,1);
-box-shadow:0px 1px 14px 0px rgba(65,101,242,0.2);
-          padding: 26px 0;
+          width: 1216px;
+          height: 483px;
+          background: rgba(255, 255, 255, 1);
+          border-radius: 7px;
+          box-shadow: 0px 1px 14px 0px rgba(65, 101, 242, 0.2);
+          // padding: 26px 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
           margin: 40px auto;
           .smart-img {
             width: 928px;
           position: relative;
           padding: 20px;
           margin: 40px auto 20px auto;
-          
+
           .super-img {
             height: 512px;
           }

src/main.js

 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
 import App from './App'
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
 import router from './router'
 
 Vue.config.productionTip = false
 
 Vue.use(animate)
 
-import ElementUI from 'element-ui'
-import 'element-ui/lib/theme-chalk/index.css'
+
 
 Vue.use(ElementUI)