文物赏析-单独文物页面

vue/src/router/index.js

@@ -3,8 +3,7 @@ import VueRouter from 'vue-router'
 
 Vue.use(VueRouter)
 
-const routes = [
-  {
+const routes = [{
     path: '/Home',
     name: 'Home',
     component: () => import('../views/Home.vue')
@@ -15,6 +14,11 @@ const routes = [
     component: () => import('../views/Goods/index.vue')
   },
   {
+    path: '/info/:id',
+    name: 'GoodsInfo',
+    component: () => import('../views/GoodsInfo.vue')
+  },
+  {
     path: '/',
     name: 'Video',
     component: () => import('../views/Video/index.vue')
@@ -30,10 +34,11 @@ const routes = [
     path: '/lookGoods',
     name: 'LookGoods',
     component: () => import('../views/LookGoods.vue')
-  },]
+  },
+]
 
 const router = new VueRouter({
   routes
 })
 
-export default router
+export default router

vue/src/views/Goods/components/Img.vue

@@ -8,7 +8,7 @@
       <p v-show="info.grain">质地：{{ info.grain }}</p>
       <p v-show="info.estate">级别：{{ info.estate }}</p>
     </div>
-    <div class="close" @click="$emit('close')"></div>
+    <div v-if='!oneLike' class="close" @click="$emit('close')"></div>
     <viewer class="viewerCla" ref="viewer" :images="lookPics">
       <img :src="lookPics[0]" alt="" />
     </viewer>
@@ -44,6 +44,10 @@ export default {
       type: Object,
       default: () => { },
     },
+    oneLike:{
+      type:Boolean,
+      default:false
+    }
   },
   data() {
     //这里存放数据

vue/src/views/GoodsInfo.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="GoodsInfo">
+    <Img :info="info" oneLike v-if="type === 'img'" />
+    <div class="threeBox" v-if="type === 'model'">
+      <!-- 线上开发加上 -->
+      <!-- :src="`https://4dscene.4dage.com/culturalrelics/YHTLSJNG/Model2.html?m=${info.bs}`" -->
+
+      <!-- 本地化加上 -->
+      <!-- :src="`/YHTLSJNG/Model2.html?m=${info.bs}`" -->
+      <iframe
+        :src="`https://4dscene.4dage.com/culturalrelics/YHTLSJNG/Model2.html?m=${info.bs}`"
+        frameborder="0"
+      ></iframe>
+      <div class="txtInfo">
+        <h3>{{ info.name }}</h3>
+        <p v-show="info.age">年代：{{ info.age }}</p>
+        <p v-show="info.sort">类别：{{ info.sort }}</p>
+        <p v-show="info.size">尺寸：<span v-html="info.size"></span></p>
+        <p v-show="info.grain">质地：{{ info.grain }}</p>
+        <p v-show="info.estate">级别：{{ info.estate }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { goodsData } from "./Goods/data.js";
+import Img from "./Goods/components/Img.vue";
+export default {
+  components: { Img },
+  data() {
+    return {
+      name: this.$route.params.id,
+      type: "",
+      info: {},
+    };
+  },
+  computed: {},
+  watch: {},
+  methods: {},
+  created() {
+    const threeData = goodsData["3D"];
+    const towData = goodsData["2D"];
+
+    const threeInfo = threeData.find((v) => v.name == this.name);
+    const towInfo = towData.find((v) => v.name == this.name);
+
+    if (threeInfo) {
+      this.type = "model";
+      this.info = threeInfo;
+    } else if (towInfo) {
+      this.type = "img";
+      this.info = towInfo;
+    } else alert("地址栏参数错误!");
+  },
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.GoodsInfo {
+  width: 100%;
+  height: 100%;
+  .threeBox {
+    width: 100%;
+    height: 100%;
+    background-image: url("../assets/img/Goods/GoodsBac.png");
+    background-size: 100% 100%;
+    overflow: hidden;
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+    .txtInfo {
+      position: absolute;
+      width: 400px;
+      top: 44px;
+      left: 40px;
+      h3 {
+        color: #930909;
+        font-size: 20px;
+        line-height: 26px;
+      }
+      p {
+        margin: 15px 0;
+        color: #666666;
+        font-size: 16px;
+      }
+    }
+  }
+}
+</style>