2 年之前 · 5f9ef24869
--- a/SWKK/public/img/diBiao.png
+++ b/SWKK/public/img/diBiao.png
--- a/SWKK/public/index.html
+++ b/SWKK/public/index.html
@@ -6,6 +6,9 @@
 
				     <meta name="viewport" content="width=device-width,initial-scale=1.0">
			
 
				     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
			
 
				     <title>雨花台烈士纪念馆</title>
			
 
				+    <script src="//4dkk.4dage.com/v4/sdk/4.2.0/kankan-sdk-deps.js"></script>
			
 
				+    <script src="//4dkk.4dage.com/v4/sdk/4.2.0/kankan-sdk.js"></script>
			
 
				+  
			
 
				   </head>
			
 
				   <body>
			
 
				     <noscript>
			
--- a/SWKK/src/assets/img/Goods/Rcode.jpg
+++ b/SWKK/src/assets/img/Goods/Rcode.jpg
--- a/SWKK/src/assets/img/Goods/inco1.png
+++ b/SWKK/src/assets/img/Goods/inco1.png
--- a/SWKK/src/assets/img/Goods/inco1Ac.png
+++ b/SWKK/src/assets/img/Goods/inco1Ac.png
--- a/SWKK/src/assets/img/Goods/inco2.png
+++ b/SWKK/src/assets/img/Goods/inco2.png
--- a/SWKK/src/assets/img/Goods/inco2Ac.png
+++ b/SWKK/src/assets/img/Goods/inco2Ac.png
--- a/SWKK/src/assets/img/Goods/inco3.png
+++ b/SWKK/src/assets/img/Goods/inco3.png
--- a/SWKK/src/assets/img/Goods/inco3Ac.png
+++ b/SWKK/src/assets/img/Goods/inco3Ac.png
--- a/SWKK/src/assets/img/Goods/inco4.png
+++ b/SWKK/src/assets/img/Goods/inco4.png
--- a/SWKK/src/assets/img/Goods/inco4Ac.png
+++ b/SWKK/src/assets/img/Goods/inco4Ac.png
--- a/SWKK/src/assets/img/Goods/inco5.png
+++ b/SWKK/src/assets/img/Goods/inco5.png
--- a/SWKK/src/assets/img/Goods/inco5Ac.png
+++ b/SWKK/src/assets/img/Goods/inco5Ac.png
--- a/SWKK/src/assets/img/Goods/shareBac.png
+++ b/SWKK/src/assets/img/Goods/shareBac.png
--- a/SWKK/src/assets/img/Goods/shareClose.png
+++ b/SWKK/src/assets/img/Goods/shareClose.png
--- a/SWKK/src/assets/img/HomeBac.jpg
+++ b/SWKK/src/assets/img/HomeBac.jpg
--- a/SWKK/src/assets/img/HomeBtnn.png
+++ b/SWKK/src/assets/img/HomeBtnn.png
--- a/SWKK/src/assets/img/LeftTop/inco1.png
+++ b/SWKK/src/assets/img/LeftTop/inco1.png
--- a/SWKK/src/assets/img/LeftTop/inco1Ac.png
+++ b/SWKK/src/assets/img/LeftTop/inco1Ac.png
--- a/SWKK/src/assets/img/LeftTop/inco2.png
+++ b/SWKK/src/assets/img/LeftTop/inco2.png
--- a/SWKK/src/assets/img/LeftTop/inco2Ac.png
+++ b/SWKK/src/assets/img/LeftTop/inco2Ac.png
--- a/SWKK/src/assets/img/LeftTop/inco3.png
+++ b/SWKK/src/assets/img/LeftTop/inco3.png
--- a/SWKK/src/assets/img/LeftTop/inco3Ac.png
+++ b/SWKK/src/assets/img/LeftTop/inco3Ac.png
--- a/SWKK/src/assets/img/LeftTop/inco4.png
+++ b/SWKK/src/assets/img/LeftTop/inco4.png
--- a/SWKK/src/assets/img/LeftTop/inco4Ac.png
+++ b/SWKK/src/assets/img/LeftTop/inco4Ac.png
--- a/SWKK/src/assets/img/LeftTop/inco5.png
+++ b/SWKK/src/assets/img/LeftTop/inco5.png
--- a/SWKK/src/assets/img/LeftTop/inco5Ac.png
+++ b/SWKK/src/assets/img/LeftTop/inco5Ac.png
--- a/SWKK/src/assets/img/LeftTop/label_title.png
+++ b/SWKK/src/assets/img/LeftTop/label_title.png
--- a/SWKK/src/assets/img/LeftTop/title_left.png
+++ b/SWKK/src/assets/img/LeftTop/title_left.png
--- a/SWKK/src/assets/img/LeftTop/title_right.png
+++ b/SWKK/src/assets/img/LeftTop/title_right.png
--- a/SWKK/src/assets/img/inco1.png
+++ b/SWKK/src/assets/img/inco1.png
--- a/SWKK/src/assets/img/inco1Ac.png
+++ b/SWKK/src/assets/img/inco1Ac.png
--- a/SWKK/src/assets/img/inco2.png
+++ b/SWKK/src/assets/img/inco2.png
--- a/SWKK/src/assets/img/inco2Ac.png
+++ b/SWKK/src/assets/img/inco2Ac.png
--- a/SWKK/src/assets/img/inco3.png
+++ b/SWKK/src/assets/img/inco3.png
--- a/SWKK/src/assets/img/inco3Ac.png
+++ b/SWKK/src/assets/img/inco3Ac.png
--- a/SWKK/src/assets/img/loading.png
+++ b/SWKK/src/assets/img/loading.png
--- a/SWKK/src/assets/img/skip.png
+++ b/SWKK/src/assets/img/skip.png
--- a/SWKK/src/assets/media/bacVideo.mp4
+++ b/SWKK/src/assets/media/bacVideo.mp4
--- a/SWKK/src/components/Rbottom.vue
+++ b/SWKK/src/components/Rbottom.vue
@@ -0,0 +1,530 @@
 
				+<template>
			
 
				+  <div class="Rbottom" :style="`${leftList[1].done ? 'bottom:0px' : ''}`">
			
 
				+    <audio src="@/assets/media/bacMusic.mp3" loop id="bacMusic"></audio>
			
 
				+
			
 
				+    <div class="box1">
			
 
				+      <div class="mainll mainrr">
			
 
				+        <div
			
 
				+          v-show="list.length !== 0 || item.type > 2"
			
 
				+          @click="leftCutClick(item.type)"
			
 
				+          class="row"
			
 
				+          :class="{ active2: item.done }"
			
 
				+          v-for="item in leftList"
			
 
				+          :key="item.type"
			
 
				+        >
			
 
				+          <img
			
 
				+            :src="
			
 
				+              require(`@/assets/img/LeftTop/inco${item.type}${
			
 
				+                item.done ? 'Ac' : ''
			
 
				+              }.png`)
			
 
				+            "
			
 
				+            alt=""
			
 
				+          />
			
 
				+          <p>{{ item.name }}</p>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      <div class="mainrr">
			
 
				+        <div
			
 
				+          class="row"
			
 
				+          @click="rightClisk(item.type)"
			
 
				+          v-for="item in rightList"
			
 
				+          :key="item.type"
			
 
				+          :class="{
			
 
				+            active2:
			
 
				+              (music && item.type === 2) ||
			
 
				+              (like && item.type === 3) ||
			
 
				+              (share && item.type === 4) ||
			
 
				+              (isFullscreen && item.type === 5),
			
 
				+          }"
			
 
				+        >
			
 
				+          <img
			
 
				+            :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
			
 
				+            alt=""
			
 
				+            v-if="music && item.type === 2"
			
 
				+          />
			
 
				+          <img
			
 
				+            :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
			
 
				+            alt=""
			
 
				+            v-else-if="like && item.type === 3"
			
 
				+          />
			
 
				+          <img
			
 
				+            :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
			
 
				+            alt=""
			
 
				+            v-else-if="share && item.type === 4"
			
 
				+          />
			
 
				+          <img
			
 
				+            :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
			
 
				+            alt=""
			
 
				+            v-else-if="isFullscreen && item.type === 5"
			
 
				+          />
			
 
				+          <img
			
 
				+            :src="require(`@/assets/img/Goods/inco${item.type}.png`)"
			
 
				+            alt=""
			
 
				+            v-else
			
 
				+          />
			
 
				+          <transition name="likeAddAnimate">
			
 
				+            <div class="likeMove" v-show="like && item.type === 3">+ 1</div>
			
 
				+          </transition>
			
 
				+          <p>
			
 
				+            {{ item.name }}
			
 
				+          </p>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+
			
 
				+    <div
			
 
				+      class="box2"
			
 
				+      :style="`${leftList[1].done ? '' : 'height:0px;padding:0;opacity:0'}`"
			
 
				+    >
			
 
				+      <div class="swiper-container">
			
 
				+        <div class="swiper-wrapper" v-if="list.length">
			
 
				+          <div
			
 
				+            @click="cutGoods(index)"
			
 
				+            class="swiper-slide"
			
 
				+            v-for="(item, index) in list[0].list"
			
 
				+            :class="{ active: acList === index }"
			
 
				+            :key="index"
			
 
				+          >
			
 
				+            <img :src="item.enter.cover" alt="" />
			
 
				+            <!-- <p>666</p> -->
			
 
				+            <div
			
 
				+              class="plan"
			
 
				+              v-show="acList === index"
			
 
				+              :style="{ width: progress + '%' }"
			
 
				+            ></div>
			
 
				+          </div>
			
 
				+          <div class="swiper-slide" style="pointer-events: none"></div>
			
 
				+        </div>
			
 
				+        <div class="swiper-scrollbar"></div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+
			
 
				+    <!-- 分享页面 -->
			
 
				+    <div class="shareBox" :class="{ shareBoxShow: share }">
			
 
				+      <div class="shareMain">
			
 
				+        <div class="close" @click="share = false"></div>
			
 
				+        <h3>分享</h3>
			
 
				+        <p>
			
 
				+          请使用手机扫描二维码或
			
 
				+          <br />
			
 
				+          复制分享链接
			
 
				+        </p>
			
 
				+        <img src="@/assets/img/Goods/Rcode.jpg" alt="" />
			
 
				+        <div class="btnn" @click="copyPcTxt">复制分享链接</div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import Swiper from "./swiper.js";
			
 
				+export default {
			
 
				+  name: "Rbottom",
			
 
				+  components: {},
			
 
				+  props: ["acList", "progress"],
			
 
				+  data() {
			
 
				+    //这里存放数据
			
 
				+    return {
			
 
				+      rightList: [
			
 
				+        { name: "首页", type: 1 },
			
 
				+        { name: "声音", type: 2 },
			
 
				+        { name: "点赞", type: 3 },
			
 
				+        { name: "分享", type: 4 },
			
 
				+        { name: "全屏", type: 5 },
			
 
				+      ],
			
 
				+      rightType: "",
			
 
				+      music: false,
			
 
				+      like: false,
			
 
				+      share: false,
			
 
				+      isFullscreen: false,
			
 
				+      // --------------
			
 
				+      leftList: [
			
 
				+        { name: "自动漫游", type: 1, done: false },
			
 
				+        { name: "场景导览", type: 2, done: false },
			
 
				+        { name: "全景漫游", type: 3, done: true },
			
 
				+        { name: "迷你模型", type: 4, done: false },
			
 
				+        { name: "顶部俯视", type: 5, done: false },
			
 
				+      ],
			
 
				+      list: [],
			
 
				+      Swiper: null,
			
 
				+    };
			
 
				+  },
			
 
				+  //监听属性 类似于data概念
			
 
				+  computed: {},
			
 
				+  //监控data中的数据变化
			
 
				+  watch: {
			
 
				+    acList(val) {
			
 
				+      let temp = val - 2;
			
 
				+      if (temp < 0) temp = 0;
			
 
				+
			
 
				+      this.Swiper.slideTo(temp);
			
 
				+    },
			
 
				+    music(val) {
			
 
				+      let dom = document.querySelector("#bacMusic");
			
 
				+      if (val) dom.play();
			
 
				+      else dom.pause();
			
 
				+    },
			
 
				+  },
			
 
				+  //方法集合
			
 
				+  methods: {
			
 
				+    cutGoods(index) {
			
 
				+      this.$emit("daoLanCut", index);
			
 
				+      this.leftList[0].done = false;
			
 
				+      if (window.bacMusic) {
			
 
				+        setTimeout(() => {
			
 
				+          this.music = true;
			
 
				+        }, 100);
			
 
				+      }
			
 
				+    },
			
 
				+
			
 
				+    leftCutClick(type) {
			
 
				+      this.$emit("cutKankan", type - 1);
			
 
				+
			
 
				+      if (type === 1) {
			
 
				+        let dom = document.querySelector("#bacMusic");
			
 
				+        if (!this.leftList[0].done) {
			
 
				+          // 防止多次点击自动漫游
			
 
				+          let mainApp = document.querySelector("#app");
			
 
				+          mainApp.style.pointerEvents = "none";
			
 
				+
			
 
				+          // 自动漫游开始的时候的音乐播放状态
			
 
				+          window.bacMusic = !dom.paused;
			
 
				+          setTimeout(() => {
			
 
				+            this.music = false;
			
 
				+          }, 200);
			
 
				+        } else {
			
 
				+          if (window.bacMusic) {
			
 
				+            setTimeout(() => {
			
 
				+              this.music = true;
			
 
				+            }, 100);
			
 
				+          }
			
 
				+        }
			
 
				+        this.leftList[1].done = true;
			
 
				+        this.leftList[0].done = !this.leftList[0].done;
			
 
				+      } else if (type === 2) {
			
 
				+        this.leftList[1].done = !this.leftList[1].done;
			
 
				+      } else if (type >= 4) {
			
 
				+        this.$emit("stopPlay", true);
			
 
				+      }
			
 
				+    },
			
 
				+
			
 
				+    // 给父组件调用的控制音乐播放的方法
			
 
				+    opMusic(val) {
			
 
				+      this.music = val;
			
 
				+    },
			
 
				+
			
 
				+    // 给父组件操作控制左边按钮的方法
			
 
				+    leftCut(index) {
			
 
				+      if (index > 2) {
			
 
				+        if (window.bacMusic) {
			
 
				+          setTimeout(() => {
			
 
				+            this.music = true;
			
 
				+          }, 100);
			
 
				+        }
			
 
				+        this.leftList.forEach((v, i) => {
			
 
				+          if (i === index) v.done = true;
			
 
				+          else v.done = false;
			
 
				+        });
			
 
				+      } else if (index === -1) {
			
 
				+        if (window.bacMusic) {
			
 
				+          setTimeout(() => {
			
 
				+            this.music = true;
			
 
				+          }, 100);
			
 
				+        }
			
 
				+        this.leftList[0].done = false;
			
 
				+      } else if (index === 2) {
			
 
				+        this.leftList[2].done = true;
			
 
				+        this.leftList[3].done = this.leftList[4].done = false;
			
 
				+      }
			
 
				+    },
			
 
				+
			
 
				+    // 点击全屏
			
 
				+    fullShow() {
			
 
				+      let element = document.documentElement;
			
 
				+      if (this.isFullscreen) {
			
 
				+        if (document.exitFullscreen) {
			
 
				+          document.exitFullscreen();
			
 
				+        } else if (document.webkitCancelFullScreen) {
			
 
				+          document.webkitCancelFullScreen();
			
 
				+        } else if (document.mozCancelFullScreen) {
			
 
				+          document.mozCancelFullScreen();
			
 
				+        } else if (document.msExitFullscreen) {
			
 
				+          document.msExitFullscreen();
			
 
				+        }
			
 
				+      } else {
			
 
				+        if (element.requestFullscreen) {
			
 
				+          element.requestFullscreen();
			
 
				+        } else if (element.webkitRequestFullScreen) {
			
 
				+          element.webkitRequestFullScreen();
			
 
				+        } else if (element.mozRequestFullScreen) {
			
 
				+          element.mozRequestFullScreen();
			
 
				+        } else if (element.msRequestFullscreen) {
			
 
				+          element.msRequestFullscreen();
			
 
				+        }
			
 
				+      }
			
 
				+      // 改变当前全屏状态
			
 
				+      this.isFullscreen = !this.isFullscreen;
			
 
				+    },
			
 
				+    rightClisk(type) {
			
 
				+      if (type === 1) this.$router.replace("/");
			
 
				+      else if (type === 2) {
			
 
				+        let dom = document.querySelector("#bacMusic");
			
 
				+        window.bacMusic = dom.paused;
			
 
				+        this.music = !this.music;
			
 
				+
			
 
				+        this.$emit("stopPlay");
			
 
				+      } else if (type === 3) {
			
 
				+        if (this.like) return;
			
 
				+        this.like = true;
			
 
				+        setTimeout(() => {
			
 
				+          this.like = false;
			
 
				+        }, 2000);
			
 
				+      } else if (type === 4) {
			
 
				+        this.$emit("stopPlay");
			
 
				+        this.share = true;
			
 
				+      } else this.fullShow();
			
 
				+    },
			
 
				+    //点击复制链接
			
 
				+    copyPcTxt() {
			
 
				+      // 存储传递过来的数据
			
 
				+      let OrderNumber = window.location.origin;
			
 
				+      // 创建一个input 元素
			
 
				+      // createElement() 方法通过指定名称创建一个元素
			
 
				+      let newInput = document.createElement("input");
			
 
				+      // 讲存储的数据赋值给input的value值
			
 
				+      newInput.value = OrderNumber;
			
 
				+      // appendChild() 方法向节点添加最后一个子节点。
			
 
				+      document.body.appendChild(newInput);
			
 
				+      // 选中input元素中的文本
			
 
				+      // select() 方法用于选择该元素中的文本。
			
 
				+      newInput.select();
			
 
				+      // 执行浏览器复制命令
			
 
				+      //  execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令
			
 
				+      document.execCommand("Copy");
			
 
				+      // 清空输入框
			
 
				+      newInput.remove();
			
 
				+      alert("复制成功");
			
 
				+    },
			
 
				+    // 初始化轮播图
			
 
				+    baseSw(data) {
			
 
				+      this.list = data;
			
 
				+      this.$nextTick(() => {
			
 
				+        this.Swiper = new Swiper(".swiper-container", {
			
 
				+          slidesPerView: 9,
			
 
				+          spaceBetween: 25,
			
 
				+          scrollbar: {
			
 
				+            el: ".swiper-scrollbar",
			
 
				+          },
			
 
				+        });
			
 
				+      });
			
 
				+    },
			
 
				+  },
			
 
				+  //生命周期 - 创建完成（可以访问当前this实例）
			
 
				+  created() {},
			
 
				+  //生命周期 - 挂载完成（可以访问DOM元素）
			
 
				+  mounted() {
			
 
				+    // 监听esc事件
			
 
				+    document.addEventListener("webkitfullscreenchange", (e) => {
			
 
				+      if (!e.currentTarget.webkitIsFullScreen) this.isFullscreen = false;
			
 
				+    });
			
 
				+
			
 
				+    document.addEventListener("fullscreenchange", (e) => {
			
 
				+      if (!document.fullscreenElement) this.isFullscreen = false;
			
 
				+    });
			
 
				+
			
 
				+    document.addEventListener("MSFullscreenChange", (e) => {
			
 
				+      if (!document.msFullscreenElement) this.isFullscreen = false;
			
 
				+    });
			
 
				+    document.addEventListener("mozfullscreenchange", (e) => {
			
 
				+      if (!document.mozFullScreenElement) this.isFullscreen = false;
			
 
				+    });
			
 
				+  },
			
 
				+  beforeCreate() {}, //生命周期 - 创建之前
			
 
				+  beforeMount() {}, //生命周期 - 挂载之前
			
 
				+  beforeUpdate() {}, //生命周期 - 更新之前
			
 
				+  updated() {}, //生命周期 - 更新之后
			
 
				+  beforeDestroy() {}, //生命周期 - 销毁之前
			
 
				+  destroyed() {}, //生命周期 - 销毁完成
			
 
				+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
			
 
				+};
			
 
				+</script>
			
 
				+<style lang='less' scoped>
			
 
				+.swiper-scrollbar {
			
 
				+  height: 4px;
			
 
				+  background-color: #fff;
			
 
				+  overflow: hidden;
			
 
				+}
			
 
				+/deep/.swiper-scrollbar-drag {
			
 
				+  background-color: #930909;
			
 
				+}
			
 
				+@import "./swiper.css";
			
 
				+.likeAddAnimate-enter-active,
			
 
				+.likeAddAnimate-leave-active {
			
 
				+  transition: all 2s ease;
			
 
				+}
			
 
				+.likeAddAnimate-enter,
			
 
				+.likeAddAnimate-leave {
			
 
				+  transform: translateY(0) scale(0);
			
 
				+  opacity: 0;
			
 
				+}
			
 
				+.likeAddAnimate-enter-to,
			
 
				+.likeAddAnimate-leave-to {
			
 
				+  transform: translateY(-50px) scale(1.2);
			
 
				+  opacity: 1;
			
 
				+}
			
 
				+.Rbottom {
			
 
				+  transition: all 0.5s;
			
 
				+  z-index: 10;
			
 
				+  position: absolute;
			
 
				+  bottom: 24px;
			
 
				+  right: 0px;
			
 
				+  width: 100%;
			
 
				+  .box1 {
			
 
				+    padding: 0 25px;
			
 
				+    width: 100%;
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    .mainrr {
			
 
				+      display: flex;
			
 
				+      .row {
			
 
				+        position: relative;
			
 
				+        cursor: pointer;
			
 
				+        width: 50px;
			
 
				+        text-align: center;
			
 
				+        margin-left: 18px;
			
 
				+        color: #fff;
			
 
				+
			
 
				+        & > img {
			
 
				+          width: 50px;
			
 
				+        }
			
 
				+        p {
			
 
				+          font-size: 12px;
			
 
				+        }
			
 
				+        .likeMove {
			
 
				+          color: #930909;
			
 
				+          position: absolute;
			
 
				+          top: 10px;
			
 
				+          width: 100%;
			
 
				+          text-align: center;
			
 
				+        }
			
 
				+      }
			
 
				+      .active2 {
			
 
				+        color: #930909;
			
 
				+        font-weight: 700;
			
 
				+        p {
			
 
				+          font-size: 12px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+    .mainll {
			
 
				+      .row {
			
 
				+        width: 80px;
			
 
				+        margin-left: 0;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  .box2 {
			
 
				+    overflow: hidden;
			
 
				+    transition: height 0.5s;
			
 
				+    margin-top: 5px;
			
 
				+    width: 100%;
			
 
				+    height: 150px;
			
 
				+    background-color: #d8b275;
			
 
				+    padding: 15px 25px 0;
			
 
				+    .swiper-container {
			
 
				+      cursor: grab;
			
 
				+      height: 100%;
			
 
				+      .swiper-slide {
			
 
				+        cursor: pointer;
			
 
				+        height: 120px;
			
 
				+        img {
			
 
				+          width: 100%;
			
 
				+          height: 110px;
			
 
				+          object-fit: cover;
			
 
				+        }
			
 
				+        p {
			
 
				+          text-align: center;
			
 
				+          height: 30px;
			
 
				+          line-height: 30px;
			
 
				+          color: #ffffff;
			
 
				+          font-size: 14px;
			
 
				+        }
			
 
				+        .plan {
			
 
				+          height: 4px;
			
 
				+          background-color: #930909;
			
 
				+        }
			
 
				+      }
			
 
				+      .active {
			
 
				+        img {
			
 
				+          border: 3px solid #930909;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+.shareBox {
			
 
				+  z-index: 11;
			
 
				+  position: fixed;
			
 
				+  top: 0;
			
 
				+  left: 0;
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  opacity: 0;
			
 
				+  pointer-events: none;
			
 
				+  backdrop-filter: blur(4px);
			
 
				+  transition: opacity 0.5s;
			
 
				+  .shareMain {
			
 
				+    padding: 40px 30px 0;
			
 
				+    position: absolute;
			
 
				+    top: 50%;
			
 
				+    left: 50%;
			
 
				+    transform: translate(-50%, -50%);
			
 
				+    width: 450px;
			
 
				+    height: 650px;
			
 
				+    background-image: url("../assets/img/Goods/shareBac.png");
			
 
				+    background-size: 100% 100%;
			
 
				+    text-align: center;
			
 
				+    .close {
			
 
				+      width: 48px;
			
 
				+      height: 48px;
			
 
				+      cursor: pointer;
			
 
				+      position: absolute;
			
 
				+      right: -24px;
			
 
				+      top: -24px;
			
 
				+      background-image: url("../assets/img/Goods/shareClose.png");
			
 
				+      background-size: 100% 100%;
			
 
				+    }
			
 
				+    h3 {
			
 
				+      text-align: left;
			
 
				+      color: #d8b275;
			
 
				+      font-size: 24px;
			
 
				+      margin-bottom: 50px;
			
 
				+    }
			
 
				+    p {
			
 
				+      font-size: 20px;
			
 
				+      color: #ffffff;
			
 
				+      margin-bottom: 40px;
			
 
				+    }
			
 
				+    img {
			
 
				+      width: 240px;
			
 
				+      margin-bottom: 50px;
			
 
				+    }
			
 
				+    .btnn {
			
 
				+      cursor: pointer;
			
 
				+      width: 280px;
			
 
				+      margin: 0 auto;
			
 
				+      height: 60px;
			
 
				+      border-radius: 30px;
			
 
				+      border: 2px solid #d8b275;
			
 
				+      line-height: 58px;
			
 
				+      font-size: 20px;
			
 
				+      color: #ffffff;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+.shareBoxShow {
			
 
				+  opacity: 1;
			
 
				+  pointer-events: auto;
			
 
				+}
			
 
				+</style>
			
--- a/SWKK/src/components/Swkk.vue
+++ b/SWKK/src/components/Swkk.vue
@@ -1,39 +0,0 @@
 
				-<template>
			
 
				-  <div class="Swkk">Swkk</div>
			
 
				-</template>
			
 
				-
			
 
				-<script>
			
 
				-export default {
			
 
				-  name: "Swkk",
			
 
				-  //import引入的组件需要注入到对象中才能使用
			
 
				-  components: {},
			
 
				-  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>
			
 
				-.Swkk{
			
 
				-  width: 100%;
			
 
				-  height: 100%;
			
 
				-  background-color: aqua;
			
 
				-}
			
 
				-</style>
			
--- a/SWKK/src/components/Video.vue
+++ b/SWKK/src/components/Video.vue
@@ -1,94 +0,0 @@
 
				-<template>
			
 
				-  <div class="Video" :class="{ none: show }">
			
 
				-    <video
			
 
				-      id="VideoDom"
			
 
				-      src="../assets/media/bacVideo.mp4"
			
 
				-      muted
			
 
				-      autoplay
			
 
				-    ></video>
			
 
				-    <div class="skip" :class="{ active: skip }" @click="show = true">跳过</div>
			
 
				-  </div>
			
 
				-</template>
			
 
				-
			
 
				-<script>
			
 
				-export default {
			
 
				-  //import引入的组件需要注入到对象中才能使用
			
 
				-  components: {},
			
 
				-  data() {
			
 
				-    //这里存放数据
			
 
				-    return {
			
 
				-      skip: false,
			
 
				-      show: false,
			
 
				-    };
			
 
				-  },
			
 
				-  //监听属性 类似于data概念
			
 
				-  computed: {},
			
 
				-  //监控data中的数据变化
			
 
				-  watch: {},
			
 
				-  //方法集合
			
 
				-  methods: {},
			
 
				-  //生命周期 - 创建完成（可以访问当前this实例）
			
 
				-  created() {},
			
 
				-  //生命周期 - 挂载完成（可以访问DOM元素）
			
 
				-  mounted() {
			
 
				-    setTimeout(() => {
			
 
				-      this.skip = true;
			
 
				-    }, 3000);
			
 
				-    let dom = document.querySelector("#VideoDom");
			
 
				-    dom.addEventListener("ended", () => {
			
 
				-      this.show=true
			
 
				-    });
			
 
				-  },
			
 
				-  beforeCreate() {}, //生命周期 - 创建之前
			
 
				-  beforeMount() {}, //生命周期 - 挂载之前
			
 
				-  beforeUpdate() {}, //生命周期 - 更新之前
			
 
				-  updated() {}, //生命周期 - 更新之后
			
 
				-  beforeDestroy() {}, //生命周期 - 销毁之前
			
 
				-  destroyed() {}, //生命周期 - 销毁完成
			
 
				-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
			
 
				-};
			
 
				-</script>
			
 
				-<style lang='less' scoped>
			
 
				-.Video {
			
 
				-  display: none;
			
 
				-  transition: opacity 0.5s;
			
 
				-  width: 100%;
			
 
				-  height: 100%;
			
 
				-  overflow: hidden;
			
 
				-  position: absolute;
			
 
				-  top: 0;
			
 
				-  left: 0;
			
 
				-  z-index: 30;
			
 
				-  video {
			
 
				-    position: absolute;
			
 
				-    top: 50%;
			
 
				-    transform: translateY(-50%);
			
 
				-    width: 100%;
			
 
				-  }
			
 
				-  .skip {
			
 
				-    opacity: 0;
			
 
				-    pointer-events: none;
			
 
				-    transition: opacity 0.3s;
			
 
				-    cursor: pointer;
			
 
				-    background-image: url("../assets/img/skip.png");
			
 
				-    background-size: 100% 100%;
			
 
				-    position: absolute;
			
 
				-    bottom: 50px;
			
 
				-    right: 50px;
			
 
				-    width: 60px;
			
 
				-    height: 60px;
			
 
				-    line-height: 60px;
			
 
				-    text-align: center;
			
 
				-    font-size: 16px;
			
 
				-    color: #a50f0f;
			
 
				-  }
			
 
				-  .active {
			
 
				-    opacity: 1;
			
 
				-    pointer-events: auto;
			
 
				-  }
			
 
				-}
			
 
				-.none {
			
 
				-  opacity: 0;
			
 
				-  pointer-events: none;
			
 
				-}
			
 
				-</style>
			
--- a/SWKK/src/components/swiper.css
+++ b/SWKK/src/components/swiper.css
--- a/SWKK/src/components/swiper.js
+++ b/SWKK/src/components/swiper.js
--- a/SWKK/src/router/index.js
+++ b/SWKK/src/router/index.js
@@ -5,7 +5,7 @@ Vue.use(VueRouter)
 
				 
			
 
				 const routes = [
			
 
				   {
			
 
				-    path: '/',
			
 
				+    path: '/:id',
			
 
				     name: 'Home',
			
 
				     component: () => import('../views/Home.vue')
			
 
				   },
			
--- a/SWKK/src/views/Home.vue
+++ b/SWKK/src/views/Home.vue
@@ -1,23 +1,71 @@
 
				+<!--  -->
			
 
				 <template>
			
 
				-  <div class="Home">
			
 
				-    <Video />
			
 
				-    <div class="bacImg" :class="{ none: bacImg }">
			
 
				-      <div class="btnn" @click="bacImg = true">&emsp;进入展馆</div>
			
 
				+  <div class="Home" @click.once="onceClickMusic">
			
 
				+    <div class="loading" v-show="loding">
			
 
				+      <div class="loadBox">
			
 
				+        <div class="loadIcon">
			
 
				+          <img src="../assets/img/loading.png" alt="" />
			
 
				+        </div>
			
 
				+        <div class="txt">加载中</div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="box" @click="stopPlay(false)"></div>
			
 
				+
			
 
				+    <!-- 右上地图 -->
			
 
				+    <div class="rightMap" v-show="!loding && numSta === 2">
			
 
				+      <div class="row1" @click="cutFool('1')" :class="{ active: num === '1' }">
			
 
				+        <div class="rowll"></div>
			
 
				+        <div class="rowrr">一层</div>
			
 
				+      </div>
			
 
				+      <div class="row1" @click="cutFool('2')" :class="{ active: num === '2' }">
			
 
				+        <div class="rowll"></div>
			
 
				+        <div class="rowrr">二层</div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+
			
 
				+    <!-- 右下按钮  -->
			
 
				+    <Rbottom
			
 
				+      ref="RbottomRef"
			
 
				+      @cutKankan="cutKankan"
			
 
				+      @daoLanCut="daoLanCut"
			
 
				+      @stopPlay="stopPlay"
			
 
				+      :acList="frameId"
			
 
				+      :progress="progress"
			
 
				+    />
			
 
				+
			
 
				+    <!-- 左上名字和介绍 -->
			
 
				+    <div class="Ltitle" :class="{ open: title }">
			
 
				+      <div class="Ltitlell" @click="title = !title">
			
 
				+        <img src="../assets/img/LeftTop/title_left.png" alt="" v-if="title" />
			
 
				+        <img src="../assets/img/LeftTop/title_right.png" alt="" v-else />
			
 
				+      </div>
			
 
				+      <div class="Ltitlerr" v-show="title">
			
 
				+        南京雨花台烈士纪念馆{{ num === "1" ? "一" : "二" }}楼
			
 
				+      </div>
			
 
				     </div>
			
 
				-    <Swkk>
			
 
				   </div>
			
 
				 </template>
			
 
				 
			
 
				 <script>
			
 
				-import Video from "../components/Video.vue";
			
 
				-import Swkk from "../components/Swkk.vue";
			
 
				+import Rbottom from "../components/Rbottom.vue";
			
 
				 export default {
			
 
				   name: "Home",
			
 
				-  components: { Video,Swkk },
			
 
				+  //import引入的组件需要注入到对象中才能使用
			
 
				+  components: { Rbottom },
			
 
				   data() {
			
 
				     //这里存放数据
			
 
				     return {
			
 
				-      bacImg: true,
			
 
				+      kankan: null,
			
 
				+      num: "",
			
 
				+      loding: true,
			
 
				+      title: true,
			
 
				+      numSta: 2,
			
 
				+      // -------
			
 
				+      partId: 0,
			
 
				+      frameId: null,
			
 
				+      progress: 0,
			
 
				+      disable: false,
			
 
				+      playing: false,
			
 
				     };
			
 
				   },
			
 
				   //监听属性 类似于data概念
			
@@ -25,11 +73,144 @@ export default {
 
				   //监控data中的数据变化
			
 
				   watch: {},
			
 
				   //方法集合
			
 
				-  methods: {},
			
 
				+  methods: {
			
 
				+    onceClickMusic() {
			
 
				+      this.$refs.RbottomRef.opMusic(true);
			
 
				+      setTimeout(() => {
			
 
				+        window.bacMusic = true;
			
 
				+      }, 500);
			
 
				+    },
			
 
				+
			
 
				+    async stopPlay(val) {
			
 
				+      let player = await this.kankan.TourManager.player;
			
 
				+      player.pause();
			
 
				+      if (!val) this.$refs.RbottomRef.leftCut(-1);
			
 
				+
			
 
				+      this.progress = 0;
			
 
				+    },
			
 
				+    async play() {
			
 
				+      let player = await this.kankan.TourManager.player;
			
 
				+      this.progress = 0;
			
 
				+      if (this.playing) {
			
 
				+        player.pause();
			
 
				+      } else {
			
 
				+        player.play();
			
 
				+      }
			
 
				+    },
			
 
				+
			
 
				+    // 场景导览切换
			
 
				+    async daoLanCut(index) {
			
 
				+      if (this.disable) {
			
 
				+        return;
			
 
				+      }
			
 
				+
			
 
				+      this.frameId = index;
			
 
				+      this.disable = true;
			
 
				+      this.progress = 0;
			
 
				+
			
 
				+      let player = await this.kankan.TourManager.player;
			
 
				+      player.pause();
			
 
				+      await player.selectFrame(index);
			
 
				+      this.disable = false;
			
 
				+    },
			
 
				+
			
 
				+    // 切换楼层
			
 
				+    cutFool(val) {
			
 
				+      // window.location.replace(`#/Swkk${val}`)
			
 
				+      window.location.replace(`#/${val}`);
			
 
				+      setTimeout(() => {
			
 
				+        location.reload(true);
			
 
				+      }, 200);
			
 
				+    },
			
 
				+
			
 
				+    cutKankan(ind) {
			
 
				+      if (ind === 0) {
			
 
				+        // 点击自动漫游
			
 
				+        // this.kankan.Camera.panorama();
			
 
				+        this.play();
			
 
				+      }
			
 
				+      if (ind === 2) this.kankan.Camera.panorama();
			
 
				+      else if (ind === 3) this.kankan.Camera.dollhouse();
			
 
				+      else if (ind === 4) this.kankan.Camera.floorplan();
			
 
				+    },
			
 
				+  },
			
 
				   //生命周期 - 创建完成（可以访问当前this实例）
			
 
				   created() {},
			
 
				   //生命周期 - 挂载完成（可以访问DOM元素）
			
 
				-  mounted() {},
			
 
				+  mounted() {
			
 
				+    let num = this.$route.params.id;
			
 
				+    this.num = num;
			
 
				+    if (num === "1") num = "KJ-aigSkgvRWR";
			
 
				+    else if (num === "2") num = "KJ-ufjLwlSXba";
			
 
				+    let kankan = new KanKan({
			
 
				+      dom: ".box",
			
 
				+      num,
			
 
				+    });
			
 
				+    kankan.use("MinMap", {
			
 
				+      theme: {
			
 
				+        camera_fillStyle: "#930909",
			
 
				+      },
			
 
				+    });
			
 
				+
			
 
				+    kankan.use("TourPlayer").then((player) => {
			
 
				+      player.on("play", ({ partId, frameId }) => {
			
 
				+        this.playing = true;
			
 
				+      });
			
 
				+      player.on("pause", ({ partId, frameId }) => {
			
 
				+        this.playing = false;
			
 
				+      });
			
 
				+      player.on("end", async () => {
			
 
				+        this.playing = false;
			
 
				+        this.progress = 0;
			
 
				+        this.frameId = null;
			
 
				+        this.$refs.RbottomRef.leftCut(-1);
			
 
				+      });
			
 
				+
			
 
				+      player.on("progress", ({ partId, frameId, progress }) => {
			
 
				+        // 不让自动漫游多次点击
			
 
				+        if (frameId === 0) {
			
 
				+          // 防止多次点击自动漫游
			
 
				+          let mainApp = document.querySelector("#app");
			
 
				+          mainApp.style.pointerEvents = "auto";
			
 
				+        }
			
 
				+        // 画面进度
			
 
				+        this.partId = partId;
			
 
				+        this.frameId = frameId;
			
 
				+        this.progress = Number(progress * 100).toFixed(5);
			
 
				+      });
			
 
				+    });
			
 
				+
			
 
				+    // 导览数据
			
 
				+    kankan.TourManager.on("loaded", (tours) => {
			
 
				+      this.$refs.RbottomRef.baseSw(tours);
			
 
				+    });
			
 
				+    kankan.render();
			
 
				+
			
 
				+    kankan.Scene.on("loaded", () => {
			
 
				+      this.loding = false;
			
 
				+      //设置地面logo
			
 
				+      kankan.Scene.setFloorLogo({
			
 
				+        url: "img/diBiao.png",
			
 
				+        size: 40,
			
 
				+      });
			
 
				+    });
			
 
				+
			
 
				+    let obj = {
			
 
				+      floorplan: 4,
			
 
				+      dollhouse: 3,
			
 
				+      panorama: 2,
			
 
				+    };
			
 
				+    // 监听看看的模式
			
 
				+    kankan.Camera.on("mode.beforeChange", ({ toMode, floorIndex }) => {
			
 
				+      let num = obj[toMode];
			
 
				+      this.numSta = num;
			
 
				+      if (this.$refs.RbottomRef && this.$refs.RbottomRef.leftCut) {
			
 
				+        this.$refs.RbottomRef.leftCut(num);
			
 
				+      }
			
 
				+    });
			
 
				+
			
 
				+    this.kankan = kankan;
			
 
				+  },
			
 
				   beforeCreate() {}, //生命周期 - 创建之前
			
 
				   beforeMount() {}, //生命周期 - 挂载之前
			
 
				   beforeUpdate() {}, //生命周期 - 更新之前
			
@@ -40,39 +221,156 @@ export default {
 
				 };
			
 
				 </script>
			
 
				 <style lang='less' scoped>
			
 
				+@keyframes loading {
			
 
				+  100% {
			
 
				+    left: -900px;
			
 
				+  }
			
 
				+}
			
 
				 .Home {
			
 
				   width: 100%;
			
 
				   height: 100%;
			
 
				-  .bacImg {
			
 
				-    transition: opacity 0.5s;
			
 
				+  overflow: hidden;
			
 
				+  position: relative;
			
 
				+  .box {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    position: absolute;
			
 
				+    top: 0;
			
 
				+    left: 0;
			
 
				+  }
			
 
				+  .loading {
			
 
				     position: absolute;
			
 
				     top: 0;
			
 
				     left: 0;
			
 
				+    z-index: 12;
			
 
				     width: 100%;
			
 
				     height: 100%;
			
 
				-    z-index: 29;
			
 
				-    background-image: url("../assets/img/HomeBac.jpg");
			
 
				+    background: rgba(0, 0, 0, 0.5);
			
 
				+    display: flex;
			
 
				+    justify-content: center;
			
 
				+    align-items: center;
			
 
				+    .loadBox {
			
 
				+      color: #fff;
			
 
				+      text-align: center;
			
 
				+      letter-spacing: 2px;
			
 
				+      width: 110px;
			
 
				+      height: 110px;
			
 
				+      border-radius: 2px;
			
 
				+      .loadIcon {
			
 
				+        width: 60px;
			
 
				+        height: 60px;
			
 
				+        position: relative;
			
 
				+        overflow: hidden;
			
 
				+        margin: 10px auto;
			
 
				+        img {
			
 
				+          height: 60px;
			
 
				+          position: absolute;
			
 
				+          left: 0;
			
 
				+          top: 0;
			
 
				+          animation: loading 1s steps(15) infinite;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  /deep/[xui_min_map] {
			
 
				+    width: 180px;
			
 
				+    height: 180px;
			
 
				+    border: 2px solid #d8b275;
			
 
				+    background-color: rgba(81, 32, 32, 0.4);
			
 
				+    border-radius: 0 0 8px 8px;
			
 
				+    right: 20px;
			
 
				+    top: 65px;
			
 
				+  }
			
 
				+
			
 
				+  .rightMap {
			
 
				+    position: absolute;
			
 
				+    z-index: 1;
			
 
				+    right: 20px;
			
 
				+    top: 28px;
			
 
				+    border: 2px solid #d8b275;
			
 
				+
			
 
				+    border-radius: 8px 8px 0 0;
			
 
				+    color: #fff;
			
 
				+    width: 180px;
			
 
				+    height: 40px;
			
 
				+    background-color: #930909;
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    padding: 0 15px;
			
 
				+    .row1 {
			
 
				+      cursor: pointer;
			
 
				+      display: flex;
			
 
				+      justify-content: center;
			
 
				+      align-items: center;
			
 
				+      font-size: 14px;
			
 
				+      .rowll {
			
 
				+        margin-right: 6px;
			
 
				+        width: 20px;
			
 
				+        height: 20px;
			
 
				+        border-radius: 50%;
			
 
				+        border: 1px solid #d8b275;
			
 
				+        position: relative;
			
 
				+      }
			
 
				+      .rowrr {
			
 
				+        padding-bottom: 2px;
			
 
				+      }
			
 
				+    }
			
 
				+    .active {
			
 
				+      color: #d8b275;
			
 
				+      pointer-events: none;
			
 
				+      .rowll {
			
 
				+        &::after {
			
 
				+          content: "";
			
 
				+          position: absolute;
			
 
				+          top: 50%;
			
 
				+          left: 50%;
			
 
				+          transform: translate(-50%, -50%);
			
 
				+          border-radius: 50%;
			
 
				+          width: 10px;
			
 
				+          height: 10px;
			
 
				+          background-color: #d8b275;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .Ltitle {
			
 
				+    transition: all 0.3s;
			
 
				+    position: absolute;
			
 
				+    z-index: 10;
			
 
				+    left: -196px;
			
 
				+    top: 28px;
			
 
				+    width: 230px;
			
 
				+    height: 34px;
			
 
				+    background-image: url("../assets/img/LeftTop/label_title.png");
			
 
				     background-size: 100% 100%;
			
 
				-    .btnn {
			
 
				+    display: flex;
			
 
				+    .Ltitlell {
			
 
				+      position: relative;
			
 
				+      left: 196px;
			
 
				       cursor: pointer;
			
 
				-      position: absolute;
			
 
				-      bottom: 70px;
			
 
				-      left: 50%;
			
 
				-      transform: translateX(-50%);
			
 
				-      width: 302px;
			
 
				-      height: 140px;
			
 
				-      line-height: 190px;
			
 
				-      font-weight: 700;
			
 
				-      text-align: center;
			
 
				-      font-size: 24px;
			
 
				-      color: #930909;
			
 
				-      background-image: url("../assets/img/HomeBtnn.png");
			
 
				-      background-size: 100% 100%;
			
 
				+      width: 44px;
			
 
				+      height: 100%;
			
 
				+      padding: 6px 0 0px 10px;
			
 
				+
			
 
				+      & > img {
			
 
				+        width: 8px;
			
 
				+        height: 13px;
			
 
				+      }
			
 
				+    }
			
 
				+    .Ltitlerr {
			
 
				+      width: 186px;
			
 
				+      height: 40px;
			
 
				+      line-height: 32px;
			
 
				+      font-size: 14px;
			
 
				+      color: #fff;
			
 
				     }
			
 
				   }
			
 
				-  .none {
			
 
				-    opacity: 0;
			
 
				-    pointer-events: none;
			
 
				+  .open {
			
 
				+    left: 0;
			
 
				+    .Ltitlell {
			
 
				+      left: 0;
			
 
				+    }
			
 
				   }
			
 
				 }
			
 
				 </style>
			
--- a/vue/src/views/Video/index.vue
+++ b/vue/src/views/Video/index.vue
@@ -37,7 +37,7 @@ export default {
 
				   //方法集合
			
 
				   methods: {
			
 
				     toSwkk(){
			
 
				-      window.location.replace('/Swkk')
			
 
				+      window.location.replace('/Swkk/#/1')
			
 
				     }
			
 
				   },
			
 
				   //生命周期 - 创建完成（可以访问当前this实例）