up

web/src/components/five.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="five">
     <div class="comTit">{{ tit }}</div>
-    <div class="comMani">
+    <div class="comMani sroolStop">
       <div class="row" v-for="item in data.videos" :key="item.id">
         <div class="videoName">{{ item.name }}</div>
-        <video controls :src="baseURL + item.filePath"></video>
+        <video class="sroolStop" controls :src="baseURL + item.filePath"></video>
       </div>
     </div>
   </div>

web/src/components/four.vue

@@ -21,7 +21,7 @@
           </el-carousel>
         </div>
       </div>
-      <div class="info" v-html="data.content"></div>
+      <div class="info sroolStop" v-html="data.content"></div>
     </div>
     <div class="comBs" @click="$emit('pageNext')"></div>
   </div>

web/src/components/one.vue

@@ -2,7 +2,7 @@
   <div class="one">
     <div class="comTit">{{ tit }}</div>
     <div class="comMani">
-      <div class="info" v-html="data.content"></div>
+      <div class="info sroolStop" v-html="data.content"></div>
       <div class="conShow">
         <!-- 数据加载中 -->
         <div class="conShowLoad" v-show="conShowLoad">
@@ -18,7 +18,7 @@
               v-for="item in data.images"
               :key="item.id"
             >
-              <img :src="baseURL + item.filePath" alt="" />
+              <img :src="baseURL + item.filePath" alt=""/>
             </div>
             <div
               class="swiper-slide swiperVideo"

web/src/components/six.vue

@@ -8,8 +8,8 @@
           <img src="../assets/img/loading.gif" alt="" />
         </div>
         <div class="conShowTop">
-          <img :src="baseURL + bigSrc" alt="" v-if="type === 'img'" />
-          <video controls :src="baseURL + bigSrc" v-else></video>
+          <img :src="baseURL + bigSrc" alt="" v-if="type === 'img'&&bigSrc" />
+          <video controls :src="baseURL + bigSrc" v-if="type === 'video'&&bigSrc"></video>
         </div>
         <div class="conShowfloo">
           <!--基础存放容器-->
@@ -46,7 +46,7 @@
           <div class="swiper-button-next swiper-button-white"></div>
         </div>
       </div>
-      <div class="info" v-html="data.content"></div>
+      <div class="info sroolStop" v-html="data.content"></div>
     </div>
     <div class="comBs" @click="$emit('pageNext')"></div>
   </div>

web/src/components/three.vue

@@ -2,15 +2,15 @@
   <div class="three">
     <div class="comTit">{{ tit }}</div>
     <div class="comMani">
-      <div class="info" v-html="data.content"></div>
+      <div class="info sroolStop" v-html="data.content"></div>
       <div class="conShow">
         <!-- 加载动画 -->
         <div class="conShowLoad" v-show="conShowLoad">
           <img src="../assets/img/loading.gif" alt="" />
         </div>
         <div class="conShowTop">
-          <img :src="baseURL + bigSrc" alt="" v-if="type === 'img'" />
-          <video controls :src="baseURL + bigSrc" v-else></video>
+          <img :src="baseURL + bigSrc" alt="" v-if="type === 'img'&&bigSrc" />
+          <video controls :src="baseURL + bigSrc" v-if="type === 'video'&&bigSrc"></video>
         </div>
         <div class="conShowfloo">
           <!--基础存放容器-->

web/src/components/tow.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="tow">
     <div class="comTit">{{ tit }}</div>
-    <div class="comMain">
+    <div class="comMain sroolStop">
       <div class="row" v-for="(item,index) in data" :key="item.id">
         <div class="rowLeft">{{ (index+1)<10?`0${index+1}`:index+1 }}</div>
         <div class="rowRight">
-          <div>{{item.name}}</div>
-          <p>{{item.txt}}</p>
+          <div class="sroolStop">{{item.name}}</div>
+          <p class="sroolStop">{{item.txt}}</p>
         </div>
       </div>
     </div>
@@ -78,13 +78,12 @@ export default {
     width: 100%;
     max-height: calc(100% - 130px);
     .row {
+      pointer-events: none;
       color: #8a7351;
       display: flex;
       padding: 20px 20px 0px 0;
       .rowLeft {
         width: 60px;
-        display: flex;
-        align-items: center;
         padding-bottom: 20px;
         border-bottom: 1px solid #bfb094;
         font-family: "思源宋体";

web/src/views/info/components/Son1.vue

@@ -1,12 +1,12 @@
 <!--  -->
 <template>
   <div class="Son1">
-    <One tit="建村历史" :data='data1' @pageNext="$emit('pageNext','1002',1)"/>
-    <Tow tit="历史人物" :data='data2' @pageNext="$emit('pageNext','1003',2)"/>
-    <Three tit="历史事件" :data='data3' @pageNext="$emit('pageNext','1004',3)"/>
-    <Three tit="族谱家训" :data='data4' @pageNext="$emit('pageNext','1005',4)"/>
-    <Four tit="口述史" :data='data5' @pageNext="$emit('pageNext','1006',5)"/>
-    <Five tit="视频集" :data='data6'/>
+    <One tit="建村历史" :data="data1" @pageNext="$emit('pageNext', 1)" />
+    <Tow tit="历史人物" :data="data2" @pageNext="$emit('pageNext', 2)" />
+    <Three tit="历史事件" :data="data3" @pageNext="$emit('pageNext', 3)" />
+    <Three tit="族谱家训" :data="data4" @pageNext="$emit('pageNext', 4)" />
+    <Four tit="口述史" :data="data5" @pageNext="$emit('pageNext', 5)" />
+    <Five tit="视频集" :data="data6" />
   </div>
 </template>
 
@@ -19,17 +19,17 @@ import Four from "@/components/four.vue";
 import Five from "@/components/five.vue";
 export default {
   name: "Son1",
-  components: { One, Tow, Three,Four,Five },
+  components: { One, Tow, Three, Four, Five },
   props: {},
   data() {
     //这里存放数据
     return {
-      data1:{},
-      data2:[],
-      data3:{},
-      data4:{},
-      data5:{},
-      data6:{},
+      data1: {},
+      data2: [],
+      data3: {},
+      data4: {},
+      data5: {},
+      data6: {},
     };
   },
   //监听属性 类似于data概念
@@ -41,28 +41,28 @@ export default {
   //生命周期 - 创建完成（可以访问当前this实例）
   async created() {
     let res = await getInfoApi(Number(this.$route.params.id));
-    res.data.forEach(v=>{
+    res.data.forEach((v) => {
       // console.log(v);
-      if(v.menuId===1001) {
-        this.data1=v
-        return
-      }else if(v.menuId===1002) {
-        this.data2=JSON.parse(v.contentJson)
-        return
-      }else if(v.menuId===1003) {
-        this.data3=v
-        return
-      }else if(v.menuId===1004) {
-        this.data4=v
-        return
-      }else if(v.menuId===1005) {
-        this.data5=v
-        return
-      }else if(v.menuId===1006) {
-        this.data6=v
-        return
+      if (v.menuId === 1001) {
+        this.data1 = v;
+        return;
+      } else if (v.menuId === 1002) {
+        this.data2 = JSON.parse(v.contentJson);
+        return;
+      } else if (v.menuId === 1003) {
+        this.data3 = v;
+        return;
+      } else if (v.menuId === 1004) {
+        this.data4 = v;
+        return;
+      } else if (v.menuId === 1005) {
+        this.data5 = v;
+        return;
+      } else if (v.menuId === 1006) {
+        this.data6 = v;
+        return;
       }
-    })
+    });
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},

web/src/views/info/index.vue

@@ -25,16 +25,16 @@
         <img src="../../assets/img/contCun/1001.png" alt="" />
         <div class="leftRow">
           <div
-            @click="cutScroll(item.id, index)"
+            @click="cutScroll(index)"
             class="row"
-            :class="{ leAc: leftInd === item.id }"
+            :class="{ leAc: pageInd === index }"
             v-for="(item, index) in leftData"
             :key="item.id"
           >
             <img
               :src="
                 require(`@/assets/img/conBs${
-                  leftInd === item.id ? 'Ac' : ''
+                  pageInd === index ? 'Ac' : ''
                 }.png`)
               "
               alt=""
@@ -45,8 +45,8 @@
       </div>
       <!-- 主要切换内容 -->
       <div class="right">
-        <Son1 @pageNext="pageNext" v-if="leftInd.includes('100')" />
-        <Son2 @pageNext="pageNext" v-else-if="leftInd.includes('200')" />
+        <Son1 @pageNext="pageNext" v-if="topDataInd === '1000'" />
+        <Son2 @pageNext="pageNext" v-else-if="topDataInd === '2000'" />
       </div>
     </div>
   </div>
@@ -58,17 +58,18 @@ import Son1 from "./components/Son1.vue";
 import Son2 from "./components/Son2.vue";
 export default {
   name: "info",
-  components: { Son1,Son2 },
+  components: { Son1, Son2 },
   data() {
     //这里存放数据
     return {
-      leftInd: "1001",
       leftData: [],
       topDataInd: "1000",
       topData: [],
       // 一个内容的高度
       pageHeight: null,
       pageInd: 0,
+      downSrool: 0,
+      sroolFlag: true,
     };
   },
   //监听属性 类似于data概念
@@ -78,16 +79,6 @@ export default {
     pageInd(val) {
       let dom = document.querySelector(".conten");
       dom.scrollTo({ top: this.pageHeight * val, behavior: "smooth" });
-    },
-  },
-  //方法集合
-  methods: {
-    pageNext(id, index) {
-      this.cutScroll(id, index);
-    },
-    cutScroll(id, index) {
-      this.leftInd = id;
-      this.pageInd = index;
       // 切换的时候暂时视频
       this.$nextTick(() => {
         setTimeout(() => {
@@ -98,13 +89,21 @@ export default {
         }, 100);
       });
     },
+  },
+  //方法集合
+  methods: {
+    pageNext(index) {
+      this.cutScroll(index);
+    },
+    cutScroll(index) {
+      this.pageInd = index;
+    },
     cutInfo(id, val) {
       let dom = document.querySelector(".conten");
       dom.scrollTo({ top: 0, behavior: "smooth" });
-      this.leftInd = val[0].id;
       this.topDataInd = id;
       this.leftData = val;
-      this.pageInd=0
+      this.pageInd = 0;
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -120,6 +119,69 @@ export default {
       // 获取一个页面的高度
       let domH = document.querySelector(".conten .right");
       this.pageHeight = domH.clientHeight;
+      // 获取滚动元素
+      // let sroolDom = document.querySelector(".info .conten");
+      // sroolDom.addEventListener(
+      //   "wheel",
+      //   (e) => {
+      //     let evt = e || sroolDom.event; //考虑兼容性
+      //     let dom = evt.target;
+      //     if (dom.className.includes("sroolStop")) {
+      //       // 可能会有滚动条的元素
+      //       if (dom.scrollHeight > dom.clientHeight) {
+      //         // 确定有滚动条的元素
+      //         dom.addEventListener("scroll", () => {
+      //           const clientHeight = dom.clientHeight;
+      //           const scrollTop = dom.scrollTop;
+      //           const scrollHeight = dom.scrollHeight;
+      //           // console.log(clientHeight , scrollTop,scrollHeight);
+      //           if (
+      //             clientHeight + scrollTop < scrollHeight &&
+      //             scrollTop !== 0
+      //           ) {
+      //             console.log("在元素中滚动");
+      //             this.sroolFlag = false;
+      //             return;
+      //           } else {
+      //             setTimeout(() => {
+      //               this.sroolFlag = true;
+      //             }, 100);
+      //             console.log("滚动到了顶部或者底部");
+      //           }
+      //         });
+      //       }
+      //     }
+      //     // evt.preventDefault();
+      //     if (this.sroolFlag) {
+      //       if (evt.deltaY > 0) {
+      //         //在火狐中 向下滚动是3 谷歌是125
+      //         this.downSrool++;
+      //         if (this.downSrool > 2) {
+      //           // 删除元素滚动事件
+      //           this.downSrool = 0;
+      //           if (this.pageInd === this.leftData.length - 1) return;
+      //           this.pageInd++;
+      //           // console.log("向下滚动");
+      //         }
+      //       } else {
+      //         this.downSrool--;
+      //         if (this.downSrool < -2) {
+      //           this.downSrool = 0;
+      //           if (this.pageInd === 0) return;
+      //           this.pageInd--;
+
+      //           // console.log("向上滚动");
+      //         }
+      //         //在火狐中 向上滚动是-3 谷歌是-125
+      //       }
+      //     }
+      //     // //检查事件
+      //     // console.log(evt.type, evt.deltaX, evt.deltaY, evt.deltaZ);
+      //   },
+      //   {
+      //     passive: false,
+      //   }
+      // );
     });
   },
   beforeCreate() {}, //生命周期 - 创建之前
@@ -176,10 +238,28 @@ export default {
       }
     }
   }
+  .conten::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
+    height: 1px;
+  }
+  .conten::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 5px transparent;
+    background: #8a7351;
+  }
+  .conten::-webkit-scrollbar-track {
+    /*滚动条里面轨道*/
+    -webkit-box-shadow: inset 0 0 5px transparent;
+    border-radius: 10px;
+    background: transparent;
+  }
   .conten {
     width: 100%;
     height: 100%;
     overflow: hidden;
+    // overflow-y: auto;
     padding: 100px 140px 0;
     background: url("../../assets/img/contenBG.png");
     .left {