up

webM/src/components/five.vue

@@ -51,6 +51,7 @@
               <div
                 class="swiper-slide detailImgSon"
                 v-for="item in detailData.imgList"
+                @click="$emit('openLook', baseURL + item.filePath, 'img')"
                 :key="item.id"
               >
                 <img

webM/src/components/four.vue

@@ -6,9 +6,19 @@
       <img src="../assets/img/comBs2.png" alt="" />
     </div>
     <div class="main" :class="{ opcBase: conShowLoad }">
-      <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
+        class="row"
+        v-for="item in data.videos"
+        :key="item.id"
+        @click="$emit('openLook', baseURL + item.filePath, 'video')"
+      >
+        <div class="videoName">
+          <p>{{ item.name }}</p>
+          <div class="videoPlay">
+            <img src="../assets/img/videoPlay.png" alt="" />
+          </div>
+        </div>
+        <video :src="baseURL + item.filePath"></video>
       </div>
     </div>
     <!-- 数据加载中 -->
@@ -83,14 +93,19 @@ export default {
       position: relative;
       background-color: rgba(0, 0, 0, 0.6);
       margin-bottom: 15px;
+      overflow: hidden;
       video {
-        width: 100%;
+        z-index: -1;
+        // width: 100%;
         height: 100%;
       }
       .videoName {
         position: absolute;
-        top: 1px;
-        left: 5px;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.3);
+        top: 0px;
+        left: 0px;
         color: #fff;
         font-size: 14px;
       }

webM/src/components/one.vue

@@ -17,20 +17,25 @@
             class="swiper-slide swiperVideo"
             v-for="item in data.videos"
             :key="item.id"
-            @click="$emit('openLook',baseURL + item.filePath,'video')"
+            @click="$emit('openLook', baseURL + item.filePath, 'video')"
           >
             <!-- 视频 -->
             <div class="videoName">
               <p>{{ item.name }}</p>
               <div class="videoPlay">
-                <img src="../assets/img/videoPlay.png" alt="">
-              </div>
+                <img src="../assets/img/videoPlay.png" alt="" />
               </div>
+            </div>
             <video :src="baseURL + item.filePath"></video>
           </div>
 
           <!-- 图片 -->
-          <div class="swiper-slide" @click="$emit('openLook',baseURL + item.filePath,'img')" 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>
@@ -145,7 +150,7 @@ export default {
         position: absolute;
         width: 100%;
         height: 100%;
-        background-color: rgba(0,0,0,.3);
+        background-color: rgba(0, 0, 0, 0.3);
         top: 0px;
         left: 0px;
         color: #fff;

webM/src/components/one2.vue

@@ -17,14 +17,25 @@
             class="swiper-slide swiperVideo"
             v-for="item in data.videos"
             :key="item.id"
+            @click="$emit('openLook', baseURL + item.filePath, 'video')"
           >
             <!-- 视频 -->
-            <div class="videoName">{{ item.name }}</div>
-            <video controls :src="baseURL + item.filePath"></video>
+            <div class="videoName">
+              <p>{{ item.name }}</p>
+              <div class="videoPlay">
+                <img src="../assets/img/videoPlay.png" alt="" />
+              </div>
+            </div>
+            <video :src="baseURL + item.filePath"></video>
           </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>
@@ -125,19 +136,23 @@ export default {
         object-fit: cover;
       }
       video {
-        width: 100%;
+        z-index: -1;
+        // width: 100%;
         height: 100%;
       }
     }
     .swiperVideo {
+      overflow: hidden;
       position: relative;
       width: 100%;
       height: 100%;
-      background-color: rgba(0, 0, 0, 0.6);
       .videoName {
         position: absolute;
-        top: 1px;
-        left: 5px;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.3);
+        top: 0px;
+        left: 0px;
         color: #fff;
         font-size: 14px;
       }

webM/src/components/six.vue

@@ -60,6 +60,7 @@
               <div
                 class="swiper-slide detailImgSon"
                 v-for="item in detailData.imgList"
+                @click="$emit('openLook', baseURL + item.filePath, 'img')"
                 :key="item.id"
               >
                 <img

webM/src/components/three.vue

@@ -12,14 +12,25 @@
             class="swiper-slide swiperVideo"
             v-for="item in data.videos"
             :key="item.id"
+            @click="$emit('openLook', baseURL + item.filePath, 'video')"
           >
             <!-- 视频 -->
-            <div class="videoName">{{ item.name }}</div>
-            <video controls :src="baseURL + item.filePath"></video>
+            <div class="videoName">
+              <p>{{ item.name }}</p>
+              <div class="videoPlay">
+                <img src="../assets/img/videoPlay.png" alt="" />
+              </div>
+            </div>
+            <video :src="baseURL + item.filePath"></video>
           </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>
@@ -125,19 +136,23 @@ export default {
         object-fit: cover;
       }
       video {
-        width: 100%;
+        z-index: -1;
+        // width: 100%;
         height: 100%;
       }
     }
     .swiperVideo {
+      overflow: hidden;
       position: relative;
       width: 100%;
       height: 100%;
-      background-color: rgba(0, 0, 0, 0.6);
       .videoName {
         position: absolute;
-        top: 1px;
-        left: 5px;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.3);
+        top: 0px;
+        left: 0px;
         color: #fff;
         font-size: 14px;
       }

webM/src/components/three2.vue

@@ -12,14 +12,25 @@
             class="swiper-slide swiperVideo"
             v-for="item in data.videos"
             :key="item.id"
+            @click="$emit('openLook', baseURL + item.filePath, 'video')"
           >
             <!-- 视频 -->
-            <div class="videoName">{{ item.name }}</div>
-            <video controls :src="baseURL + item.filePath"></video>
+            <div class="videoName">
+              <p>{{ item.name }}</p>
+              <div class="videoPlay">
+                <img src="../assets/img/videoPlay.png" alt="" />
+              </div>
+            </div>
+            <video :src="baseURL + item.filePath"></video>
           </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>
@@ -125,19 +136,23 @@ export default {
         object-fit: cover;
       }
       video {
-        width: 100%;
+        z-index: -1;
+        // width: 100%;
         height: 100%;
       }
     }
     .swiperVideo {
+      overflow: hidden;
       position: relative;
       width: 100%;
       height: 100%;
-      background-color: rgba(0, 0, 0, 0.6);
       .videoName {
         position: absolute;
-        top: 1px;
-        left: 5px;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.3);
+        top: 0px;
+        left: 0px;
         color: #fff;
         font-size: 14px;
       }

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

@@ -1,11 +1,11 @@
 <template>
   <div class="son1">
-    <One tit="建村历史" :data="data1"  @openLook='openLook' />
+    <One tit="建村历史" :data="data1"  @openLook='openLook'/>
     <Tow tit="历史人物" :data="data2"  />
-    <Three tit="历史事件" :data="data3"  />
-    <One tit="族谱家训" :data="data4"  />
-    <Three2 tit="口述史" :data="data5" />
-    <Four tit="视频集" :data="data6" />
+    <Three tit="历史事件" :data="data3"  @openLook='openLook'/>
+    <One tit="族谱家训" :data="data4"  @openLook='openLook'/>
+    <Three2 tit="口述史" :data="data5" @openLook='openLook'/>
+    <Four tit="视频集" :data="data6" @openLook='openLook'/>
   </div>
 </template>
 

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

@@ -1,13 +1,13 @@
 <!--  -->
 <template>
   <div class="Son2">
-    <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"/>
+    <One tit="村落选址" :data="data1" @openLook="openLook" />
+    <Three2 tit="村落格局" :data="data2" @openLook="openLook" />
+    <Three tit="建村智慧" :data="data3" @openLook="openLook" />
+    <One tit="自然环境" :data="data4" @openLook="openLook" />
+    <One2 tit="风景名胜" :data="data5" @openLook="openLook" />
+    <Three2 tit="文物古迹" :data="data6" @openLook="openLook" />
+    <Five tit="历史环境要素" :data="data7" @openLook="openLook"/>
   </div>
 </template>
 
@@ -21,7 +21,7 @@ import Four from "@/components/four.vue";
 import Five from "@/components/five.vue";
 export default {
   name: "Son2",
-  components: { One, One2, Three, Three2, Four,Five },
+  components: { One, One2, Three, Three2, Four, Five },
   props: {},
   data() {
     //这里存放数据
@@ -40,7 +40,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/component/son3.vue

@@ -1,9 +1,9 @@
 <!--  -->
 <template>
   <div class="Son3">
-    <Six tit="传统建筑" :data="data1"  />
-    <Three tit="村落风貌" :data="data2"  />
-    <Four tit="视频集" :data="data3" />
+    <Six tit="传统建筑" :data="data1" @openLook="openLook"/>
+    <Three tit="村落风貌" :data="data2" @openLook="openLook" />
+    <Four tit="视频集" :data="data3" @openLook="openLook"/>
   </div>
 </template>
 
@@ -29,7 +29,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/component/son4.vue

@@ -1,12 +1,12 @@
 <!--  -->
 <template>
   <div class="son4">
-    <Three2 tit="节庆活动" :data="data1" />
-    <One tit="祭祀崇礼" :data="data2" />
-    <Three tit="婚丧嫁娶" :data="data3" />
-    <One tit="地方方言" :data="data4" />
-    <One2 tit="特色文化" :data="data5" />
-    <Four tit="视频集" :data="data6" />
+    <Three2 tit="节庆活动" :data="data1" @openLook="openLook" />
+    <One tit="祭祀崇礼" :data="data2" @openLook="openLook" />
+    <Three tit="婚丧嫁娶" :data="data3" @openLook="openLook" />
+    <One tit="地方方言" :data="data4" @openLook="openLook" />
+    <One2 tit="特色文化" :data="data5" @openLook="openLook" />
+    <Four tit="视频集" :data="data6" @openLook="openLook"/>
   </div>
 </template>
 
@@ -37,7 +37,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/component/son5.vue

@@ -1,15 +1,15 @@
 <!--  -->
 <template>
   <div class="son5">
-    <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" />
+    <One tit="特色物产" :data="data1" @openLook="openLook" />
+    <Three tit="商业集市" :data="data2" @openLook="openLook" />
+    <Three tit="生产工艺" :data="data3" @openLook="openLook" />
+    <Three tit="生产工具" :data="data4" @openLook="openLook" />
+    <One2 tit="服装服饰" :data="data5" @openLook="openLook" />
+    <Three tit="美味美食" :data="data6" @openLook="openLook" />
+    <One2 tit="运输工具" :data="data7" @openLook="openLook" />
+    <One tit="村规民约" :data="data8" @openLook="openLook" />
+    <Four tit="视频集" :data="data9" @openLook="openLook"/>
   </div>
 </template>
 
@@ -42,7 +42,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/component/son6.vue

@@ -1,8 +1,8 @@
 <!--  -->
 <template>
   <div class="son6">
-    <Three tit="入村路线" :data="data1" />
-    <Three tit="村内导览" :data="data2" />
+    <Three tit="入村路线" :data="data1" @openLook="openLook" />
+    <Three tit="村内导览" :data="data2" @openLook="openLook" />
   </div>
 </template>
 
@@ -25,7 +25,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

@@ -59,11 +59,11 @@
     <!-- 下面主要内容盒子 -->
     <div class="mainBox">
       <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'" />
+      <Son2 v-else-if="topDataInd === '2000'"  @openLook="openLook"/>
+      <Son3 v-else-if="topDataInd === '3000'"  @openLook="openLook"/>
+      <Son4 v-else-if="topDataInd === '4000'"  @openLook="openLook"/>
+      <Son5 v-else-if="topDataInd === '5000'"  @openLook="openLook"/>
+      <Son6 v-else-if="topDataInd === '6000'"  @openLook="openLook"/>
     </div>
     <!-- 查看视频的盒子 -->
     <div class="videoBox" v-if="lookShow === 'video'">
@@ -228,7 +228,7 @@ export default {
   }
   // 菜单栏
   .meanBox {
-    z-index: 3;
+    z-index: 101;
     position: absolute;
     top: 0;
     left: 0;