web

src/components/commonComponents/icon.vue

@@ -51,17 +51,35 @@ export default {
   name: "to-top",
   data () {
     return {
+      scrollTop: '',
       toTopIsShow: false,
       mask: false,
     }
   }
   ,
   methods: {
-    toTop () {
-      if (document.documentElement.scrollTop > 0 || window.pageYOffset > 0 || document.body.scrollTop > 0) {
-        window.pageYOffset = document.documentElement.scrollTop = document.body.scrollTop = 0;
-      }
-    },
+     handleScroll () {
+          this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+          if(this.scrollTop>500){
+            this.toTopIsShow=true
+          }else{
+              this.toTopIsShow= false
+          }
+        },
+        toTop(){
+          let timer=null,_that=this;
+          cancelAnimationFrame(timer)
+          timer=requestAnimationFrame(function fn(){
+            if(_that.scrollTop>0){
+              _that.scrollTop-=50;
+              document.body.scrollTop = document.documentElement.scrollTop = _that.scrollTop;
+              timer=requestAnimationFrame(fn)
+            }else {
+              cancelAnimationFrame(timer);
+              _that.toTopIsShow=false;
+            }
+          })
+        },
     news () {
       this.mask = true
     },
@@ -73,15 +91,11 @@ export default {
     }
   },
   mounted () {
-    var _this = this;
-    window.onscroll = function () {
-      if (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop > 10) {
-        _this.toTopIsShow = true;
-      } else {
-        _this.toTopIsShow = false;
+    window.addEventListener('scroll', this.handleScroll);
+  },
+  destroyed(){
+        window.removeEventListener('scroll', this.handleScroll)
       }
-    }
-  }
 }
 </script>
 

src/components/pages/index.vue

@@ -109,12 +109,12 @@
         </div>
         <div class="page-3 fp-auto-height">
           <div class="page-3_con">
-            <p class="title">产品简介</p>
             <div class="produce">
+              <p class="title">产品简介</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 style="margin-top: 42px;">
+                  <img src="../../assets/image/home/produce/Group45.png" alt style="margin-top: 10.5%;">
                   <p class="list-desc">智慧人脸风控应用于案场、地铁、银行等</p>
                 </div>
                 <div class="list" :class="page3 == true ? 'animation fadeIn2' :''">
@@ -126,7 +126,7 @@
               <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 style="margin-top: 42px;">
+                  <img src="../../assets/image/home/produce/Group47.png" alt style="margin-top: 10.5%;">
                   <p class="list-desc">智慧社区管理软件,一键开启智慧社区美好生活</p>
                 </div>
                 <div class="list" :class="page3 == true ? 'animation fadeIn4' :''">
@@ -453,19 +453,18 @@ export default {
     height: 100%;
     background-size: 100% 100%;
     overflow: hidden;
-    // display: flex;
-    // justify-content: center;
-    // align-items: center;
-    // position: relative;
+    position: relative;
     .page-3_con {
       width: 100%;
       margin-top: 8.5%;
-    margin-bottom: 3%;
-    margin: auto;
+      margin-bottom: 3%;
+      margin: auto;
+      position: absolute;
+      bottom: 5%;
       // padding: 8.5% 0 3% 0;
       .title {
         font-size: 56px;
-        margin-top: 7%;
+        // margin-top: 7%;
         // padding-top: 5%;
         color: #fff;
       }
@@ -491,7 +490,7 @@ export default {
     background-color: #fff;
     border-radius: 4px;
     padding: 0 4%;
-    margin: 10px;
+    margin: 0.5%;
           .list-name {
             color: #03033f;
             border-bottom: 1.5px dashed #040445;
@@ -501,11 +500,11 @@ export default {
           img {
             // height: 143px;
             width: 80%;
-            margin-top: 16px;
+            margin-top: 5%;
           }
           .list-desc {
             font-size: 18px;
-            margin: 15px 0;
+            margin: 5% 0;
             color: #000;
           }
         }
@@ -591,6 +590,7 @@ export default {
         -ms-transform: scale(1);
         -o-transform: scale(1);
         transform: scale(1);
+        z-index: 1000;
       }
 
       // .blue-slide {
@@ -658,7 +658,7 @@ export default {
     .page-5-con{
       // margin: 13%;
       position: absolute;
-    bottom: 40%;
+    bottom: 37%;
       .title {
       font-size: 56px;
       color: #fff;

src/components/pages/productCenter/AIwelcome.vue

@@ -20,7 +20,7 @@
           </div>
         </div>
       </div>
-      <prod-navi class="nav" default="case-1"></prod-navi>
+      
       <!-- <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">
@@ -50,7 +50,7 @@
         </el-menu>
       </div>-->
     </div>
-
+    <prod-navi class="nav" default="case-1"></prod-navi>
     <div class="secondHouse-middle">
       <div class="secondHouse_content">
         <div class="Features1">
@@ -229,7 +229,7 @@ export default {
 .nav {
   width: 1280px;
   position: relative;
-  top: -8%;
+  top: -64px;
   // margin-top: -207px;
   margin: auto;
   display: flex;
@@ -256,12 +256,13 @@ export default {
   }
 }
 .product_box {
-  width: 1260px;
-  height: 90%;
+  width: 65.625%;
+  min-width: 1090px;
+  height: 100%;
   margin: 0 auto;
 }
 .product_top {
-  width: 1260px;
+  width: 100%;
   height: 110%;
   display: flex;
   justify-content: center;
@@ -296,15 +297,17 @@ export default {
   }
 }
 .product_top_con_right {
+  width: 51.59%;
   display: inline-block;
   color: #fff;
   img {
-    width: 650px;
+    width: 100%;
   }
 }
 .product_top_con {
   width: 100%;
   margin: 0 60px;
+  
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -385,8 +388,7 @@ export default {
   }
 }
 .Features1 {
-  margin: 80px auto 70px auto;
-  padding: 80px 0;
+  margin: 0 auto 70px auto;
 }
 .Features2 {
   margin: 70px auto 0 auto;

src/components/pages/productCenter/bigscreen.vue

@@ -307,17 +307,20 @@ export default {
 .product_top_con_right {
   display: inline-block;
   color: #fff;
+  width: 39%;
+    min-width: 367px;
   img:first-child {
     margin-right: 32px;
   }
   img {
-    width: 197px;
-    height: 569px;
+    width: 35%;
+    height: 80%;
   }
 }
 .product_top_con {
   width: 100%;
   margin: 0 60px;
+  padding-top: 3%;
   display: flex;
   justify-content: space-between;
   align-items: center;

src/components/pages/productCenter/micro.vue

@@ -382,7 +382,7 @@ export default {
   .secondHouse_content {
     // width: 1260px;
     margin: 0 auto;
-    padding: 80px 0;
+    padding: 110px 0;
     .Features {
       margin: 80px auto;
     }

src/components/pages/productCenter/release.vue

@@ -361,7 +361,7 @@ export default {
     margin: 0 auto;
     .Features {
       margin: 0 auto;
-      padding-top: 80px;
+      padding-top: 110px;
     }
   }
 }
@@ -448,7 +448,7 @@ export default {
 .img_L {
   width: 370px;
   height: 276px;
-  border-radius: 0 6px 6px;
+  border-radius: 0 6px 6px 0;
 }
 
 .boxes_img {