Etusivu Tutki Apua
Rekisteröidy Kirjaudu sisään
shaogen1995
/
YFYC-H5
1
0
Fork 0
Tiedostot Ongelmat 0 Pull-pyynnöt 0 Wiki
Selaa lähdekoodia

up

shaogen1995 2 vuotta sitten
vanhempi
c3a30189dc
commit
340a5e73d9
26 muutettua tiedostoa jossa 890 lisäystä ja 60 poistoa
Jaettu näkymä Näytä diff tilastot
  1. BIN
      public/demo.mp3
  2. 1 0
      public/index.html
  3. 4 0
      public/jquery-2.1.1.min.js
  4. BIN
      src/assets/img/goods/audio1.png
  5. BIN
      src/assets/img/goods/audio2.png
  6. BIN
      src/assets/img/goods/play1.png
  7. BIN
      src/assets/img/goods/play2.png
  8. BIN
      src/assets/img/goods/play3.png
  9. BIN
      src/assets/img/interact/issue.png
  10. BIN
      src/assets/img/interact/row1.png
  11. BIN
      src/assets/img/interact/row2.png
  12. BIN
      src/assets/img/interact/row3.png
  13. BIN
      src/assets/img/interact/row4.png
  14. BIN
      src/assets/img/interact/user.png
  15. 1 1
      src/assets/my-reset.css
  16. 216 0
      src/components/Audio.vue
  17. 27 3
      src/router/index.js
  18. 1 1
      src/views/Construct/components/search.vue
  19. 104 26
      src/views/Goods/components/GoodsAudio.vue
  20. 46 0
      src/views/Goods/components/GoodsKankan.vue
  21. 107 0
      src/views/Goods/components/GoodsMap.vue
  22. 88 0
      src/views/Goods/components/GoodsPlay.vue
  23. 46 0
      src/views/Goods/components/GoodsVr.vue
  24. 4 4
      src/views/Goods/index.vue
  25. 37 0
      src/views/Interact/components/InteractIssue.vue
  26. 208 25
      src/views/Interact/index.vue

BIN
public/demo.mp3
Näytä tiedosto


+ 1 - 0
public/index.html
Näytä tiedosto 

@@ -5,6 +5,7 @@
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
+    <script src="./jquery-2.1.1.min.js"></script>
 
     <title>一房一册</title>
 
   </head>
 
   <body>

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 4 - 0
public/jquery-2.1.1.min.js


BIN
src/assets/img/goods/audio1.png
Näytä tiedosto


BIN
src/assets/img/goods/audio2.png
Näytä tiedosto


BIN
src/assets/img/goods/play1.png
Näytä tiedosto


BIN
src/assets/img/goods/play2.png
Näytä tiedosto


BIN
src/assets/img/goods/play3.png
Näytä tiedosto


BIN
src/assets/img/interact/issue.png
Näytä tiedosto


BIN
src/assets/img/interact/row1.png
Näytä tiedosto


BIN
src/assets/img/interact/row2.png
Näytä tiedosto


BIN
src/assets/img/interact/row3.png
Näytä tiedosto


BIN
src/assets/img/interact/row4.png
Näytä tiedosto


BIN
src/assets/img/interact/user.png
Näytä tiedosto


+ 1 - 1
src/assets/my-reset.css
Näytä tiedosto 

@@ -8,7 +8,7 @@
 
 

 html {

   overflow: hidden;

-  touch-action: none;

+  /* touch-action: none; */

   scroll-behavior: smooth; /* MDN: When this property is specified on the root element, it applies to the viewport instead. This property specified on the body element will not propagate to the viewport.(???) */

   height: 100%;

 }

+ 216 - 0
src/components/Audio.vue
Näytä tiedosto 

@@ -0,0 +1,216 @@
 
+<template>
 
+  <div class="Audio">
 
+    <audio id="audioTag" :src="audioSrc"></audio>
 
+    <div class="audiocon">
 
+      <!-- 按钮 -->
 
+      <div class="leftBtn">
 
+        <div class="play">
 
+          <img @click="bofang" :src="require(`@/assets/img/goods/${isPlay ? 'audio2' : 'audio1'}.png`)" alt="" />
 
+        </div>
 
+      </div>
 
+      <div class="adcon">
 
+        <div class="bar">
 
+          <div class="activeLine" @click="seekTime">
 
+            <div :style="{ width: currentPosi + '%' }" class="dot"></div>
 
+          </div>
 
+        </div>
 
+        <div class="time">
 
+          <span>{{ time }}</span><span>&nbsp;/&nbsp;{{ allTime }}</span>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  name: "Audio",
 
+  props: {
 
+    audioSrc: {
 
+      type: String,
 
+    },
 
+  },
 
+  data() {
 
+    return {
 
+      active: 0,
 
+      time: 0,
 
+      _audio: "",
 
+      isPlay: this.isMobile,
 
+      currentPosi: 0,
 
+      allTime: 0,
 
+    };
 
+  },
 
+  methods: {
 
+    bofang() {
 
+      if (this._audio.paused) {
 
+        this._audio.play();
 
+        this.isPlay = true;
 
+      } else {
 
+        this._audio.pause();
 
+        this.isPlay = false;
 
+      }
 
+    },
 
+    transTime(time) {
 
+      var duration = parseInt(time);
 
+      var minute = parseInt(duration / 60);
 
+      var sec = (duration % 60) + "";
 
+      var isM0 = ":";
 
+      if (minute == 0) {
 
+        minute = "00";
 
+      } else if (minute < 10) {
 
+        minute = "0" + minute;
 
+      }
 
+      if (sec.length == 1) {
 
+        sec = "0" + sec;
 
+      }
 
+      return minute + isM0 + sec;
 
+    },
 
+    updateProgress() {
 
+      this.currentPosi = (this._audio.currentTime / this._audio.duration) * 100;
 
+      this.time = this.transTime(this._audio.currentTime);
 
+    },
 
+
 
+    audioEnded() {
 
+      this._audio.currentTime = 0;
 
+      this._audio.pause();
 
+      this.isPlay = false;
 
+    },
 
+
 
+    seekTime(e) {
 
+      var rate = e.offsetX / e.target.clientWidth;
 
+      this._audio.currentTime = this._audio.duration * rate;
 
+      this.updateProgress();
 
+    },
 
+  },
 
+  mounted() {
 
+    this.$nextTick(() => {
 
+      this._audio = $(`#audioTag`)[0];
 
+      $(`#audioTag`).on("loadedmetadata", (e) => {
 
+        this.time = this.isMobile
 
+          ? "00:00"
 
+          : this.transTime(e.currentTarget.duration);
 
+        this.allTime = this.transTime(e.currentTarget.duration);
 
+        this._audio.play();
 
+        this.isPlay = true;
 
+      });
 
+
 
+      document.addEventListener(
 
+        "WeixinJSBridgeReady",
 
+        function () {
 
+          this._audio.play();
 
+        },
 
+        false
 
+      );
 
+
 
+      $(`#audioTag`).on("timeupdate", () => {
 
+        this.updateProgress();
 
+      });
 
+
 
+      $(`#audioTag`).on("timeupdate", () => {
 
+        this.updateProgress();
 
+      });
 
+
 
+      $(`#audioTag`).on("ended", () => {
 
+        this.audioEnded();
 
+      });
 
+    });
 
+  },
 
+  activated() {
 
+    this.isPlay = this.isMobile;
 
+  },
 
+};
 
+</script>
 
+
 
+<style lang="less" scoped>
 
+.Audio {
 
+  width: 100%;
 
+  height: 100%;
 
+  padding: 0 15px;
 
+
 
+  .audiocon {
 
+    display: flex;
 
+    align-items: center;
 
+    width: 100%;
 
+    height: 100%;
 
+    justify-content: space-between;
 
+  }
 
+
 
+  .leftBtn {
 
+    width: 30px;
 
+    height: 30px;
 
+    img {
 
+      width: 100%;
 
+    }
 
+  }
 
+
 
+  .adcon {
 
+    position: relative;
 
+    z-index: 10;
 
+    width: calc(100% - 46px);
 
+    height: 100%;
 
+    display: flex;
 
+    align-items: center;
 
+
 
+    .bar {
 
+      width: calc(100% - 80px);
 
+      position: relative;
 
+      height: 100%;
 
+      display: flex;
 
+      align-items: center;
 
+
 
+      .activeLine {
 
+        position: absolute;
 
+        top: 0;
 
+        left: 0px;
 
+        z-index: 10;
 
+        width: 96%;
 
+        height: 100%;
 
+        cursor: pointer;
 
+
 
+        &::before {
 
+          content: "";
 
+          position: absolute;
 
+          width: 100%;
 
+          height: 4px;
 
+          top: 50%;
 
+          left: 0;
 
+          transform: translateY(-50%);
 
+          border-radius: 4px;
 
+
 
+          background-color: #FFB199;
 
+        }
 
+      }
 
+
 
+      .dot {
 
+        border-radius: 4px;
 
+        z-index: 11;
 
+        pointer-events: none;
 
+        position: absolute;
 
+        height: 4px;
 
+        top: 50%;
 
+        left: 0px;
 
+        transform: translateY(-50%);
 
+        background-color: #FF615C;
 
+
 
+        &::before {
 
+          content: "";
 
+          position: absolute;
 
+          top: -3px;
 
+          right: -3px;
 
+          width: 10px;
 
+          height: 10px;
 
+          border-radius: 50%;
 
+          background-color: #FF615C;
 
+        }
 
+      }
 
+    }
 
+
 
+    .time {
 
+      width: 80px;
 
+      font-size: 14px;
 
+      color: #999999;
 
+      display: flex;
 
+    }
 
+  }
 
+}
 
+</style>

+ 27 - 3
src/router/index.js
Näytä tiedosto 

@@ -3,8 +3,7 @@ import VueRouter from 'vue-router'
 
 
 Vue.use(VueRouter)
 
 
-const routes = [
 
-  {
 
+const routes = [{
 
     path: '/',
 
     name: 'home',
 
     component: () => import('../views/Home/index.vue'),
 
@@ -18,6 +17,30 @@ const routes = [
 
     name: 'goodsAudio',
 
     component: () => import('../views/Goods/components/GoodsAudio.vue')
 
   },
 
+  // vr看看
 
+  {
 
+    path: '/goods/kankan',
 
+    name: 'goodsKankan',
 
+    component: () => import('../views/Goods/components/GoodsKankan.vue')
 
+  },
 
+  // vr全景
 
+  {
 
+    path: '/goods/vr',
 
+    name: 'goodsVr',
 
+    component: () => import('../views/Goods/components/GoodsVr.vue')
 
+  },
 
+  // 景点导航
 
+  {
 
+    path: '/goods/map',
 
+    name: 'goodsMap',
 
+    component: () => import('../views/Goods/components/GoodsMap.vue')
 
+  },
 
+  // 游玩指引
 
+  {
 
+    path: '/goods/play',
 
+    name: 'goodsPlay',
 
+    component: () => import('../views/Goods/components/GoodsPlay.vue')
 
+  },
 
   {
 
     path: '/layout',
 
     name: 'layout',
 
@@ -60,7 +83,8 @@ const routes = [
 
         path: '/layout/interact',
 
         name: 'interact',
 
         meta: {
 
-          myInd: 3
 
+          myInd: 3,
 
+          myTitle:'悦·互动'
 
         },
 
         component: () => import('../views/Interact/index.vue')
 
       },

+ 1 - 1
src/views/Construct/components/search.vue
Näytä tiedosto 

@@ -1,7 +1,7 @@
 
 <template>
 
   <div class='ConstructSearch'>
 
     <!-- 输入框 -->
 
-    <div class="inputBox" @keydown="searchFu()">
 
+    <div class="inputBox" @keydown.enter="searchFu()">
 
       <div class="searInco" @click="searchFu()">
 
         <van-icon name="search" />
 
       </div>

+ 104 - 26
src/views/Goods/components/GoodsAudio.vue
Näytä tiedosto 

@@ -1,36 +1,114 @@
 
 <template>
 
-<div class='GoodsAudio'>GoodsAudio</div>
 
+  <div class='GoodsAudio'>
 
+    <img class="topImg" src="../../../assets/img/goods/title.png" alt="">
 
+    <div class="titleInco">
 
+      <van-icon name="arrow-down" />
 
+    </div>
 
+    <div class="titleTxt">语音导览</div>
 
+    <!-- 音乐盒子 -->
 
+    <div class="mainBox">
 
+      <div class="audioBox">
 
+        <Audio audioSrc='demo.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>
 
 </template>
 
 
 <script>
 
-
 
+import Audio from '../../../components/Audio.vue'
 
 export default {
 
-components: {},
 
-data() {
 
-return {
 
-
 
-};
 
-},
 
-computed: {},
 
-watch: {},
 
-methods: {
 
-
 
-},
 
-created() {
 
-
 
-},
 
-mounted() {
 
-
 
-},
 
-beforeCreate() {}, //生命周期 - 创建之前
 
-beforeMount() {}, //生命周期 - 挂载之前
 
-beforeUpdate() {}, //生命周期 - 更新之前
 
-updated() {}, //生命周期 - 更新之后
 
-beforeDestroy() {}, //生命周期 - 销毁之前
 
-destroyed() {}, //生命周期 - 销毁完成
 
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 
+  components: { Audio },
 
+  data() {
 
+    return {
 
+
 
+    };
 
+  },
 
+  computed: {},
 
+  watch: {},
 
+  methods: {
 
+
 
+  },
 
+  created() {
 
+
 
+  },
 
+  mounted() {
 
+
 
+  },
 
+  beforeCreate() { }, //生命周期 - 创建之前
 
+  beforeMount() { }, //生命周期 - 挂载之前
 
+  beforeUpdate() { }, //生命周期 - 更新之前
 
+  updated() { }, //生命周期 - 更新之后
 
+  beforeDestroy() { }, //生命周期 - 销毁之前
 
+  destroyed() { }, //生命周期 - 销毁完成
 
+  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
 
 }
 
 </script>
 
 <style lang='less' scoped>
 
+.GoodsAudio {
 
+  width: 100%;
 
+  height: 100%;
 
+  overflow-y: auto;
 
+
 
+  .topImg {
 
+    width: 100%;
 
+    height: 200px;
 
+    object-fit: cover;
 
+  }
 
 
+  .titleInco {
 
+    text-align: center;
 
+    font-size: 36px;
 
+    color: #bcbcbe;
 
+  }
 
+
 
+  .titleTxt {
 
+    font-weight: 700;
 
+    font-size: 18px;
 
+    text-align: center;
 
+    margin: 4px 0 20px;
 
+  }
 
+
 
+  .mainBox {
 
+    width: 100%;
 
+    padding: 0 15px;
 
+
 
+    .audioBox {
 
+      border-radius: 5px;
 
+      width: 100%;
 
+      height: 50px;
 
+      box-shadow: 0px 1px 3px 0px #ffb199;
 
+    }
 
+  }
 
+
 
+  .audioTxt {
 
+    padding: 30px 40px;
 
+    font-size: 14px;
 
+    color: #919193;
 
+    &>p{
 
+      line-height: 20px;
 
+      margin-bottom: 10px;
 
+    }
 
+  }
 
+}
 
 </style>

+ 46 - 0
src/views/Goods/components/GoodsKankan.vue
Näytä tiedosto 

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

+ 107 - 0
src/views/Goods/components/GoodsMap.vue
Näytä tiedosto 

@@ -0,0 +1,107 @@
 
+<!--  -->
 
+<template>
 
+  <div class="GoodsMap">
 
+    <div class="box">
 
+      <div id="myMap" />
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  name: "GoodsMap",
 
+  components: {},
 
+  data() {
 
+    //这里存放数据
 
+    return {
 
+      keywords: "",
 
+      arr: [],
 
+      map: {
 
+        name: "中江塔",
 
+        x: 118.363387,
 
+        y: 31.325179,
 
+      },
 
+    };
 
+  },
 
+  //监听属性 类似于data概念
 
+  computed: {},
 
+  //监控data中的数据变化
 
+  watch: {},
 
+  //方法集合
 
+  methods: {
 
+    initMap() {
 
+      window.onLoad = () => {
 
+        this.map = new AMap.Map("myMap", {
 
+          zoom: 18,
 
+          center: [118.363387, 31.325179],
 
+          // viewMode: '3D'
 
+        });
 
+        const marker = new AMap.Marker({
 
+          position: [118.363387, 31.325179], // 位置
 
+          label: {
 
+            offset: new AMap.Pixel(20, 20),
 
+            content: "点击打开高德地图",
 
+          },
 
+        });
 
+        marker.on("click", function (e) {
 
+          marker.markOnAMAP({
 
+            name: "中江塔",
 
+            position: marker.getPosition(),
 
+          });
 
+        });
 
+
 
+        this.map.add(marker); // 添加到地图
 
+        AMap.plugin("AMap.ToolBar", () => {
 
+          // 异步加载插件
 
+          const toolbar = new AMap.ToolBar();
 
+          this.map.addControl(toolbar);
 
+        });
 
+      };
 
+
 
+      const url =
 
+        "https://webapi.amap.com/maps?v=1.4.15&key=93f7bfff72aa16305db5aee4f3fd6232&callback=onLoad";
 
+
 
+      const jsapi = document.createElement("script");
 
+
 
+      jsapi.src = url;
 
+
 
+      document.head.appendChild(jsapi);
 
+    },
 
+  },
 
+  //生命周期 - 创建完成（可以访问当前this实例）
 
+  created() { 
+    window.document.title='景点导航'
 
+  },
 
+  //生命周期 - 挂载完成（可以访问DOM元素）
 
+  mounted() {
 
+    this.initMap();
 
+  },
 
+  beforeCreate() { }, //生命周期 - 创建之前
 
+  beforeMount() { }, //生命周期 - 挂载之前
 
+  beforeUpdate() { }, //生命周期 - 更新之前
 
+  updated() { }, //生命周期 - 更新之后
 
+  beforeDestroy() { }, //生命周期 - 销毁之前
 
+  destroyed() { }, //生命周期 - 销毁完成
 
+  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
 
+};
 
+</script>
 
+<style lang='less' scoped>
 
+.GoodsMap {
 
+  width: 100%;
 
+  height: 100%;
 
+  position: relative;
 
+
 
+  .box {
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+
 
+  #myMap {
 
+    width: 100%;
 
+    height: 100%;
 
+  }
 
+  /deep/.amap-marker-label{
 
+    // color: red;
 
+  }
 
+}
 
+</style>

+ 88 - 0
src/views/Goods/components/GoodsPlay.vue
Näytä tiedosto 

@@ -0,0 +1,88 @@
 
+<template>
 
+  <div class='GoodsPlay'>
 
+    <div class="txt">
 
+      <div class="tit">
 
+        <img src="../../../assets/img/goods/play1.png" alt="">
 
+        游玩时间
 
+      </div>
 
+      <p>2-6小时</p>
 
+    </div>
 
+    <div class="txt">
 
+      <div class="tit">
 
+        <img src="../../../assets/img/goods/play2.png" alt="">
 
+        交&emsp;&emsp;通
 
+      </div>
 
+      <p>中江塔位于芜湖滨江公园内，是芜湖的地标性建筑之一。 市内可以乘坐公交2路 13路 18路 22路 27路 36路 37路 41路 48路 115路到天主教堂站下，往临江桥方向步行几分钟就可以到了。
 
+      </p>
 
+    </div>
 
+    <div class="txt">
 
+      <div class="tit">
 
+        <img src="../../../assets/img/goods/play3.png" alt="">
 
+        贴&emsp;&emsp;士
 
+      </div>
 
+      <p>可以进入滨江公园观看，也可以站在站在中山桥山远观欣赏。推荐理由：中江塔始建于明万历四年，历经明清两代，历史悠久。这是一座五层八角的风水宝塔，是芜湖古城的见证，是芜湖地标之一和芜湖十景之一。
 
+      </p>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+
 
+export default {
 
+  name: 'GoodsPlay',
 
+  components: {},
 
+  data() {
 
+    return {
 
+
 
+    };
 
+  },
 
+  computed: {},
 
+  watch: {},
 
+  methods: {
 
+
 
+  },
 
+  created() {
 
+    window.document.title = '游玩指引'
 
+  },
 
+  mounted() {
 
+
 
+  },
 
+  beforeCreate() { }, //生命周期 - 创建之前
 
+  beforeMount() { }, //生命周期 - 挂载之前
 
+  beforeUpdate() { }, //生命周期 - 更新之前
 
+  updated() { }, //生命周期 - 更新之后
 
+  beforeDestroy() { }, //生命周期 - 销毁之前
 
+  destroyed() { }, //生命周期 - 销毁完成
 
+  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
 
+}
 
+</script>
 
+<style lang='less' scoped>
 
+.GoodsPlay {
 
+  width: 100%;
 
+  height: 100%;
 
+  padding: 30px 15px;
 
+
 
+  .txt {
 
+    margin-bottom: 30px;
 
+
 
+    .tit {
 
+      color: #222222;
 
+      font-size: 18px;
 
+      font-weight: 700;
 
+
 
+      &>img {
 
+        width: 20px;
 
+        vertical-align: middle;
 
+        margin-right: 5px;
 
+      }
 
+    }
 
+
 
+    &>p {
 
+      font-size: 14px;
 
+      color: #919193;
 
+      line-height: 26px;
 
+      padding: 15px 30px;
 
+    }
 
+  }
 
+}
 
+</style>

+ 46 - 0
src/views/Goods/components/GoodsVr.vue
Näytä tiedosto 

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

+ 4 - 4
src/views/Goods/index.vue
Näytä tiedosto 

@@ -110,13 +110,13 @@ export default {
 
     return {
 
       skipData: [
 
         { id: 1, name: '语音导览', path: '/goods/audio' },
 
-        { id: 2, name: 'VR场景', path: '' },
 
-        { id: 3, name: '鸟瞰全景', path: '' },
 
-        { id: 4, name: '景点导航', path: '' },
 
+        { id: 2, name: 'VR场景', path: '/goods/kankan' },
 
+        { id: 3, name: '鸟瞰全景', path: '/goods/vr' },
 
+        { id: 4, name: '景点导航', path: '/goods/map' },
 
         { id: 5, name: '美食', path: '' },
 
         { id: 6, name: '酒店住宿', path: '' },
 
         { id: 7, name: '预约', path: '' },
 
-        { id: 8, name: '游玩指引', path: '' },
 
+        { id: 8, name: '游玩指引', path: '/goods/play' },
 
       ],
 
       videoPlay: false
 
     };

+ 37 - 0
src/views/Interact/components/InteractIssue.vue
Näytä tiedosto 

@@ -0,0 +1,37 @@
 
+<template>
 
+  <div class='InteractIssue'>InteractIssue</div>
 
+</template>
 
+
 
+<script>
 
+
 
+export default {
 
+  name: 'InteractIssue',
 
+  components: {},
 
+  data() {
 
+    return {
 
+
 
+    };
 
+  },
 
+  computed: {},
 
+  watch: {},
 
+  methods: {
 
+
 
+  },
 
+  created() {
 
+
 
+  },
 
+  mounted() {
 
+
 
+  },
 
+  beforeCreate() { }, //生命周期 - 创建之前
 
+  beforeMount() { }, //生命周期 - 挂载之前
 
+  beforeUpdate() { }, //生命周期 - 更新之前
 
+  updated() { }, //生命周期 - 更新之后
 
+  beforeDestroy() { }, //生命周期 - 销毁之前
 
+  destroyed() { }, //生命周期 - 销毁完成
 
+  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
 
+}
 
+</script>
 
+<style lang='less' scoped>
 
+
 
+</style>

+ 208 - 25
src/views/Interact/index.vue
Näytä tiedosto 

@@ -1,36 +1,219 @@
 
 <template>
 
-<div class='My'>悦·互动</div>
 
+  <div class='My'>
 
+    <!-- 输入框 -->
 
+    <div class="inputBox" @keydown.enter="searchFu()">
 
+      <div class="searInco">
 
+        <van-icon name="search" />
 
+      </div>
 
+      <div class="searBtn" @click="searchFu()">搜索</div>
 
+      <van-field maxlength="10" v-model="txt" placeholder="请输入要搜索的内容" />
 
+    </div>
 
+    <!-- 精彩必体验 -->
 
+    <div class="titleTit">精彩必体验</div>
 
+    <div class="bsBox">
 
+      <div v-for="item in bsData" :key="item.id">{{ item.name }}</div>
 
+    </div>
 
+    <!-- 主体内容 -->
 
+    <div class="mainBox">
 
+      <div class="row" v-for="item in spotData" :key="item.id">
 
+        <img :src="require(`@/assets/img/interact/row${item.id}.png`)" alt="">
 
+        <div class="name">{{ item.name }}</div>
 
+        <div class="author">
 
+          <div class="author_ll">
 
+            <img src="../../assets/img/interact/user.png" alt="" />
 
+            <span>{{ item.author }}</span>
 
+          </div>
 
+          <div class="author_rr">{{ item.time }}</div>
 
+
 
+        </div>
 
+      </div>
 
+    </div>
 
+    <!-- +号 -->
 
+    <div class="issue">
 
+      <img src="../../assets/img/interact/issue.png" alt="" />
 
+    </div>
 
+    
+  </div>
 
 </template>
 
 
 <script>
 
 
 export default {
 
-components: {},
 
-data() {
 
-return {
 
-
 
-};
 
-},
 
-computed: {},
 
-watch: {},
 
-methods: {
 
-
 
-},
 
-created() {
 
-
 
-},
 
-mounted() {
 
-
 
-},
 
-beforeCreate() {}, //生命周期 - 创建之前
 
-beforeMount() {}, //生命周期 - 挂载之前
 
-beforeUpdate() {}, //生命周期 - 更新之前
 
-updated() {}, //生命周期 - 更新之后
 
-beforeDestroy() {}, //生命周期 - 销毁之前
 
-destroyed() {}, //生命周期 - 销毁完成
 
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 
+  components: {},
 
+  data() {
 
+    return {
 
+      txt: '',
 
+      bsData: [
 
+        { id: 1, name: '梦幻游乐王国' },
 
+        { id: 2, name: '古建筑' },
 
+        { id: 3, name: '美食' },
 
+        { id: 4, name: '周边风景游玩' },
 
+        { id: 5, name: '美景' },
 
+      ],
 
+      spotData: [
 
+        { id: 1, name: '方特梦幻王国万圣夜', author: '王大锤', time: '2022-11-16' },
 
+        { id: 2, name: '芜湖老海关', author: '王大锤', time: '2022-11-16' },
 
+        { id: 3, name: '中江塔', author: '王大锤', time: '2022-11-16' },
 
+        { id: 4, name: '鸠兹古镇', author: '王大锤', time: '2022-11-16' },
 
+      ]
 
+    };
 
+  },
 
+  computed: {},
 
+  watch: {},
 
+  methods: {
 
+    searchFu() {
 
+      console.log('---------');
 
+    }
 
+  },
 
+  created() {
 
+
 
+  },
 
+  mounted() {
 
+
 
+  },
 
+  beforeCreate() { }, //生命周期 - 创建之前
 
+  beforeMount() { }, //生命周期 - 挂载之前
 
+  beforeUpdate() { }, //生命周期 - 更新之前
 
+  updated() { }, //生命周期 - 更新之后
 
+  beforeDestroy() { }, //生命周期 - 销毁之前
 
+  destroyed() { }, //生命周期 - 销毁完成
 
+  activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
 
 }
 
 </script>
 
 <style lang='less' scoped>
 
+.My {
 
+  width: 100%;
 
+  height: calc(100% - 80px);
 
+  overflow-y: auto;
 
+  padding: 20px 15px;
 
+  position: relative;
 
+  .issue{
 
+    margin: 20px 0;
 
+    text-align: center;
 
+    &>img{
 
+      width: 40px;
 
+    }
 
+  }
 
+  .inputBox {
 
+    margin: 0px auto;
 
+    width: 100%;
 
+    height: 30px;
 
+    position: relative;
 
+
 
+    .searBtn {
 
+      position: absolute;
 
+      right: 0;
 
+      top: 0;
 
+      width: 40px;
 
+      height: 30px;
 
+      border-radius: 3px;
 
+      z-index: 2;
 
+      background-color: #FE6E69;
 
+      font-size: 14px;
 
+      color: #fff;
 
+      line-height: 30px;
 
+      text-align: center;
 
+    }
 
+
 
+    .searInco {
 
+      color: #A0A0A0;
 
+      display: flex;
 
+      justify-content: center;
 
+      align-items: center;
 
+      font-size: 16px;
 
+      position: absolute;
 
+      top: 0;
 
+      left: 10px;
 
+      z-index: 3;
 
+      width: 20px;
 
+      height: 30px;
 
+    }
 
+
 
+    /deep/.van-cell {
 
+      width: 100%;
 
+      height: 30px;
 
+      line-height: 30px;
 
+      padding: 0px 0 0px 36px;
 
+      background-color: #F4F4F4;
 
+      border-radius: 15px;
 
+    }
 
+  }
 
+
 
+  .titleTit {
 
+    font-size: 16px;
 
+    font-weight: 700;
 
+    margin: 15px 0;
 
+    color: #000000;
 
+  }
 
+
 
+  .bsBox {
 
+    display: flex;
 
+    flex-wrap: wrap;
 
+
 
+    &>div {
 
+      text-align: center;
 
+      min-width: 60px;
 
+      padding: 0 5px;
 
+      height: 30px;
 
+      line-height: 30px;
 
+      border-radius: 2px;
 
+      background-color: #F4F4F4;
 
+      margin: 0 15px 15px 0;
 
+      font-size: 12px;
 
+      color: #333333;
 
+    }
 
+  }
 
 
+  .mainBox {
 
+    display: flex;
 
+    flex-wrap: wrap;
 
+
 
+    .row {
 
+      margin-right: 4%;
 
+      margin-bottom: 4%;
 
+      overflow: hidden;
 
+      width: 48%;
 
+      height: 260px;
 
+      background-color: #F7F8FA;
 
+      border-radius: 4px;
 
+      color: #333333;
 
+
 
+      &:nth-of-type(2n) {
 
+        margin-right: 0;
 
+      }
 
+
 
+      &>img {
 
+        width: 100%;
 
+        height: 180px;
 
+        object-fit: cover;
 
+      }
 
+
 
+      .name {
 
+        padding: 10px 10px 5px;
 
+        font-size: 14px;
 
+        font-weight: 700;
 
+      }
 
+
 
+      .author {
 
+        margin-top: 12px;
 
+        padding: 0 10px;
 
+        display: flex;
 
+        align-items: center;
 
+        justify-content: space-between;
 
+        font-size: 12px;
 
+
 
+        .author_ll {
 
+          vertical-align: middle;
 
+
 
+          &>img {
 
+            margin-right: 5px;
 
+            width: 12px;
 
+            height: 12px;
 
+            border-radius: 50%;
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
 </style>