xcx

src/pages/chengShiShan.vue

@@ -1,131 +1,135 @@
 <template>
-  <div class="mainPage chengShiShan">
+  <div class="mainPage">
     <div class="top flex-h">
       <div class="flex-item">
         <a @click="reback">
           <img src="../assets/images/icon-20.png" alt>
         </a>
       </div>
-      <a class="music" :class="{'active': musicStatus}"  @click="triggerMusic">
+      <a class="music" :class="{'active': musicStatus}" @click="triggerMusic">
         <img src="../assets/images/icon-10.png" class="contain" alt>
       </a>
     </div>
-    <div class="box box1">
-      <div class="bg">
-        <img src="../assets/images/icon-23.jpg" @load="imgLoad" width="100%" alt>
-      </div>
-      <img
-        src="../assets/images/icon-21.png"
-        @load="imgLoad"
-        class="icon21"
-        :class="{'active': imgNum >= totalImgNum}"
-        width="100%"
-        alt
-      >
-      <img
-        src="../assets/images/icon-22.png"
-        @load="imgLoad"
-        class="icon22"
-        :class="{'active': imgNum >= totalImgNum}"
-        width="100%"
-        alt
-      >
-      <span class="text1" :class="{'active': imgNum >= totalImgNum}">青山，鲜氧，最宜修身养性，</span>
-      <span class="text2" :class="{'active': imgNum >= totalImgNum}">聚焦，豁达，悦享非凡高见！</span>
-    </div>
-    <div class="box box2">
-      <img
-        src="../assets/images/icon-25.png"
-        @load="imgLoad"
-        class="icon25"
-        :class="{'active': imgNum >= totalImgNum}"
-        width="100%"
-        alt
-      >
-      <div class="bigImg">
-        <img src="../assets/images/icon-26.jpg" @load="imgLoad" class="icon26" width="100%" alt>
+    <div class="pageBox chengShiShan">
+      <div class="box box1">
+        <div class="bg">
+          <img src="../assets/images/icon-23.jpg" @load="imgLoad" width="100%" alt>
+        </div>
+        <img
+          src="../assets/images/icon-21.png"
+          @load="imgLoad"
+          class="icon21"
+          :class="{'active': imgNum >= totalImgNum}"
+          width="100%"
+          alt
+        >
+        <img
+          src="../assets/images/icon-22.png"
+          @load="imgLoad"
+          class="icon22"
+          :class="{'active': imgNum >= totalImgNum}"
+          width="100%"
+          alt
+        >
+        <span class="text1" :class="{'active': imgNum >= totalImgNum}">青山，鲜氧，最宜修身养性，</span>
+        <span class="text2" :class="{'active': imgNum >= totalImgNum}">聚焦，豁达，悦享非凡高见！</span>
       </div>
-      <div class="textInfo flex-h scrollPage">
-        <div class="line">
-          <div :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[0]}"></div>
+      <div class="box box2">
+        <img
+          src="../assets/images/icon-25.png"
+          @load="imgLoad"
+          class="icon25"
+          :class="{'active': imgNum >= totalImgNum}"
+          width="100%"
+          alt
+        >
+        <div class="bigImg">
+          <img src="../assets/images/icon-26.jpg" @load="imgLoad" class="icon26" width="100%" alt>
         </div>
-        <div class="flex-item">
-          <div>
-            <img
-              src="../assets/images/icon-27.png"
-              @load="imgLoad"
-              class="icon27"
-              :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[0]}"
-              alt
-            >
-            <span
-              :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[0]}"
-            >80平方公里老山璀若明珠，
-              <br>13公里滨江风光旖旎向前。
-              <br>80%森林覆盖率，国家级森林公园，
-              <br>更有千年古刹，风景传说，
-              <br>引无数文人墨士竞折腰。
-            </span>
+        <div class="textInfo flex-h scrollPage">
+          <div class="line">
+            <div :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[0]}"></div>
+          </div>
+          <div class="flex-item">
+            <div>
+              <img
+                src="../assets/images/icon-27.png"
+                @load="imgLoad"
+                class="icon27"
+                :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[0]}"
+                alt
+              >
+              <span
+                :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[0]}"
+              >80平方公里老山璀若明珠，
+                <br>13公里滨江风光旖旎向前。
+                <br>80%森林覆盖率，国家级森林公园，
+                <br>更有千年古刹，风景传说，
+                <br>引无数文人墨士竞折腰。
+              </span>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="box box3">
-      <img src="../assets/images/icon-25.png" class="icon25" width="100%" alt>
-      <div class="bigImg">
-        <img src="../assets/images/icon-28.jpg" @load="imgLoad" class="icon26" width="100%" alt>
-      </div>
-      <div class="subInfo scrollPage">
-        <img src="../assets/images/icon-29.gif" @load="imgLoad" class="icon29" width="100%" alt>
-        <span :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[1]}">白马路，
-          <br>贯穿江与山，
-          <br>承接自然生态与未来发展。
-          <br>传承地脉天赋，延续繁荣之势！
-          <br>串联低密度高端圈层，
-          <br>四通八达，资源贯通！
-          <br>链接银城力作-“白马澜山”，
-          <br>今与“悦见山”交相呼应！
-          <br>一条路划分一个圈层，
-          <br>一座城构建核心优势！
-        </span>
-      </div>
-    </div>
-    <div class="box box4">
-      <img src="../assets/images/icon-25.png" class="icon25" width="100%" alt>
-      <div class="bigImg">
-        <img src="../assets/images/icon-31.jpg" @load="imgLoad" class="icon31" width="100%" alt>
+      <div class="box box3">
+        <img src="../assets/images/icon-25.png" class="icon25" width="100%" alt>
+        <div class="bigImg">
+          <img src="../assets/images/icon-28.jpg" @load="imgLoad" class="icon26" width="100%" alt>
+        </div>
+        <div class="subInfo scrollPage">
+          <img src="../assets/images/icon-29.gif" @load="imgLoad" class="icon29" width="100%" alt>
+          <span :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[1]}">白马路，
+            <br>贯穿江与山，
+            <br>承接自然生态与未来发展。
+            <br>传承地脉天赋，延续繁荣之势！
+            <br>串联低密度高端圈层，
+            <br>四通八达，资源贯通！
+            <br>链接银城力作-“白马澜山”，
+            <br>今与“悦见山”交相呼应！
+            <br>一条路划分一个圈层，
+            <br>一座城构建核心优势！
+          </span>
+        </div>
       </div>
-      <div class="textInfo flex-h scrollPage">
-        <div class="line">
-          <div :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[2]}"></div>
+      <div class="box box4">
+        <img src="../assets/images/icon-25.png" class="icon25" width="100%" alt>
+        <div class="bigImg">
+          <img src="../assets/images/icon-31.jpg" @load="imgLoad" class="icon31" width="100%" alt>
         </div>
-        <div class="flex-item">
-          <div>
-            <img
-              src="../assets/images/icon-32.png"
-              @load="imgLoad"
-              class="icon32"
-              :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[2]}"
-              alt
-            >
-            <span :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[2]}">
-              <b>交通</b>：地铁10号线、江北快速路、沿山大道、长江隧道......
-              <br>
-              <b>医疗配套</b>：省人民医院浦口分院、鼓楼医院江北国际医院......
-              <br>
-              <b>商业</b>：白马社区邻里中心（在建）、虹悦城（在建）、红星美凯龙、万象汇、大润发......
-              <br>
-              <b>学校</b>：浦口实验学校、江浦高级中学、汉开学校......
-            </span>
+        <div class="textInfo flex-h scrollPage">
+          <div class="line">
+            <div :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[2]}"></div>
+          </div>
+          <div class="flex-item">
+            <div>
+              <img
+                src="../assets/images/icon-32.png"
+                @load="imgLoad"
+                class="icon32"
+                :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[2]}"
+                alt
+              >
+              <span :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[2]}">
+                <b>交通</b>：地铁10号线、江北快速路、沿山大道、长江隧道......
+                <br>
+                <b>医疗配套</b>：省人民医院浦口分院、鼓楼医院江北国际医院......
+                <br>
+                <b>商业</b>：白马社区邻里中心（在建）、虹悦城（在建）、红星美凯龙、万象汇、大润发......
+                <br>
+                <b>学校</b>：浦口实验学校、江浦高级中学、汉开学校......
+              </span>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="foot">
-      <span :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[2]}">对接工作与生活，开启今天与明天！
-        <br>以优势资源，享人生高见！
-      </span>
-      <img src="../assets/images/icon-25.png" class="icon25" width="100%" alt>
+      <div class="foot">
+        <span
+          :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[2]}"
+        >对接工作与生活，开启今天与明天！
+          <br>以优势资源，享人生高见！
+        </span>
+        <img src="../assets/images/icon-25.png" class="icon25" width="100%" alt>
+      </div>
     </div>
   </div>
 </template>
@@ -199,10 +203,7 @@ export default {
   width: 100%;
   height: 100%;
   position: relative;
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
-  transform: translateZ(0);
-  -webkit-transform: translateZ(0);
+  overflow: hidden;
   .top {
     width: 100%;
     position: absolute;
@@ -224,192 +225,201 @@ export default {
       margin-right: 0.15rem;
     }
   }
-  .box {
-    margin: 0.15rem auto 0;
-  }
-  .box1 {
+  > div.pageBox {
     width: 100%;
+    height: 100%;
     position: relative;
-    overflow: visible;
-    .bg {
-      padding: 0 0.15rem;
-      position: relative;
-      overflow: hidden;
-      z-index: 1;
-    }
-    .icon21,
-    .icon22 {
-      display: block;
-      position: absolute;
-      z-index: 2;
-      transition: all 0.5s linear;
-      -webkit-transition: all 0.5s linear;
-      left: 0;
-      opacity: 0;
-      transform: translateY(0.3rem);
-      -webkit-transform: translateY(0.3rem);
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    transform: translateZ(0);
+    -webkit-transform: translateZ(0);
+    .box {
+      margin: 0.15rem auto 0;
     }
-    .icon21 {
-      transition-delay: 0.5s;
-      -webkit-transition-delay: 0.5s;
-      top: 0.6rem;
-      &.active {
-        opacity: 1;
-        transform: translateY(0);
-        -webkit-transform: translateY(0);
-      }
-    }
-    .icon22 {
-      transition-delay: 1s;
-      -webkit-transition-delay: 1s;
-      top: 1rem;
-      &.active {
-        opacity: 1;
-        transform: translateY(0);
-        -webkit-transform: translateY(0);
-      }
-    }
-    > span {
+    .box1 {
       width: 100%;
-      display: block;
-      text-align: center;
-      font-size: 0.12rem;
-      line-height: 1.5;
-      color: #e6b185;
-    }
-    .text1 {
-      margin-top: 0.15rem;
-    }
-    .text1,
-    .text2 {
-      &.active {
-        animation: GlitterAnimation 1s linear 2s;
-        -webkit-animation: GlitterAnimation 1s linear 2s;
-        animation-iteration-count: 2;
-        -webkit-animation-iteration-count: 2;
-      }
-    }
-  }
-  .box2 {
-    .icon25 {
-      margin-top: 0.35rem;
-    }
-  }
-  .bigImg,
-  .textInfo {
-    padding: 0 0.15rem;
-    position: relative;
-    overflow: hidden;
-    margin-top: 0.25rem;
-  }
-  .textInfo {
-    .line {
-      width: 13vw;
       position: relative;
-      overflow: hidden;
-      div {
-        width: 0.02rem;
-        height: 100%;
-        background: #dfa870;
+      overflow: visible;
+      .bg {
+        padding: 0 0.15rem;
+        position: relative;
+        overflow: hidden;
+        z-index: 1;
+      }
+      .icon21,
+      .icon22 {
+        display: block;
         position: absolute;
-        right: 0;
-        top: 0;
+        z-index: 2;
         transition: all 0.5s linear;
         -webkit-transition: all 0.5s linear;
-        transform: translateY(-100%);
-        -webkit-transform: translateY(-100%);
+        left: 0;
         opacity: 0;
+        transform: translateY(0.3rem);
+        -webkit-transform: translateY(0.3rem);
+      }
+      .icon21 {
+        transition-delay: 0.5s;
+        -webkit-transition-delay: 0.5s;
+        top: 0.6rem;
         &.active {
+          opacity: 1;
           transform: translateY(0);
           -webkit-transform: translateY(0);
+        }
+      }
+      .icon22 {
+        transition-delay: 1s;
+        -webkit-transition-delay: 1s;
+        top: 1rem;
+        &.active {
           opacity: 1;
+          transform: translateY(0);
+          -webkit-transform: translateY(0);
         }
       }
-    }
-    > .flex-item {
-      margin-right: 0.15rem;
-      margin-left: 0.05rem;
-      > div {
+      > span {
         width: 100%;
+        display: block;
+        text-align: center;
+        font-size: 0.12rem;
+        line-height: 1.5;
+        color: #e6b185;
+      }
+      .text1 {
+        margin-top: 0.15rem;
+      }
+      .text1,
+      .text2 {
+        &.active {
+          animation: GlitterAnimation 1s linear 2s;
+          -webkit-animation: GlitterAnimation 1s linear 2s;
+          animation-iteration-count: 2;
+          -webkit-animation-iteration-count: 2;
+        }
+      }
+    }
+    .box2 {
+      .icon25 {
+        margin-top: 0.35rem;
+      }
+    }
+    .bigImg,
+    .textInfo {
+      padding: 0 0.15rem;
+      position: relative;
+      overflow: hidden;
+      margin-top: 0.25rem;
+    }
+    .textInfo {
+      .line {
+        width: 13vw;
         position: relative;
         overflow: hidden;
-        img {
-          height: 0.25rem;
-          margin-bottom: 0.1rem;
-          transition: all 0.5s linear 0.5s;
-          -webkit-transition: all 0.5s linear 0.5s;
-          transform: translateX(100%);
-          -webkit-transform: translateX(100%);
+        div {
+          width: 0.02rem;
+          height: 100%;
+          background: #dfa870;
+          position: absolute;
+          right: 0;
+          top: 0;
+          transition: all 0.5s linear;
+          -webkit-transition: all 0.5s linear;
+          transform: translateY(-100%);
+          -webkit-transform: translateY(-100%);
           opacity: 0;
           &.active {
-            transform: translateX(0);
-            -webkit-transform: translateX(0);
+            transform: translateY(0);
+            -webkit-transform: translateY(0);
             opacity: 1;
           }
         }
-        span {
+      }
+      > .flex-item {
+        margin-right: 0.15rem;
+        margin-left: 0.05rem;
+        > div {
           width: 100%;
-          display: block;
-          font-size: 0.11rem;
-          line-height: 0.15rem;
-          transition: all 0.5s linear 1s;
-          -webkit-transition: all 0.5s linear 1s;
-          transform: translateY(100%);
-          -webkit-transform: translateY(100%);
-          opacity: 0;
-          &.active {
-            transform: translateY(0);
-            -webkit-transform: translateY(0);
-            opacity: 1;
+          position: relative;
+          overflow: hidden;
+          img {
+            height: 0.25rem;
+            margin-bottom: 0.1rem;
+            transition: all 0.5s linear 0.5s;
+            -webkit-transition: all 0.5s linear 0.5s;
+            transform: translateX(100%);
+            -webkit-transform: translateX(100%);
+            opacity: 0;
+            &.active {
+              transform: translateX(0);
+              -webkit-transform: translateX(0);
+              opacity: 1;
+            }
           }
-          b {
+          span {
+            width: 100%;
+            display: block;
             font-size: 0.11rem;
             line-height: 0.15rem;
-            font-weight: bolder;
+            transition: all 0.5s linear 1s;
+            -webkit-transition: all 0.5s linear 1s;
+            transform: translateY(100%);
+            -webkit-transform: translateY(100%);
+            opacity: 0;
+            &.active {
+              transform: translateY(0);
+              -webkit-transform: translateY(0);
+              opacity: 1;
+            }
+            b {
+              font-size: 0.11rem;
+              line-height: 0.15rem;
+              font-weight: bolder;
+            }
           }
         }
       }
     }
-  }
-  .subInfo {
-    margin-top: 0.35rem;
-    span {
-      text-align: center;
-      font-size: 0.11rem;
-      line-height: 0.15rem;
-      margin-top: 0.05rem;
-      display: block;
-      transition: all 0.5s linear;
-      -webkit-transition: all 0.5s linear;
-      opacity: 0;
-      &.active {
-        opacity: 1;
+    .subInfo {
+      margin-top: 0.35rem;
+      span {
+        text-align: center;
+        font-size: 0.11rem;
+        line-height: 0.15rem;
+        margin-top: 0.05rem;
+        display: block;
+        transition: all 0.5s linear;
+        -webkit-transition: all 0.5s linear;
+        opacity: 0;
+        &.active {
+          opacity: 1;
+        }
       }
     }
-  }
-  .foot {
-    margin-top: 0.2rem;
-    padding-bottom: 0.6rem;
-    span {
-      width: 100%;
-      display: block;
-      text-align: center;
-      font-size: 0.11rem;
-      line-height: 0.15rem;
-      color: #e2ac6b;
-      transition: all 0.5s linear 1.5s;
-      -webkit-transition: all 0.5s linear 1.5s;
-      opacity: 0;
-      transform: translateY(100%);
-      -webkit-transform: translateY(100%);
-      &.active {
-        opacity: 1;
-        transform: translateY(0);
-        -webkit-transform: translateY(0);
+    .foot {
+      margin-top: 0.2rem;
+      padding-bottom: 0.6rem;
+      span {
+        width: 100%;
+        display: block;
+        text-align: center;
+        font-size: 0.11rem;
+        line-height: 0.15rem;
+        color: #e2ac6b;
+        transition: all 0.5s linear 1.5s;
+        -webkit-transition: all 0.5s linear 1.5s;
+        opacity: 0;
+        transform: translateY(100%);
+        -webkit-transform: translateY(100%);
+        &.active {
+          opacity: 1;
+          transform: translateY(0);
+          -webkit-transform: translateY(0);
+        }
+      }
+      img {
+        margin-top: 0.35rem;
       }
-    }
-    img {
-      margin-top: 0.35rem;
     }
   }
 }

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="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/905e19843e65f123c34b42f8d96f7118.mp4" type="video/mp4">
+        <source src="https://jingcheng-h5.oss-cn-beijing.aliyuncs.com/8d1899e05b672d7f593b03e9f1c83886.mp4" type="video/mp4">
       </video>
     </div>
   </div>

src/pages/menus.vue

@@ -137,7 +137,7 @@ export default {
       }
     }
     div.img {
-      width: 15%;
+      width: 10%;
       position: relative;
       overflow: hidden;
       img {

src/pages/quanLingJu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mainPage chengShiShan">
+  <div class="mainPage">
     <div class="top flex-h">
       <div class="flex-item">
         <a @click="reback">
@@ -10,145 +10,147 @@
         <img src="../assets/images/icon-10.png" class="contain" alt>
       </a>
     </div>
-    <div class="box box1">
-      <div class="bg">
-        <img src="../assets/images/icon-60.jpg" @load="imgLoad" width="100%" alt>
-      </div>
-      <img
-        src="../assets/images/icon-57.png"
-        @load="imgLoad"
-        class="icon57"
-        :class="{'active': imgNum >= totalImgNum}"
-        width="100%"
-        alt
-      >
-      <img
-        src="../assets/images/icon-58.png"
-        @load="imgLoad"
-        class="icon58"
-        :class="{'active': imgNum >= totalImgNum}"
-        width="100%"
-        alt
-      >
-      <img
-        src="../assets/images/icon-59.png"
-        @load="imgLoad"
-        class="icon59"
-        :class="{'active': imgNum >= totalImgNum}"
-        width="100%"
-        alt
-      >
-      <span class="text">生命如虹，而色泽不同。
-        <br>跨越时间鸿沟，聚合各年龄层需求。
-        <br>让高见人生，
-        <br>折射更耀眼的光芒！
-      </span>
-    </div>
-    <div class="box box2">
-      <img
-        src="../assets/images/icon-25.png"
-        @load="imgLoad"
-        class="icon25"
-        :class="{'active': imgNum >= totalImgNum}"
-        width="100%"
-        alt
-      >
-      <div class="bigImg">
-        <img src="../assets/images/icon-61.jpg" @load="imgLoad" class="icon61" width="100%" alt>
+    <div class="pageBox chengShiShan">
+      <div class="box box1">
+        <div class="bg">
+          <img src="../assets/images/icon-60.jpg" @load="imgLoad" width="100%" alt>
+        </div>
+        <img
+          src="../assets/images/icon-57.png"
+          @load="imgLoad"
+          class="icon57"
+          :class="{'active': imgNum >= totalImgNum}"
+          width="100%"
+          alt
+        >
+        <img
+          src="../assets/images/icon-58.png"
+          @load="imgLoad"
+          class="icon58"
+          :class="{'active': imgNum >= totalImgNum}"
+          width="100%"
+          alt
+        >
+        <img
+          src="../assets/images/icon-59.png"
+          @load="imgLoad"
+          class="icon59"
+          :class="{'active': imgNum >= totalImgNum}"
+          width="100%"
+          alt
+        >
+        <span class="text">生命如虹，而色泽不同。
+          <br>跨越时间鸿沟，聚合各年龄层需求。
+          <br>让高见人生，
+          <br>折射更耀眼的光芒！
+        </span>
       </div>
-      <div class="textInfo flex-h scrollPage">
-        <div class="line">
-          <div :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[0]}"></div>
+      <div class="box box2">
+        <img
+          src="../assets/images/icon-25.png"
+          @load="imgLoad"
+          class="icon25"
+          :class="{'active': imgNum >= totalImgNum}"
+          width="100%"
+          alt
+        >
+        <div class="bigImg">
+          <img src="../assets/images/icon-61.jpg" @load="imgLoad" class="icon61" width="100%" alt>
         </div>
-        <div class="flex-item">
-          <div>
-            <img
-              src="../assets/images/icon-62.jpg"
-              @load="imgLoad"
-              class="icon62"
-              :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[0]}"
-              alt
-            >
-            <span
-              :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[0]}"
-            >诚邀专业韩国团队，打造海盗船主题乐园，
-              <br>更多出彩娱乐设施，寓教于乐。
-              <br>拓展社交能力，激发协作精神。
-              <br>让孩子的成长充满奇幻，让未来更赋创新！
-            </span>
+        <div class="textInfo flex-h scrollPage" style="margin-top: -.1rem;">
+          <div class="line line2">
+            <div :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[0]}"></div>
+          </div>
+          <div class="flex-item">
+            <div>
+              <img
+                src="../assets/images/icon-62.jpg"
+                @load="imgLoad"
+                class="icon62"
+                :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[0]}"
+                alt
+              >
+              <span
+                :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[0]}"
+              >诚邀专业韩国团队，打造海盗船主题乐园，
+                <br>更多出彩娱乐设施，寓教于乐。
+                <br>拓展社交能力，激发协作精神。
+                <br>让孩子的成长充满奇幻，让未来更赋创新！
+              </span>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-    <div class="box box3">
-      <img src="../assets/images/icon-25.png" class="icon25" width="100%" alt>
-      <div class="bigImg">
-        <img src="../assets/images/icon-63.jpg" @load="imgLoad" class="icon63" width="100%" alt>
-      </div>
-      <div class="subInfo scrollPage">
-        <img src="../assets/images/icon-64.gif" @load="imgLoad" class="icon64" width="100%" alt>
-        <span :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[1]}">白马路，
-          <br>500米夜光跑道，专业健身设施，
-          <br>城市会客厅，公共WIFI，互动社区......
-          <br>分享融洽的社区生活。
-          <br>哺乳期间，享受贴心卡奶槽设计，
-          <br>全面考量，只因更多理解。
-        </span>
-      </div>
-    </div>
-    <div class="box box4">
-      <img src="../assets/images/icon-25.png" class="icon25" width="100%" alt>
-      <div class="bigImg">
-        <img src="../assets/images/icon-65.jpg" @load="imgLoad" class="icon65" width="100%" alt>
+      <div class="box box3">
+        <img src="../assets/images/icon-25.png" class="icon25" width="100%" alt>
+        <div class="bigImg">
+          <img src="../assets/images/icon-63.jpg" @load="imgLoad" class="icon63" width="100%" alt>
+        </div>
+        <div class="subInfo scrollPage">
+          <img src="../assets/images/icon-64.gif" @load="imgLoad" class="icon64" width="100%" alt>
+          <span :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[1]}">白马路，
+            <br>500米夜光跑道，专业健身设施，
+            <br>城市会客厅，公共WIFI，互动社区......
+            <br>分享融洽的社区生活。
+            <br>哺乳期间，享受贴心卡奶槽设计，
+            <br>全面考量，只因更多理解。
+          </span>
+        </div>
       </div>
-      <div class="textInfo flex-h scrollPage">
-        <div class="flex-item">
-          <div style="text-align:right;">
+      <div class="box box4">
+        <img src="../assets/images/icon-25.png" class="icon25" width="100%" alt>
+        <div class="bigImg">
+          <img src="../assets/images/icon-65.jpg" @load="imgLoad" class="icon65" width="100%" alt>
+        </div>
+        <div class="textInfo flex-h scrollPage">
+          <div class="flex-item">
+            <div style="text-align:right;">
+              <img
+                src="../assets/images/icon-66.jpg"
+                @load="imgLoad"
+                class="icon66"
+                :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[2]}"
+                alt
+              >
+              <span
+                :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[2]}"
+              >户外坐凳，休憩平台，活力老年社区，
+                <br>老年专用健身设施，
+                <br>坡道路径等社区适老设计
+                <br>在这里，岁月变得更加从容。
+              </span>
+            </div>
+          </div>
+          <div class="line" style="width: 35%;padding-left: .1rem;">
+            <div :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[2]}"></div>
             <img
-              src="../assets/images/icon-66.jpg"
+              src="../assets/images/icon-67.jpg"
               @load="imgLoad"
-              class="icon66"
+              class="icon67"
+              width="100%"
               :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[2]}"
               alt
             >
-            <span
-              :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[2]}"
-            >户外坐凳，休憩平台，活力老年社区，
-              <br>老年专用健身设施，
-              <br>坡道路径等社区适老设计
-              <br>在这里，岁月变得更加从容。
-            </span>
           </div>
         </div>
-        <div class="line" style="width: 35%;padding-left: .1rem;">
-          <div :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[2]}"></div>
-          <img
-            src="../assets/images/icon-67.jpg"
-            @load="imgLoad"
-            class="icon67"
-            width="100%"
-            :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[2]}"
-            alt
-          >
-        </div>
       </div>
-    </div>
-    <div class="box box5">
-      <img src="../assets/images/icon-25.png" class="icon25" width="100%" alt>
-      <div class="bigImg">
-        <img src="../assets/images/icon-68.jpg" @load="imgLoad" class="icon68" width="100%" alt>
+      <div class="box box5">
+        <img src="../assets/images/icon-25.png" class="icon25" width="100%" alt>
+        <div class="bigImg">
+          <img src="../assets/images/icon-68.jpg" @load="imgLoad" class="icon68" width="100%" alt>
+        </div>
+        <div class="subInfo scrollPage">
+          <img src="../assets/images/icon-69.gif" @load="imgLoad" class="icon69" width="100%" alt>
+          <span :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[2]}">专属的宠物交流场地，
+            <br>宠物训练空间等设施，
+            <br>让它玩耍、撒欢、卖萌。
+          </span>
+        </div>
       </div>
-      <div class="subInfo scrollPage">
-        <img src="../assets/images/icon-69.gif" @load="imgLoad" class="icon69" width="100%" alt>
-        <span :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[2]}">专属的宠物交流场地，
-          <br>宠物训练空间等设施，
-          <br>让它玩耍、撒欢、卖萌。
-        </span>
+      <div class="foot">
+        <img src="../assets/images/icon-25.png" class="icon25" width="100%" alt>
       </div>
     </div>
-    <div class="foot">
-      <img src="../assets/images/icon-25.png" class="icon25" width="100%" alt>
-    </div>
   </div>
 </template>
 
@@ -219,10 +221,7 @@ export default {
   width: 100%;
   height: 100%;
   position: relative;
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
-  transform: translateZ(0);
-  -webkit-transform: translateZ(0);
+  overflow: hidden;
   .top {
     width: 100%;
     position: absolute;
@@ -244,183 +243,198 @@ export default {
       margin-right: 0.15rem;
     }
   }
-  .box {
-    margin: 0.15rem auto 0;
-  }
-  .box1 {
+  > div.pageBox {
     width: 100%;
+    height: 100%;
     position: relative;
-    overflow: visible;
-    .bg {
-      padding: 0 0.15rem;
-      position: relative;
-      overflow: hidden;
-      z-index: 1;
-    }
-    .icon57,
-    .icon58,
-    .icon59 {
-      display: block;
-      position: absolute;
-      z-index: 2;
-      transition: all 0.5s linear;
-      -webkit-transition: all 0.5s linear;
-      left: 0;
-      opacity: 0;
-    }
-    .icon57 {
-      transition-delay: 0.5s;
-      -webkit-transition-delay: 0.5s;
-      top: 0.6rem;
-      &.active {
-        opacity: 1;
-      }
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    transform: translateZ(0);
+    -webkit-transform: translateZ(0);
+    .box {
+      margin: 0.15rem auto 0;
     }
-    .icon58 {
-      transition-delay: 1s;
-      -webkit-transition-delay: 1s;
-      top: 0.9rem;
-      &.active {
-        opacity: 1;
-      }
-    }
-    .icon59 {
-      transition-delay: 1.5s;
-      -webkit-transition-delay: 1.5s;
-      top: 1.1rem;
-      &.active {
-        opacity: 1;
-      }
-    }
-    > span {
+    .box1 {
       width: 100%;
-      display: block;
-      text-align: center;
-      font-size: 0.12rem;
-      line-height: 1.5;
-      color: #e6b185;
-      margin-top: 0.1rem;
-    }
-  }
-  .box2 {
-    .icon25 {
-      margin-top: 0.15rem;
-    }
-  }
-  .bigImg,
-  .textInfo {
-    padding: 0 0.15rem;
-    position: relative;
-    overflow: hidden;
-    margin-top: 0.15rem;
-  }
-  .textInfo {
-    .line {
-      width: 13vw;
       position: relative;
-      overflow: hidden;
-      div {
-        width: 0.02rem;
-        height: 100%;
-        background: #dfa870;
+      overflow: visible;
+      .bg {
+        padding: 0 0.15rem;
+        position: relative;
+        overflow: hidden;
+        z-index: 1;
+      }
+      .icon57,
+      .icon58,
+      .icon59 {
+        display: block;
         position: absolute;
-        left: 0;
-        top: 0;
+        z-index: 2;
         transition: all 0.5s linear;
         -webkit-transition: all 0.5s linear;
-        transform: translateY(-100%);
-        -webkit-transform: translateY(-100%);
+        left: 0;
         opacity: 0;
+      }
+      .icon57 {
+        transition-delay: 0.5s;
+        -webkit-transition-delay: 0.5s;
+        top: 0.6rem;
         &.active {
-          transform: translateY(0);
-          -webkit-transform: translateY(0);
           opacity: 1;
         }
       }
-    }
-    > .flex-item {
-      margin-right: 0.15rem;
-      margin-left: 0.05rem;
-      > div {
+      .icon58 {
+        transition-delay: 1s;
+        -webkit-transition-delay: 1s;
+        top: 0.9rem;
+        &.active {
+          opacity: 1;
+        }
+      }
+      .icon59 {
+        transition-delay: 1.5s;
+        -webkit-transition-delay: 1.5s;
+        top: 1.1rem;
+        &.active {
+          opacity: 1;
+        }
+      }
+      > span {
         width: 100%;
+        display: block;
+        text-align: center;
+        font-size: 0.12rem;
+        line-height: 1.5;
+        color: #e6b185;
+        margin-top: 0.1rem;
+      }
+    }
+    .box2 {
+      .icon25 {
+        margin-top: 0.15rem;
+      }
+    }
+    .bigImg,
+    .textInfo {
+      padding: 0 0.15rem;
+      position: relative;
+      overflow: hidden;
+      margin-top: 0.15rem;
+    }
+    .textInfo {
+      .line {
+        width: 13vw;
         position: relative;
         overflow: hidden;
-        img {
-          height: 0.25rem;
-          margin-bottom: 0.1rem;
-          transition: all 0.5s linear 0.5s;
-          -webkit-transition: all 0.5s linear 0.5s;
-          transform: translateX(100%);
-          -webkit-transform: translateX(100%);
+        div {
+          width: 0.02rem;
+          height: 100%;
+          background: #dfa870;
+          position: absolute;
+          left: 0;
+          top: 0;
+          transition: all 0.5s linear;
+          -webkit-transition: all 0.5s linear;
+          transform: translateY(-100%);
+          -webkit-transform: translateY(-100%);
           opacity: 0;
-          &.icon62 {
-            transform: translateX(-1rem);
-            -webkit-transform: translateX(-1rem);
-          }
           &.active {
-            transform: translateX(0);
-            -webkit-transform: translateX(0);
+            transform: translateY(0);
+            -webkit-transform: translateY(0);
             opacity: 1;
           }
         }
-        span {
+        &.line2{
+          div{
+            right: 0;
+            left: auto;
+          }
+        }
+      }
+      > .flex-item {
+        margin-right: 0.15rem;
+        margin-left: 0.05rem;
+        > div {
           width: 100%;
-          display: block;
-          font-size: 0.11rem;
-          line-height: 0.15rem;
-          transition: all 0.5s linear 1s;
-          -webkit-transition: all 0.5s linear 1s;
-          opacity: 0;
-          &.active {
-            opacity: 1;
+          position: relative;
+          overflow: hidden;
+          img {
+            height: 0.25rem;
+            margin-bottom: 0.1rem;
+            transition: all 0.5s linear 0.5s;
+            -webkit-transition: all 0.5s linear 0.5s;
+            transform: translateX(100%);
+            -webkit-transform: translateX(100%);
+            opacity: 0;
+            &.icon62 {
+              transform: translateX(-1rem);
+              -webkit-transform: translateX(-1rem);
+            }
+            &.active {
+              transform: translateX(0);
+              -webkit-transform: translateX(0);
+              opacity: 1;
+            }
           }
-          b {
+          span {
+            width: 100%;
+            display: block;
             font-size: 0.11rem;
             line-height: 0.15rem;
-            font-weight: bolder;
+            transition: all 0.5s linear 1s;
+            -webkit-transition: all 0.5s linear 1s;
+            opacity: 0;
+            &.active {
+              opacity: 1;
+            }
+            b {
+              font-size: 0.11rem;
+              line-height: 0.15rem;
+              font-weight: bolder;
+            }
           }
         }
       }
     }
-  }
-  .subInfo {
-    margin-top: 0.25rem;
-    span {
-      text-align: center;
-      font-size: 0.11rem;
-      line-height: 0.15rem;
-      margin-top: 0.05rem;
-      display: block;
-      transition: all 0.5s linear;
-      -webkit-transition: all 0.5s linear;
-      opacity: 0;
-      &.active {
-        opacity: 1;
+    .subInfo {
+      margin-top: 0.25rem;
+      span {
+        text-align: center;
+        font-size: 0.11rem;
+        line-height: 0.15rem;
+        margin-top: 0.05rem;
+        display: block;
+        transition: all 0.5s linear;
+        -webkit-transition: all 0.5s linear;
+        opacity: 0;
+        &.active {
+          opacity: 1;
+        }
       }
     }
-  }
-  .foot {
-    padding-bottom: 0.3rem;
-    span {
-      width: 100%;
-      display: block;
-      text-align: center;
-      font-size: 0.11rem;
-      line-height: 0.15rem;
-      color: #e2ac6b;
-      transition: all 0.5s linear 1.5s;
-      -webkit-transition: all 0.5s linear 1.5s;
-      opacity: 0;
-      transform: translateY(100%);
-      -webkit-transform: translateY(100%);
-      &.active {
-        opacity: 1;
-        transform: translateY(0);
-        -webkit-transform: translateY(0);
+    .foot {
+      padding-bottom: 0.3rem;
+      span {
+        width: 100%;
+        display: block;
+        text-align: center;
+        font-size: 0.11rem;
+        line-height: 0.15rem;
+        color: #e2ac6b;
+        transition: all 0.5s linear 1.5s;
+        -webkit-transition: all 0.5s linear 1.5s;
+        opacity: 0;
+        transform: translateY(100%);
+        -webkit-transform: translateY(100%);
+        &.active {
+          opacity: 1;
+          transform: translateY(0);
+          -webkit-transform: translateY(0);
+        }
+      }
+      img {
+        margin-top: 0.35rem;
       }
-    }
-    img {
-      margin-top: 0.35rem;
     }
   }
 }

src/pages/xinFuWu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mainPage chengShiShan">
+  <div class="mainPage">
     <div class="top flex-h">
       <div class="flex-item">
         <a @click="reback">
@@ -10,69 +10,71 @@
         <img src="../assets/images/icon-10.png" class="centerLabel contain" alt>
       </a>
     </div>
-    <div class="box box1">
-      <div class="bg">
-        <img src="../assets/images/icon-70.jpg" @load="imgLoad" width="100%" alt>
-      </div>
-      <img
-        src="../assets/images/icon-71.jpg"
-        :class="{'active': imgNum >= totalImgNum}"
-        @load="imgLoad"
-        class="icon71"
-        width="100%"
-        alt
-      >
-      <img
-        src="../assets/images/icon-72.jpg"
-        :class="{'active': imgNum >= totalImgNum}"
-        @load="imgLoad"
-        class="icon72"
-        width="100%"
-        alt
-      >
-    </div>
-    <div class="box box2">
-      <div class="bigImg" style="margin-top: .2rem;">
-        <img src="../assets/images/icon-73.jpg" @load="imgLoad" class="icon73" width="100%" alt>
-      </div>
-      <div class="subInfo scrollPage">
-        <span>南京领航企业银城物业，
-          <br>国家一级物业服务企业资质。
-        </span>
-        <span>拥有完善的专业化服务标准，
-          <br>深度体贴客户需求。
-        </span>
-        <span>目前，服务项目130多个，客户逾30万人，
-          <br>管理面积超1500万㎡。
-        </span>
-        <span>以健全服务的体系和精致的服务细节，</span>
-        <b :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[0]}">赢得业主和市场广泛赞誉。</b>
-      </div>
-    </div>
-    <div class="box box3">
-      <img src="../assets/images/icon-25.png" @load="imgLoad" class="icon25" width="100%" alt>
-      <div class="bigImg">
-        <img src="../assets/images/icon-74.jpg" @load="imgLoad" class="icon74" width="100%" alt>
-      </div>
-      <div class="subInfo scrollPage">
-        <span>银城颐居•悦见山
-          <br>致敬高智阶层远见者！
-        </span>
-        <b :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[1]}">借时代之势，造匠心之作！
-          <br>任光阴流转，唯致敬初心！
-        </b>
+    <div class="pageBox chengShiShan">
+      <div class="box box1">
+        <div class="bg">
+          <img src="../assets/images/icon-70.jpg" @load="imgLoad" width="100%" alt>
+        </div>
+        <img
+          src="../assets/images/icon-71.jpg"
+          :class="{'active': imgNum >= totalImgNum}"
+          @load="imgLoad"
+          class="icon71"
+          width="100%"
+          alt
+        >
         <img
-          src="../assets/images/icon-75.gif"
-          style="margin-top: .2rem;"
+          src="../assets/images/icon-72.jpg"
+          :class="{'active': imgNum >= totalImgNum}"
           @load="imgLoad"
-          class="icon75"
+          class="icon72"
           width="100%"
           alt
         >
       </div>
-    </div>
-    <div class="foot">
-      <img src="../assets/images/icon-25.png" class="icon25" width="100%" alt>
+      <div class="box box2">
+        <div class="bigImg" style="margin-top: .2rem;">
+          <img src="../assets/images/icon-73.jpg" @load="imgLoad" class="icon73" width="100%" alt>
+        </div>
+        <div class="subInfo scrollPage">
+          <span>南京领航企业银城物业，
+            <br>国家一级物业服务企业资质。
+          </span>
+          <span>拥有完善的专业化服务标准，
+            <br>深度体贴客户需求。
+          </span>
+          <span>目前，服务项目130多个，客户逾30万人，
+            <br>管理面积超1500万㎡。
+          </span>
+          <span>以健全服务的体系和精致的服务细节，</span>
+          <b :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[0]}">赢得业主和市场广泛赞誉。</b>
+        </div>
+      </div>
+      <div class="box box3">
+        <img src="../assets/images/icon-25.png" @load="imgLoad" class="icon25" width="100%" alt>
+        <div class="bigImg">
+          <img src="../assets/images/icon-74.jpg" @load="imgLoad" class="icon74" width="100%" alt>
+        </div>
+        <div class="subInfo scrollPage">
+          <span>银城颐居•悦见山
+            <br>致敬高智阶层远见者！
+          </span>
+          <b :class="{'active': imgNum >= totalImgNum && scrollTop >= scrollArr[1]}">借时代之势，造匠心之作！
+            <br>任光阴流转，唯致敬初心！
+          </b>
+          <img
+            src="../assets/images/icon-75.gif"
+            style="margin-top: .2rem;"
+            @load="imgLoad"
+            class="icon75"
+            width="100%"
+            alt
+          >
+        </div>
+      </div>
+      <div class="foot">
+        <img src="../assets/images/icon-25.png" class="icon25" width="100%" alt>
+      </div>
     </div>
   </div>
 </template>
@@ -84,7 +86,7 @@ export default {
   data () {
     return {
       imgNum: 0,
-      totalImgNum: 9,
+      totalImgNum: 8,
       scrollArr: [],
       scrollTop: 0,
       musicStatus: true
@@ -140,10 +142,7 @@ export default {
   width: 100%;
   height: 100%;
   position: relative;
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
-  transform: translateZ(0);
-  -webkit-transform: translateZ(0);
+  overflow: hidden;
   .top {
     width: 100%;
     position: absolute;
@@ -165,165 +164,174 @@ export default {
       margin-right: 0.15rem;
     }
   }
-  .box {
-    margin: 0.15rem auto 0;
-  }
-  .box1 {
+  > div.pageBox {
     width: 100%;
+    height: 100%;
     position: relative;
-    overflow: visible;
-    .bg {
-      padding: 0 0.15rem;
-      position: relative;
-      overflow: hidden;
-      z-index: 1;
-    }
-    > img:nth-child(2) {
-      margin-top: 0.35rem;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    transform: translateZ(0);
+    -webkit-transform: translateZ(0);
+    .box {
+      margin: 0.15rem auto 0;
     }
-    > img:nth-child(3) {
-      margin-top: 0.1rem;
-    }
-    .icon71,
-    .icon72 {
-      transition: all 0.3s linear;
-      -webkit-transition: all 0.3s linear;
-      opacity: 0;
-      &.active {
-        opacity: 1;
-      }
-    }
-    .icon72 {
-      transition-delay: 0.3s;
-      -webkit-transition-delay: 0.3s;
-    }
-  }
-  .box2 {
-    .icon25 {
-      margin-top: 0.15rem;
-    }
-  }
-  .bigImg,
-  .textInfo {
-    padding: 0 0.15rem;
-    position: relative;
-    overflow: hidden;
-    margin-top: 0.15rem;
-  }
-  .textInfo {
-    .line {
-      width: 13vw;
+    .box1 {
+      width: 100%;
       position: relative;
-      overflow: hidden;
-      div {
-        width: 0.02rem;
-        height: 100%;
-        background: #dfa870;
-        position: absolute;
-        left: 0;
-        top: 0;
-        transition: all 0.5s linear;
-        -webkit-transition: all 0.5s linear;
-        transform: translateY(-100%);
-        -webkit-transform: translateY(-100%);
+      overflow: visible;
+      .bg {
+        padding: 0 0.15rem;
+        position: relative;
+        overflow: hidden;
+        z-index: 1;
+      }
+      > img:nth-child(2) {
+        margin-top: 0.35rem;
+      }
+      > img:nth-child(3) {
+        margin-top: 0.1rem;
+      }
+      .icon71,
+      .icon72 {
+        transition: all 0.3s linear;
+        -webkit-transition: all 0.3s linear;
         opacity: 0;
         &.active {
-          transform: translateY(0);
-          -webkit-transform: translateY(0);
           opacity: 1;
         }
       }
+      .icon72 {
+        transition-delay: 0.3s;
+        -webkit-transition-delay: 0.3s;
+      }
     }
-    > .flex-item {
-      margin-right: 0.15rem;
-      margin-left: 0.05rem;
-      > div {
-        width: 100%;
+    .box2 {
+      .icon25 {
+        margin-top: 0.15rem;
+      }
+    }
+    .bigImg,
+    .textInfo {
+      padding: 0 0.15rem;
+      position: relative;
+      overflow: hidden;
+      margin-top: 0.15rem;
+    }
+    .textInfo {
+      .line {
+        width: 13vw;
         position: relative;
         overflow: hidden;
-        img {
-          height: 0.25rem;
-          margin-bottom: 0.1rem;
-          transition: all 0.5s linear 0.5s;
-          -webkit-transition: all 0.5s linear 0.5s;
-          transform: translateX(100%);
-          -webkit-transform: translateX(100%);
+        div {
+          width: 0.02rem;
+          height: 100%;
+          background: #dfa870;
+          position: absolute;
+          left: 0;
+          top: 0;
+          transition: all 0.5s linear;
+          -webkit-transition: all 0.5s linear;
+          transform: translateY(-100%);
+          -webkit-transform: translateY(-100%);
           opacity: 0;
-          &.icon62 {
-            transform: translateX(-1rem);
-            -webkit-transform: translateX(-1rem);
-          }
           &.active {
-            transform: translateX(0);
-            -webkit-transform: translateX(0);
+            transform: translateY(0);
+            -webkit-transform: translateY(0);
             opacity: 1;
           }
         }
-        span {
+      }
+      > .flex-item {
+        margin-right: 0.15rem;
+        margin-left: 0.05rem;
+        > div {
           width: 100%;
-          display: block;
-          font-size: 0.11rem;
-          line-height: 0.15rem;
-          transition: all 0.5s linear 1s;
-          -webkit-transition: all 0.5s linear 1s;
-          opacity: 0;
-          &.active {
-            opacity: 1;
+          position: relative;
+          overflow: hidden;
+          img {
+            height: 0.25rem;
+            margin-bottom: 0.1rem;
+            transition: all 0.5s linear 0.5s;
+            -webkit-transition: all 0.5s linear 0.5s;
+            transform: translateX(100%);
+            -webkit-transform: translateX(100%);
+            opacity: 0;
+            &.icon62 {
+              transform: translateX(-1rem);
+              -webkit-transform: translateX(-1rem);
+            }
+            &.active {
+              transform: translateX(0);
+              -webkit-transform: translateX(0);
+              opacity: 1;
+            }
           }
-          b {
+          span {
+            width: 100%;
+            display: block;
             font-size: 0.11rem;
             line-height: 0.15rem;
-            font-weight: bolder;
+            transition: all 0.5s linear 1s;
+            -webkit-transition: all 0.5s linear 1s;
+            opacity: 0;
+            &.active {
+              opacity: 1;
+            }
+            b {
+              font-size: 0.11rem;
+              line-height: 0.15rem;
+              font-weight: bolder;
+            }
           }
         }
       }
     }
-  }
-  .subInfo {
-    margin-top: 0.25rem;
-    span {
-      text-align: center;
-      font-size: 0.11rem;
-      line-height: 0.15rem;
-      margin-top: 0.05rem;
-      display: block;
-    }
-    > b {
-      width: 100%;
-      display: block;
-      text-align: center;
-      font-size: 0.13rem;
-      color: #e2ac6b;
-      &.active {
-        animation: GlitterAnimation 1s linear 2s;
-        -webkit-animation: GlitterAnimation 1s linear 2s;
-        animation-iteration-count: 2;
-        -webkit-animation-iteration-count: 2;
+    .subInfo {
+      margin-top: 0.25rem;
+      span {
+        text-align: center;
+        font-size: 0.11rem;
+        line-height: 0.15rem;
+        margin-top: 0.05rem;
+        display: block;
       }
-    }
-  }
-  .foot {
-    padding-bottom: 0.3rem;
-    span {
-      width: 100%;
-      display: block;
-      text-align: center;
-      font-size: 0.11rem;
-      line-height: 0.15rem;
-      color: #e2ac6b;
-      transition: all 0.5s linear 1.5s;
-      -webkit-transition: all 0.5s linear 1.5s;
-      opacity: 0;
-      transform: translateY(100%);
-      -webkit-transform: translateY(100%);
-      &.active {
-        opacity: 1;
-        transform: translateY(0);
-        -webkit-transform: translateY(0);
+      > b {
+        width: 100%;
+        display: block;
+        text-align: center;
+        font-size: 0.13rem;
+        color: #e2ac6b;
+        &.active {
+          animation: GlitterAnimation 1s linear 2s;
+          -webkit-animation: GlitterAnimation 1s linear 2s;
+          animation-iteration-count: 2;
+          -webkit-animation-iteration-count: 2;
+        }
       }
     }
-    img {
-      margin-top: 0.35rem;
+    .foot {
+      padding-bottom: 0.3rem;
+      span {
+        width: 100%;
+        display: block;
+        text-align: center;
+        font-size: 0.11rem;
+        line-height: 0.15rem;
+        color: #e2ac6b;
+        transition: all 0.5s linear 1.5s;
+        -webkit-transition: all 0.5s linear 1.5s;
+        opacity: 0;
+        transform: translateY(100%);
+        -webkit-transform: translateY(100%);
+        &.active {
+          opacity: 1;
+          transform: translateY(0);
+          -webkit-transform: translateY(0);
+        }
+      }
+      img {
+        margin-top: 0.35rem;
+      }
     }
   }
 }

src/pages/yueGaoJie.vue

@@ -1,141 +1,143 @@
 <template>
-  <div class="mainPage chengShiShan">
+  <div class="mainPage">
     <div class="top flex-h">
       <div class="flex-item">
         <a @click="reback">
           <img src="../assets/images/icon-20.png" alt>
         </a>
       </div>
-       <a class="music" :class="{'active': musicStatus}" @click="triggerMusic">
+      <a class="music" :class="{'active': musicStatus}" @click="triggerMusic">
         <img src="../assets/images/icon-10.png" class="centerLabel contain" alt>
       </a>
     </div>
-    <div class="box box1">
-      <div class="bg">
-        <img src="../assets/images/icon-78.jpg" @load="imgLoad" width="100%" alt>
-      </div>
-      <img
-        src="../assets/images/icon-76.png"
-        @load="imgLoad"
-        class="icon76"
-        :class="{'active': imgNum >= totalImgNum}"
-        width="100%"
-        alt
-      >
-      <img
-        src="../assets/images/icon-77.png"
-        @load="imgLoad"
-        class="icon77"
-        :class="{'active': imgNum >= totalImgNum}"
-        width="100%"
-        alt
-      >
-      <img
-        src="../assets/images/icon-79.gif"
-        style="margin-top: .3rem;"
-        @load="imgLoad"
-        class="icon79"
-        width="100%"
-        alt
-      >
-      <div class="subInfo">
-        <span>银城颐居•悦见山，
-          <br>17万方高品质全龄智慧奢宅，
-          <br>涵盖叠墅，10-17层墅质高层。
-          <br>一层一景，
-          <br>悦自有高界。
-        </span>
-      </div>
-    </div>
-    <div class="box box2">
-      <div class="bigImg">
-        <img src="../assets/images/icon-80.jpg" @load="imgLoad" class="icon80" width="100%" alt>
-      </div>
-      <div class="list">
-        <img
-          src="../assets/images/icon-81.gif"
-          style="margin: .3rem auto;"
-          @load="imgLoad"
-          class="icon81"
-          width="100%"
-          alt
-        >
+    <div class="pageBox chengShiShan">
+      <div class="box box1">
+        <div class="bg">
+          <img src="../assets/images/icon-78.jpg" @load="imgLoad" width="100%" alt>
+        </div>
         <img
-          src="../assets/images/icon-82.jpg"
-          style="margin-bottom: .2rem;"
+          src="../assets/images/icon-76.png"
           @load="imgLoad"
+          class="icon76"
+          :class="{'active': imgNum >= totalImgNum}"
           width="100%"
           alt
         >
         <img
-          src="../assets/images/icon-25.png"
-          style="margin-bottom: .2rem;"
-          @load="imgLoad"
-          class="icon25"
-          width="100%"
-          alt
-        >
-        <img
-          src="../assets/images/icon-83.jpg"
-          style="margin-bottom: .2rem;"
-          @load="imgLoad"
-          width="100%"
-          alt
-        >
-        <img
-          src="../assets/images/icon-25.png"
-          style="margin-bottom: .2rem;"
-          class="icon25"
-          width="100%"
-          alt
-        >
-        <img
-          src="../assets/images/icon-84.jpg"
-          style="margin-bottom: .2rem;"
+          src="../assets/images/icon-77.png"
           @load="imgLoad"
+          class="icon77"
+          :class="{'active': imgNum >= totalImgNum}"
           width="100%"
           alt
         >
         <img
-          src="../assets/images/icon-25.png"
-          style="margin-bottom: .2rem;"
-          class="icon25"
-          width="100%"
-          alt
-        >
-        <img
-          src="../assets/images/icon-85.jpg"
-          style="margin-bottom: .2rem;"
+          src="../assets/images/icon-79.gif"
+          style="margin-top: .3rem;"
           @load="imgLoad"
+          class="icon79"
           width="100%"
           alt
         >
-        <img
-          src="../assets/images/icon-25.png"
-          style="margin-bottom: .3rem;"
-          class="icon25"
-          width="100%"
-          alt
-        >
-        <img src="../assets/images/icon-86.gif" @load="imgLoad" width="100%" alt>
-        <span>联系您的美好生活设计师！</span>
-        <ul>
-          <li v-for="(item, index) in userList" :key="index">
-            <a :href="['tel:' + item.tel]">
-              <div class="userIcon">
-                <a>
-                  <img :src="item.icon" @load="imgLoad" class="centerLabel cover" alt>
-                </a>
-              </div>
-              <span>{{item.name}}</span>
-              <span class="tel">{{returnTel(item.tel)}}</span>
-            </a>
-          </li>
-        </ul>
+        <div class="subInfo">
+          <span>银城颐居•悦见山，
+            <br>17万方高品质全龄智慧奢宅，
+            <br>涵盖叠墅，10-17层墅质高层。
+            <br>一层一景，
+            <br>悦自有高界。
+          </span>
+        </div>
+      </div>
+      <div class="box box2">
+        <div class="bigImg">
+          <img src="../assets/images/icon-80.jpg" @load="imgLoad" class="icon80" width="100%" alt>
+        </div>
+        <div class="list">
+          <img
+            src="../assets/images/icon-81.gif"
+            style="margin: .3rem auto;"
+            @load="imgLoad"
+            class="icon81"
+            width="100%"
+            alt
+          >
+          <img
+            src="../assets/images/icon-82.jpg"
+            style="margin-bottom: .2rem;"
+            @load="imgLoad"
+            width="100%"
+            alt
+          >
+          <img
+            src="../assets/images/icon-25.png"
+            style="margin-bottom: .2rem;"
+            @load="imgLoad"
+            class="icon25"
+            width="100%"
+            alt
+          >
+          <img
+            src="../assets/images/icon-83.jpg"
+            style="margin-bottom: .2rem;"
+            @load="imgLoad"
+            width="100%"
+            alt
+          >
+          <img
+            src="../assets/images/icon-25.png"
+            style="margin-bottom: .2rem;"
+            class="icon25"
+            width="100%"
+            alt
+          >
+          <img
+            src="../assets/images/icon-84.jpg"
+            style="margin-bottom: .2rem;"
+            @load="imgLoad"
+            width="100%"
+            alt
+          >
+          <img
+            src="../assets/images/icon-25.png"
+            style="margin-bottom: .2rem;"
+            class="icon25"
+            width="100%"
+            alt
+          >
+          <img
+            src="../assets/images/icon-85.jpg"
+            style="margin-bottom: .2rem;"
+            @load="imgLoad"
+            width="100%"
+            alt
+          >
+          <img
+            src="../assets/images/icon-25.png"
+            style="margin-bottom: .3rem;"
+            class="icon25"
+            width="100%"
+            alt
+          >
+          <img src="../assets/images/icon-86.gif" @load="imgLoad" width="100%" alt>
+          <span>联系您的美好生活设计师！</span>
+          <ul>
+            <li v-for="(item, index) in userList" :key="index">
+              <a :href="['tel:' + item.tel]">
+                <div class="userIcon">
+                  <a>
+                    <img :src="item.icon" @load="imgLoad" class="centerLabel cover" alt>
+                  </a>
+                </div>
+                <span>{{item.name}}</span>
+                <span class="tel">{{returnTel(item.tel)}}</span>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="foot">
+        <img src="../assets/images/icon-25.png" class="icon25" width="100%" alt>
       </div>
-    </div>
-    <div class="foot">
-      <img src="../assets/images/icon-25.png" class="icon25" width="100%" alt>
     </div>
   </div>
 </template>
@@ -278,10 +280,7 @@ export default {
   width: 100%;
   height: 100%;
   position: relative;
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
-  transform: translateZ(0);
-  -webkit-transform: translateZ(0);
+  overflow: hidden;
   .top {
     width: 100%;
     position: absolute;
@@ -303,167 +302,176 @@ export default {
       margin-right: 0.15rem;
     }
   }
-  .box {
-    margin: 0.15rem auto 0;
-  }
-  .box1 {
+  > div.pageBox {
     width: 100%;
+    height: 100%;
     position: relative;
-    overflow: visible;
-    .bg {
-      padding: 0 0.15rem;
-      position: relative;
-      overflow: hidden;
-      z-index: 1;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    transform: translateZ(0);
+    -webkit-transform: translateZ(0);
+    .box {
+      margin: 0.15rem auto 0;
     }
-    .icon76,
-    .icon77 {
-      display: block;
-      position: absolute;
-      z-index: 2;
-      transition: all 0.5s linear;
-      -webkit-transition: all 0.5s linear;
-      left: 0;
-      opacity: 0;
-    }
-    .icon76 {
-      transition-delay: 0.5s;
-      -webkit-transition-delay: 0.5s;
-      top: 0.6rem;
-      &.active {
-        opacity: 1;
-      }
-    }
-    .icon77 {
-      transition-delay: 1s;
-      -webkit-transition-delay: 1s;
-      top: 0.9rem;
-      &.active {
-        opacity: 1;
+    .box1 {
+      width: 100%;
+      position: relative;
+      overflow: visible;
+      .bg {
+        padding: 0 0.15rem;
+        position: relative;
+        overflow: hidden;
+        z-index: 1;
       }
-    }
-  }
-  .box2 {
-    .list {
-      > span {
-        width: 100%;
+      .icon76,
+      .icon77 {
         display: block;
-        text-align: center;
-        font-size: 0.11rem;
-        line-height: 0.2rem;
-        font-weight: bolder;
+        position: absolute;
+        z-index: 2;
+        transition: all 0.5s linear;
+        -webkit-transition: all 0.5s linear;
+        left: 0;
+        opacity: 0;
       }
-      > ul {
-        padding: 0 0.1rem;
-        position: relative;
-        overflow: visible;
-        font-size: 0;
-        text-align: center;
-        > li {
-          display: inline-block;
-          width: 33.33%;
+      .icon76 {
+        transition-delay: 0.5s;
+        -webkit-transition-delay: 0.5s;
+        top: 0.6rem;
+        &.active {
+          opacity: 1;
+        }
+      }
+      .icon77 {
+        transition-delay: 1s;
+        -webkit-transition-delay: 1s;
+        top: 0.9rem;
+        &.active {
+          opacity: 1;
+        }
+      }
+    }
+    .box2 {
+      .list {
+        > span {
+          width: 100%;
+          display: block;
+          text-align: center;
+          font-size: 0.11rem;
+          line-height: 0.2rem;
+          font-weight: bolder;
+        }
+        > ul {
+          padding: 0 0.1rem;
           position: relative;
           overflow: visible;
-          box-sizing: border-box;
-          border-left: 0.1rem solid transparent;
-          border-right: 0.1rem solid transparent;
-          margin-top: 0.2rem;
-          > * {
-            width: 100%;
-            box-sizing: border-box;
-            border: 1px solid #eee;
-            display: block;
-            border-radius: 5px;
+          font-size: 0;
+          text-align: center;
+          > li {
+            display: inline-block;
+            width: 33.33%;
             position: relative;
-            overflow: hidden;
-            box-shadow: 0 0 0.2rem 0.05rem rgba(0, 0, 0, 0.05);
-            .userIcon {
-              padding: 0 25%;
+            overflow: visible;
+            box-sizing: border-box;
+            border-left: 0.1rem solid transparent;
+            border-right: 0.1rem solid transparent;
+            margin-top: 0.2rem;
+            > * {
+              width: 100%;
+              box-sizing: border-box;
+              border: 1px solid #eee;
+              display: block;
+              border-radius: 5px;
               position: relative;
               overflow: hidden;
-              margin: 0.1rem auto 0;
-              padding-bottom: 0.1rem;
-              &::after {
-                content: "";
-                width: 80%;
-                height: 1px;
-                background: #eee;
-                position: absolute;
-                left: 50%;
-                bottom: 0;
-                transform: translateX(-50%);
-                -webkit-transform: translateX(-50%);
-              }
-              a {
-                width: 100%;
-                display: block;
-                padding-bottom: 100%;
-                height: 0;
+              box-shadow: 0 0 0.2rem 0.05rem rgba(0, 0, 0, 0.05);
+              .userIcon {
+                padding: 0 25%;
                 position: relative;
                 overflow: hidden;
-                border-radius: 100%;
-                background: #eee;
+                margin: 0.1rem auto 0;
+                padding-bottom: 0.1rem;
+                &::after {
+                  content: "";
+                  width: 80%;
+                  height: 1px;
+                  background: #eee;
+                  position: absolute;
+                  left: 50%;
+                  bottom: 0;
+                  transform: translateX(-50%);
+                  -webkit-transform: translateX(-50%);
+                }
+                a {
+                  width: 100%;
+                  display: block;
+                  padding-bottom: 100%;
+                  height: 0;
+                  position: relative;
+                  overflow: hidden;
+                  border-radius: 100%;
+                  background: #eee;
+                }
               }
-            }
-            > span {
-              width: 100%;
-              display: block;
-              text-align: center;
-              white-space: nowrap;
-              font-size: 0.12rem;
-              line-height: 0.16rem;
-              margin-top: 0.05rem;
-              color: #333;
-              &.tel {
-                margin-top: 0;
-                font-size: 0.1rem;
-                color: #e2ac6b;
-                margin-bottom: 0.05rem;
+              > span {
+                width: 100%;
+                display: block;
+                text-align: center;
+                white-space: nowrap;
+                font-size: 0.12rem;
+                line-height: 0.16rem;
+                margin-top: 0.05rem;
+                color: #333;
+                &.tel {
+                  margin-top: 0;
+                  font-size: 0.1rem;
+                  color: #e2ac6b;
+                  margin-bottom: 0.05rem;
+                }
               }
             }
           }
         }
       }
     }
-  }
-  .bigImg {
-    padding: 0 0.15rem;
-    position: relative;
-    overflow: hidden;
-    margin-top: 0.15rem;
-  }
-  .subInfo {
-    margin-top: 0.1rem;
-    span {
-      text-align: center;
-      font-size: 0.11rem;
-      line-height: 0.15rem;
-      margin-top: 0.05rem;
-      display: block;
+    .bigImg {
+      padding: 0 0.15rem;
+      position: relative;
+      overflow: hidden;
+      margin-top: 0.15rem;
     }
-  }
-  .foot {
-    padding-bottom: 0.3rem;
-    span {
-      width: 100%;
-      display: block;
-      text-align: center;
-      font-size: 0.11rem;
-      line-height: 0.15rem;
-      color: #e2ac6b;
-      transition: all 0.5s linear 1.5s;
-      -webkit-transition: all 0.5s linear 1.5s;
-      opacity: 0;
-      transform: translateY(100%);
-      -webkit-transform: translateY(100%);
-      &.active {
-        opacity: 1;
-        transform: translateY(0);
-        -webkit-transform: translateY(0);
+    .subInfo {
+      margin-top: 0.1rem;
+      span {
+        text-align: center;
+        font-size: 0.11rem;
+        line-height: 0.15rem;
+        margin-top: 0.05rem;
+        display: block;
       }
     }
-    img {
-      margin-top: 0.35rem;
+    .foot {
+      padding-bottom: 0.3rem;
+      span {
+        width: 100%;
+        display: block;
+        text-align: center;
+        font-size: 0.11rem;
+        line-height: 0.15rem;
+        color: #e2ac6b;
+        transition: all 0.5s linear 1.5s;
+        -webkit-transition: all 0.5s linear 1.5s;
+        opacity: 0;
+        transform: translateY(100%);
+        -webkit-transform: translateY(100%);
+        &.active {
+          opacity: 1;
+          transform: translateY(0);
+          -webkit-transform: translateY(0);
+        }
+      }
+      img {
+        margin-top: 0.35rem;
+      }
     }
   }
 }