up

QJKK/src/framework/show/component/Map.vue

@@ -0,0 +1,56 @@
+<template>
+<div class='Map' @click="cutVr('fd720_e0YmU728Q',3)"></div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+//import引入的组件需要注入到对象中才能使用
+components: {},
+data() {
+//这里存放数据
+return {
+
+};
+},
+//监听属性 类似于data概念
+computed: {},
+//监控data中的数据变化
+watch: {},
+//方法集合
+methods: {
+  cutVr(code,index){
+    this.$emit('mapCutVr',code,index)
+  }
+},
+//生命周期 - 创建完成（可以访问当前this实例）
+created() {
+
+},
+//生命周期 - 挂载完成（可以访问DOM元素）
+mounted() {
+
+},
+beforeCreate() {}, //生命周期 - 创建之前
+beforeMount() {}, //生命周期 - 挂载之前
+beforeUpdate() {}, //生命周期 - 更新之前
+updated() {}, //生命周期 - 更新之后
+beforeDestroy() {}, //生命周期 - 销毁之前
+destroyed() {}, //生命周期 - 销毁完成
+activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.Map{
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 98;
+  width: 100%;
+  height: 100%;
+  background-color: aqua;
+}
+
+</style>

QJKK/src/framework/show/component/rightInco.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="rightInco">
+    <audio src="@/assets/media/bacMusic.mp3" loop id="bacMusic"></audio>
+    <!-- 右侧按钮 -->
+    <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),
+      }"
+    >
+      <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}.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 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>
+export default {
+  name: "rightInco",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      rightList: [
+        { name: "首页", type: 1 },
+        { name: "声音", type: 2 },
+        { name: "点赞", type: 3 },
+        { name: "分享", type: 4 },
+      ],
+      music: false,
+      like: false,
+      share: false,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {
+    music(val) {
+      let dom = document.querySelector("#bacMusic");
+      if (val) dom.play();
+      else dom.pause();
+    },
+  },
+  //方法集合
+  methods: {
+    openMusic() {
+      this.music = true;
+    },
+    //点击复制链接
+    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("复制成功");
+    },
+    rightClisk(type) {
+      if (type === 1) window.location.replace("/YHT/index.html");
+      if (type === 2) this.music = !this.music;
+      if (type === 3) {
+        if (this.like) return;
+        this.like = true;
+        setTimeout(() => {
+          this.like = false;
+        }, 2000);
+      }
+      if (type === 4) this.share = true;
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.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(-30px) scale(1.2);
+  opacity: 1;
+}
+.rightInco {
+  z-index: 99;
+  position: absolute;
+  top: 35px;
+  right: 98px;
+  height: 60px;
+  display: flex;
+  color: #333333;
+  .row {
+    position: relative;
+    cursor: pointer;
+    width: 50px;
+    text-align: center;
+    margin-left: 18px;
+    & > img {
+      width: 50px;
+    }
+    .likeMove {
+      color: #930909;
+      position: absolute;
+      top: 10px;
+      width: 100%;
+      text-align: center;
+    }
+  }
+  .active2 {
+    color: #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>

QJKK/src/framework/show/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="panocon">
+  <div class="panocon" @click.once="$refs.RightIncoRef.openMusic()">
     <template v-if="showInfo">
       <iframe
         class="iframe-scene-3d"
@@ -37,7 +37,7 @@
         />
       </div>
 
-      <list
+      <List
         v-if="canLoad"
         @select="handleSelect"
         :select="activeItem"
@@ -64,26 +64,42 @@
         </div>
       </div>
     </template>
+
+    <!-- 右上的几个按钮 -->
+    <RightInco ref="RightIncoRef" />
+
+    <!-- 倾斜摄影 -->
+    <MapPage v-if="MapShow" @mapCutVr="mapCutVr" />
+
+    <!-- 左侧返回 -->
+    <div class="backMap" @click="MapShow = true">
+      <img src="@/assets/img/Goods/back.png" alt="" />
+      <p>返回</p>
+    </div>
   </div>
 </template>
 
 <script>
+import RightInco from "./component/rightInco.vue";
+import MapPage from "./component/Map.vue";
 import * as krfn from "@/core/index.js";
-import { getPanoInfo, checkPassword, getCameraStreamUrl } from "@/api";
+import { getPanoInfo, checkPassword } from "@/api";
 import password from "./popup/password";
 import preview from "./popup/preview";
 import { $smallWaiting } from "@/components/shared/loading";
 
 import { mapGetters } from "vuex";
 
-import list from "./list";
+import List from "./list";
 
 let __krfn = krfn.default;
 
 export default {
   name: "showIndex",
   components: {
-    list,
+    RightInco,
+    MapPage,
+    List,
     password,
     preview,
   },
@@ -94,6 +110,8 @@ export default {
   },
   data() {
     return {
+      MapShow: true,
+
       showPreview: false,
       isFullscreen: false,
       showTips: false,
@@ -123,6 +141,12 @@ export default {
     };
   },
   methods: {
+    // 地图切换vr
+    mapCutVr(code, index) {
+      this.$refs.myListRef.handleVR({ sceneCode: code }, index);
+      this.$refs.myListRef.incoShowClose()
+    },
+
     handlePassword(data) {
       checkPassword(
         {
@@ -280,7 +304,8 @@ export default {
       },
     },
     activeItem: {
-      handler(newVal) {
+      handler(newVal, oldVal) {
+        if (oldVal) this.MapShow = false;
         console.log("切换了vr", newVal);
         this.currentHotspot = "";
         $("#pano").empty();
@@ -360,6 +385,18 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.backMap {
+  position: absolute;
+  z-index: 97;
+  top: 35px;
+  left: 30px;
+  cursor: pointer;
+  width: 50px;
+  text-align: center;
+  & > img {
+    width: 50px;
+  }
+}
 .panocon {
   width: 100%;
   height: 100%;

QJKK/src/framework/show/list.vue

@@ -1,20 +1,18 @@
 <template>
   <div class="list" :class="{ listHide: incoShow }">
-    <!-- 收起之后展开 -->
-    <div
-      class="incoShow2"
-      @click="incoShow = false"
-      :class="{ incoNone: !incoShow }"
-    >
-      <img src="../../assets/img/menu2.png" alt="" />
+    <div class="incoShow" @click="incoShow = !incoShow">
+      <img src="../../assets/img/menu2.png" alt="" v-if="incoShow" />
+      <img src="../../assets/img/menu.png" alt="" v-else />
     </div>
+    <!-- 收起之后展开 -->
+
     <div class="topTitBox">
       <div
         class="oneLi"
         @click="handleTabone({ children: [1], id: 100, name: '航拍' }, 0)"
         :class="{ activeOne: 100 == taboneActive.id }"
       >
-        航拍
+        航拍全景
       </div>
 
       <div
@@ -36,9 +34,6 @@
           </li>
         </ul>
       </div>
-      <div class="incoShow" @click="incoShow = true">
-        <img src="../../assets/img/menu.png" alt="" />
-      </div>
     </div>
     <div class="listBac">
       <!-- 左右箭头 -->
@@ -101,10 +96,12 @@
       </div>
     </div>
     <!-- 右下角的几个按钮 -->
-    <div class="txtShowBtnBox">
-      <div class="txtShowBtn2" @click="fullShow" title="全屏">
-        <img src="../../assets/img/fullscreen.png" alt="" />
-      </div>
+    <div class="txtShowBtn2" @click="fullShow">
+      <img
+        :src="require(`@/assets/img/Goods/full${isFullscreen ? 'Ac' : ''}.png`)"
+        alt=""
+      />
+      <p :class="{ acFull: isFullscreen }">全屏</p>
     </div>
   </div>
 </template>
@@ -179,6 +176,11 @@ export default {
   },
 
   methods: {
+    // 从倾斜摄影进来
+    incoShowClose() {
+      this.incoShow = true;
+    },
+
     // 点击全屏
     fullShow() {
       let element = document.documentElement;
@@ -338,76 +340,77 @@ export default {
       },
     },
   },
-  created() {
-    this.$nextTick(() => {
-      setTimeout(() => {
-        let i = this.scenes.findIndex((v) => v.sceneCode === this.sceneNum);
-        if (this.scenes[i + 1]) this.handleVR(this.scenes[i + 1], i + 1);
-        else this.handleVR(this.scenes[0], 0);
-      }, 200);
-    });
-  },
+  created() {},
 };
 </script>
 
 <style lang="less" scoped>
-.txtShowBtnBox {
+.txtShowBtn2 {
   position: fixed;
   z-index: 15;
-  bottom: 10px;
-  right: 15px;
-}
-.txtShowBtn2 {
+  top: 35px;
+  right: 30px;
+
+  color: #333333;
   width: 50px;
-  height: 50px;
   cursor: pointer;
-  background-image: url("../../assets/img/fullscreen.png");
   background-size: 100% 100%;
+  & > img {
+    width: 100%;
+  }
+  .acFull {
+    color: #930909;
+  }
 }
 
 .list {
   transition: bottom 0.5s;
   position: fixed;
-  bottom: -18px;
+  bottom: -4px;
   left: 0;
-  z-index: 30;
+  z-index: 99;
   text-align: center;
   width: 100%;
-
-  .incoShow2 {
-    transition: opacity 0.5s;
-    border-radius: 50%;
-    background: repeating-linear-gradient(
-      to right,
-      rgba(75, 121, 132, 0.3),
-      rgba(2, 42, 88, 1),
-      rgba(2, 42, 88, 0.3)
-    );
+  height: 330px;
+  background-image: url("../../assets/img/dalan.png");
+  background-size: 100% 100%;
+  .incoShow {
     cursor: pointer;
     z-index: 20;
-    position: fixed;
-    right: 462px;
-    width: 50px;
-    height: 50px;
-    bottom: 10px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 40px;
+    height: 40px;
+    top: 30px;
     display: flex;
     justify-content: center;
     align-items: center;
+    & > img {
+      width: 20px;
+      height: 18px;
+    }
   }
-  .incoNone {
-    opacity: 0;
-    pointer-events: none;
-  }
+
   .topTitBox {
+    color: #333333;
+    max-width: 1000px;
+    z-index: 10;
+    position: absolute;
+    top: 135px;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 54px;
+    padding: 0 0px 0 85px;
     .oneLi {
+      padding: 0 8px;
       position: absolute;
       z-index: 20;
-      width: 100px;
-      height: 48px;
+      height: 30px;
       top: 3px;
       left: 5px;
       cursor: pointer;
-      line-height: 48px;
+      line-height: 30px;
     }
     .activeOne {
       color: #d00724;
@@ -416,69 +419,41 @@ export default {
       opacity: 1;
       margin-right: 15px;
     }
-    max-width: 1000px;
-    z-index: 10;
-    position: absolute;
-    top: -60px;
-    left: 50%;
-    transform: translateX(-50%);
-    height: 54px;
-    background: repeating-linear-gradient(
-      to right,
-      rgba(75, 121, 132, 0.3),
-      rgba(2, 42, 88, 1),
-      rgba(2, 42, 88, 0.3)
-    );
-    padding: 0 60px 0 120px;
-    .incoShow {
-      cursor: pointer;
-      z-index: 20;
-      position: absolute;
-      right: 5px;
-      width: 40px;
-      height: 40px;
-      top: 10px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      & > img {
-        width: 24px;
-        height: 24px;
-      }
-    }
   }
   .topTit {
     .row {
-      opacity: 0.5;
       cursor: pointer;
       margin: 3px 10px 0;
-      padding: 0 20px;
-      height: 48px;
-      line-height: 48px;
+      padding: 0 10px;
+      height: 30px;
+      line-height: 30px;
       width: auto;
-      min-width: 100px;
     }
     .active {
+      color: #d00724;
+      border-bottom: 2px solid #d00724;
       pointer-events: none;
       opacity: 1;
-      color: #8af8ff;
-      background-image: url("../../assets/img/selected.png");
-      background-size: 100% 100%;
     }
   }
   .listBac {
-    width: 80%;
-    margin: 0 auto;
-    height: 130px;
-    background-image: url("../../assets/img/footer.png");
-    background-size: 100% 100%;
-    position: relative;
+    width: 100%;
+    height: 140px;
+    position: absolute;
+    bottom: 10px;
+    left: 0;
+    .swiper-scrollbar {
+      background-color: #d8b275;
+    }
+    /deep/.swiper-scrollbar-drag {
+      background-color: #930909;
+    }
     .swiper-button-prev {
       position: absolute;
-      left: 80px;
-      top: 42px;
-      width: 26px;
-      height: 74px;
+      left: 30px;
+      top: 50%;
+      width: 20px;
+      height: 30px;
       background: url("../../assets/img/left.png") no-repeat;
       background-size: 100% 100%;
       &::after {
@@ -487,10 +462,10 @@ export default {
     }
     .swiper-button-next {
       position: absolute;
-      right: 80px;
-      top: 42px;
-      width: 26px;
-      height: 74px;
+      right: 30px;
+      top: 50%;
+      width: 20px;
+      height: 30px;
       background: url("../../assets/img/right.png") no-repeat;
       background-size: 100% 100%;
       &::after {
@@ -502,13 +477,12 @@ export default {
   .l-con {
     width: 100%;
     transition: all ease 0.3s;
-    max-height: 0px;
     overflow: hidden;
     pointer-events: auto;
 
     .pic-con {
       border-radius: 4px;
-      padding: 0 140px;
+      padding: 0 70px;
     }
 
     .clip-scroller {
@@ -542,58 +516,29 @@ export default {
           width: 100%;
           padding: 0;
         }
-
-        // &.active {
-        //   @size:5px;
-        //   &::before {
-        //     content: "";
-        //     display: inline-block;
-        //     width: 0;
-        //     height: 0;
-        //     border-left:  @size * 1.5 solid transparent;
-        //     border-right:  @size * 1.5 solid transparent;
-        //     border-top:  @size*2 solid rgba(0, 0, 0, 0.5);
-        //     position: absolute;
-        //     top: -20px;
-        //     left: 50%;
-        //     transform: translateX(-50%);
-        //   }
-        // }
       }
     }
     .pic-list {
-      padding: 10px 0;
       > li {
         cursor: pointer;
-        width: 100px;
-        height: 90px;
+        width: 180px;
+        height: 140px;
         > div {
           box-sizing: border-box;
           width: 100%;
-          height: 100%;
+          height: 140px;
           opacity: 1;
           border-radius: 4px;
-          overflow: hidden;
           position: relative;
           cursor: pointer;
-          &::after {
-            content: "";
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.5);
-          }
+
           .dWenZi {
+            color: #333333;
             width: 100%;
             text-align: center;
-            padding: 5px 0;
-            height: 36px;
-            line-height: 36px;
             position: absolute;
             left: 0;
-            bottom: 0px;
+            bottom: 15px;
             z-index: 10;
             font-size: 14px;
             padding: 0 5px;
@@ -602,11 +547,9 @@ export default {
             white-space: nowrap;
           }
           > img {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            z-index: -1;
+            width: 100%;
+            height: 100px;
+            object-fit: cover;
           }
           .iconfont {
             position: absolute;
@@ -626,14 +569,11 @@ export default {
             width: 100%;
           }
           &.active {
-            border: 3px solid #8af8ff;
-            .dWenZi {
-              background-color: rgba(0, 0, 0, 0.5);
-              height: 30px;
-              line-height: 30px;
+            & > img {
+              border: 3px solid #930909;
             }
-            &::after {
-              background-color: transparent;
+            .dWenZi {
+              color: #930909;
             }
           }
         }
@@ -652,11 +592,10 @@ export default {
     &.active {
       position: relative;
       top: 0px;
-      max-height: 130px;
     }
   }
 }
 .listHide {
-  bottom: -300px;
+  bottom: -260px;
 }
 </style>

vue/src/views/Goods/index.vue

@@ -148,7 +148,6 @@ export default {
         { name: "点赞", type: 3 },
         { name: "分享", type: 4 },
       ],
-      rightType: "",
       music: false,
       like: false,
       share: false,