btb商务页开发

components/btbBusiness/features.vue

@@ -8,9 +8,9 @@
         </div>
       </div>
       <ul class="content clearfix list-unstyled">
-        <li v-for="(data, index) in featureData" :class="{'moveTop': isTop, 'moveBottom': !isTop}"
-            @mouseenter="changeInterval(false)"
-            @mouseleave="changeInterval(true)">
+        <li v-for="(data, index) in featureData" :class="{'moveTop': isTop}"
+            @mouseenter="isTop = true"
+            @mouseleave="isTop = false">
             <div>
               <p>{{data.illustrationF}}</p>
               <p class="illustration">{{data.illustrationS}}</p>
@@ -45,80 +45,79 @@
           illustrationF: '平台用户的链式',
           illustrationS: '反应式发展'
         }],
-        hasAnimation: true,
         timerIndex: 0,
-        isTop: false, // 判断是否滚动至顶,
-        isBottom: true,
-        timer: {} // 定时器实体
-      }
-    },
-    mounted () {
-      this.$nextTick(() => {
-        this.changeInterval(true)
-      })
-    },
-    methods: {
-      changeInterval: function (flag) {
-        if (flag) {
-          this.timer = setInterval(() => {
-            this.timerIndex ++
-            if (this.timerIndex % 2 === 0) {
-              this.isTop = true
-              this.isBottom = false
-            } else {
-              this.isTop = false
-              this.isBottom = true
-            }
-          }, 3000)
-        } else {
-          clearInterval(this.timer)
-        }
+        isTop: false
       }
     }
+//    mounted () {
+//      this.$nextTick(() => {
+//        this.changeInterval(true)
+//      })
+//    },
+//    methods: {
+//      changeInterval: function (flag) {
+//        if (flag) {
+//          this.timer = setInterval(() => {
+//            this.timerIndex ++
+//            if (this.timerIndex % 2 === 0) {
+//              this.isTop = true
+//              this.isBottom = false
+//            } else {
+//              this.isTop = false
+//              this.isBottom = true
+//            }
+//          }, 3000)
+//        } else {
+//          clearInterval(this.timer)
+//        }
+//      }
+//    }
   }
 </script>
 
 <style type="text/scss" lang="scss" scoped>
-  /*@keyframes featureTop {
-    0%{top: 0;}
-    50%{top: 40px;}
-    100%{top: 0px;}
+  @keyframes featureTop {
+    0%{transform: translate3d(0, 0px, 0);}
+    50%{transform: translate3d(0, 40px, 0);}
+    100%{transform: translate3d(0, 0px, 0);}
   }
   @-webkit-keyframes featureTop {
-    0%{top: 0;}
-    50%{top: 40px;}
-    100%{top: 0px;}
+    0%{transform: translate3d(0, 0px, 0);}
+    50%{transform: translate3d(0, 40px, 0);}
+    100%{transform: translate3d(0, 0px, 0);}
   }
   @-moz-keyframes featureTop {
-    0%{top: 0;}
-    50%{top: 40px;}
-    100%{top: 0px;}
+    0%{transform: translate3d(0, 0px, 0);}
+    50%{transform: translate3d(0, 40px, 0);}
+    100%{transform: translate3d(0, 0px, 0);}
   }
   @-o-keyframes featureTop {
-    0%{top: 0;}
-    50%{top: 40px;}
-    100%{top: 0px;}
+    0%{transform: translate3d(0, 0px, 0);}
+    50%{transform: translate3d(0, 40px, 0);}
+    100%{transform: translate3d(0, 0px, 0);}
   }
+
+
   @keyframes featureBottom {
-    0%{top: 40px;}
-    50%{top: 0px;}
-    100%{top: 40px;}
+    0%{transform: translate3d(0, 40px, 0);}
+    50%{transform: translate3d(0, 0px, 0);}
+    100%{transform: translate3d(0, 40px, 0);}
   }
   @-webkit-keyframes featureBottom {
-    0%{top: 40px;}
-    50%{top: 0px;}
-    100%{top: 40px;}
+    0%{transform: translate3d(0, 40px, 0);}
+    50%{transform: translate3d(0, 0px, 0);}
+    100%{transform: translate3d(0, 40px, 0);}
   }
   @-moz-keyframes featureBottom {
-    0%{top: 40px;}
-    50%{top: 0px;}
-    100%{top: 40px;}
+    0%{transform: translate3d(0, 40px, 0);}
+    50%{transform: translate3d(0, 0px, 0);}
+    100%{transform: translate3d(0, 40px, 0);}
   }
   @-o-keyframes featureBottom {
-    0%{top: 40px;}
-    50%{top: 0px;}
-    100%{top: 40px;}
-  }*/
+    0%{transform: translate3d(0, 40px, 0);}
+    50%{transform: translate3d(0, 0px, 0);}
+    100%{transform: translate3d(0, 40px, 0);}
+  }
   .features{
     width: 100%;
     min-width: 1190px;
@@ -184,33 +183,25 @@
           }
           &:nth-child(2), &:nth-child(4), &:nth-child(6){
             div{
-              top: 40px;
-              /*animation: featureTop 3s linear infinite;
-              -moz-animation: featureTop 3s linear infinite;
-              -o-animation: featureTop 3s linear infinite;
-              -webkit-animation: featureTop 3s linear infinite;*/
-              -webkit-transform-style: preserve-3d;
-              -webkit-backface-visibility: hidden;
-              transform: translateZ(0);
-              transition: top 3s linear;
-              -moz-transition: top 3s linear; /* Firefox 4 */
-              -webkit-transition: top 3s linear; /* Safari and Chrome */
-              -o-transition: top 3s linear; /* Opera */
+              top: 0px;
+              transform: translate3d(0, 40px, 0);
+              animation: featureTop 15s linear infinite;
+              -moz-animation: featureTop 15s linear infinite;
+              -o-animation: featureTop 15s linear infinite;
+              -webkit-animation: featureTop 15s linear infinite;
             }
 
           }
           &:nth-child(1), &:nth-child(3), &:nth-child(5){
             div{
               top: 0px;
-              transition: top 3s linear;
-              -moz-transition: top 3s linear; /* Firefox 4 */
-              -webkit-transition: top 3s linear; /* Safari and Chrome */
-              -o-transition: top 3s linear; /* Opera */
-              transform: translateZ(0);
-              /*animation: featureBottom 3s linear infinite;
-              -moz-animation: featureBottom 3s linear infinite;
-              -o-animation: featureBottom 3s linear infinite;
-              -webkit-animation: featureBottom 3s linear infinite;*/
+              transform: translate3d(0, 0px, 0);
+              -webkit-transform-style: preserve-3d;
+              -webkit-backface-visibility: hidden;
+              animation: featureBottom 15s linear infinite;
+              -moz-animation: featureBottom 15s linear infinite;
+              -o-animation: featureBottom 15s linear infinite;
+              -webkit-animation: featureBottom 15s linear infinite;
             }
           }
           div{
@@ -225,8 +216,6 @@
               p{
                 color: #2d84fd;
               }
-              animation-play-state:paused;
-              -webkit-animation-play-state:paused; /* Safari 和 Chrome */
             }
             p {
               margin: 0px;
@@ -240,6 +229,23 @@
             }
           }
         }
+        .moveTop {
+          &:nth-child(2), &:nth-child(4), &:nth-child(6) {
+            div {
+              animation-play-state: paused;
+              -webkit-animation-play-state: paused;
+              transform: translateZ(0);
+            }
+
+          }
+          &:nth-child(1), &:nth-child(3), &:nth-child(5) {
+            div {
+              animation-play-state: paused;
+              -webkit-animation-play-state: paused;
+              transform: translateZ(0);
+            }
+          }
+        }
        /* .move{
           &:nth-child(2), &:nth-child(4), &:nth-child(6){
             div{
@@ -261,7 +267,7 @@
             }
           }
         }*/
-        .moveBottom {
+       /* .moveBottom {
             &:nth-child(2), &:nth-child(4), &:nth-child(6) {
               div {
                 top: 0px;
@@ -284,7 +290,7 @@
                top: 0px;
              }
            }
-       }
+       }*/
       }
     }
   }

components/btbBusiness/means.vue

@@ -9,7 +9,7 @@
       </div>
       <ul class="content clearfix list-unstyled">
        <li>
-         <h4>UAS系统</h4>
+         <h4 class="first">UAS系统</h4>
          <p>UAS通过为客户提供信息化产品以及咨询服务，帮助客户在多组织、跨地域快速发展时从容地管理自己的业务，同时帮助客户累积信息和知识，使客户能在坚实基础上健康成长。<br>
          基于对客户需求独特的理解，为客户建立专业、有效、具协同性和集成性管理系统，从而帮助客户简化日常运作管理，最大化地提升客户竞争力。<br>
          UAS建立在B/S架构上，包括ERP、OA、CRM、HR、PLM等模块。UAS同时还能支持集团公司的运作，区分多公司、多工厂的模式</p></li>
@@ -117,12 +117,19 @@
             font-family: MicrosoftYaHei-Bold !important;
             color: #2c7adf;
             font-size: 16px;
-            margin: 0px 0px 15px 0;
+            margin: 0px 0px 15px 0px;
+           &.first{
+              margin: 0px 0px 15px 5px;
+            }
           }
           p{
             font-size: 12px;
             color: #666666;
             line-height: 20px;
+            /*word-break: break-all;*/
+            white-space:pre-line;
+            word-wrap:break-word;
+            word-break:break-all;
           }
           &:nth-child(1){
             p{