up

web/src/components/five.vue

@@ -4,7 +4,11 @@
     <div class="comMani sroolStop">
       <div class="row" v-for="item in data.videos" :key="item.id">
         <div class="videoName">{{ item.name }}</div>
-        <video class="sroolStop" controls :src="baseURL + item.filePath"></video>
+        <video
+          class="sroolStop"
+          controls
+          :src="baseURL + item.filePath"
+        ></video>
       </div>
     </div>
   </div>
@@ -94,6 +98,12 @@ export default {
         height: 100%;
       }
       .videoName {
+        z-index: 99;
+        cursor: pointer;
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
         position: absolute;
         top: 1px;
         left: 5px;

web/src/components/four.vue

@@ -17,19 +17,20 @@
           <div class="swiper-container">
             <div class="swiper-wrapper">
               <div
-                class="swiper-slide"
-                v-for="item in data.images"
+                class="swiper-slide swiperVideo"
+                v-for="item in data.videos"
                 :key="item.id"
               >
-                <img :src="baseURL + item.filePath" alt="" />
+                <div class="videoName" :title="item.name">{{ item.name }}</div>
+                <video controls :src="baseURL + item.filePath"></video>
               </div>
+
               <div
-                class="swiper-slide swiperVideo"
-                v-for="item in data.videos"
+                class="swiper-slide"
+                v-for="item in data.images"
                 :key="item.id"
               >
-                <div class="videoName">{{ item.name }}</div>
-                <video controls :src="baseURL + item.filePath"></video>
+                <img :src="baseURL + item.filePath" alt="" />
               </div>
             </div>
             <!-- Add Pagination -->
@@ -175,6 +176,12 @@ export default {
     height: 100%;
     background-color: rgba(0, 0, 0, 0.6);
     .videoName {
+      z-index: 99;
+      cursor: pointer;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       position: absolute;
       top: 1px;
       left: 5px;

web/src/components/one.vue

@@ -5,24 +5,25 @@
       <div class="info sroolStop" v-html="data.content"></div>
       <div class="conShow">
         <!--基础存放容器-->
-        <div class="swiper-container" :class="{swShow:!conShowLoad}">
+        <div class="swiper-container" :class="{ swShow: !conShowLoad }">
           <!-- 需要进行轮播的部分 -->
           <div class="swiper-wrapper">
-            <!-- 每个节点 -->
             <div
-              class="swiper-slide"
-              v-for="item in data.images"
+              class="swiper-slide swiperVideo"
+              v-for="item in data.videos"
               :key="item.id"
             >
-              <img :src="baseURL + item.filePath" alt="" />
+              <div class="videoName" :title="item.name">{{ item.name }}</div>
+              <video controls :src="baseURL + item.filePath"></video>
             </div>
+
+            <!-- 每个节点 -->
             <div
-              class="swiper-slide swiperVideo"
-              v-for="item in data.videos"
+              class="swiper-slide"
+              v-for="item in data.images"
               :key="item.id"
             >
-              <div class="videoName">{{ item.name }}</div>
-              <video controls :src="baseURL + item.filePath"></video>
+              <img :src="baseURL + item.filePath" alt="" />
             </div>
           </div>
 
@@ -117,7 +118,7 @@ export default {
   width: 100%;
   height: 100%;
 }
-.swShow{
+.swShow {
   opacity: 1;
 }
 
@@ -175,6 +176,12 @@ export default {
         height: 100%;
         background-color: rgba(0, 0, 0, 0.6);
         .videoName {
+          z-index: 99;
+          cursor: pointer;
+          width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
           position: absolute;
           top: 1px;
           left: 5px;

web/src/components/six.vue

@@ -16,25 +16,26 @@
           <div class="swiper-container" :class="{ swShow: !conShowLoad }">
             <!-- 需要进行轮播的部分 -->
             <div class="swiper-wrapper">
-              <!-- 每个节点 -->
               <div
                 :class="{ active: item.filePath === bigSrc }"
-                @click="cutBig(item.filePath, 'img')"
-                class="swiper-slide"
-                v-for="item in data.images"
+                @click="cutBig(item.filePath, 'video')"
+                class="swiper-slide swiperVideo"
+                v-for="item in data.videos"
                 :key="item.id"
               >
-                <img :src="baseURL + item.filePath" alt="" />
+                <div class="videoName" :title="item.name">{{ item.name }}</div>
+                <video :src="baseURL + item.filePath"></video>
               </div>
+
+              <!-- 每个节点 -->
               <div
                 :class="{ active: item.filePath === bigSrc }"
-                @click="cutBig(item.filePath, 'video')"
-                class="swiper-slide swiperVideo"
-                v-for="item in data.videos"
+                @click="cutBig(item.filePath, 'img')"
+                class="swiper-slide"
+                v-for="item in data.images"
                 :key="item.id"
               >
-                <div class="videoName">{{ item.name }}</div>
-                <video :src="baseURL + item.filePath"></video>
+                <img :src="baseURL + item.filePath" alt="" />
               </div>
             </div>
 
@@ -54,7 +55,11 @@
       </div>
       <div class="info sroolStop" v-html="data.content"></div>
     </div>
-    <div class="comBs" @click="$emit('pageNext')" v-if="tit!=='村内导览'"></div>
+    <div
+      class="comBs"
+      @click="$emit('pageNext')"
+      v-if="tit !== '村内导览'"
+    ></div>
     <!-- 加载动画 -->
     <div class="conShowLoad" v-show="conShowLoad">
       <img src="../assets/img/loading.gif" alt="" />
@@ -242,6 +247,12 @@ export default {
           height: 100%;
           background-color: rgba(0, 0, 0, 0.6);
           .videoName {
+            z-index: 99;
+            cursor: pointer;
+            width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
             position: absolute;
             top: 1px;
             left: 5px;

web/src/components/three.vue

@@ -18,25 +18,26 @@
           <div class="swiper-container" :class="{ swShow: !conShowLoad }">
             <!-- 需要进行轮播的部分 -->
             <div class="swiper-wrapper">
-              <!-- 每个节点 -->
               <div
                 :class="{ active: item.filePath === bigSrc }"
-                @click="cutBig(item.filePath, 'img')"
-                class="swiper-slide"
-                v-for="item in data.images"
+                @click="cutBig(item.filePath, 'video')"
+                class="swiper-slide swiperVideo"
+                v-for="item in data.videos"
                 :key="item.id"
               >
-                <img :src="baseURL + item.filePath" alt="" />
+                <div class="videoName" :title="item.name">{{ item.name }}</div>
+                <video :src="baseURL + item.filePath"></video>
               </div>
+
+              <!-- 每个节点 -->
               <div
                 :class="{ active: item.filePath === bigSrc }"
-                @click="cutBig(item.filePath, 'video')"
-                class="swiper-slide swiperVideo"
-                v-for="item in data.videos"
+                @click="cutBig(item.filePath, 'img')"
+                class="swiper-slide"
+                v-for="item in data.images"
                 :key="item.id"
               >
-                <div class="videoName">{{ item.name }}</div>
-                <video :src="baseURL + item.filePath"></video>
+                <img :src="baseURL + item.filePath" alt="" />
               </div>
             </div>
 
@@ -242,6 +243,12 @@ export default {
           height: 100%;
           background-color: rgba(0, 0, 0, 0.6);
           .videoName {
+            z-index: 99;
+            cursor: pointer;
+            width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
             position: absolute;
             top: 1px;
             left: 5px;

webM/src/assets/base.css

@@ -101,4 +101,21 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-}
+}
+.videoName>p{
+  padding: 0px 10px;
+  z-index: 99;
+  width: 100%;
+  word-break:break-all;
+}
+.videoName .videoPlay{
+  width: 50px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 100;
+  transform: translate(-50%,-50%);
+}
+.videoName .videoPlay img{
+  width: 100%;
+}

webM/src/components/one.vue

@@ -13,18 +13,24 @@
     <div class="swBox" :class="{ opcBase: conShowLoad }">
       <div class="swiper-container">
         <div class="swiper-wrapper">
-          <!-- 图片 -->
-          <div class="swiper-slide" v-for="item in data.images" :key="item.id">
-            <img :src="baseURL + item.filePath" alt="" />
-          </div>
           <div
             class="swiper-slide swiperVideo"
             v-for="item in data.videos"
             :key="item.id"
           >
             <!-- 视频 -->
-            <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">
+            <img :src="baseURL + item.filePath" alt="" />
           </div>
         </div>
       </div>
@@ -124,19 +130,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,.3);
+        top: 0px;
+        left: 0px;
         color: #fff;
         font-size: 14px;
       }

webM/src/components/one2.vue

@@ -13,10 +13,6 @@
     <div class="swBox" :class="{ opcBase: conShowLoad }">
       <div class="swiper-container">
         <div class="swiper-wrapper">
-          <!-- 图片 -->
-          <div class="swiper-slide" v-for="item in data.images" :key="item.id">
-            <img :src="baseURL + item.filePath" alt="" />
-          </div>
           <div
             class="swiper-slide swiperVideo"
             v-for="item in data.videos"
@@ -26,6 +22,11 @@
             <div class="videoName">{{ item.name }}</div>
             <video controls :src="baseURL + item.filePath"></video>
           </div>
+
+          <!-- 图片 -->
+          <div class="swiper-slide" v-for="item in data.images" :key="item.id">
+            <img :src="baseURL + item.filePath" alt="" />
+          </div>
         </div>
       </div>
     </div>

webM/src/components/three.vue

@@ -8,10 +8,6 @@
     <div class="swBox" :class="{ opcBase: conShowLoad }">
       <div class="swiper-container">
         <div class="swiper-wrapper">
-          <!-- 图片 -->
-          <div class="swiper-slide" v-for="item in data.images" :key="item.id">
-            <img :src="baseURL + item.filePath" alt="" />
-          </div>
           <div
             class="swiper-slide swiperVideo"
             v-for="item in data.videos"
@@ -21,6 +17,11 @@
             <div class="videoName">{{ item.name }}</div>
             <video controls :src="baseURL + item.filePath"></video>
           </div>
+
+          <!-- 图片 -->
+          <div class="swiper-slide" v-for="item in data.images" :key="item.id">
+            <img :src="baseURL + item.filePath" alt="" />
+          </div>
         </div>
       </div>
     </div>
@@ -49,7 +50,6 @@ export default {
       type: Object,
       default: () => {},
     },
-    
   },
   components: {},
   data() {

webM/src/components/three2.vue

@@ -8,10 +8,6 @@
     <div class="swBox" :class="{ opcBase: conShowLoad }">
       <div class="swiper-container">
         <div class="swiper-wrapper">
-          <!-- 图片 -->
-          <div class="swiper-slide" v-for="item in data.images" :key="item.id">
-            <img :src="baseURL + item.filePath" alt="" />
-          </div>
           <div
             class="swiper-slide swiperVideo"
             v-for="item in data.videos"
@@ -21,6 +17,11 @@
             <div class="videoName">{{ item.name }}</div>
             <video controls :src="baseURL + item.filePath"></video>
           </div>
+
+          <!-- 图片 -->
+          <div class="swiper-slide" v-for="item in data.images" :key="item.id">
+            <img :src="baseURL + item.filePath" alt="" />
+          </div>
         </div>
       </div>
     </div>
@@ -49,7 +50,6 @@ export default {
       type: Object,
       default: () => {},
     },
-    
   },
   components: {},
   data() {

webM/src/utils/request.js

@@ -1,8 +1,8 @@
 import axios from 'axios'
 const service = axios.create({
   // baseURL: 'http://192.168.0.135:8016', // 本地调试
-  // baseURL: 'http://project.4dage.com:8016', // 线上调试
-  baseURL: '', // build
+  baseURL: 'http://project.4dage.com:8016', // 线上调试
+  // baseURL: '', // build
   timeout: 5000
 })
 // 请求拦截器