up

web/package-lock.json

@@ -12,6 +12,7 @@
         "core-js": "^3.6.5",
         "element-ui": "^2.15.8",
         "swiper": "^4.5.1",
+        "v-viewer": "^1.5.1",
         "vue": "^2.6.11",
         "vue-router": "^3.2.0"
       },
@@ -13127,6 +13128,27 @@
         "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/v-viewer/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/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",
@@ -13172,6 +13194,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",
@@ -25151,6 +25178,22 @@
       "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"
+      },
+      "dependencies": {
+        "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=="
+        }
+      }
+    },
     "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",
@@ -25192,6 +25235,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",

web/package.json

@@ -12,7 +12,8 @@
     "element-ui": "^2.15.8",
     "swiper": "^4.5.1",
     "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",

web/src/assets/css/base.css

@@ -17,7 +17,8 @@ ul li {
 
 .comTit {
   width: 98%;
-  font-family: '思源宋体';
+  font-weight: 700;
+  /* font-family: '思源宋体'; */
   color: #9F171C;
   font-size: 24px;
   border-right: 3px solid #9F171C;
@@ -78,4 +79,38 @@ ul li {
 }
 .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after{
   font-size: 20px !important;
-}
+}
+.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%;
+}
+.viewer-title {
+  display: none !important;
+}
+
+.viewer-prev {
+  display: none !important;
+}
+
+.viewer-next {
+  display: none !important;
+}
+
+.viewer-navbar {
+  display: none !important;
+}

web/src/components/eight.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="eight">
     <div class="comTit">{{ tit }}</div>
-    <div class="comMani" :class="{swShow:!conShowLoad}">
+    <div class="comMani" :class="{ swShow: !conShowLoad }">
       <div class="row" v-for="item in data" :key="item.id">
         <img :src="baseURL + imgSrc(item)" alt="" />
         <div class="rowRight">
@@ -46,7 +46,8 @@
               </p>
             </div>
             <div class="detailPP">
-              <span class="detailSpan">建筑概况：</span><i v-html="detailData.txt5"></i>
+              <span class="detailSpan">建筑概况：</span
+              ><i v-html="detailData.txt5"></i>
             </div>
           </div>
           <!-- 图片 -->
@@ -56,6 +57,7 @@
                 <div
                   class="swiper-slide detailImgSon"
                   v-for="item in detailData.imgList"
+                  @click="$emit('openLook', baseURL + item.filePath, 'img')"
                   :key="item.id"
                 >
                   <img
@@ -105,6 +107,7 @@ export default {
       baseURL: "",
       detailShow: false,
       detailData: {},
+      imgInd: 0,
     };
   },
   //监听属性 类似于data概念
@@ -118,7 +121,7 @@ export default {
             slidesPerView: 3,
             spaceBetween: 0,
             centeredSlides: true,
-            initialSlide: 1,
+            initialSlide: this.imgInd,
             // pagination: {
             //   el: '.swiper-pagination',
             //   clickable: true,
@@ -134,6 +137,10 @@ export default {
       return item.imgList.find((v) => v.id === item.imgActive).filePath;
     },
     lookDetail(item) {
+      this.imgInd = 0;
+      item.imgList.forEach((v, i) => {
+        if (v.id === item.imgActive) this.imgInd = i;
+      });
       this.detailData = item;
       this.detailShow = true;
     },
@@ -169,12 +176,13 @@ export default {
 }
 
 .swiper-slide img {
+  cursor: pointer;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 .swiper-slide {
-  transition: all .3s;
+  transition: all 0.3s;
   opacity: 0.5;
 }
 .swiper-slide-active {
@@ -232,7 +240,7 @@ export default {
           display: flex;
           p {
             margin-right: 50px;
-            cursor: pointer;
+            cursor: default;
             width: 260px;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -260,7 +268,7 @@ export default {
       }
     }
   }
-  .swShow{
+  .swShow {
     opacity: 1;
   }
   .detailBox {

web/src/components/five.vue

@@ -2,8 +2,18 @@
   <div class="five">
     <div class="comTit">{{ tit }}</div>
     <div class="comMani sroolStop">
-      <div class="row" v-for="item in data.videos" :key="item.id">
-        <div class="videoName">{{ item.name }}</div>
+      <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
           class="sroolStop"
           controls
@@ -98,15 +108,15 @@ export default {
         height: 100%;
       }
       .videoName {
-        z-index: 99;
+        z-index: 999;
+        background-color: rgba(0, 0, 0, 0.6);
         cursor: pointer;
         width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
         position: absolute;
-        top: 1px;
-        left: 5px;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
         color: #fff;
         font-size: 14px;
       }

web/src/components/four.vue

@@ -4,14 +4,14 @@
     <div class="comMani" :class="{ swShow: !conShowLoad }">
       <div class="conShow">
         <!-- 如果需要使用前进后退按钮 -->
-        <div
+        <!-- <div
           class="swiper-button-prev swiper-button-white"
           v-show="Numm > 1"
         ></div>
         <div
           class="swiper-button-next swiper-button-white"
           v-show="Numm > 1"
-        ></div>
+        ></div> -->
 
         <div class="conShowfloo">
           <div class="swiper-container">
@@ -19,56 +19,28 @@
               <div
                 class="swiper-slide swiperVideo"
                 v-for="item in data.videos"
+                @click="$emit('openLook', baseURL + item.filePath, 'video')"
                 :key="item.id"
               >
-                <div class="videoName" :title="item.name">{{ item.name }}</div>
+                <div class="videoName">
+                  <p>{{ item.name }}</p>
+                  <div class="videoPlay">
+                    <img src="../assets/img/videoPlay.png" alt="" />
+                  </div>
+                </div>
                 <video controls :src="baseURL + item.filePath"></video>
               </div>
 
               <div
                 class="swiper-slide"
                 v-for="item in data.images"
+                @click="$emit('openLook', baseURL + item.filePath, 'img')"
                 :key="item.id"
               >
                 <img :src="baseURL + item.filePath" alt="" />
               </div>
             </div>
-            <!-- Add Pagination -->
-            <!-- <div class="swiper-pagination"></div> -->
           </div>
-
-          <!-- <div
-            class="icon el-icon-arrow-left"
-            v-show="Numm > 1"
-            @click="arrowClick(0)"
-          ></div>
-          <div
-            class="icon el-icon-arrow-right"
-            v-show="Numm > 1"
-            @click="arrowClick(1)"
-          ></div>
-          <el-carousel
-            type="card"
-            height="300px"
-            :autoplay="false"
-            arrow="never"
-            indicator-position="none"
-            ref="cardShow"
-            :loop="false"
-            :initial-index="1"
-          >
-            <el-carousel-item v-for="item in data.images" :key="item.id">
-              <img :src="baseURL + item.filePath" alt="" />
-            </el-carousel-item>
-            <el-carousel-item
-              class="videoBox"
-              v-for="item in data.videos"
-              :key="item.id"
-            >
-              <div class="videoName">{{ item.name }}</div>
-              <video controls :src="baseURL + item.filePath"></video>
-            </el-carousel-item>
-          </el-carousel> -->
         </div>
       </div>
       <div class="info sroolStop" v-html="data.content"></div>
@@ -135,7 +107,7 @@ export default {
         this.Numm = imgNum + videoNum;
         // 初始化sw
         new Swiper(".four .swiper-container", {
-          slidesPerView: 3,
+          slidesPerView: this.tit==='入村路线'?1:3,
           spaceBetween: 0,
           centeredSlides: true,
           initialSlide: 1,
@@ -176,15 +148,15 @@ export default {
     height: 100%;
     background-color: rgba(0, 0, 0, 0.6);
     .videoName {
-      z-index: 99;
+      z-index: 999;
+      background-color: rgba(0, 0, 0, 0.6);
       cursor: pointer;
       width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
       position: absolute;
-      top: 1px;
-      left: 5px;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
       color: #fff;
       font-size: 14px;
     }
@@ -196,6 +168,7 @@ export default {
 }
 
 .swiper-slide img {
+  cursor: pointer;
   width: 100%;
   height: 100%;
   object-fit: cover;

web/src/components/one.vue

@@ -11,16 +11,23 @@
             <div
               class="swiper-slide swiperVideo"
               v-for="item in data.videos"
+              @click="$emit('openLook', baseURL + item.filePath, 'video')"
               :key="item.id"
             >
-              <div class="videoName" :title="item.name">{{ 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"
+              @click="$emit('openLook', baseURL + item.filePath, 'img')"
               :key="item.id"
             >
               <img :src="baseURL + item.filePath" alt="" />
@@ -123,12 +130,13 @@ export default {
 }
 
 .swiper-slide img {
+  cursor: pointer;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }
 .swiper-slide video {
-  width: 100%;
+  z-index: -1;
   height: 100%;
 }
 .info::-webkit-scrollbar {
@@ -171,20 +179,20 @@ export default {
       height: 240px;
       flex: 1;
       .swiperVideo {
+        overflow: hidden;
         position: relative;
         width: 100%;
         height: 100%;
-        background-color: rgba(0, 0, 0, 0.6);
         .videoName {
-          z-index: 99;
+          z-index: 999;
+          background-color: rgba(0, 0, 0, 0.6);
           cursor: pointer;
           width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
           position: absolute;
-          top: 1px;
-          left: 5px;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
           color: #fff;
           font-size: 14px;
         }

web/src/components/seven.vue

@@ -50,6 +50,7 @@
                 <div
                   class="swiper-slide detailImgSon"
                   v-for="item in detailData.imgList"
+                  @click="$emit('openLook', baseURL + item.filePath, 'img')"
                   :key="item.id"
                 >
                   <img
@@ -93,6 +94,7 @@ export default {
       baseURL: "",
       detailShow: false,
       detailData: {},
+      imgInd: 0,
     };
   },
   //监听属性 类似于data概念
@@ -106,7 +108,7 @@ export default {
             slidesPerView: 3,
             spaceBetween: 0,
             centeredSlides: true,
-            initialSlide: 1,
+            initialSlide: this.imgInd,
             // pagination: {
             //   el: '.swiper-pagination',
             //   clickable: true,
@@ -122,6 +124,11 @@ export default {
       return item.imgList.find((v) => v.id === item.imgActive).filePath;
     },
     lookDetail(item) {
+            this.imgInd=0
+      item.imgList.forEach((v,i)=>{
+        if(v.id===item.imgActive) this.imgInd=i
+      })
+
       this.detailData = item;
       this.detailShow = true;
     },
@@ -213,7 +220,7 @@ export default {
         justify-content: center;
         margin-right: 120px;
         p {
-          cursor: pointer;
+          cursor: default;
           width: 400px;
           overflow: hidden;
           text-overflow: ellipsis;

web/src/components/six.vue

@@ -4,7 +4,12 @@
     <div class="comMani">
       <div class="conShow">
         <div class="conShowTop">
-          <img :src="baseURL + bigSrc" alt="" v-if="type === 'img' && bigSrc" />
+          <img
+            :src="baseURL + bigSrc"
+            alt=""
+            v-if="type === 'img' && bigSrc"
+            @click="$emit('openLook', baseURL + bigSrc, 'img')"
+          />
           <video
             controls
             :src="baseURL + bigSrc"
@@ -43,14 +48,14 @@
             <!-- <div class="swiper-pagination swiper-pagination-white"></div> -->
           </div>
           <!-- 如果需要使用前进后退按钮 -->
-          <div
+          <!-- <div
             class="swiper-button-prev swiper-button-white"
             v-show="Numm > 1"
           ></div>
           <div
             class="swiper-button-next swiper-button-white"
             v-show="Numm > 1"
-          ></div>
+          ></div> -->
         </div>
       </div>
       <div class="info sroolStop" v-html="data.content"></div>
@@ -89,7 +94,7 @@ export default {
     return {
       baseURL: "",
       bigSrc: "",
-      type: "img",
+      type: "video",
       conShowLoad: true,
       Numm: 0,
     };
@@ -138,13 +143,12 @@ export default {
         if (this.data.videos && this.data.videos.length)
           videoNum = this.data.videos.length;
         this.Numm = imgNum + videoNum;
-
-        if (this.data.images && this.data.images.length > 0)
-          this.bigSrc = this.data.images[0].filePath;
+        if (this.data.videos && this.data.videos[0])
+          this.bigSrc = this.data.videos[0].filePath;
         else {
-          this.type = "video";
-          if (this.data.videos && this.data.videos[0])
-            this.bigSrc = this.data.videos[0].filePath;
+          this.type = "img";
+          if (this.data.images && this.data.images.length > 0)
+            this.bigSrc = this.data.images[0].filePath;
         }
         this.conShowLoad = false;
       }, 1000);
@@ -228,6 +232,7 @@ export default {
         height: 400px;
         margin-bottom: 15px;
         & > img {
+          cursor: pointer;
           width: 100%;
           height: 100%;
           object-fit: cover;

web/src/components/three.vue

@@ -5,7 +5,12 @@
       <div class="info sroolStop" v-html="data.content"></div>
       <div class="conShow">
         <div class="conShowTop">
-          <img :src="baseURL + bigSrc" alt="" v-if="type === 'img' && bigSrc" />
+          <img
+            :src="baseURL + bigSrc"
+            alt=""
+            v-if="type === 'img' && bigSrc"
+            @click="$emit('openLook', baseURL + bigSrc, 'img')"
+          />
           <video
             controls
             :src="baseURL + bigSrc"
@@ -25,7 +30,12 @@
                 v-for="item in data.videos"
                 :key="item.id"
               >
-                <div class="videoName" :title="item.name">{{ item.name }}</div>
+                <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>
 
@@ -45,14 +55,14 @@
             <!-- <div class="swiper-pagination swiper-pagination-white"></div> -->
           </div>
           <!-- 如果需要使用前进后退按钮 -->
-          <div
+          <!-- <div
             class="swiper-button-prev swiper-button-white"
             v-show="Numm > 1"
           ></div>
           <div
             class="swiper-button-next swiper-button-white"
             v-show="Numm > 1"
-          ></div>
+          ></div> -->
         </div>
       </div>
     </div>
@@ -86,7 +96,7 @@ export default {
     return {
       baseURL: "",
       bigSrc: "",
-      type: "img",
+      type: "video",
       conShowLoad: true,
       Numm: 0,
     };
@@ -135,13 +145,15 @@ export default {
         if (this.data.videos && this.data.videos.length)
           videoNum = this.data.videos.length;
         this.Numm = imgNum + videoNum;
-        if (this.data.images && this.data.images.length > 0)
-          this.bigSrc = this.data.images[0].filePath;
+
+        if (this.data.videos && this.data.videos[0])
+          this.bigSrc = this.data.videos[0].filePath;
         else {
-          this.type = "video";
-          if (this.data.videos && this.data.videos[0])
-            this.bigSrc = this.data.videos[0].filePath;
+          this.type = "img";
+          if (this.data.images && this.data.images.length > 0)
+            this.bigSrc = this.data.images[0].filePath;
         }
+
         this.conShowLoad = false;
       }, 1000);
     });
@@ -224,6 +236,7 @@ export default {
         height: 400px;
         margin-bottom: 15px;
         & > img {
+          cursor: pointer;
           width: 100%;
           height: 100%;
           object-fit: cover;
@@ -241,17 +254,16 @@ export default {
           position: relative;
           width: 100%;
           height: 100%;
-          background-color: rgba(0, 0, 0, 0.6);
           .videoName {
-            z-index: 99;
+            z-index: 999;
+            background-color: rgba(0, 0, 0, 0.6);
             cursor: pointer;
             width: 100%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
             position: absolute;
-            top: 1px;
-            left: 5px;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
             color: #fff;
             font-size: 14px;
           }

web/src/main.js

@@ -3,8 +3,12 @@ import App from './App.vue'
 import router from './router'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
-import './assets/css/base.css'
 Vue.use(ElementUI);
+import 'viewerjs/dist/viewer.css'
+import Viewer from 'v-viewer'
+Vue.use(Viewer)
+import './assets/css/base.css'
+
 Vue.config.productionTip = false
 
 new Vue({

web/src/views/Home.vue

@@ -128,56 +128,52 @@ export default {
       mapData: [
         {
           id: 1000,
-          name: "江海区",
-          son: [{ id: 1, name: "东宁村" }],
-        },
-        {
-          id: 2000,
-          name: "新会区",
+          name: "蓬江区",
           son: [
             { id: 2, name: "良溪村" },
-            { id: 5, name: "仓前村" },
+            { id: 3, name: "卢边村" },
           ],
         },
         {
-          id: 3000,
-          name: "潮连区",
-          son: [{ id: 3, name: "卢边村" }],
+          id: 2000,
+          name: "江海区",
+          son: [{ id: 1, name: "东宁村" }],
         },
         {
-          id: 4000,
-          name: "蓬江区",
+          id: 3000,
+          name: "新会区",
           son: [
             { id: 4, name: "田心村" },
-            { id: 12, name: "横江村" },
+            { id: 5, name: "仓前村" },
           ],
         },
         {
-          id: 5000,
-          name: "鹤山区",
+          id: 4000,
+          name: "鹤山市",
           son: [{ id: 6, name: "霄南村" }],
         },
         {
-          id: 6000,
-          name: "恩平区",
-          son: [{ id: 7, name: "歇马村" }],
-        },
-        {
-          id: 7000,
-          name: "开平区",
+          id: 5000,
+          name: "开平市",
           son: [
             { id: 8, name: "自力村" },
             { id: 9, name: "马降龙村" },
           ],
         },
         {
-          id: 8000,
-          name: "台山区",
+          id: 6000,
+          name: "台山市",
           son: [
             { id: 10, name: "浮石村" },
             { id: 11, name: "浮月村" },
+            { id: 12, name: "横江村" },
           ],
         },
+        {
+          id: 7000,
+          name: "恩平市",
+          son: [{ id: 7, name: "歇马村" }],
+        },
       ],
     };
   },
@@ -407,7 +403,7 @@ export default {
             height: 490px;
             padding-top: 15px;
             .row {
-              transition: all .3s;
+              transition: all 0.3s;
               cursor: pointer;
               height: 40px;
               display: flex;
@@ -428,7 +424,7 @@ export default {
                   height: 14px;
                   background-color: rgba(232, 224, 209, 0.8);
                   & > div {
-                    transition: all .5s;
+                    transition: all 0.5s;
                     position: absolute;
                     left: 0;
                     top: 0;
@@ -446,11 +442,11 @@ export default {
                 text-overflow: ellipsis;
                 white-space: nowrap;
               }
-              &:hover{
+              &:hover {
                 color: #412c0c;
-                .rowRight{
-                  .plan{
-                    &>div{
+                .rowRight {
+                  .plan {
+                    & > div {
                       background-color: #412c0c;
                     }
                   }
@@ -496,7 +492,7 @@ export default {
               cursor: pointer;
               margin-top: 0px;
               transition: all 0.3s;
-              &:hover{
+              &:hover {
                 color: #412c0c;
               }
             }

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

@@ -1,12 +1,32 @@
 <!--  -->
 <template>
   <div class="Son1">
-    <One tit="建村历史" :data="data1" @pageNext="$emit('pageNext', 1)" />
+    <One
+      tit="建村历史"
+      :data="data1"
+      @pageNext="$emit('pageNext', 1)"
+      @openLook="openLook"
+    />
     <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" />
+    <Three
+      tit="历史事件"
+      :data="data3"
+      @pageNext="$emit('pageNext', 3)"
+      @openLook="openLook"
+    />
+    <Three
+      tit="族谱家训"
+      :data="data4"
+      @pageNext="$emit('pageNext', 4)"
+      @openLook="openLook"
+    />
+    <Four
+      tit="口述史"
+      :data="data5"
+      @pageNext="$emit('pageNext', 5)"
+      @openLook="openLook"
+    />
+    <Five tit="视频集" :data="data6" @openLook="openLook" />
   </div>
 </template>
 
@@ -37,7 +57,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));

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

@@ -1,13 +1,43 @@
 <!--  -->
 <template>
   <div class="Son2">
-    <Three tit="村落选址" :data='data1' @pageNext="$emit('pageNext',1)"/>
-    <Four tit="村落格局" :data='data2' @pageNext="$emit('pageNext',2)"/>
-    <One tit="建村智慧" :data='data3' @pageNext="$emit('pageNext',3)"/>
-    <Six tit="自然环境" :data='data4' @pageNext="$emit('pageNext',4)"/>
-    <Four tit="风景名胜" :data='data5' @pageNext="$emit('pageNext',5)"/>
-    <One tit="文物古迹" :data='data6' @pageNext="$emit('pageNext',6)"/>
-    <Seven tit="历史环境要素" :data='data7'/>
+    <Three
+      tit="村落选址"
+      :data="data1"
+      @pageNext="$emit('pageNext', 1)"
+      @openLook="openLook"
+    />
+    <Four
+      tit="村落格局"
+      :data="data2"
+      @pageNext="$emit('pageNext', 2)"
+      @openLook="openLook"
+    />
+    <One
+      tit="建村智慧"
+      :data="data3"
+      @pageNext="$emit('pageNext', 3)"
+      @openLook="openLook"
+    />
+    <Six
+      tit="自然环境"
+      :data="data4"
+      @pageNext="$emit('pageNext', 4)"
+      @openLook="openLook"
+    />
+    <Four
+      tit="风景名胜"
+      :data="data5"
+      @pageNext="$emit('pageNext', 5)"
+      @openLook="openLook"
+    />
+    <One
+      tit="文物古迹"
+      :data="data6"
+      @pageNext="$emit('pageNext', 6)"
+      @openLook="openLook"
+    />
+    <Seven tit="历史环境要素" :data="data7" @openLook="openLook" />
   </div>
 </template>
 
@@ -20,18 +50,18 @@ import Six from "@/components/six.vue";
 import Seven from "@/components/seven.vue";
 export default {
   name: "Son2",
-  components: { One, Three,Four,Six,Seven },
+  components: { One, Three, Four, Six, Seven },
   props: {},
   data() {
     //这里存放数据
     return {
-      data1:{},
-      data2:{},
-      data3:{},
-      data4:{},
-      data5:{},
-      data6:{},
-      data7:[]
+      data1: {},
+      data2: {},
+      data3: {},
+      data4: {},
+      data5: {},
+      data6: {},
+      data7: [],
     };
   },
   //监听属性 类似于data概念
@@ -39,35 +69,39 @@ 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));
-    res.data.forEach(v=>{
+    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=JSON.parse(v.contentJson);
-        return
+      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 = JSON.parse(v.contentJson);
+        return;
       }
-    })
+    });
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},

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

@@ -1,9 +1,19 @@
 <!--  -->
 <template>
   <div class="Son3">
-    <Eight tit="传统建筑" :data="data1" @pageNext="$emit('pageNext', 1)" />
-    <Six tit="村落风貌" :data="data2" @pageNext="$emit('pageNext', 2)" />
-    <Five tit="视频集" :data="data3" />
+    <Eight
+      tit="传统建筑"
+      :data="data1"
+      @pageNext="$emit('pageNext', 1)"
+      @openLook="openLook"
+    />
+    <Six
+      tit="村落风貌"
+      :data="data2"
+      @pageNext="$emit('pageNext', 2)"
+      @openLook="openLook"
+    />
+    <Five tit="视频集" :data="data3" @openLook="openLook" />
   </div>
 </template>
 
@@ -29,7 +39,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));

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

@@ -1,12 +1,37 @@
 <!--  -->
 <template>
   <div class="Son4">
-    <Four tit="节庆活动" :data="data1" @pageNext="$emit('pageNext', 1)" />
-    <Six tit="祭祀崇礼" :data="data2" @pageNext="$emit('pageNext', 2)" />
-    <Three tit="婚丧嫁娶" :data="data3" @pageNext="$emit('pageNext', 3)" />
-    <One tit="地方方言" :data="data4" @pageNext="$emit('pageNext', 4)" />
-    <Three tit="特色文化" :data="data5" @pageNext="$emit('pageNext', 5)" />
-    <Five tit="视频集" :data="data6" />
+    <Four
+      tit="节庆活动"
+      :data="data1"
+      @pageNext="$emit('pageNext', 1)"
+      @openLook="openLook"
+    />
+    <Six
+      tit="祭祀崇礼"
+      :data="data2"
+      @pageNext="$emit('pageNext', 2)"
+      @openLook="openLook"
+    />
+    <Three
+      tit="婚丧嫁娶"
+      :data="data3"
+      @pageNext="$emit('pageNext', 3)"
+      @openLook="openLook"
+    />
+    <One
+      tit="地方方言"
+      :data="data4"
+      @pageNext="$emit('pageNext', 4)"
+      @openLook="openLook"
+    />
+    <Three
+      tit="特色文化"
+      :data="data5"
+      @pageNext="$emit('pageNext', 5)"
+      @openLook="openLook"
+    />
+    <Five tit="视频集" :data="data6" @openLook="openLook" />
   </div>
 </template>
 
@@ -37,7 +62,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));

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

@@ -1,15 +1,55 @@
 <!--  -->
 <template>
   <div class="Son5">
-    <Four tit="特色物产" :data="data1" @pageNext="$emit('pageNext', 1)" />
-    <Six tit="商业集市" :data="data2" @pageNext="$emit('pageNext', 2)" />
-    <Three tit="生产工艺" :data="data3" @pageNext="$emit('pageNext', 3)" />
-    <One tit="生产工具" :data="data4" @pageNext="$emit('pageNext', 4)" />
-    <Four tit="服装服饰" :data="data5" @pageNext="$emit('pageNext', 5)" />
-    <Six tit="美味美食" :data='data6' @pageNext="$emit('pageNext',6)"/>
-    <Three tit="运输工具" :data="data7" @pageNext="$emit('pageNext', 7)" />
-    <Four tit="村规民约" :data="data8" @pageNext="$emit('pageNext', 8)" />
-    <Five tit="视频集" :data="data9" />
+    <Four
+      tit="特色物产"
+      :data="data1"
+      @pageNext="$emit('pageNext', 1)"
+      @openLook="openLook"
+    />
+    <Six
+      tit="商业集市"
+      :data="data2"
+      @pageNext="$emit('pageNext', 2)"
+      @openLook="openLook"
+    />
+    <Three
+      tit="生产工艺"
+      :data="data3"
+      @pageNext="$emit('pageNext', 3)"
+      @openLook="openLook"
+    />
+    <One
+      tit="生产工具"
+      :data="data4"
+      @pageNext="$emit('pageNext', 4)"
+      @openLook="openLook"
+    />
+    <Four
+      tit="服装服饰"
+      :data="data5"
+      @pageNext="$emit('pageNext', 5)"
+      @openLook="openLook"
+    />
+    <Six
+      tit="美味美食"
+      :data="data6"
+      @pageNext="$emit('pageNext', 6)"
+      @openLook="openLook"
+    />
+    <Three
+      tit="运输工具"
+      :data="data7"
+      @pageNext="$emit('pageNext', 7)"
+      @openLook="openLook"
+    />
+    <Four
+      tit="村规民约"
+      :data="data8"
+      @pageNext="$emit('pageNext', 8)"
+      @openLook="openLook"
+    />
+    <Five tit="视频集" :data="data9" @openLook="openLook" />
   </div>
 </template>
 
@@ -43,7 +83,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));

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

@@ -1,8 +1,13 @@
 <!--  -->
 <template>
   <div class="Son6">
-    <Four tit="入村路线" :data="data1" @pageNext="$emit('pageNext', 1)" />
-    <Six tit="村内导览" :data="data2" />
+    <Four
+      tit="入村路线"
+      :data="data1"
+      @pageNext="$emit('pageNext', 1)"
+      @openLook="openLook"
+    />
+    <Six tit="村内导览" :data="data2" @openLook="openLook" />
   </div>
 </template>
 
@@ -26,7 +31,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));

web/src/views/info/index.vue

@@ -22,7 +22,10 @@
     </div>
     <div class="conten">
       <div class="left">
-        <img :src="require(`@/assets/img/contCun/${$route.params.id}.png`)" alt="" />
+        <img
+          :src="require(`@/assets/img/contCun/${$route.params.id}.png`)"
+          alt=""
+        />
         <div class="leftRow">
           <div
             @click="cutScroll(index)"
@@ -45,12 +48,48 @@
       </div>
       <!-- 主要切换内容 -->
       <div class="right">
-        <Son1 @pageNext="pageNext" v-if="topDataInd === '1000'" />
-        <Son2 @pageNext="pageNext" v-else-if="topDataInd === '2000'" />
-        <Son3 @pageNext="pageNext" v-else-if="topDataInd === '3000'" />
-        <Son4 @pageNext="pageNext" v-else-if="topDataInd === '4000'" />
-        <Son5 @pageNext="pageNext" v-else-if="topDataInd === '5000'" />
-        <Son6 @pageNext="pageNext" v-else-if="topDataInd === '6000'" />
+        <Son1
+          @pageNext="pageNext"
+          v-if="topDataInd === '1000'"
+          @openLook="openLook"
+        />
+        <Son2
+          @pageNext="pageNext"
+          v-else-if="topDataInd === '2000'"
+          @openLook="openLook"
+        />
+        <Son3
+          @pageNext="pageNext"
+          v-else-if="topDataInd === '3000'"
+          @openLook="openLook"
+        />
+        <Son4
+          @pageNext="pageNext"
+          v-else-if="topDataInd === '4000'"
+          @openLook="openLook"
+        />
+        <Son5
+          @pageNext="pageNext"
+          v-else-if="topDataInd === '5000'"
+          @openLook="openLook"
+        />
+        <Son6
+          @pageNext="pageNext"
+          v-else-if="topDataInd === '6000'"
+          @openLook="openLook"
+        />
+      </div>
+    </div>
+    <!-- 查看图片 -->
+    <viewer class="viewerCla" ref="viewer" :images="lookPics">
+      <img :src="lookPics[0]" alt="" />
+    </viewer>
+
+    <!-- 查看视频的盒子 -->
+    <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>
@@ -70,6 +109,10 @@ export default {
   data() {
     //这里存放数据
     return {
+      lookShow: null,
+      lookUrl: null,
+      lookPics: [],
+      // ----------------------
       leftData: [],
       topDataInd: "1000",
       topData: [],
@@ -87,7 +130,7 @@ export default {
     pageInd(val) {
       let dom = document.querySelector(".conten");
       dom.scrollTo({ top: this.pageHeight * val, behavior: "smooth" });
-      // 切换的时候暂时视频
+      // // 切换的时候暂时视频
       this.$nextTick(() => {
         setTimeout(() => {
           let dom = document.querySelectorAll("video");
@@ -100,6 +143,16 @@ export default {
   },
   //方法集合
   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;
+      }
+    },
     pageNext(index) {
       this.cutScroll(index);
     },
@@ -127,6 +180,25 @@ export default {
       // 获取一个页面的高度
       let domH = document.querySelector(".conten .right");
       this.pageHeight = domH.clientHeight;
+      // uc浏览器兼容问题
+      let dom = document.querySelector(".conten");
+      if (!dom.scrollTo) {
+        const Element = window.HTMLElement || window.Element;
+        Element.prototype.scrollTo = function () {
+          let left = 0;
+          let top = 0;
+          if (arguments.length > 1) {
+            left = arguments[0];
+            top = arguments[1];
+          } else {
+            left = arguments[0].left;
+            top = arguments[0].top;
+          }
+          this.scrollLeft = left;
+          this.scrollTop = top;
+        };
+      }
+
       // 获取滚动元素
       // let sroolDom = document.querySelector(".info .conten");
       // sroolDom.addEventListener(
@@ -207,7 +279,8 @@ export default {
   width: 100%;
   height: 100%;
   .top {
-    z-index: 9999;
+    font-family: "思源宋体";
+    z-index: 1999;
     min-width: 1800px;
     padding: 0 0px 0 120px;
     color: #fff;
@@ -301,5 +374,32 @@ export default {
       height: 100%;
     }
   }
+  .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 {
+      cursor: pointer;
+      z-index: 99999;
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      width: 30px;
+      img {
+        width: 100%;
+      }
+    }
+  }
+  .viewerCla img {
+    display: none;
+  }
 }
 </style>