up

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "core-js": "^3.6.5",
+        "v-viewer": "^1.5.1",
         "vue": "^2.6.11",
         "vue-awesome-swiper": "^4.1.1",
         "vue-router": "^3.2.0"
@@ -12450,6 +12451,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",
@@ -13051,6 +13060,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",
@@ -13096,6 +13118,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",
@@ -24514,6 +24541,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",
@@ -25011,6 +25043,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",
@@ -25052,6 +25093,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",

package.json

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

src/assets/base.css

@@ -194,4 +194,20 @@ body {
   max-height: 100%;
   background-color: #1d1e23;
 
+}
+
+.viewer-title {
+  display: none !important;
+}
+
+.viewer-prev {
+  display: none !important;
+}
+
+.viewer-next {
+  display: none !important;
+}
+
+.viewer-navbar {
+  display: none !important;
 }

src/main.js

@@ -1,6 +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)
 import './assets/base.css'
 
 Vue.config.productionTip = false

src/views/info/index.vue

@@ -1,21 +1,32 @@
 <!--  -->
 <template>
-  <div class="info">
+  <div class="info" :key="$route.params.id" v-if="data.name">
     <!-- 标题 -->
     <div class="title">
       <div class="back" @click="$router.go(-1)"></div>
       <h3>{{ data.name }}</h3>
     </div>
     <!-- 模型 -->
-    <div class="model">
-      <iframe
-        src="http://4dscene.4dage.com/culturalrelics/YPZZ/Model.html?m=yp02&v=1"
-        frameborder="0"
-      ></iframe>
+    <div class="model" :class="`model${$route.params.id}`">
+      <div class="swiper-container">
+        <div class="swiper-wrapper" ref="mySwiper">
+          <div class="swiper-slide" v-for="item in data.img" :key="item" @click="lookImg(`data/${$route.params.id}_${item}.png`)">
+            <img :src="`data/${$route.params.id}_${item}.png`" alt="" />
+          </div>
+          <div class="swiper-slide">
+            <iframe
+              src="http://4dscene.4dage.com/culturalrelics/WZSBWG/Model2.html?m=wzs02"
+              frameborder="0"
+            ></iframe>
+          </div>
+        </div>
+      </div>
     </div>
     <!-- 索引 -->
+
     <div class="indexBs">
-      <div>1/2</div>
+      <div class="swiper-pagination"></div>
+      <!-- <div>1/{{ data.img + 1 }}</div> -->
     </div>
     <!-- 音乐 -->
     <div class="myMusic">
@@ -23,10 +34,15 @@
     </div>
     <!-- 文字介绍 -->
     <div class="txtt" v-html="data.txt"></div>
+    <!-- 查看图片 -->
+    <viewer class="viewerCla" ref="viewer" :images="lookPics">
+      <img :src="lookPics[0]" alt="" />
+    </viewer>
   </div>
 </template>
 
 <script>
+import Swiper from "./swiper.js";
 import { info } from "../../components/data.js";
 import Audio from "./audio.vue";
 export default {
@@ -36,6 +52,7 @@ export default {
     //这里存放数据
     return {
       data: {},
+      lookPics: [],
     };
   },
   //监听属性 类似于data概念
@@ -43,7 +60,14 @@ export default {
   //监控data中的数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    lookImg(url) {
+      let dom = this.$refs.viewer.$viewer;
+      this.lookPics = [url];
+      console.log(this.lookPics);
+      dom.show();
+    },
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
@@ -55,17 +79,33 @@ export default {
   beforeDestroy() {}, //生命周期 - 销毁之前
   destroyed() {}, //生命周期 - 销毁完成
   activated() {
+    console.log('-------------',info);
     window.scrollTo({ top: 0 });
     this.data = info.find((v) => v.id == this.$route.params.id);
+    console.log('++++++++',this.data);
+    this.$nextTick(() => {
+      setTimeout(() => {
+        new Swiper(`.model${this.$route.params.id} .swiper-container`, {
+          pagination: {
+            el: ".swiper-pagination",
+            type: "fraction",
+          },
+        });
+      }, 100);
+    });
   }, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style lang='less' scoped>
+.viewerCla img {
+  display: none;
+}
+@import "./swiper.css";
 .info {
   min-height: 100vh;
   .title {
     position: relative;
-    padding: 15px 45px 70px 50px;
+    padding: 15px 45px 50px 50px;
     .back {
       position: absolute;
       top: 22px;
@@ -85,27 +125,49 @@ export default {
   .model {
     width: 100%;
     height: 200px;
-    iframe {
+    .swiper-container {
       width: 100%;
       height: 100%;
+      .swiper-wrapper {
+        width: 100%;
+        height: 100%;
+        .swiper-slide {
+          width: 100%;
+          height: 100%;
+          & > img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+        }
+      }
+    }
+    iframe {
+      margin-top: 10px;
+      width: 100%;
+      height: 180px;
     }
   }
   .indexBs {
     position: relative;
     height: 50px;
     & > div {
+      left: auto;
       position: absolute;
       bottom: 0;
       right: 22px;
-      width: 54px;
+      width: 60px;
       height: 22px;
       line-height: 22px;
       text-align: center;
       border-radius: 11px;
       background-color: rgba(0, 0, 0, 0.7);
       color: #fff;
-      font-size: 14px;
-      font-weight: 700;
+      /deep/span {
+        color: #fff;
+        font-size: 14px;
+        font-weight: 700;
+      }
     }
   }
   .myMusic {