xcx

src/App.vue

@@ -26,19 +26,15 @@ export default {
             'openLocation'
           ]
         })
+        let shareData = {
+          title: '银城&颐居 悦见山',
+          desc: '',
+          link: 'http://wx.jinchengjiaye.com/h5/yjswls',
+          imgUrl: ''
+        }
         window.wx.ready(() => {
-          window.wx.onMenuShareAppMessage({
-            title: '主标题',
-            desc: '副标题',
-            link: 'http://wx.jinchengjiaye.com/h5/yjswls',
-            imgUrl: 'http://f.hiphotos.baidu.com/image/pic/item/d0c8a786c9177f3ed22833c37dcf3bc79e3d56e4.jpg'
-          })
-          window.wx.onMenuShareTimeline({
-            title: '主标题',
-            desc: '副标题',
-            link: 'http://wx.jinchengjiaye.com/h5/yjswls',
-            imgUrl: 'http://f.hiphotos.baidu.com/image/pic/item/d0c8a786c9177f3ed22833c37dcf3bc79e3d56e4.jpg'
-          })
+          window.wx.onMenuShareAppMessage({ ...shareData })
+          window.wx.onMenuShareTimeline({ ...shareData })
         })
       })
     })

src/pages/index.vue

@@ -80,7 +80,7 @@
     </div>
     <div class="video" :hidden="!playVideo">
       <video width="100%" height="100%" ref="myVideo" x5-playsinline="true" webkit-playsinline="true" playsinline="true">
-        <source src="../assets/images/movie.mp4" type="video/mp4">
+        <source src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/905e19843e65f123c34b42f8d96f7118.mp4" type="video/mp4">
       </video>
     </div>
   </div>

src/pages/zhiNengYuan.vue

@@ -44,9 +44,74 @@
         <img src="../assets/images/icon-35.jpg" @load="imgLoad" class="icon35" width="100%" alt>
       </div>
     </div>
-    <div class="box box3">
+    <div class="box box3" style="margin-top: .4rem;">
       <img src="../assets/images/icon-25.png" class="icon25" width="100%" alt>
-      <div class="scrollPage"></div>
+      <div class="scrollPage" style="margin-top: .3rem;position: relative;overflow: visible;">
+        <img
+          src="../assets/images/icon-38.png"
+          style="margin-top: .2rem;"
+          @load="imgLoad"
+          class="icon38"
+          width="100%"
+          alt
+        >
+        <img
+          src="../assets/images/icon-39.png"
+          style="margin-top: .3rem;"
+          @load="imgLoad"
+          class="icon39"
+          width="100%"
+          alt
+        >
+        <img
+          src="../assets/images/icon-40.png"
+          style="margin-top: .3rem;"
+          @load="imgLoad"
+          class="icon40"
+          width="100%"
+          alt
+        >
+        <img
+          src="../assets/images/icon-41.png"
+          @load="imgLoad"
+          :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[0]}"
+          class="icon41"
+          width="100%"
+          alt
+        >
+        <img
+          src="../assets/images/icon-42.png"
+          @load="imgLoad"
+          :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[0]}"
+          class="icon42"
+          width="100%"
+          alt
+        >
+        <img
+          src="../assets/images/icon-36.png"
+          @load="imgLoad"
+          :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[0]}"
+          class="icon36"
+          width="20px"
+          alt
+        >
+        <img
+          src="../assets/images/icon-37.png"
+          @load="imgLoad"
+          :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[0]}"
+          class="icon37"
+          width="20px"
+          alt
+        >
+      </div>
+      <div class="subInfo scrollPage">
+        <span :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[1]}">以老山为设计之源，
+          <br>取其风貌，融于植被，建筑，山水之雅。
+          <br>美之灵，智之魂，
+          <br>七重园林景观随目之所及，
+          <br>五维景观感受携心之所向。
+        </span>
+      </div>
     </div>
     <div class="box box4">
       <img src="../assets/images/icon-25.png" class="icon25" width="100%" alt>
@@ -78,8 +143,7 @@
         >
       </div>
       <div class="subInfo scrollPage" style="margin-top: .15rem;">
-        <!-- <span :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[2]}"> -->
-        <span class="active">健康夜光慢跑环，
+        <span :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[2]}">健康夜光慢跑环，
           <br>
           <b>动</b>起来，恣意徜徉。
           <br>
@@ -210,7 +274,7 @@ export default {
   data () {
     return {
       imgNum: 0,
-      totalImgNum: 10,
+      totalImgNum: 26,
       scrollArr: [],
       scrollTop: 0,
       musicStatus: true
@@ -244,7 +308,7 @@ export default {
     calcScrollArr () {
       this.scrollArr = []
       for (let n = 0; n < document.getElementsByClassName('scrollPage').length; n++) {
-        this.scrollArr.push(document.getElementsByClassName('scrollPage')[n].offsetTop - window.innerHeight / 1.5)
+        this.scrollArr.push(document.getElementsByClassName('scrollPage')[n].offsetTop - window.innerHeight / 1.8)
       }
     },
     reback () {
@@ -368,6 +432,57 @@ export default {
     overflow: hidden;
     margin-top: 0.25rem;
   }
+  .box3 {
+    .icon38,
+    .icon39,
+    .icon40 {
+      position: relative;
+      z-index: 2;
+    }
+    .icon36,
+    .icon37 {
+      display: block;
+      position: absolute;
+      z-index: 3;
+      transition: all 0.5s linear;
+      -webkit-transition: all 0.5s linear;
+      opacity: 0;
+      &.active{
+        opacity: 1;
+      }
+    }
+    .icon36{
+      top: 10vw;
+      right: 10vw;
+    }
+    .icon37{
+      top: 80vw;
+      left: 10vw;
+      transition-delay: 0.5s;
+      -webkit-transition-delay: 0.5s;
+    }
+    .icon41,
+    .icon42 {
+      display: block;
+      position: absolute;
+      left: 0;
+      z-index: 1;
+      transition: all 0.5s linear;
+      -webkit-transition: all 0.5s linear;
+      opacity: 0;
+      &.active {
+        opacity: 1;
+      }
+    }
+    .icon41 {
+      top: 45vw;
+    }
+    .icon42 {
+      transition-delay: 0.5s;
+      -webkit-transition-delay: 0.5s;
+      top: 110vw;
+    }
+  }
   .textInfo {
     .line {
       width: 13vw;
@@ -487,7 +602,7 @@ export default {
     position: relative;
     overflow: visible;
     text-align: center;
-    margin-top: .1rem;
+    margin-top: 0.1rem;
     > div {
       display: inline-block;
       width: 1px;
@@ -521,7 +636,7 @@ export default {
     &.hide::before {
       display: none;
     }
-    &.hideFoot::after{
+    &.hideFoot::after {
       display: none;
     }
   }
@@ -537,20 +652,20 @@ export default {
         color: #dea369;
         font-weight: normal;
       }
-      >b{
+      > b {
         width: 100%;
         display: block;
         text-align: center;
         color: #dea369;
-        font-size: .14rem;
+        font-size: 0.14rem;
         line-height: 1.5;
-        margin: .1rem auto 0;
+        margin: 0.1rem auto 0;
       }
-      >span{
+      > span {
         width: 100%;
         display: block;
         text-align: center;
-        font-size: .11rem;
+        font-size: 0.11rem;
         line-height: 1.5;
       }
     }