修改首页

src/page/home2/index.vue

@@ -68,7 +68,7 @@
         <div class="item item-2">
           <div class="media iframe">
             <div>
-            <!-- <iframe src="http://www.4dmodel.com/SuperTwo/index.html?m=158&version=one" frameborder="0"></iframe> -->
+              <iframe src="http://www.4dmodel.com/SuperTwo/index.html?m=158&version=one" frameborder="0"></iframe>
             </div>
           </div>
           <div class="content">
@@ -111,16 +111,18 @@
           </div>
           <a  href="#/videos">更多行业应用</a>
         </div>
-        <div class="content">
-          <slide :items="items" class="body">
-            <div slot-scope="{data}" class="item">
-              <img :src="data.image" class="cover">
-              <div class="jj">
-                <img :src="data.icon" class="icon">
-                <span v-if="data.text">{{data.text}}</span>
+        <div class="slide-l" :class="{actice: slideActive}" ref="slide">
+          <div class="content">
+            <slide :items="items" class="body">
+              <div slot-scope="{data}" class="item">
+                <img :src="data.image" class="cover">
+                <div class="jj">
+                  <img :src="data.icon" class="icon">
+                  <span v-if="data.text">{{data.text}}</span>
+                </div>
               </div>
-            </div>
-          </slide>
+            </slide>
+          </div>
         </div>
       </div>
     </div>
@@ -234,6 +236,7 @@ export default {
     ]
 
     return {
+      slideActive: false,
       countGroup,
       reports,
       items,
@@ -247,9 +250,18 @@ export default {
   },
   mounted () {
     this.sizeHandle = () => {
-      let y = getPosition(this.$refs.numcount).y + this.$refs.numcount.offsetHeight
-      if (window.innerHeight + window.scrollY > y) {
+      let ny = getPosition(this.$refs.numcount).y + this.$refs.numcount.offsetHeight
+      let sy = getPosition(this.$refs.slide).y + this.$refs.slide.offsetHeight
+
+      if (window.innerHeight + window.scrollY > ny) {
         this.startNumCount = true
+      }
+
+      if (window.innerHeight + window.scrollY > sy) {
+        this.slideActive = true
+      }
+
+      if (this.startNumCount && this.slideActive) {
         window.removeEventListener('scroll', this.sizeHandle)
       }
     }

src/page/home2/style.scss

@@ -332,6 +332,16 @@
   }
 
   .content-layout {
+    .slide-l {
+      transition: transform 1s ease-in-out;
+      transform: translateX(-100%);
+      overflow: hidden;
+
+      &.actice {
+        transform: translateX(0)
+      }
+    }
+
     .tabs {
       text-align: center;
       position: relative;
@@ -467,15 +477,16 @@
   }
 
   .media-layout {
-    overflow: auto;
-    max-height: 800px;
+    overflow: auto; 
+    max-height: 510px;
   }
 
   ul>li {
     display: flex;
     position: relative;
-    margin-bottom: 30px;
+    padding-bottom: 30px;
     cursor: pointer;
+    max-height: 170px;
 
     ::after {
       content: '';