首页实现 遗址页初步实现

public/index.html

@@ -11,7 +11,7 @@
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-    <script src="vtour/tour.js"></script>
+    <!-- <script src="vtour/tour.js"></script> -->
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>

src/App.vue

@@ -43,7 +43,7 @@
       }
     },
     created() {
-      this.getList();
+      // this.getList();
       //在页面加载时读取sessionStorage里的状态信息
       if (sessionStorage.getItem("store")) {
         this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("store"))))

src/components/swCard/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="swiper-container" >
+  <div class="swiper-container">
     <swiper
       ref="listSwiper"
       class="swiper-wrapper swiper-wrapper-n"
@@ -10,11 +10,22 @@
         v-for="(item, index) in cards"
         :key="index"
       >
-        <div @click="$router.push({name:'Scene',query:{id:item.id},params:{link:item.link}})">
+        <div
+          @click="
+            $router.push({
+              name: 'Scene',
+              query: { id: item.id },
+              params: { link: item.link },
+            })
+          "
+        >
           <img class="logo" :src="`${$cdn}images/scene${item.img}.jpg`" />
-          <div class="maskss" ></div> 
+          <div class="maskss"></div>
         </div>
       </swiper-slide>
+      <div class="swiper-pagination" slot="pagination"></div>
+      <div class="swiper-button-next"></div>
+      <div class="swiper-button-prev"></div>
     </swiper>
   </div>
 </template>
@@ -29,57 +40,67 @@ export default {
     },
     swiperOption() {
       // let that = this
-      let getIndex = (range,length,current)=>{
-        let next =(current + range) > length ? (current + range) - length : (current + range)
-        let prev =(current - range) < 0 ? (current - range) + length : (current - range)
+      let getIndex = (range, length, current) => {
+        let next =
+          current + range > length ? current + range - length : current + range;
+        let prev =
+          current - range < 0 ? current - range + length : current - range;
 
         return {
           prev,
-          next
-        }
+          next,
+        };
       };
 
-      let setClass = (range,length,current,that,cls)=>{
-        let {prev,next} = getIndex(range,length,current)
-        let p = that.slides.eq(prev) 
-        let n =  that.slides.eq(next)  
-        let cur =  that.slides.eq(current)  
+      let setClass = (range, length, current, that, cls) => {
+        let { prev, next } = getIndex(range, length, current);
+        let p = that.slides.eq(prev);
+        let n = that.slides.eq(next);
+        let cur = that.slides.eq(current);
 
-        p.find('.maskss').removeClass('mask mask1 mask2')
-        n.find('.maskss').removeClass('mask mask1 mask2')
-        cur.find('.maskss').removeClass('mask mask1 mask2')
+        p.find(".maskss").removeClass("mask mask1 mask2");
+        n.find(".maskss").removeClass("mask mask1 mask2");
+        cur.find(".maskss").removeClass("mask mask1 mask2");
 
-        p.find('.maskss').addClass(cls);
-        n.find('.maskss').addClass(cls);
+        p.find(".maskss").addClass(cls);
+        n.find(".maskss").addClass(cls);
       };
       return {
         watchSlidesProgress: true,
         slidesPerView: "auto",
         centeredSlides: true,
-        initialSlide :2,
+        initialSlide: 2,
         // loop: true,
         // loopedSlides: 9,
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
+        pagination: {
+          el: ".swiper-pagination",
+          clickable: true //允许分页点击跳转
+        },
         on: {
-          click:function () {
-            if (this.clickedIndex>=0) {
-              this.slideTo(this.clickedIndex, 500,()=>{
+          click: function () {
+            if (this.clickedIndex >= 0) {
+              this.slideTo(this.clickedIndex, 500, () => {
                 this.lazy.load();
-              })
+              });
             }
           },
-          transitionEnd:function () {
-            let length = this.slides.length
+          transitionEnd: function () {
+            let length = this.slides.length;
             for (let i = 0; i < length; i++) {
               var slide = this.slides.eq(i);
-              let classNames =slide[0].className
-              if (classNames.indexOf('active')>-1) {
-                setClass (1,length,i,this,'mask') 
-                setClass (2,length,i,this,'mask1') 
-                setClass (3,length,i,this,'mask2') 
+              let classNames = slide[0].className;
+              if (classNames.indexOf("active") > -1) {
+                setClass(1, length, i, this, "mask");
+                setClass(2, length, i, this, "mask1");
+                setClass(3, length, i, this, "mask2");
               }
             }
           },
-          progress: function() {
+          progress: function () {
             for (let i = 0; i < this.slides.length; i++) {
               var slide = this.slides.eq(i);
               var slideProgress = this.slides[i].progress;
@@ -90,81 +111,82 @@ export default {
               let translate = slideProgress * modify * 140 + "px";
               let scale = 1 - Math.abs(slideProgress) / 5;
               let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
-            
+
               // let opacity = 1 - Math.min(Math.abs(slideProgress / 2), 1);
-             
+
               slide.transform(
                 "translateX(" + translate + ") scale(" + scale + ")"
               );
               slide.css({
-                "zIndex": zIndex,
-                "opacity": 1,
-                "pointer-events": 'auto',
-
+                zIndex: zIndex,
+                opacity: 1,
+                "pointer-events": "auto",
               });
-              
+
               if (Math.abs(slideProgress) > 3) {
                 slide.css({
                   // "opacity":0,
-                  "pointer-events":"none"
+                  "pointer-events": "none",
                 });
               }
             }
           },
-          setTransition: function(transition) {
+          setTransition: function (transition) {
             for (var i = 0; i < this.slides.length; i++) {
               var slide = this.slides.eq(i);
               slide.transition(transition);
             }
-          }
+          },
         },
       };
     },
   },
-  props:['list'],
+  props: ["list"],
   data() {
-    let cards = [{
-      img:1,
-      id:8,
-      link:'https://www.4dmodel.com/SuperTwoCustom/SuperTwoShaoShan/index.html?m=749',
-      name:'毛鉴公祠'
-    },{
-      img:2,
-      id:3,
-      link:'https://www.4dmodel.com/SuperTwoCustom/SuperTwoShaoShan/index.html?m=752',
-      name:'毛氏宗祠'
-    },{
-      img:3,
-      id:4,
-      link:'https://www.4dmodel.com/SuperTwoCustom/SuperTwoShaoShan/index.html?m=761',
-      name:'毛泽东同志故居'
-    },{
-      img:4,
-      id:9,
-      link:'https://www.4dmodel.com/SuperTwoCustom/SuperTwoShaoShan/index.html?m=750',
-      name:'毛震公祠'
-    },{
-      img:5,
-      id:5,
-      link:'https://www.4dmodel.com/SuperTwoCustom/SuperTwoShaoShan/index.html?m=754',
-      name:'南岸私塾'
-    },{
-      img:6,
-      id:7,
-      link:'https://www.4dmodel.com/SuperTwoCustom/SuperTwoShaoShan/index.html?m=751',
-      name:'毛泽东同志纪念馆（专题展区）'
-    },{
-      img:7,
-      id:6,
-      link:'https://www.4dmodel.com/SuperTwoCustom/SuperTwo755/index.html?m=755',
-      name:'毛泽东同志纪念馆（生平展区）'
-    }]
+    let cards = [
+      {
+        img: 1,
+        id: 8,
+        link: "http://www.4dmodel.com/SuperTwo/index.html?m=1017",
+        name: "万山海战遗址",
+      },
+      {
+        img: 2,
+        id: 3,
+        link: "http://www.4dmodel.com/SuperTwo582/vtour/tour.html",
+        name: "杨匏安陈列馆",
+      },
+      {
+        img: 3,
+        id: 4,
+        link: "http://www.4dmodel.com/SuperTwo/index.html?m=1016",
+        name: "林伟民与中国早期工人运动史迹陈列馆",
+      },
+      {
+        img: 4,
+        id: 9,
+        link: "http://www.4dmodel.com/SuperTwo/index.html?m=1018",
+        name: "中共小濠冲党史教育基地",
+      },
+      {
+        img: 5,
+        id: 5,
+        link: "http://www.4dmodel.com/SuperTwo/index.html?m=997",
+        name: "苏兆征故居陈列馆",
+      },
+      {
+        img: 6,
+        id: 7,
+        link: "http://www.4dmodel.com/SuperTwo/index.html?m=1015",
+        name: "市退役军人事务局",
+      }
+    ];
     return {
-      activeDate: "",
-      showNext: 0,
-      showPre: 0,
-      activeIdx:'',
-      cards
+      // activeDate: "",
+      // showNext: 0,
+      // showPre: 0,
+      // activeIdx:'',
+      cards,
     };
   },
   methods: {
@@ -179,8 +201,7 @@ export default {
   directives: {
     swiper: directive,
   },
-  mounted() {
-  },
+  mounted() {},
 };
 </script>
 <style lang="less" scoped>
@@ -206,7 +227,7 @@ export default {
   width: 100%;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
 }
-.swiper-slide .maskss{
+.swiper-slide .maskss {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -214,23 +235,23 @@ export default {
   top: 0;
   overflow: hidden;
 }
-.swiper-slide .mask{
-  background: #804D28;
+.swiper-slide .mask {
+  background: #804d28;
   opacity: 0.5;
 }
 
-.swiper-slide .mask1{
+.swiper-slide .mask1 {
   background: #6e4029;
   opacity: 0.65;
 }
 
-.swiper-slide .mask2{
+.swiper-slide .mask2 {
   background: #4b2b13;
   opacity: 0.65;
 }
 @media screen and (max-width: 1600px) {
-    .swiper-slide {
-      width: 350px;
-    }
+  .swiper-slide {
+    width: 350px;
+  }
 }
 </style>

src/pages/index/index.vue

@@ -1,49 +1,46 @@
 <template>
   <div class="wrapper">
-    <!-- <div class="layout" @mousewheel.stop v-if="!isMobile">
-      <video class="bg" id="startvideo" :src="`${cdn_url}startvideo.webm`" muted controls="controls" autoplay v-if="!state"></video></div> -->
-      <!-- <bg :canvasWidth='width' :canvasHeight='height' class="xlz-bg"/> -->
-      <div class="bgimg"></div>
-    
+    <div class="bgimg">
+      <div class="con">
+        <div class="btn" @click="enter">
+          <span class="btn-txt">点击进入</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
-/* import bg from '@/components/background' */
-import browser from '@/utils/browser.js'
+import browser from "@/utils/browser.js";
 
-/* let width = window.innerWidth;
-window.onresize = ()=>{
-  width = window.innerWidth
-} */
 export default {
-  components:{
-   /*  bg */
+  components: {
+    /*  bg */
   },
-  data(){
+  data() {
     return {
       isMobile: browser.mobile,
-      state:false,
-      cdn_url:"https://4dscene.4dage.com/ShaoShan/audios/"
-    }
-  },
-  computed:{
-  },
-  watch: {
-    
+      state: false,
+      cdn_url: "https://4dscene.4dage.com/ShaoShan/audios/",
+    };
   },
+  computed: {},
+  watch: {},
   created() {
     // this.$showLoading();
     const that = this;
-    this.$nextTick(()=>{
-          document.getElementById('startvideo').addEventListener('canplay',()=>{
-              that.$hideLoading();
-          })
-    })
-    
+    this.$nextTick(() => {
+      document.getElementById("startvideo").addEventListener("canplay", () => {
+        that.$hideLoading();
+      });
+    });
   },
-  mounted(){
+  mounted() {},
+  methods:{
+    enter() {
+      this.$router.push('/ruins')
+    }
   }
-}
+};
 </script>
 
 <style lang="less" scoped>
@@ -76,33 +73,60 @@ export default {
     z-index: 100;
   }
 }
-.layout{
+.layout {
   position: relative;
   z-index: 9;
   width: 100%;
   height: 100%;
-  .xlz-bg{
+  .xlz-bg {
     position: absolute;
     top: 50%;
     z-index: 89;
     transform: translateY(-50%);
   }
   .bg {
-    position:absolute;
-    z-index:999;
-    width:100%;    
+    position: absolute;
+    z-index: 999;
+    width: 100%;
     height: 100%;
     object-fit: fill;
-    left:0;
+    left: 0;
   }
   .bgimg {
-    position:absolute;
-    z-index:99;
-    width:100%;
-    left:0;
-    height:100%;
-    background:url('../../assets/images/index_bg.jpg')no-repeat;
-    background-size:cover;
+    position: absolute;
+    z-index: 99;
+    width: 100%;
+    left: 0;
+    height: 100%;
+    background: url("../../assets/images/index-bg.png") no-repeat center center;
+    background-size: cover;
+    .con {
+      left: 50%;
+      top: 25%;
+      width: 20%;
+      height: 10%;
+      margin-left: -10%;
+      position: relative;
+      .btn {
+        margin: 0 auto;
+        margin-top: 26px;
+        width: 100%;
+        height: 74px;
+        line-height: 74px;
+        text-align: center;
+        background: url(../../assets/images/btn-bg.png) no-repeat;
+        background-size: 100% 100%;
+        cursor: pointer;
+        .btn-txt {
+          font-size: 32px;
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+          line-height: 54px;
+          color: #9c0012;
+          opacity: 1;
+        }
+      }
+    }
   }
 }
 </style>

src/pages/ruins/index.vue

@@ -0,0 +1,74 @@
+<!-- 场馆漫游 -->
+<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>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+import swCard from '@/components/swCard'
+export default {
+//import引入的组件需要注入到对象中才能使用
+components:{
+    swCard
+},
+data() {
+//这里存放数据
+return {
+
+};
+},
+//监听属性 类似于data概念
+computed: {},
+//监控data中的数据变化
+watch: {},
+//方法集合
+methods: {
+
+},
+//生命周期 - 创建完成（可以访问当前this实例）
+created() {
+
+},
+//生命周期 - 挂载完成（可以访问DOM元素）
+mounted() {
+
+},
+beforeCreate() {}, //生命周期 - 创建之前
+beforeMount() {}, //生命周期 - 挂载之前
+beforeUpdate() {}, //生命周期 - 更新之前
+updated() {}, //生命周期 - 更新之后
+beforeDestroy() {}, //生命周期 - 销毁之前
+destroyed() {}, //生命周期 - 销毁完成
+activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+//@import url(); 引入公共css类
+.layout {
+    &::before {
+        content:url('../../assets/images/bottom_icon2.png');
+        position:absolute;
+        bottom:0;
+        right:0;
+    }
+    .title {
+        position:relative;
+        margin-top:112px;
+        text-align:center;
+        img {
+            width:272px;
+            height:auto;
+        }
+    }
+    .bottom_line {
+        position:absolute;
+        bottom:0;
+    }
+}
+    
+</style>

src/router/index.js

@@ -17,6 +17,11 @@ VueRouter.prototype.push = function push (location) {
     component: () => import('../pages/Main/index.vue')
   },
   {
+    path: '/ruins',
+    name: 'Ruins',
+    component: () => import('../pages/ruins/index.vue')
+  },
+  {
     path: '/search',
     name: 'Search',
     component: () => import('../pages/search/index.vue'),