up

web/src/assets/css/base.css

@@ -4,23 +4,7 @@
   font-weight: normal;
   font-style: normal;
 }
-::-webkit-scrollbar {
-  /*滚动条整体样式*/
-  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
-  height: 1px;
-}
-::-webkit-scrollbar-thumb {
-  /*滚动条里面小方块*/
-  border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 5px transparent;
-  background: #8a7351;
-}
-::-webkit-scrollbar-track {
-  /*滚动条里面轨道*/
-  -webkit-box-shadow: inset 0 0 5px transparent;
-  border-radius: 10px;
-  background: transparent;
-}
+
 * {
   margin: 0;
   padding: 0;
@@ -70,13 +54,13 @@ ul li {
   border-radius: 10px;
   background: transparent;
 } */
-.three .swiper-button-prev.swiper-button-disabled,
-.three .swiper-button-next.swiper-button-disabled {
+#app .swiper-button-prev.swiper-button-disabled,
+#app .swiper-button-next.swiper-button-disabled {
   cursor: pointer;
   opacity: 1;
   pointer-events: auto;
 }
-.three .swiper-button-prev, .three .swiper-button-next{
+#app .swiper-button-prev, #app .swiper-button-next{
   width: 34px;
   height: 34px;
   border-radius: 50%;
@@ -84,7 +68,7 @@ ul li {
   left: -17px;
   background-size: 20px 20px;
 }
-.three .swiper-button-next{
+#app .swiper-button-next{
   left: auto;
   right: -17px;
 }

web/src/components/five.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="five">
+    <div class="comTit">{{ tit }}</div>
+    <div class="comMani">
+      <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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "@/utils/request";
+export default {
+  name: "five",
+  props: {
+    tit: {
+      type: String,
+    },
+    data: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      baseURL: "",
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL;
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.five {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding-top: 50px;
+  .comMani::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
+    height: 1px;
+  }
+  .comMani::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 5px transparent;
+    background: #8a7351;
+  }
+  .comMani::-webkit-scrollbar-track {
+    /*滚动条里面轨道*/
+    -webkit-box-shadow: inset 0 0 5px transparent;
+    border-radius: 10px;
+    background: transparent;
+  }
+  .comMani {
+    width: 100%;
+    height: calc(100% - 115px);
+    overflow-y: auto;
+    padding-top: 80px;
+    display: flex;
+    flex-wrap: wrap;
+    .row {
+      margin-right: 20px;
+      margin-bottom: 26px;
+      position: relative;
+      width: 292px;
+      height: 208px;
+      background-color: rgba(0, 0, 0, 0.6);
+      & > video {
+        width: 100%;
+        height: 100%;
+      }
+      .videoName {
+        position: absolute;
+        top: 1px;
+        left: 5px;
+        color: #fff;
+        font-size: 14px;
+      }
+      &:nth-of-type(4n) {
+        margin-right: 0;
+      }
+    }
+  }
+}
+</style>

web/src/components/four.vue

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

web/src/components/six.vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="six">
+    <div class="comTit">{{ tit }}</div>
+    <div class="comMani">
+      <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>
+        </div>
+        <div class="conShowfloo">
+          <!--基础存放容器-->
+          <div class="swiper-container">
+            <!-- 需要进行轮播的部分 -->
+            <div class="swiper-wrapper">
+              <!-- 每个节点 -->
+              <div
+                :class="{ active: item.filePath === bigSrc }"
+                @click="cutBig(item.filePath, 'img')"
+                class="swiper-slide"
+                v-for="item in data.images"
+                :key="item.id"
+              >
+                <img :src="baseURL + item.filePath" alt="" />
+              </div>
+              <div
+                :class="{ active: item.filePath === bigSrc }"
+                @click="cutBig(item.filePath, 'video')"
+                class="swiper-slide swiperVideo"
+                v-for="item in data.videos"
+                :key="item.id"
+              >
+                <div class="videoName">{{ item.name }}</div>
+                <video :src="baseURL + item.filePath"></video>
+              </div>
+            </div>
+
+            <!-- 如果需要使用分页器 -->
+            <!-- <div class="swiper-pagination swiper-pagination-white"></div> -->
+          </div>
+          <!-- 如果需要使用前进后退按钮 -->
+          <div class="swiper-button-prev swiper-button-white"></div>
+          <div class="swiper-button-next swiper-button-white"></div>
+        </div>
+      </div>
+      <div class="info" v-html="data.content"></div>
+    </div>
+    <div class="comBs" @click="$emit('pageNext')"></div>
+  </div>
+</template>
+
+<script>
+import axios from "@/utils/request";
+import "swiper/dist/js/swiper";
+import "swiper/dist/css/swiper.css";
+import Swiper from "swiper";
+export default {
+  name: "six",
+  props: {
+    tit: {
+      type: String,
+    },
+    data: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      baseURL: "",
+      bigSrc: "",
+      type: "img",
+      conShowLoad: true,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    cutBig(src, type) {
+      this.bigSrc = src;
+      this.type = type;
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL;
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        new Swiper(".six .swiper-container", {
+          slidesPerView: 2.4,
+          spaceBetween: 20,
+
+          // // 如果需要分页器
+          // pagination: {
+          //   el: ".swiper-pagination",
+          //   clickable: true, // 分页器可以点击
+          // },
+
+          // 如果需要前进后退按钮
+          navigation: {
+            nextEl: ".swiper-button-next",
+            prevEl: ".swiper-button-prev",
+          },
+        });
+        if (this.data.images && this.data.images.length > 0)
+          this.bigSrc = this.data.images[0].filePath;
+        else {
+          this.type = "video";
+          this.bigSrc = this.data.videos[0].filePath;
+        }
+        this.conShowLoad = false;
+      }, 1000);
+    });
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+@import "../../node_modules/swiper/dist/css/swiper.css";
+.swiper-container {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-slide img {
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.swiper-slide video {
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+}
+.info::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+.info::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 5px transparent;
+  background: #8a7351;
+}
+.info::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  -webkit-box-shadow: inset 0 0 5px transparent;
+  border-radius: 10px;
+  background: transparent;
+}
+.six {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding-top: 50px;
+  .comMani {
+    width: 100%;
+    height: calc(100% - 65px);
+    display: flex;
+    .info {
+      color: #8a7351;
+      font-size: 16px;
+      line-height: 28px;
+      width: 60%;
+      max-height: calc(100% - 80px);
+      padding-left: 40px;
+      overflow-y: auto;
+    }
+    .conShow {
+      position: relative;
+      padding: 30px 0;
+      padding-left: 20px;
+      height: calc(100% - 80px);
+      width: 40%;
+      flex: 1;
+      .conShowLoad {
+        z-index: 999;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        background-color: #fcfefc;
+        justify-content: center;
+        align-items: center;
+      }
+      .conShowTop {
+        width: 100%;
+        height: 400px;
+        margin-bottom: 15px;
+        & > img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+        & > video {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .conShowfloo {
+        position: relative;
+        width: 100%;
+        height: 150px;
+        .swiperVideo {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          background-color: rgba(0, 0, 0, 0.6);
+          .videoName {
+            position: absolute;
+            top: 1px;
+            left: 5px;
+            color: #fff;
+            font-size: 14px;
+          }
+        }
+        .active {
+          border: 3px solid #9f171c;
+        }
+      }
+    }
+  }
+}
+</style>

web/src/components/three.vue

@@ -4,6 +4,10 @@
     <div class="comMani">
       <div class="info" 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>
@@ -45,7 +49,7 @@
         </div>
       </div>
     </div>
-    <div class="comBs"></div>
+    <div class="comBs" @click="$emit('pageNext')"></div>
   </div>
 </template>
 
@@ -72,6 +76,7 @@ export default {
       baseURL: "",
       bigSrc: "",
       type: "img",
+      conShowLoad: true,
     };
   },
   //监听属性 类似于data概念
@@ -95,7 +100,7 @@ export default {
     this.$nextTick(() => {
       setTimeout(() => {
         new Swiper(".three .swiper-container", {
-          slidesPerView:2.4,
+          slidesPerView: 2.4,
           spaceBetween: 20,
 
           // // 如果需要分页器
@@ -116,6 +121,7 @@ export default {
           this.type = "video";
           this.bigSrc = this.data.videos[0].filePath;
         }
+        this.conShowLoad = false;
       }, 1000);
     });
   },
@@ -182,11 +188,24 @@ export default {
       overflow-y: auto;
     }
     .conShow {
+      position: relative;
       padding: 30px 0;
       padding-left: 20px;
       height: calc(100% - 80px);
       width: 40%;
       flex: 1;
+      .conShowLoad {
+        z-index: 999;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        background-color: #fcfefc;
+        justify-content: center;
+        align-items: center;
+      }
       .conShowTop {
         width: 100%;
         height: 400px;

web/src/components/tow.vue

@@ -10,7 +10,7 @@
         </div>
       </div>
     </div>
-    <div class="comBs"></div>
+    <div class="comBs" @click="$emit('pageNext')"></div>
   </div>
 </template>
 

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

@@ -1,11 +1,12 @@
 <!--  -->
 <template>
   <div class="Son1">
-    <One tit="建村历史" :data='data1' @pageNext="$emit('pageNext')"/>
-    <Tow tit="历史人物" :data='data2'/>
-    <Three tit="历史事件" :data='data3'/>
-    <Three tit="族谱家训" :data='data4'/>
-    <Four tit="口述史" :data='data5'/>
+    <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'/>
   </div>
 </template>
 
@@ -15,9 +16,10 @@ import One from "@/components/one.vue";
 import Tow from "@/components/tow.vue";
 import Three from "@/components/three.vue";
 import Four from "@/components/four.vue";
+import Five from "@/components/five.vue";
 export default {
   name: "Son1",
-  components: { One, Tow, Three,Four },
+  components: { One, Tow, Three,Four,Five },
   props: {},
   data() {
     //这里存放数据

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

@@ -0,0 +1,86 @@
+<!--  -->
+<template>
+  <div class="Son2">
+    <Three tit="村落选址" :data='data1' @pageNext="$emit('pageNext','2002',1)"/>
+    <Four tit="村落格局" :data='data2' @pageNext="$emit('pageNext','2003',2)"/>
+    <One tit="建村智慧" :data='data3' @pageNext="$emit('pageNext','2004',3)"/>
+    <Six tit="自然环境" :data='data4' @pageNext="$emit('pageNext','2005',4)"/>
+  </div>
+</template>
+
+<script>
+import { getInfoApi } from "@/utils/api";
+import One from "@/components/one.vue";
+import Tow from "@/components/tow.vue";
+import Three from "@/components/three.vue";
+import Four from "@/components/four.vue";
+import Five from "@/components/five.vue";
+import Six from "@/components/six.vue";
+export default {
+  name: "Son2",
+  components: { One, Tow, Three,Four,Five,Six },
+  props: {},
+  data() {
+    //这里存放数据
+    return {
+      data1:{},
+      data2:{},
+      data3:{},
+      data4:{},
+      data5:{},
+      data6:{},
+      data7:{}
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  async created() {
+    let res = await getInfoApi(Number(this.$route.params.id));
+    res.data.forEach(v=>{
+      // console.log(v);
+      if(v.menuId===2001) {
+        this.data1=v
+        return
+      }else if(v.menuId===2002) {
+        this.data2=v
+        return
+      }else if(v.menuId===2003) {
+        this.data3=v
+        return
+      }else if(v.menuId===2004) {
+        this.data4=v
+        return
+      }else if(v.menuId===2005) {
+        this.data5=v
+        return
+      }else if(v.menuId===2006) {
+        this.data6=v
+        return
+      }else if(v.menuId===2007) {
+        this.data7=v
+        return
+      }
+    })
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.Son2 {
+  width: 100%;
+  height: 100%;
+}
+</style>

web/src/views/info/index.vue

@@ -25,15 +25,16 @@
         <img src="../../assets/img/contCun/1001.png" alt="" />
         <div class="leftRow">
           <div
+            @click="cutScroll(item.id, index)"
             class="row"
-            :class="{ leAc: leftInd === index }"
+            :class="{ leAc: leftInd === item.id }"
             v-for="(item, index) in leftData"
             :key="item.id"
           >
             <img
               :src="
                 require(`@/assets/img/conBs${
-                  leftInd === index ? 'Ac' : ''
+                  leftInd === item.id ? 'Ac' : ''
                 }.png`)
               "
               alt=""
@@ -44,7 +45,8 @@
       </div>
       <!-- 主要切换内容 -->
       <div class="right">
-        <Son1 @pageNext="pageNext" />
+        <Son1 @pageNext="pageNext" v-if="leftInd.includes('100')" />
+        <Son2 @pageNext="pageNext" v-else-if="leftInd.includes('200')" />
       </div>
     </div>
   </div>
@@ -53,76 +55,56 @@
 <script>
 import { getTreeMenuApi } from "@/utils/api";
 import Son1 from "./components/Son1.vue";
+import Son2 from "./components/Son2.vue";
 export default {
   name: "info",
-  components: { Son1 },
+  components: { Son1,Son2 },
   data() {
     //这里存放数据
     return {
-      leftInd: 0,
+      leftInd: "1001",
       leftData: [],
       topDataInd: "1000",
       topData: [],
       // 一个内容的高度
       pageHeight: null,
-      oldScrollTop: 0, //记录上一次滚动结束后的滚动距离
-      scrollTop: 0, // 记录当前的滚动距离
+      pageInd: 0,
     };
   },
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
   watch: {
-    scrollTop(newValue, oldValue) {
-      setTimeout(() => {
-        if (newValue == window.scrollY) {
-          //延时执行后当newValue等于window.scrollY，代表滚动结束
-          // console.log("滚动结束");
-          this.oldScrollTop = newValue; //每次滚动结束后都要给oldScrollTop赋值
-        }
-      }, 20); //必须使用延时器，否则每次newValue和window.scrollY都相等，无法判断，20ms刚好大于watch的侦听周期，故延时20ms
-      if (this.oldScrollTop == oldValue) {
-        //每次滚动开始时oldScrollTop与oldValue相等
-        // console.log("滚动开始");
-      }
-    },
-
-    leftInd(val) {
-      window.scrollTo({ top: this.pageHeight * val, behavior: "smooth" });
+    pageInd(val) {
+      let dom = document.querySelector(".conten");
+      dom.scrollTo({ top: this.pageHeight * val, behavior: "smooth" });
     },
   },
   //方法集合
   methods: {
-    handleScroll() {
-      // 监听页面滚动事件
-      window.onscroll = () => {
-        this.scrollTop = window.scrollY;
-      };
-    },
-    pageNext() {
-      console.log(123);
+    pageNext(id, index) {
+      this.cutScroll(id, index);
     },
-    cutScroll() {
-      if (this.leftInd === this.leftInd.length) return;
-      else {
-        this.leftInd++;
-        // 切换的时候暂时视频
-        this.$nextTick(() => {
-          setTimeout(() => {
-            let dom = document.querySelectorAll("video");
-            dom.forEach((v) => {
-              v.pause();
-            });
-          }, 100);
-        });
-      }
+    cutScroll(id, index) {
+      this.leftInd = id;
+      this.pageInd = index;
+      // 切换的时候暂时视频
+      this.$nextTick(() => {
+        setTimeout(() => {
+          let dom = document.querySelectorAll("video");
+          dom.forEach((v) => {
+            v.pause();
+          });
+        }, 100);
+      });
     },
     cutInfo(id, val) {
       let dom = document.querySelector(".conten");
       dom.scrollTo({ top: 0, behavior: "smooth" });
-      this.leftInd = 0;
+      this.leftInd = val[0].id;
       this.topDataInd = id;
       this.leftData = val;
+      this.pageInd=0
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -136,18 +118,15 @@ export default {
   mounted() {
     this.$nextTick(() => {
       // 获取一个页面的高度
-      let domH = document.querySelector(".info");
-      this.pageHeight = domH.clientHeight - 100;
+      let domH = document.querySelector(".conten .right");
+      this.pageHeight = domH.clientHeight;
     });
-    this.handleScroll();
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
   updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {
-    window.onscroll = null;
-  }, //生命周期 - 销毁之前
+  beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
   activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
@@ -161,7 +140,7 @@ export default {
     min-width: 1800px;
     padding: 0 0px 0 120px;
     color: #fff;
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0;
     width: 100%;
@@ -199,10 +178,12 @@ export default {
   }
   .conten {
     width: 100%;
+    height: 100%;
+    overflow: hidden;
     padding: 100px 140px 0;
     background: url("../../assets/img/contenBG.png");
     .left {
-      position: fixed;
+      position: absolute;
       top: 100px;
       left: 140px;
       padding-top: 50px;
@@ -221,6 +202,7 @@ export default {
         flex-direction: column;
         justify-content: space-around;
         .row {
+          cursor: pointer;
           position: relative;
           padding-left: 30px;
           font-family: "思源宋体";
@@ -236,6 +218,7 @@ export default {
           }
         }
         .leAc {
+          pointer-events: none;
           color: #9f171c;
         }
       }