Merge branch 'james'

src/pages/over-look/index.vue

@@ -0,0 +1,84 @@
+<!-- 全景图 -->
+<template>
+  <div class="overLook">
+    <iframe
+      src="http://www.4dmodel.com/SuperTwoCustom/shaoshan/vtour/tour.html"
+    ></iframe>
+    <div class="goBack" @click="goBack()">
+      <img src="../../assets/images/goback.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  inject: ["reload"],
+  components: {},
+  data() {
+    //这里存放数据
+    return {};
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    id() {
+      this.id = this.$route.query.id;
+    },
+  },
+  //方法集合
+  methods: {
+    getRouteData() {
+      this.id = this.$route.query.id;
+      console.log(this.id);
+    },
+    goBack() {
+        history.go(-1)
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.getRouteData();
+    this.pano.forEach((item) => {
+      console.log(this.pano);
+      if (item.name == this.id) {
+        this.link = item.link;
+      }
+    });
+    this.id = this.$route.query.id;
+    if (this.id == "topic" || this.id == "life") {
+      this.show = true;
+    }
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+//@import url(); 引入公共css类
+.overLook {
+  width: 100%;
+  height: 100%;
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+  .goBack {
+    position: absolute;
+    top: 26px;
+    left: 20px;
+    cursor: pointer;
+  }
+}
+</style>

src/pages/ruins-detail/index.vue

@@ -10,9 +10,9 @@
           1992年，小濠涌村被评为革命老区；2001年被确定为党史教育基地；2011年邝任生雕像安放小濠涌村
         </div>
         <div class="btns">
-          <div class="btn">VR云游</div>
-          <div class="btn">VR俯瞰</div>
-          <div class="btn">党史精读</div>
+          <div class="btn" @click="handleClickEvent('travelAround')">VR云游</div>
+          <div class="btn" @click="handleClickEvent('overLook')">VR俯瞰</div>
+          <div class="btn" @click="handleClickEvent('intensiveReading')">党史精读</div>
         </div>
       </div>
     </div>
@@ -32,7 +32,24 @@ export default {
   //监控data中的数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    handleClickEvent(type){
+
+      switch (type) {
+        case 'travelAround':
+          this.$router.push('/travel-around')
+          break;
+        case 'overLook':
+          this.$router.push('/over-look')
+          break;
+        case 'intensiveReading':
+          console.log('党史精读')
+          break;
+        default:
+          break;
+      }
+    }
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）

src/pages/ruins/index.vue

@@ -1,18 +1,15 @@
 <!-- 场馆漫游 -->
 <template>
 <div class='layout'>
-    <div class="title"><img :src="`images/title.png`" alt=""></div>
-    <swCard></swCard>
-    <div class="bottom_line"><img :src="`images/scene_bottom.png`" alt=""></div>
+    <div class="cards">
+        <swCard></swCard>
+    </div>
 </div>
 </template>
 
 <script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-//例如：import 《组件名称》 from '《组件路径》';
 import swCard from '@/components/swCard'
 export default {
-//import引入的组件需要注入到对象中才能使用
 components:{
     swCard
 },
@@ -62,18 +59,8 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
         bottom:0;
         right:0;
     }
-    .title {
-        position:relative;
-        margin-top:112px;
-        text-align:center;
-        img {
-            width:272px;
-            height:auto;
-        }
-    }
-    .bottom_line {
-        position:absolute;
-        bottom:0;
+    .cards {
+        margin:180px auto;
     }
 }
     

src/pages/travel-around/index.vue

@@ -0,0 +1,105 @@
+<!-- 全景图 -->
+<template>
+<div class='travel'>
+    <iframe src="http://www.4dmodel.com/SuperTwoCustom/shaoshan/vtour/tour.html"></iframe>
+    <div class="goBack" @click="goBack()"><img src="../../assets/images/goback.png" alt=""></div>
+</div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+//import引入的组件需要注入到对象中才能使用
+inject:['reload'],
+components: {},
+data() {
+//这里存放数据
+return {
+    pano:[{
+        link:'http://www.4dmodel.com/SuperTwoCustom/shaoshan/vtour/tour.html',
+        name:'start',
+    },{
+        link: 'http://www.4dmodel.com/SuperTwoCustom/shaoshan/vtour/life.html',
+        name: 'life'
+    },{
+        link: 'http://www.4dmodel.com/SuperTwoCustom/shaoshan/vtour/topic.html',
+        name:'topic'
+    }
+    ],
+    id:'',
+    link:'',
+    show:false
+};
+},
+//监听属性 类似于data概念
+computed: {},
+//监控data中的数据变化
+watch: {
+    id() {
+        this.id = this.$route.query.id
+    },
+    show() {
+        if(this.id=='start'){
+            this.show = false;
+        }else {
+            this.show = true
+        }
+    }
+},
+//方法集合
+methods: {
+    getRouteData() {
+        this.id=this.$route.query.id;
+        console.log(this.id)
+    },
+    goBack() {
+        history.go(-1)
+    }
+},
+//生命周期 - 创建完成（可以访问当前this实例）
+created() {
+    this.getRouteData();
+    this.pano.forEach(item => {
+        console.log(this.pano)
+        if(item.name== this.id){
+            this.link = item.link;
+        }
+    })
+    this.id = this.$route.query.id;
+    if(this.id == 'topic' || this.id == 'life') {
+        this.show = true;
+    }
+    
+},
+//生命周期 - 挂载完成（可以访问DOM元素）
+mounted() {
+},
+beforeCreate() {}, //生命周期 - 创建之前
+beforeMount() {}, //生命周期 - 挂载之前
+beforeUpdate() {}, //生命周期 - 更新之前
+updated() {}, //生命周期 - 更新之后
+beforeDestroy() {}, //生命周期 - 销毁之前
+destroyed() {}, //生命周期 - 销毁完成
+activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+//@import url(); 引入公共css类
+.travel {
+    width:100%;
+    height:100%;
+    iframe {
+        width:100%;
+        height:100%;
+    }
+    .goBack {
+        position:absolute;
+        top:26px;
+        left:20px;
+        cursor: pointer;
+    }
+}
+
+</style>

src/router/index.js

@@ -23,57 +23,67 @@ VueRouter.prototype.push = function push (location) {
   },
   {
     path: '/ruins-detail',
-    name: 'Ruins_DEtail',
+    name: 'Ruins-Detail',
     component: () => import('../pages/ruins-detail/index.vue')
   },
   {
-    path: '/search',
-    name: 'Search',
-    component: () => import('../pages/search/index.vue'),
-    meta: {id: ''}
+    path: '/travel-around',
+    name: 'Travel-Around',
+    component: () => import('../pages/travel-around/index.vue')
   },
   {
-    path: '/scenes',
-    name: 'Scenes',
-    component: () => import('../pages/scenes/index.vue'),
-    meta: {id: '5'}
+    path: '/over-look',
+    name: 'Over-Look',
+    component: () => import('../pages/over-look/index.vue')
   },
-  {
-    path: '/sceneiframe',
-    name: 'Scene',
-    component: () => import('../pages/sceneiframe/index.vue'),
-    meta: {id: '12'}
-  },
-  {
-    path: '/antiques',
-    name: 'Antiques',
-    component: () => import('../pages/antiques/index.vue'),
-    meta: {id: 10}
-  },
-  {
-    path: '/detail',
-    name: 'Detail',
-    component: () => import('../pages/detail/index.vue'),
-    meta: {id: 15}
-  },
-  {
-    path: '/panorama',
-    name: 'Panorama',
-    component: () => import('../pages/panorama/index.vue'),
-    meta: {id: 11}
-  },
-  {
-    path: '/map',
-    name: 'Map',
-    component: () => import('../pages/map/index.vue'),
-    meta: {id: 16}
-  },
-  {
-    path: '/all',
-    name: 'All',
-    component: () => import('../pages/All/index.vue'),
-    meta: {id: 17}
-  }
+  // {
+  //   path: '/search',
+  //   name: 'Search',
+  //   component: () => import('../pages/search/index.vue'),
+  //   meta: {id: ''}
+  // },
+  // {
+  //   path: '/scenes',
+  //   name: 'Scenes',
+  //   component: () => import('../pages/scenes/index.vue'),
+  //   meta: {id: '5'}
+  // },
+  // {
+  //   path: '/sceneiframe',
+  //   name: 'Scene',
+  //   component: () => import('../pages/sceneiframe/index.vue'),
+  //   meta: {id: '12'}
+  // },
+  // {
+  //   path: '/antiques',
+  //   name: 'Antiques',
+  //   component: () => import('../pages/antiques/index.vue'),
+  //   meta: {id: 10}
+  // },
+  // {
+  //   path: '/detail',
+  //   name: 'Detail',
+  //   component: () => import('../pages/detail/index.vue'),
+  //   meta: {id: 15}
+  // },
+  // {
+  //   path: '/panorama',
+  //   name: 'Panorama',
+  //   component: () => import('../pages/panorama/index.vue'),
+  //   meta: {id: 11}
+  // },
+  // {
+  //   path: '/map',
+  //   name: 'Map',
+  //   component: () => import('../pages/map/index.vue'),
+  //   meta: {id: 16}
+  // },
+  // {
+  //   path: '/all',
+  //   name: 'All',
+  //   component: () => import('../pages/All/index.vue'),
+  //   meta: {id: 17}
+  // }
 ]
 
 const router = new VueRouter({