upp

yfyc/src/router/index.js

@@ -14,19 +14,19 @@ const routes = [{
 
   // 语音讲解
   {
-    path: '/goods/audio',
+    path: '/goods/audio/:id',
     name: 'goodsAudio',
     component: () => import('../views/Goods/components/GoodsAudio.vue')
   },
   // vr看看
   {
-    path: '/goods/kankan',
+    path: '/goods/kankan/:id',
     name: 'goodsKankan',
     component: () => import('../views/Goods/components/GoodsKankan.vue')
   },
   // vr全景
   {
-    path: '/goods/vr',
+    path: '/goods/vr/:id',
     name: 'goodsVr',
     component: () => import('../views/Goods/components/GoodsVr.vue')
   },
@@ -79,7 +79,7 @@ const routes = [{
     name: 'layout',
     component: () => import('../views/Layout/index.vue'),
     children: [{
-        path: '/layout/construct',
+        path: '/layout/construct/:id',
         name: 'construct',
         meta: {
           myInd: 1,
@@ -97,7 +97,7 @@ const routes = [{
         component: () => import('../views/Construct/components/HomeList.vue')
       },
       {
-        path: '/layout/goods',
+        path: '/layout/goods/:id',
         name: 'goods',
         meta: {
           myInd: 1,
@@ -253,7 +253,7 @@ const routes = [{
       /**
        * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        */
-       {
+      {
         path: '/map-nav',
         name: 'MapNav',
         component: () => import('../views/MapNav.vue')

yfyc/src/views/Construct/components/HomeList.vue

@@ -70,7 +70,7 @@ export default {
           name: "英驻芜领事官邸旧址",
           loction: "吉和南路 26 号雨耕山顶",
         },
-        { id: 6, name: "大教堂", loction: "吉和街28 号" },
+        { id: 6, name: "天主堂", loction: "吉和街28 号" },
         { id: 7, name: "神父楼", loction: "吉和街28 号" },
         { id: 8, name: "天主教主教公署旧址", loction: "狮子山马路39号" },
         { id: 9, name: "圣母院旧址", loction: "狮子山马路39号" },
@@ -96,7 +96,7 @@ export default {
           "ended",
           () => {
             //结束
-            this.$router.push("/layout/construct");
+            this.$router.push("/layout/construct/1");
           },
           false
         );
@@ -109,7 +109,7 @@ export default {
   methods: {
     handlClick(id) {
       if (id === 1) this.videoShow = true;
-      else return Toast("敬请期待!");
+      else this.$router.push(`/layout/construct/${id}`);
     },
     // 获取列表的方法
     getList() {

yfyc/src/views/Construct/components/search.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class='ConstructSearch'>
+  <div class="ConstructSearch">
     <!-- 输入框 -->
     <!-- <div class="inputBox" @keydown.enter="searchFu()">
       <div class="searInco" @click="searchFu()">
@@ -10,8 +10,12 @@
     <!-- 文字介绍 -->
     <div class="searTxt">
       <h3>芜湖市古建一张图</h3>
-      <p>&emsp;&emsp;芜湖是全国文明城市、全国创新型试点城市、全国电子商务示范城市、全国信息消费示范城市、全国双拥模范城、国家园林城市等。</p>
-      <p>&emsp;&emsp;辖区内有方特旅游度假区、天门山、镜湖公园、鸠兹古镇、丫山风景区、马仁奇峰、松鼠小镇、广济寺、王稼祥纪念园、繁昌窑遗址等景区。</p>
+      <p>
+        &emsp;&emsp;芜湖是全国文明城市、全国创新型试点城市、全国电子商务示范城市、全国信息消费示范城市、全国双拥模范城、国家园林城市等。
+      </p>
+      <p>
+        &emsp;&emsp;辖区内有方特旅游度假区、天门山、镜湖公园、鸠兹古镇、丫山风景区、马仁奇峰、松鼠小镇、广济寺、王稼祥纪念园、繁昌窑遗址等景区。
+      </p>
     </div>
     <!-- 底部下拉 -->
     <div class="searDown">
@@ -29,7 +33,13 @@
             </div>
           </div>
           <div class="downInfo" :class="{ downInfoAc: item.done }">
-            <div @click="$router.push('/layout/goods')" v-for="val in item.children" :key="val.id">{{ val.name }}</div>
+            <div
+              @click="$router.push(`/layout/goods/${val.path}`)"
+              v-for="val in item.children"
+              :key="val.id"
+            >
+              {{ val.name }}
+            </div>
           </div>
         </div>
       </div>
@@ -39,48 +49,70 @@
 
 <script>
 export default {
-  name: 'ConstructSearch',
+  name: "ConstructSearch",
   components: {},
   data() {
     return {
-      txt: '',
+      txt: "",
       data: [
-        { id: 1, name: '全部', done: false, children: [{ id: 1001, name: '芜湖老海关' }] },
-        { id: 2, name: '镜湖', done: false, children: [{ id: 1001, name: '芜湖老海关' }] },
-        { id: 3, name: '鸠江', done: false, children: [] },
-        { id: 4, name: '弋江', done: false, children: [] },
-        { id: 5, name: '湾沚', done: false, children: [] },
-        { id: 6, name: '繁昌', done: false, children: [] },
-      ]
+        {
+          id: 1,
+          name: "全部",
+          done: false,
+          children: [
+            { id: 1001, name: "老芜湖海关旧址", path: 1 },
+            { id: 1002, name: "英驻芜领事署旧址", path: 2 },
+            { id: 1003, name: "总税务司公所旧址", path: 3 },
+            { id: 1004, name: "洋员帮办楼旧址", path: 4 },
+            { id: 1005, name: "英驻芜领事官邸旧址", path: 5 },
+            { id: 1006, name: "天主堂", path: 6 },
+            { id: 1007, name: "神父楼", path: 7 },
+            { id: 1008, name: "天主教主教公署旧址", path: 8 },
+            { id: 1009, name: "圣母院旧址", path: 9 },
+            { id: 1010, name: "天主教修士楼", path: 10 },
+            { id: 1011, name: "内思高级工业职业学校旧址", path: 11 },
+            { id: 1012, name: "博仁堂", path: 12 },
+            { id: 1013, name: "义德堂", path: 13 },
+            { id: 1014, name: "经方堂", path: 14 },
+            { id: 1015, name: "广济寺塔", path: 15 },
+          ],
+        },
+        {
+          id: 2,
+          name: "镜湖",
+          done: false,
+          children: [{ id: 1001, name: "芜湖老海关", path: 1 }],
+        },
+        { id: 3, name: "鸠江", done: false, children: [] },
+        { id: 4, name: "弋江", done: false, children: [] },
+        { id: 5, name: "湾沚", done: false, children: [] },
+        { id: 6, name: "繁昌", done: false, children: [] },
+      ],
     };
   },
   computed: {},
   watch: {},
   methods: {
     searchFu() {
-      console.log('---------');
-    }
-  },
-  created() {
-
+      console.log("---------");
+    },
   },
-  mounted() {
-
-  },
-  beforeCreate() { }, //生命周期 - 创建之前
-  beforeMount() { }, //生命周期 - 挂载之前
-  beforeUpdate() { }, //生命周期 - 更新之前
-  updated() { }, //生命周期 - 更新之后
-  beforeDestroy() { }, //生命周期 - 销毁之前
-  destroyed() { }, //生命周期 - 销毁完成
-  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
-}
+  created() {},
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
 </script>
 <style lang='less' scoped>
 .ConstructSearch {
   width: 75%;
   height: 100%;
-  background-image: url('../../../assets/img/construct/searchBac.png');
+  background-image: url("../../../assets/img/construct/searchBac.png");
   background-size: 100% 100%;
   padding-top: 10px;
 
@@ -91,7 +123,7 @@ export default {
     position: relative;
 
     .searInco {
-      color: #A0A0A0;
+      color: #a0a0a0;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -171,7 +203,7 @@ export default {
             width: 30px;
             height: 24px;
             border-radius: 5px;
-            background-color: #ECB1B8;
+            background-color: #ecb1b8;
             text-align: center;
             line-height: 24px;
             color: #fff;
@@ -183,8 +215,8 @@ export default {
         }
 
         .downInfo {
-          &>div {
-            transition: height .3s;
+          & > div {
+            transition: height 0.3s;
             padding-left: 40px;
             height: 0;
             line-height: 0;
@@ -194,7 +226,7 @@ export default {
         }
 
         .downInfoAc {
-          &>div {
+          & > div {
             opacity: 1;
             height: 30px;
             line-height: 30px;

yfyc/src/views/Construct/index.vue

@@ -1,11 +1,8 @@
 <template>
   <div class="Construct">
     <!-- 模型的嵌套盒子 -->
-    <div class="ifrBox">
-      <iframe
-        src="https://4dscene.4dage.com/culturalrelics/YFYCModel/index.html#/"
-        frameborder="0"
-      ></iframe>
+    <div class="ifrBox" v-if="unityUrl">
+      <iframe :src="unityUrl" frameborder="0"></iframe>
     </div>
     <!-- 左上的场景选择 -->
     <div class="vrChange" @click="vrShow = true">
@@ -31,7 +28,7 @@
           <div class="swiper-wrapper">
             <div
               class="swiper-slide"
-              @click="handlClick"
+              @click="handlClick(item.id)"
               v-for="item in data"
               :key="item.id"
             >
@@ -49,60 +46,94 @@
     </div>
 
     <!-- 进入景点详情的按钮 -->
-    <div class="toInfo" @click="$router.push('/layout/goods')">
+    <div class="toInfo" @click="$router.push(`/layout/goods/${Uid}`)">
       <img src="../../assets/img/construct/infoBtn.png" alt="" />
     </div>
   </div>
 </template>
 
 <script>
-import { Toast } from "vant";
+const unityUrlObj = {
+  1: "https://4dscene.4dage.com/culturalrelics/YFYCModel/index.html#/",
+  2: "https://4dscene.4dage.com/culturalrelics/YFYCModel/index2.html#/",
+};
+const dataAll = [
+  { id: 1, name: "老芜湖海关旧址", loction: "滨江公园内" },
+  { id: 2, name: "英驻芜领事署旧址", loction: "范罗山" },
+  { id: 3, name: "总税务司公所旧址", loction: "范罗山" },
+  { id: 4, name: "洋员帮办楼旧址", loction: "范罗山" },
+  {
+    id: 5,
+    name: "英驻芜领事官邸旧址",
+    loction: "吉和南路 26 号雨耕山顶",
+  },
+  { id: 6, name: "天主堂", loction: "吉和街28 号" },
+  { id: 7, name: "神父楼", loction: "吉和街28 号" },
+  { id: 8, name: "天主教主教公署旧址", loction: "狮子山马路39号" },
+  { id: 9, name: "圣母院旧址", loction: "狮子山马路39号" },
+  { id: 10, name: "天主教修士楼", loction: "大官山顶" },
+  { id: 11, name: "内思高级工业职业学校旧址", loction: "吉和街26号" },
+  { id: 12, name: "博仁堂", loction: "安师大附属外国语学校中学内" },
+  { id: 13, name: "义德堂", loction: "安师大附属外国语学校中学内" },
+  { id: 14, name: "经方堂", loction: "安师大附属外国语学校中学内" },
+  { id: 15, name: "广济寺塔", loction: "广济寺内" },
+];
+
 import Search from "./components/search.vue";
 import Swiper from "../../assets/libs/swiper.js";
 export default {
   components: { Search },
+  name: "RK-id",
   data() {
     return {
+      Uid: Number(this.$route.params.id),
       vrShow: false,
       searchShow: false,
-      data: [
-        // { id: 1, name: "老芜湖海关旧址", loction: "滨江公园内" },
-        { id: 2, name: "英驻芜领事署旧址", loction: "范罗山" },
-        { id: 3, name: "总税务司公所旧址", loction: "范罗山" },
-        { id: 4, name: "洋员帮办楼旧址", loction: "范罗山" },
-        {
-          id: 5,
-          name: "英驻芜领事官邸旧址",
-          loction: "吉和南路 26 号雨耕山顶",
-        },
-        { id: 6, name: "大教堂", loction: "吉和街28 号" },
-        { id: 7, name: "神父楼", loction: "吉和街28 号" },
-        { id: 8, name: "天主教主教公署旧址", loction: "狮子山马路39号" },
-        { id: 9, name: "圣母院旧址", loction: "狮子山马路39号" },
-        { id: 10, name: "天主教修士楼", loction: "大官山顶" },
-        { id: 11, name: "内思高级工业职业学校旧址", loction: "吉和街26号" },
-        { id: 12, name: "博仁堂", loction: "安师大附属外国语学校中学内" },
-        { id: 13, name: "义德堂", loction: "安师大附属外国语学校中学内" },
-        { id: 14, name: "经方堂", loction: "安师大附属外国语学校中学内" },
-        { id: 15, name: "广济寺塔", loction: "广济寺内" },
-      ],
+
+      data: [],
+      unityUrl: "",
+      mySwiper: null,
     };
   },
   computed: {},
-  watch: {},
+  watch: {
+    $route(val) {
+      let id = val.params.id;
+      this.Uid = Number(id);
+      this.unityUrl = unityUrlObj[id] || "";
+      this.data = dataAll.filter((v) => v.id != id);
+      // 轮播图重新生成
+      setTimeout(() => {
+        this.mySwiper = new Swiper(".Construct .swiper-container", {
+          slidesPerView: 1.4,
+          spaceBetween: 30,
+          centeredSlides: true,
+          initialSlide: 0,
+        });
+      }, 200);
+    },
+  },
   methods: {
-    handlClick() {
-      Toast("敬请期待!");
+    handlClick(id) {
+      this.vrShow = false;
+      this.$router.push(`/layout/construct/${id}`);
     },
   },
   created() {},
   mounted() {
-    new Swiper(".Construct .swiper-container", {
-      slidesPerView: 1.4,
-      spaceBetween: 30,
-      centeredSlides: true,
-      initialSlide: 0,
-    });
+    // ------
+    let id = this.Uid;
+    this.unityUrl = unityUrlObj[id] || "";
+    this.data = dataAll.filter((v) => v.id != id);
+
+    setTimeout(() => {
+      this.mySwiper = new Swiper(".Construct .swiper-container", {
+        slidesPerView: 1.4,
+        spaceBetween: 30,
+        centeredSlides: true,
+        initialSlide: 0,
+      });
+    }, 200);
   },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前

yfyc/src/views/Goods/components/GoodsAudio.vue

@@ -1,6 +1,10 @@
 <template>
-  <div class='GoodsAudio'>
-    <img class="topImg" src="../../../assets/img/goods/title.png" alt="">
+  <div class="GoodsAudio">
+    <img
+      class="topImg"
+      :src="require(`@/assets/img/goods/${Uid}/audio.png`)"
+      alt=""
+    />
     <div class="titleInco">
       <van-icon name="arrow-down" />
     </div>
@@ -8,60 +12,40 @@
     <!-- 音乐盒子 -->
     <div class="mainBox">
       <div class="audioBox">
-        <Audio audioSrc='demo.mp3' />
+        <Audio :audioSrc="`audio/${Uid}.mp3`" />
       </div>
     </div>
     <!-- 文字介绍 -->
-    <div class="audioTxt">
-      <p>&emsp;&emsp;讲解： 中江塔耸立于青弋江与长江交汇处的江堤上，始建于明万历四十六年（1618年），但“工未竣”，“折损二层”。</p>
-      <p>&emsp;&emsp;清代康熙八年（1669年）“重建，乃落成”。</p>
-      <p>&emsp;&emsp;一、二层建设于明代，三、四、五层建设于清代，前后跨越了60年。</p>
-      <p>&emsp;&emsp;形成五层八角风水塔，“以镇水口”。</p>
-      <p>&emsp;&emsp;塔为砖石结构，高35米，当时建成的时候，中江塔是有刹有檐的。</p>
-      <p>&emsp;&emsp;每层每面均有一门，门两边各有一窗，专供夜间置灯，导航来往船只，故中江塔堪称为芜湖地域位置的标志。</p>
-      <p>&emsp;&emsp;古时候，人们把长江的从九江至京口（镇江）一段，称为中江，而芜湖适得其处，故有中江之名；又说古有中江，东通太湖，西流长江，芜湖古地即在中江畔，因而称芜湖为中江，中江塔因此得名。</p>
-      <p>&emsp;&emsp;早在东晋、南北朝时期，该处的小塔就成了长江、青弋江两江船只夜航的灯塔，也是船只进入芜湖的航标。</p>
-      <p>&emsp;&emsp;楼阁式砖木结构风水宝塔，八角五层，每边长4.1米。塔高43.7米，其中塔刹高10.16米。每层四窗，错置相间，每窗左右各设一灯龛。</p>
-      <p>&emsp;&emsp;塔内结构一至二层为壁内折上式，石梯盘绕。三至五层为空筒式，木梯依壁。</p>
-      <p>&emsp;&emsp;门窗塔壁，精雕细刻。墙面各边均嵌有砖雕，尤以1～2层圆形欹柱两侧的砖雕雀替最为突出。</p>
-      <p>&emsp;&emsp;1987年经省考古研究所组织维修，恢复了塔的出檐部分。八个角用转角斗拱支承老戗出戗，出檐深远。</p>
-      <p>&emsp;&emsp;八个面补间斗拱用两朵支承檐桁出挑，椽子和飞子上钉望板，上覆鸳鸯瓦。</p>
-      <p>&emsp;&emsp;修复后的中江塔巍然壮观，登临塔顶，万千景象，尽收眼底。</p>
-      <p>&emsp;&emsp;中江塔的外形与一般佛塔不同，除顶层略有收缩外，余层几乎呈立柱形。塔顶浑圆，所以人们誉之为“中江一柱”。</p>
-      <p>&emsp;&emsp;清初萧尺木《太平山水图》组图中《范罗山图》左下角处，就绘制了中江塔。</p>
-      <p>&emsp;&emsp;夜间从一门二窗射出光亮，为往来船只夜间导航，这也是中国式的“灯塔”，告诉过往船只芜湖到了。</p>
-    </div>
+    <div class="audioTxt" v-html="myInfo"></div>
   </div>
 </template>
 
 <script>
-import Audio from '../../../components/Audio.vue'
+import { audioInfo } from "../data";
+import Audio from "../../../components/Audio.vue";
 export default {
   components: { Audio },
   data() {
     return {
-
+      Uid: Number(this.$route.params.id),
+      myInfo: "",
     };
   },
   computed: {},
   watch: {},
-  methods: {
-
-  },
-  created() {
-
-  },
+  methods: {},
+  created() {},
   mounted() {
-
+    this.myInfo = audioInfo[this.Uid] || "";
   },
-  beforeCreate() { }, //生命周期 - 创建之前
-  beforeMount() { }, //生命周期 - 挂载之前
-  beforeUpdate() { }, //生命周期 - 更新之前
-  updated() { }, //生命周期 - 更新之后
-  beforeDestroy() { }, //生命周期 - 销毁之前
-  destroyed() { }, //生命周期 - 销毁完成
-  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
-}
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
 </script>
 <style lang='less' scoped>
 .GoodsAudio {
@@ -104,7 +88,7 @@ export default {
     padding: 30px 40px;
     font-size: 14px;
     color: #919193;
-    &>p{
+    & > p {
       line-height: 20px;
       margin-bottom: 10px;
     }

yfyc/src/views/Goods/components/GoodsKankan.vue

@@ -1,37 +1,35 @@
 <template>
-  <div class='goodsKankan'>
-    <iframe src="https://www.4dkankan.com/spc.html?m=KJ-6yx95uCkTj" frameborder="0"></iframe>
+  <div class="goodsKankan">
+    <iframe v-if="src" :src="src" frameborder="0"></iframe>
   </div>
 </template>
 
 <script>
-
+import { kankanInfo } from "../data";
 export default {
-  name: 'goodsKankan',
+  name: "goodsKankan",
   components: {},
   data() {
     return {
-
+      Uid: Number(this.$route.params.id),
+      src: "",
     };
   },
   computed: {},
   watch: {},
-  methods: {
-
-  },
-  created() {
-  },
+  methods: {},
+  created() {},
   mounted() {
-
+    this.src = kankanInfo[this.Uid] || "";
   },
-  beforeCreate() { }, //生命周期 - 创建之前
-  beforeMount() { }, //生命周期 - 挂载之前
-  beforeUpdate() { }, //生命周期 - 更新之前
-  updated() { }, //生命周期 - 更新之后
-  beforeDestroy() { }, //生命周期 - 销毁之前
-  destroyed() { }, //生命周期 - 销毁完成
-  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
-}
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
 </script>
 <style lang='less' scoped>
 .goodsKankan {

yfyc/src/views/Goods/components/GoodsVr.vue

@@ -1,37 +1,35 @@
 <template>
-  <div class='GoodsVr'>
-    <iframe src="https://zzbbh.4dage.com/SWKK/show.html?id=WK1592095910366638080" frameborder="0"></iframe>
+  <div class="GoodsVr">
+    <iframe v-if="src" :src="src" frameborder="0"></iframe>
   </div>
 </template>
 
 <script>
-
+import { vrInfo } from "../data";
 export default {
-  name: 'GoodsVr',
+  name: "GoodsVr",
   components: {},
   data() {
     return {
-
+      Uid: Number(this.$route.params.id),
+      src: "",
     };
   },
   computed: {},
   watch: {},
-  methods: {
-
-  },
-  created() {
-  },
+  methods: {},
+  created() {},
   mounted() {
-
+    this.src = vrInfo[this.Uid] || "";
   },
-  beforeCreate() { }, //生命周期 - 创建之前
-  beforeMount() { }, //生命周期 - 挂载之前
-  beforeUpdate() { }, //生命周期 - 更新之前
-  updated() { }, //生命周期 - 更新之后
-  beforeDestroy() { }, //生命周期 - 销毁之前
-  destroyed() { }, //生命周期 - 销毁完成
-  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
-}
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
 </script>
 <style lang='less' scoped>
 .GoodsVr {

yfyc/src/views/Goods/index.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="Goods">
+  <div class="Goods" v-if="myInfo.swData">
     <!-- 图片盒子 -->
     <div class="title">
       <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
         <van-swipe-item
-          @click="lookImg(require(`@/assets/img/goods/sw1/${i}.png`))"
-          v-for="i in 3"
+          @click="lookImg(require(`@/assets/img/goods/${Uid}/sw${i}.png`))"
+          v-for="i in myInfo.swData"
           :key="i"
         >
           <img
             class="bacImg"
-            v-lazy="require(`@/assets/img/goods/sw1/${i}.png`)"
+            v-lazy="require(`@/assets/img/goods/${Uid}/sw${i}.png`)"
             alt=""
           />
         </van-swipe-item>
@@ -36,10 +36,8 @@
     </div>
     <!-- 介绍盒子1 -->
     <div class="txtBox">
-      <div class="txtName">老芜湖海关</div>
-      <p>
-        &emsp;&emsp;海关关廨大楼，芜湖人称为“老芜湖海关”，2004年，被安徽省政府公布为第五批省级文物保护单位，2019年10月被国务院公布为全国重点文物保护单位。如今，沿着十里江湾人民公园的沿江步道，可看见老海关大楼矗立在江边。
-      </p>
+      <div class="txtName">{{ myInfo.txtName }}</div>
+      <p v-html="myInfo.txt"></p>
     </div>
     <!-- 中间的8个模块 -->
     <div class="skipBtnBox">
@@ -47,7 +45,7 @@
         class="skipRow"
         v-for="item in skipData"
         :key="item.id"
-        @click="toPage(item.path)"
+        @click="toPage(item.path, item.id)"
       >
         <img :src="require(`@/assets/img/goods/skip${item.id}.png`)" alt="" />
         <p>{{ item.name }}</p>
@@ -58,31 +56,31 @@
     <div class="txtBox">
       <div class="txt2Row">
         <div class="txt2RowLL">保护级别</div>
-        <div class="txt2RowRR">不可移动革命文物，优秀历史建筑</div>
+        <div class="txt2RowRR">{{ myInfo.txtF1 }}</div>
       </div>
       <div class="txt2Row">
         <div class="txt2RowLL">建筑地址</div>
-        <div class="txt2RowRR">滨江北路芜湖滨江公园内</div>
+        <div class="txt2RowRR">{{ myInfo.txtF2 }}</div>
       </div>
       <div class="txt2Row">
         <div class="txt2RowLL">开放时间</div>
-        <div class="txt2RowRR">周一至周五09：00-21：00</div>
+        <div class="txt2RowRR">{{ myInfo.txtF3 }}</div>
       </div>
       <div class="txt2Row">
         <div class="txt2RowLL">门票信息</div>
-        <div class="txt2RowRR">免费</div>
+        <div class="txt2RowRR">{{ myInfo.txtF4 }}</div>
       </div>
     </div>
 
     <!-- 视频介绍 -->
-    <div class="txtNameMain">视频介绍</div>
-    <div class="videoBox">
+    <div class="txtNameMain" v-if="Uid == 1">视频介绍</div>
+    <div class="videoBox" v-if="Uid == 1">
       <div class="videoShade" v-show="!videoPlay" @click="videoPlayFu"></div>
       <video src="../../assets/media/loop.mp4" controls></video>
     </div>
 
     <!-- 景点介绍 -->
-    <div class="txtNameMain">景点介绍</div>
+    <div class="txtNameMain" v-if="Uid == 1">景点介绍</div>
     <!-- <div class="IntroduceBox">
       <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
         <van-swipe-item
@@ -99,7 +97,7 @@
       </van-swipe>
     </div> -->
 
-    <div class="IntroduceTxt">
+    <div class="IntroduceTxt" v-if="Uid == 1">
       <h1>01</h1>
       <h2>建筑有话说</h2>
       <h3>欧式新古典主义的典范</h3>
@@ -280,6 +278,7 @@
 </template>
 
 <script>
+import { infoData, kankanInfo, vrInfo } from "./data";
 import { Toast } from "vant";
 
 import { ImagePreview } from "vant";
@@ -300,14 +299,27 @@ export default {
         // { id: 8, name: '游玩指引', path: '/goods/play' },
       ],
       videoPlay: false,
+      Uid: Number(this.$route.params.id),
+      myInfo: {},
     };
   },
   computed: {},
-  watch: {},
+  watch: {
+    $route(val) {
+      let id = val.params.id;
+      this.Uid = Number(id);
+      this.myInfo = infoData[id] || {};
+    },
+  },
   methods: {
-    toPage(path) {
+    toPage(path, id) {
       if (!path) return Toast("敬请期待!");
-      this.$router.push(path);
+      if (id === 2) {
+        if (!kankanInfo[this.Uid]) return Toast("敬请期待!");
+      } else if (id === 3) {
+        if (!vrInfo[this.Uid]) return Toast("敬请期待!");
+      }
+      this.$router.push(path + "/" + this.Uid);
     },
 
     videoPlayFu() {
@@ -325,7 +337,10 @@ export default {
   created() {
     window.document.title = "芜湖老海关";
   },
-  mounted() {},
+  mounted() {
+    let id = this.Uid;
+    this.myInfo = infoData[id] || {};
+  },
   beforeCreate() {}, //生命周期 - 创建之前
   beforeMount() {}, //生命周期 - 挂载之前
   beforeUpdate() {}, //生命周期 - 更新之前
@@ -478,7 +493,9 @@ export default {
       color: #252525;
       font-size: 14px;
       line-height: 22px;
-      margin-top: 15px;
+      margin-top: 10px;
+      max-height: 130px;
+      overflow-y: auto;
     }
   }