up

webM/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "axios": "^0.27.2",
         "core-js": "^3.6.5",
+        "v-viewer": "^1.5.1",
         "vue": "^2.6.11",
         "vue-router": "^3.2.0"
       },
@@ -12448,6 +12449,14 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/throttle-debounce": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
+      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npmmirror.com/through2/-/through2-2.0.5.tgz",
@@ -13027,6 +13036,19 @@
         "uuid": "bin/uuid"
       }
     },
+    "node_modules/v-viewer": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmmirror.com/v-viewer/-/v-viewer-1.6.4.tgz",
+      "integrity": "sha512-LVkiUHpmsbsZXebeNXnu8krRCi5i2n07FeLFxoIVGhw8lVvTBO0ffpbDC6mLEuacCjrIh09HjIqpciwUtWE8lQ==",
+      "dependencies": {
+        "throttle-debounce": "^2.0.1",
+        "viewerjs": "^1.5.0"
+      },
+      "engines": {
+        "node": ">=4",
+        "npm": ">=3"
+      }
+    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmmirror.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -13072,6 +13094,11 @@
       "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
       "dev": true
     },
+    "node_modules/viewerjs": {
+      "version": "1.10.5",
+      "resolved": "https://registry.npmmirror.com/viewerjs/-/viewerjs-1.10.5.tgz",
+      "integrity": "sha512-QwKrmXlSfKg5x4y74F/jicpHIRqBMMfHXyboOxHDi5n4XAaejjpalphPq4/HW6venQAoMiD57HpVwBk0JvqpSA=="
+    },
     "node_modules/vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -24482,6 +24509,11 @@
         }
       }
     },
+    "throttle-debounce": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmmirror.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz",
+      "integrity": "sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ=="
+    },
     "through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npmmirror.com/through2/-/through2-2.0.5.tgz",
@@ -24961,6 +24993,15 @@
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
       "dev": true
     },
+    "v-viewer": {
+      "version": "1.6.4",
+      "resolved": "https://registry.npmmirror.com/v-viewer/-/v-viewer-1.6.4.tgz",
+      "integrity": "sha512-LVkiUHpmsbsZXebeNXnu8krRCi5i2n07FeLFxoIVGhw8lVvTBO0ffpbDC6mLEuacCjrIh09HjIqpciwUtWE8lQ==",
+      "requires": {
+        "throttle-debounce": "^2.0.1",
+        "viewerjs": "^1.5.0"
+      }
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmmirror.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -25002,6 +25043,11 @@
         }
       }
     },
+    "viewerjs": {
+      "version": "1.10.5",
+      "resolved": "https://registry.npmmirror.com/viewerjs/-/viewerjs-1.10.5.tgz",
+      "integrity": "sha512-QwKrmXlSfKg5x4y74F/jicpHIRqBMMfHXyboOxHDi5n4XAaejjpalphPq4/HW6venQAoMiD57HpVwBk0JvqpSA=="
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/vm-browserify/-/vm-browserify-1.1.2.tgz",

webM/package.json

@@ -10,7 +10,8 @@
     "axios": "^0.27.2",
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
-    "vue-router": "^3.2.0"
+    "vue-router": "^3.2.0",
+    "v-viewer": "^1.5.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.13",

webM/src/assets/base.css

@@ -4,6 +4,7 @@
   font-weight: normal;
   font-style: normal;
 }
+
 * {
   margin: 0;
   padding: 0;
@@ -71,28 +72,32 @@ body {
 /* 移动端横竖屏字体乎⼤乎⼩ */
 /* -webkit-text-size-adjust: none;  */
 /* 禁⽌⽂字⾃动调整⼤⼩(默认情况下旋转设备的时候⽂字⼤⼩会发⽣变化)，此属性也不继承，⼀般加在body上规定整个body的⽂字都不会⾃动调整  */
-.comTit{
+.comTit {
   width: 100%;
   height: 80px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.comTit img{
+
+.comTit img {
   width: 20px;
   margin-top: 2px;
 }
-.comTit span{
+
+.comTit span {
   display: inline-block;
   font-family: 'SYST';
   font-size: 18px;
   color: #9F171C;
   margin: 0 10px;
 }
-.opcBase{
+
+.opcBase {
   opacity: 0 !important;
 }
-.conShowLoad{
+
+.conShowLoad {
   position: absolute;
   top: 0;
   left: 0;
@@ -102,20 +107,40 @@ body {
   justify-content: center;
   align-items: center;
 }
-.videoName>p{
+
+.videoName>p {
   padding: 0px 10px;
   z-index: 99;
   width: 100%;
-  word-break:break-all;
+  word-break: break-all;
 }
-.videoName .videoPlay{
+
+.videoName .videoPlay {
   width: 50px;
   position: absolute;
   top: 50%;
   left: 50%;
   z-index: 100;
-  transform: translate(-50%,-50%);
+  transform: translate(-50%, -50%);
 }
-.videoName .videoPlay img{
+
+.videoName .videoPlay img {
   width: 100%;
 }
+
+.viewer-title {
+  display: none !important;
+}
+
+.viewer-prev {
+  display: none !important;
+}
+
+.viewer-next {
+  display: none !important;
+}
+
+.viewer-navbar {
+  display: none !important;
+}
+

webM/src/components/one.vue

@@ -17,6 +17,7 @@
             class="swiper-slide swiperVideo"
             v-for="item in data.videos"
             :key="item.id"
+            @click="$emit('openLook',baseURL + item.filePath,'video')"
           >
             <!-- 视频 -->
             <div class="videoName">
@@ -29,7 +30,7 @@
           </div>
 
           <!-- 图片 -->
-          <div class="swiper-slide" v-for="item in data.images" :key="item.id">
+          <div class="swiper-slide" @click="$emit('openLook',baseURL + item.filePath,'img')" v-for="item in data.images" :key="item.id">
             <img :src="baseURL + item.filePath" alt="" />
           </div>
         </div>

webM/src/main.js

@@ -1,7 +1,9 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
-
+import 'viewerjs/dist/viewer.css'
+import Viewer from 'v-viewer'
+Vue.use(Viewer)
 Vue.config.productionTip = false
 import './assets/base.css'
 new Vue({

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

@@ -1,6 +1,6 @@
 <template>
   <div class="son1">
-    <One tit="建村历史" :data="data1"  />
+    <One tit="建村历史" :data="data1"  @openLook='openLook' />
     <Tow tit="历史人物" :data="data2"  />
     <Three tit="历史事件" :data="data3"  />
     <One tit="族谱家训" :data="data4"  />
@@ -35,7 +35,11 @@ export default {
   //监控data中的数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    openLook(url,type){
+      this.$emit('openLook',url,type)
+    }
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   async created() {
     let res = await getInfoApi(Number(this.$route.params.id));

webM/src/views/info/index.vue

@@ -43,9 +43,14 @@
         </div>
       </div>
     </div>
+    <!-- 查看图片 -->
+    <viewer class="viewerCla" ref="viewer" :images="lookPics">
+      <img :src="lookPics[0]" alt="" />
+    </viewer>
+
     <!-- 下一页序列帧 -->
     <div
-      :class="{pageOpc:pageOpcAc}"
+      :class="{ pageOpc: pageOpcAc }"
       class="pageGif"
       @click="pageInd++"
       v-if="pageInd < leftData.length - 1"
@@ -53,13 +58,20 @@
     ></div>
     <!-- 下面主要内容盒子 -->
     <div class="mainBox">
-      <Son1 v-if="topDataInd === '1000'" />
+      <Son1 v-if="topDataInd === '1000'" @openLook="openLook" />
       <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 class="videoBox" v-if="lookShow === 'video'">
+      <video autoplay controls :src="lookUrl"></video>
+      <div class="closeL" @click="lookShow = null">
+        <img src="../../assets/img/closeL.png" alt="" />
+      </div>
+    </div>
   </div>
 </template>
 
@@ -77,6 +89,9 @@ export default {
   data() {
     //这里存放数据
     return {
+      lookShow: null,
+      lookUrl: null,
+      lookPics:[],
       // 菜单数据
       topData: [],
       // 菜单的显示和隐藏
@@ -92,7 +107,7 @@ export default {
       // 关于序列帧
       pageGifLeft: 0,
       pageGifTim: null,
-      pageOpcAc:false
+      pageOpcAc: false,
     };
   },
   //监听属性 类似于data概念
@@ -100,13 +115,11 @@ export default {
   //监控data中的数据变化
   watch: {
     pageInd(val) {
-
-      this.pageOpcAc=true
+      this.pageOpcAc = true;
       setTimeout(() => {
-        this.pageOpcAc=false
+        this.pageOpcAc = false;
       }, 500);
 
-
       // 控制顶部滑动
       let dom = document.querySelector(".rowBox");
       dom.scrollTo({ left: 82 * (val - 1), behavior: "smooth" });
@@ -114,19 +127,29 @@ export default {
       let pageDom = document.querySelector(".mainBox");
       pageDom.scrollTo({ top: this.pageHei * val, behavior: "smooth" });
 
-      // 切换的时候暂时视频
-      this.$nextTick(() => {
-        setTimeout(() => {
-          let dom = document.querySelectorAll("video");
-          dom.forEach((v) => {
-            v.pause();
-          });
-        }, 1000);
-      });
+      // // 切换的时候暂时视频
+      // this.$nextTick(() => {
+      //   setTimeout(() => {
+      //     let dom = document.querySelectorAll("video");
+      //     dom.forEach((v) => {
+      //       v.pause();
+      //     });
+      //   }, 1000);
+      // });
     },
   },
   //方法集合
   methods: {
+    openLook(url, type) {
+      if (type === "img") {
+        let dom = this.$refs.viewer.$viewer;
+        this.lookPics = [url];
+        dom.show();
+      } else {
+        this.lookUrl = url;
+        this.lookShow = type;
+      }
+    },
     // 点击菜单栏里面切换模块
     cutInfo(id, val) {
       if (this.topDataInd === id) {
@@ -154,7 +177,7 @@ export default {
     this.pageHei = pageDom.offsetHeight;
     this.pageGifTim = setInterval(() => {
       this.pageGifLeft += 29;
-      if(this.pageGifLeft>=725) this.pageGifLeft=0
+      if (this.pageGifLeft >= 725) this.pageGifLeft = 0;
     }, 100);
   },
   beforeCreate() {}, //生命周期 - 创建之前
@@ -186,7 +209,7 @@ export default {
   }
   // 序列帧动图
   .pageGif {
-    transform: opacity .5s;
+    transform: opacity 0.5s;
     opacity: 1;
     z-index: 1;
     position: absolute;
@@ -199,7 +222,7 @@ export default {
     background-position-x: 0px;
     background-position-y: 0px;
   }
-  .pageOpc{
+  .pageOpc {
     opacity: 0;
     pointer-events: none;
   }
@@ -338,5 +361,31 @@ export default {
       }
     }
   }
+  .videoBox {
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 99999;
+    background-color: rgba(0, 0, 0, 0.8);
+    video {
+      width: 100%;
+      height: 100%;
+    }
+    .closeL {
+      z-index: 99999;
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      width: 30px;
+      img {
+        width: 100%;
+      }
+    }
+  }
+  .viewerCla img {
+    display: none;
+  }
 }
 </style>