web

src/App.vue

     padding: 0 40px 0 0 !important;
 }
 .solution .solution-main .tab-bar .el-tabs__header .el-tabs__active-bar{
-  left: 9.5% !important;
+  left: 9.6% !important;
 }
 
 </style>

src/components/commonComponents/headerTab.vue

 <template>
-  <div class="header-tab transparent">
+  <div class="header-tab transparent"  @mouseleave="over">
     <el-row class="topNav">
       <el-col :span="12">
         <img class="header-img" src="../../assets/image/home/logo/logo.png" alt>
       </el-col>
-      <el-col :span="12">
-        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" >
+      <el-col :span="12" >
+        <div>
+          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
           <el-menu-item index="1">
             <!-- <div class="tittle"> -->
               <div class="nav_tittle">
-              <span>首页</span>
+              <span @mouseenter.stop="enter(1)">首页</span>
             </div>
             <!-- </div> -->
           </el-menu-item>
           <el-menu-item index="2">
             <div class="nav_tittle">
-              <span>解决方案</span>
+              <span @mouseenter.stop="enter(2)">解决方案</span>
             </div>
           </el-menu-item>
           <el-menu-item index="3">
-            <div class="nav_tittle">
-              <span @mouseenter="enter">产品中心</span>
+            <div class="nav_tittle1">
+              <span  @mouseenter.stop="enter(3)">产品中心</span>
             </div>
           </el-menu-item>
           <el-menu-item index="4">
             <div class="nav_tittle">
-              <span>新闻资讯</span>
+              <span @mouseenter.stop="enter(4)">新闻资讯</span>
             </div>
           </el-menu-item>
           <el-menu-item index="5">
             <div class="nav_tittle">
-              <span>关于我们</span>
+              <span @mouseenter.stop="enter(5)">关于我们</span>
             </div>
           </el-menu-item>
         </el-menu>
+        
+        </div>
       </el-col>
     </el-row>
-    <div class="sub-nav-menu" v-show="section" @mouseleave="over">
+    <div class="sub-nav-menu" v-if="section == 3" v-show="Section" @mouseleave="over">
       <div class="section">
         <router-link to="/productCenter/online">
           <span>全渠道在线平台</span>
     return {
       activeIndex: "1",
       searchBarFixed: false,
-      section:false
+      Section:true,
+      section:0
     };
   },
   mounted() {
     this.changeTabBarActive();
   },
   methods: {
-    enter(){
-      this.section = true;
+    enter(index){
+      this.Section = true;
+      this.section = index;
     },
     over(){
-      this.section = false;
+      this.Section = false;
+      
     },
     handleScroll() {
       var scrollTop =
   position: relative;
   font-weight: 400;
 }
+.nav_tittle1{
+  display: flex;
+  justify-content: center;
+  padding: 0 4px;
+  vertical-align: middle;
+  color: #fff;
+  position: relative;
+  font-weight: 400;
+  
+}
+.nav_tittle1 span{
+    z-index: 100;
+    font-size: 18px;
+  }
 .sub-nav-menu{
   width: 50%;
   min-width: 700px;

src/components/pages/index.vue

           <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 class="peoduce_top">
+                <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>
-              <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 class="produce_bottom">
+                <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>
         <div class="page-4 fp-auto-height">
           <div class="page-4-con">
-            <img class="opt" src="../../assets/image/home/background/opt.png" alt="">
+            <img class="opt" src="../../assets/image/home/background/opt.png" alt>
             <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">
+              <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>
 
-        <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 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">
           <div class="logo-box">
             <div>
               <img src="../../assets/image/home/logo/Group29.png" alt>
-            <img src="../../assets/image/home/logo/Group32.png" alt>
-            <img src="../../assets/image/home/logo/Group35.png" alt>
-            <img src="../../assets/image/home/logo/Group40.png" alt>
-            <img src="../../assets/image/home/logo/Group41.png" alt>
-
+              <img src="../../assets/image/home/logo/Group32.png" alt>
+              <img src="../../assets/image/home/logo/Group35.png" alt>
+              <img src="../../assets/image/home/logo/Group40.png" alt>
+              <img src="../../assets/image/home/logo/Group41.png" alt>
             </div>
             <div>
               <img src="../../assets/image/home/logo/Group30.png" alt>
-            <img src="../../assets/image/home/logo/Group33.png" alt>
-            <img src="../../assets/image/home/logo/Group36.png" alt>
-            <img src="../../assets/image/home/logo/Group39.png" alt>
-            <img src="../../assets/image/home/logo/Group42.png" alt>
+              <img src="../../assets/image/home/logo/Group33.png" alt>
+              <img src="../../assets/image/home/logo/Group36.png" alt>
+              <img src="../../assets/image/home/logo/Group39.png" alt>
+              <img src="../../assets/image/home/logo/Group42.png" alt>
             </div>
 
             <div>
               <img src="../../assets/image/home/logo/Group31.png" alt>
-            <img src="../../assets/image/home/logo/Group34.png" alt>
-            <img src="../../assets/image/home/logo/Group37.png" alt>
-            <img src="../../assets/image/home/logo/Group38.png" alt>
-            <img src="../../assets/image/home/logo/Group43.png" alt>
+              <img src="../../assets/image/home/logo/Group34.png" alt>
+              <img src="../../assets/image/home/logo/Group37.png" alt>
+              <img src="../../assets/image/home/logo/Group38.png" alt>
+              <img src="../../assets/image/home/logo/Group43.png" alt>
             </div>
           </div>
           <footerNav class="foot"></footerNav>
       centeredSlides: true,
       slidesPerView: 'auto',
       loop: true,
-      autoplay : 4000,
+      autoplay: 4000,
     });
     var mySwiper = new Swiper('.page-4-swiper-container', {
       centeredSlides: true,
       slidesPerView: 3,
       loop: true,
-      autoplay : 4000,
+      autoplay: 4000,
     });
   },
   methods: {
   }
 };
 </script>
-<style lang="less">
+<style scoped lang="less">
 @import "../../static/css/idangerous.swiper.css";
 .el-carousel__item h3 {
   color: #475669;
       // background: url("../../assets/image/home/background/opt.jpg") no-repeat
       // center;
       // background-size:
-      .page-4-swiper-container{
+      .page-4-swiper-container {
         width: 87%;
 
         overflow: hidden;
-        .swiper-wrapper{
+        .swiper-wrapper {
           margin: auto;
           width: 87%;
           overflow: hidden;
         }
       }
-      .opt{
+      .opt {
         width: 87%;
         height: 100%;
         position: absolute;
         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);
-    }
+        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-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);
-    }
+      .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;
-    // }
+      // .blue-slide {
 
-    // .orange-slide {
-      
-    //   width: 573px !important;
-    //   height: 500px !important;
-    // }
+      //   width: 573px !important;
+      //   height: 500px !important;
+      // }
 
-    // .green-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);
-    }
+      .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;
-    }
+      .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;
-    }
+      .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;
   right: 0;
   top: 0;
   padding: 15px 36px;
-  .right_con{
+  .right_con {
     text-align: left;
   }
 }
 .fadeIn5 {
   animation: fadeIn 5s;
 }
-.foot{
+.foot {
   width: 100%;
   position: absolute;
   bottom: 0;