up

webM/src/assets/base.css

@@ -89,16 +89,6 @@ body {
   color: #9F171C;
   margin: 0 10px;
 }
-.comBs{
-  position: absolute;
-  bottom: 10px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 29px;
-  height: 29px;
-  background: url('../assets/img/slide.png');
-  background-size: 100% 100%;
-}
 .opcBase{
   opacity: 0 !important;
 }

webM/src/components/five.vue

@@ -66,8 +66,6 @@
         <div class="detailClose" @click="detailShow = false"></div>
       </div>
     </div>
-    <!-- 切换下一页 -->
-    <div class="comBs" @click="$emit('pageNext')"></div>
     <!-- 数据加载中 -->
     <div class="conShowLoad" v-show="conShowLoad">
       <img src="../assets/img/loading.gif" alt="" />
@@ -89,7 +87,7 @@ export default {
       default: () => [],
     },
   },
-  components: {},
+  components: { },
   data() {
     //这里存放数据
     return {

webM/src/components/one.vue

@@ -29,8 +29,6 @@
         </div>
       </div>
     </div>
-    <!-- 切换下一页 -->
-    <div class="comBs" @click="$emit('pageNext')"></div>
     <!-- 数据加载中 -->
     <div class="conShowLoad" v-show="conShowLoad">
       <img src="../assets/img/loading.gif" alt="" />

webM/src/components/one2.vue

@@ -29,8 +29,6 @@
         </div>
       </div>
     </div>
-    <!-- 切换下一页 -->
-    <div class="comBs" @click="$emit('pageNext')"></div>
     <!-- 数据加载中 -->
     <div class="conShowLoad" v-show="conShowLoad">
       <img src="../assets/img/loading.gif" alt="" />

webM/src/components/six.vue

@@ -75,8 +75,6 @@
         <div class="detailClose" @click="detailShow = false"></div>
       </div>
     </div>
-    <!-- 切换下一页 -->
-    <div class="comBs" @click="$emit('pageNext')"></div>
     <!-- 数据加载中 -->
     <div class="conShowLoad" v-show="conShowLoad">
       <img src="../assets/img/loading.gif" alt="" />

webM/src/components/three.vue

@@ -29,8 +29,6 @@
       v-html="data.content"
       :class="{ opcBase: conShowLoad }"
     ></div>
-    <!-- 切换下一页 -->
-    <div class="comBs" v-if="tit!=='村内导览'" @click="$emit('pageNext')"></div>
     <!-- 数据加载中 -->
     <div class="conShowLoad" v-show="conShowLoad">
       <img src="../assets/img/loading.gif" alt="" />

webM/src/components/three2.vue

@@ -29,8 +29,6 @@
       v-html="data.content"
       :class="{ opcBase: conShowLoad }"
     ></div>
-    <!-- 切换下一页 -->
-    <div class="comBs" @click="$emit('pageNext')"></div>
     <!-- 数据加载中 -->
     <div class="conShowLoad" v-show="conShowLoad">
       <img src="../assets/img/loading.gif" alt="" />

webM/src/components/tow.vue

@@ -16,8 +16,6 @@
         </div>
       </div>
     </div>
-    <!-- 切换下一页 -->
-    <div class="comBs" @click="$emit('pageNext')"></div>
     <!-- 数据加载中 -->
     <div class="conShowLoad" v-show="conShowLoad">
       <img src="../assets/img/loading.gif" alt="" />

webM/src/views/info/component/son1.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="son1">
-    <One tit="建村历史" :data="data1" @pageNext="$emit('pageNext', 1)" />
-    <Tow tit="历史人物" :data="data2" @pageNext="$emit('pageNext', 2)" />
-    <Three tit="历史事件" :data="data3" @pageNext="$emit('pageNext', 3)" />
-    <One tit="族谱家训" :data="data4" @pageNext="$emit('pageNext', 4)" />
-    <Three2 tit="口述史" :data="data5" @pageNext="$emit('pageNext', 5)"/>
+    <One tit="建村历史" :data="data1"  />
+    <Tow tit="历史人物" :data="data2"  />
+    <Three tit="历史事件" :data="data3"  />
+    <One tit="族谱家训" :data="data4"  />
+    <Three2 tit="口述史" :data="data5" />
     <Four tit="视频集" :data="data6" />
   </div>
 </template>

webM/src/views/info/component/son2.vue

@@ -1,13 +1,13 @@
 <!--  -->
 <template>
   <div class="Son2">
-    <One tit="村落选址" :data="data1" @pageNext="$emit('pageNext', 1)" />
-    <Three2 tit="村落格局" :data="data2" @pageNext="$emit('pageNext', 2)" />
-    <Three tit="建村智慧" :data="data3" @pageNext="$emit('pageNext', 3)" />
-    <One tit="自然环境" :data="data4" @pageNext="$emit('pageNext', 4)" />
-    <One2 tit="风景名胜" :data="data5" @pageNext="$emit('pageNext', 5)" />
-    <Three2 tit="文物古迹" :data="data6" @pageNext="$emit('pageNext', 6)" />
-    <Five tit="历史环境要素" :data="data7" @pageNext="$emit('pageNext', 7)" />
+    <One tit="村落选址" :data="data1"  />
+    <Three2 tit="村落格局" :data="data2"  />
+    <Three tit="建村智慧" :data="data3"  />
+    <One tit="自然环境" :data="data4"  />
+    <One2 tit="风景名胜" :data="data5"  />
+    <Three2 tit="文物古迹" :data="data6"  />
+    <Five tit="历史环境要素" :data="data7"/>
   </div>
 </template>
 

webM/src/views/info/component/son3.vue

@@ -1,8 +1,8 @@
 <!--  -->
 <template>
   <div class="Son3">
-    <Six tit="传统建筑" :data="data1" @pageNext="$emit('pageNext', 1)" />
-    <Three tit="村落风貌" :data="data2" @pageNext="$emit('pageNext', 2)" />
+    <Six tit="传统建筑" :data="data1"  />
+    <Three tit="村落风貌" :data="data2"  />
     <Four tit="视频集" :data="data3" />
   </div>
 </template>

webM/src/views/info/component/son4.vue

@@ -1,11 +1,11 @@
 <!--  -->
 <template>
   <div class="son4">
-    <Three2 tit="节日活动" :data="data1" @pageNext="$emit('pageNext', 1)" />
-    <One tit="祭祀崇礼" :data="data2" @pageNext="$emit('pageNext', 2)" />
-    <Three tit="婚丧嫁娶" :data="data3" @pageNext="$emit('pageNext', 3)" />
-    <One tit="地方方言" :data="data4" @pageNext="$emit('pageNext', 4)" />
-    <One2 tit="特色文化" :data="data5" @pageNext="$emit('pageNext', 5)" />
+    <Three2 tit="节日活动" :data="data1" />
+    <One tit="祭祀崇礼" :data="data2" />
+    <Three tit="婚丧嫁娶" :data="data3" />
+    <One tit="地方方言" :data="data4" />
+    <One2 tit="特色文化" :data="data5" />
     <Four tit="视频集" :data="data6" />
   </div>
 </template>

webM/src/views/info/component/son5.vue

@@ -1,14 +1,14 @@
 <!--  -->
 <template>
   <div class="son5">
-    <One tit="特色物产" :data="data1" @pageNext="$emit('pageNext', 1)" />
-    <Three tit="商业集市" :data="data2" @pageNext="$emit('pageNext', 2)" />
-    <Three tit="生产工艺" :data="data3" @pageNext="$emit('pageNext', 3)" />
-    <Three tit="生产工具" :data="data4" @pageNext="$emit('pageNext', 4)" />
-    <One2 tit="服装服饰" :data="data5" @pageNext="$emit('pageNext', 5)" />
-    <Three tit="美味美食" :data="data6" @pageNext="$emit('pageNext', 6)" />
-    <One2 tit="运输工具" :data="data7" @pageNext="$emit('pageNext', 7)" />
-    <One tit="村规民约" :data="data8" @pageNext="$emit('pageNext', 8)" />
+    <One tit="特色物产" :data="data1" />
+    <Three tit="商业集市" :data="data2" />
+    <Three tit="生产工艺" :data="data3" />
+    <Three tit="生产工具" :data="data4" />
+    <One2 tit="服装服饰" :data="data5" />
+    <Three tit="美味美食" :data="data6" />
+    <One2 tit="运输工具" :data="data7" />
+    <One tit="村规民约" :data="data8" />
     <Four tit="视频集" :data="data9" />
   </div>
 </template>
@@ -21,7 +21,7 @@ import Three from "@/components/three.vue";
 import Four from "@/components/four.vue";
 export default {
   name: "son5",
-  components: { One, One2, Three,Four },
+  components: { One, One2, Three, Four },
   props: {},
   data() {
     //这里存放数据

webM/src/views/info/component/son6.vue

@@ -1,7 +1,7 @@
 <!--  -->
 <template>
   <div class="son6">
-    <Three tit="入村路线" :data="data1" @pageNext="$emit('pageNext', 1)" />
+    <Three tit="入村路线" :data="data1" />
     <Three tit="村内导览" :data="data2" />
   </div>
 </template>

webM/src/views/info/index.vue

@@ -43,14 +43,21 @@
         </div>
       </div>
     </div>
+    <!-- 下一页序列帧 -->
+    <div
+      class="pageGif"
+      @click="pageInd++"
+      v-if="pageInd < leftData.length - 1"
+      :style="`background-position-x: ${pageGifLeft}px;`"
+    ></div>
     <!-- 下面主要内容盒子 -->
     <div class="mainBox">
-      <Son1 @pageNext="pageNext" v-if="topDataInd === '1000'" />
-      <Son2 @pageNext="pageNext" v-else-if="topDataInd === '2000'" />
-      <Son3 @pageNext="pageNext" v-else-if="topDataInd === '3000'" />
-      <Son4 @pageNext="pageNext" v-else-if="topDataInd === '4000'" />
-      <Son5 @pageNext="pageNext" v-else-if="topDataInd === '5000'" />
-      <Son6 @pageNext="pageNext" v-else-if="topDataInd === '6000'" />
+      <Son1 v-if="topDataInd === '1000'" />
+      <Son2 v-else-if="topDataInd === '2000'" />
+      <Son3 v-else-if="topDataInd === '3000'" />
+      <Son4 v-else-if="topDataInd === '4000'" />
+      <Son5 v-else-if="topDataInd === '5000'" />
+      <Son6 v-else-if="topDataInd === '6000'" />
     </div>
   </div>
 </template>
@@ -81,6 +88,9 @@ export default {
       leftData: [],
       // 页面盒子的高度
       pageHei: 0,
+      // 关于序列帧
+      pageGifLeft: 0,
+      pageGifTim: null,
     };
   },
   //监听属性 类似于data概念
@@ -101,21 +111,17 @@ export default {
           dom.forEach((v) => {
             v.pause();
           });
-        }, 100);
+        }, 1000);
       });
     },
   },
   //方法集合
   methods: {
-    // 子组件传过来的下一页事件
-    pageNext(index) {
-      this.pageInd = index;
-    },
     // 点击菜单栏里面切换模块
     cutInfo(id, val) {
-      if(this.topDataInd===id) {
+      if (this.topDataInd === id) {
         this.meanShow = false;
-        return
+        return;
       }
       // let dom = document.querySelector(".rowBox");
       // dom.scrollTo({ top: 0 });
@@ -136,13 +142,19 @@ export default {
     // 获取页面盒子的高度
     let pageDom = document.querySelector(".mainBox");
     this.pageHei = pageDom.offsetHeight;
+    this.pageGifTim = setInterval(() => {
+      this.pageGifLeft += 29;
+      if(this.pageGifLeft>=725) this.pageGifLeft=0
+    }, 100);
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后
   beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
+  destroyed() {
+    clearInterval(this.pageGifTim);
+  }, //生命周期 - 销毁完成
   activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
@@ -162,6 +174,19 @@ export default {
     background: url("../../assets/img/mainBg.png");
     background-size: 100% 100%;
   }
+  // 序列帧动图
+  .pageGif {
+    z-index: 9999;
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 29px;
+    height: 29px;
+    background: url("../../assets/img/slide.png");
+    background-position-x: 0px;
+    background-position-y: 0px;
+  }
   // 菜单栏
   .meanBox {
     z-index: 3;

webM/src/views/stair/index.vue

@@ -30,6 +30,7 @@
         />
         <!-- 点赞的数字 -->
         <p v-if="item.id === 4">{{ likeNum }}</p>
+        <p v-else>{{item.name}}</p>
         <transition v-if="item.id === 4" name="likeAddAnimate">
           <div class="good" v-show="isShowGood">
             <div class="pic">
@@ -177,9 +178,12 @@ export default {
         height: 51px;
       }
       & > p {
+        text-align: center;
+        padding-left: 3px;
+        height: 24px;
+        line-height: 24px;
         color: #fff;
         font-size: 14px;
-        text-align: center;
       }
     }
     .likeAddAnimate-enter-active,