swkk: 热点详情 做了一半

src/App.vue

@@ -79,4 +79,8 @@ body {
 .fade-out-leave-to {
   opacity: 0;
 }
+
+.viewer-backdrop {
+  background-color: rgba(0, 0, 0, 90%) !important;
+}
 </style>

src/components/HotspotDetail.vue

@@ -0,0 +1,401 @@
+<template>
+  <div class="hotspot-detail">
+    <button
+      class="desc"
+      @click="isShowDesc = true"
+    >
+      <img
+        src="@/assets/images/desc.png"
+        alt="详情"
+        draggable="false"
+      >
+    </button>
+
+    <h1>{{ typesToShow[currentTabIdx].list[currentSlideIdx].title }}</h1>
+
+    <button
+      class="close"
+      @click="routeBack"
+    >
+      <img
+        src="@/assets/images/close.png"
+        alt="关闭"
+        draggable="false"
+      >
+    </button>
+
+    <div
+      v-show="typesToShow[currentTabIdx].name === '图片'"
+      class="swiper-wrapper-mine"
+    >
+      <div
+        class="swiper-root"
+      >
+        <div
+          v-viewer="{
+            button: true,
+            navbar: false,
+            title: false,
+            toolbar: false,
+            tooltip: false,
+            movable: true,
+            zoomable: true,
+            rotatable: true,
+            scalable: true,
+            transition: false,
+            fullscreen: false,
+            keyboard: true,
+            loop: false,
+          }"
+          class="swiper-wrapper"
+        >
+          <img
+            v-for="(item, index) in typesToShow[currentTabIdx].list"
+            :key="index"
+            class="swiper-slide"
+            :src="item.url"
+            alt=""
+            draggable="false"
+          >
+        </div>
+        <div class="swiper-pagination" />
+        <div class="swiper-button-prev" />
+        <div class="swiper-button-next" />
+      </div>
+    </div>
+
+    <div
+      v-show="typesToShow[currentTabIdx].name === '视频'"
+      class="swiper-wrapper-mine"
+    >
+      <div
+        class="swiper-root"
+      >
+        <div
+          class="swiper-wrapper"
+        >
+          <img
+            v-for="(item, index) in typesToShow[currentTabIdx].list"
+            :key="index"
+            class="swiper-slide"
+            :src="item.url"
+            alt=""
+            draggable="false"
+          >
+        </div>
+        <div class="swiper-pagination" />
+        <div class="swiper-button-prev" />
+        <div class="swiper-button-next" />
+      </div>
+    </div>
+
+    <div
+      v-show="typesToShow[currentTabIdx].name === '模型'"
+      class="swiper-wrapper-mine"
+    >
+      <div
+        class="swiper-root"
+      >
+        <div
+          class="swiper-wrapper"
+        >
+          <img
+            v-for="(item, index) in typesToShow[currentTabIdx].list"
+            :key="index"
+            class="swiper-slide"
+            :src="item.url"
+            alt=""
+            draggable="false"
+          >
+        </div>
+        <div class="swiper-pagination" />
+        <div class="swiper-button-prev" />
+        <div class="swiper-button-next" />
+      </div>
+    </div>
+
+    <div
+      v-show="typesToShow[currentTabIdx].name === '音频'"
+      class="swiper-wrapper-mine"
+    >
+      <div
+        class="swiper-root"
+      >
+        <div
+          class="swiper-wrapper"
+        >
+          <img
+            v-for="(item, index) in typesToShow[currentTabIdx].list"
+            :key="index"
+            class="swiper-slide"
+            :src="item.url"
+            alt=""
+            draggable="false"
+          >
+        </div>
+        <div class="swiper-pagination" />
+        <div class="swiper-button-prev" />
+        <div class="swiper-button-next" />
+      </div>
+    </div>
+
+    <div class="type-tabbar">
+      <button
+        v-for="(typeItem, index) in typesToShow"
+        :key="typeItem.name"
+        class="tab"
+        :class="{
+          active: currentTabIdx === index
+        }"
+        @click="currentTabIdx = index"
+      >
+        <img
+          :src="currentTabIdx !== index ? typeItem.icon : typeItem.iconActive"
+          alt=""
+          draggable="false"
+        >
+        <div>{{ typeItem.name + ' ' + typeItem.list.length }}</div>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import Swiper from 'swiper/swiper-bundle.esm.js'
+import 'swiper/swiper-bundle.css'
+
+export default {
+  data() {
+    return {
+      types: [
+        {
+          name: '视频',
+          icon: require('@/assets/images/swkk/video.png'),
+          iconActive: require('@/assets/images/swkk/video_1.png'),
+          list: [
+            {
+              title: 'title',
+              url: 'asdf',
+              desc: 'aslf,.dsngkdjlg .,zdskgj. s/lkdsf',
+            },
+          ]
+        },
+        {
+          name: '模型',
+          icon: require('@/assets/images/swkk/model.png'),
+          iconActive: require('@/assets/images/swkk/model_1.png'),
+          list: [
+            {
+              title: 'title',
+              url: 'asdf',
+              desc: 'aslf,.dsngkdjlg .,zdskgj. s/lkdsf',
+            },
+          ]
+        },
+        {
+          name: '音频',
+          icon: require('@/assets/images/swkk/audio.png'),
+          iconActive: require('@/assets/images/swkk/audio_1.png'),
+          list: [
+            {
+              title: 'title',
+              url: require('@/assets/images/close.png'),
+              desc: 'aslf,.dsngkdjlg .,zdskgj. s/lkdsf',
+            },
+            {
+              title: 'title2',
+              url: require('@/assets/images/curvy-line.png'),
+              desc: '看来是关键时刻就是雷锋精神是，送到了方式的方式。',
+            },
+          ]
+        },
+        {
+          name: '图片',
+          icon: require('@/assets/images/swkk/video.png'),
+          iconActive: require('@/assets/images/swkk/video_1.png'),
+          list: [
+            {
+              title: 'title',
+              url: require('@/assets/images/close.png'),
+              desc: 'aslf,.dsngkdjlg .,zdskgj. s/lkdsf',
+            },
+            {
+              title: 'title2',
+              url: require('@/assets/images/curvy-line.png'),
+              desc: '看来是关键时刻就是雷锋精神是，送到了方式的方式。',
+            },
+          ]
+        },
+      ],
+      currentTabIdx: 0,
+      currentSlideIdx: 0,
+      isShowDesc: false,
+    }
+  },
+  computed: {
+    typesToShow() {
+      return this.types.filter((item) => {
+        return item.list.length
+      })
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      const that = this
+      const swiper = new Swiper('.swiper-root', {
+      // If we need pagination
+        pagination: {
+          el: '.swiper-pagination',
+        },
+
+        // Navigation arrows
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+
+        on: {
+          slideChange: function(e) {
+            that.currentSlideIdx = e.activeIndex
+          }
+        }
+      })
+    })
+  },
+  methods: {
+    routeBack: globalUtils.throttle(function() {
+      this.$router.go(-1)
+    }, 500)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.hotspot-detail {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255,251,245,0.9);
+  backdrop-filter: blur(4px);
+  z-index: 2;
+  > button.desc {
+    position: absolute;
+    top: 3.2rem;
+    left: 1.25rem;
+    width: 5rem;
+    height: 5rem;
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  > h1 {
+    position: absolute;
+    top: 4rem;
+    left: 10.46rem;
+    right: 10.46rem;
+    text-align: center;
+    font-size: 2rem;
+    font-weight: bold;
+    color: #930909;
+    line-height: 2.34rem;
+  }
+  > button.close {
+    position: absolute;
+    top: 3.2rem;
+    right: 1.25rem;
+    width: 5rem;
+    height: 5rem;
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .swiper-wrapper-mine {
+    top: 11rem;
+    width: calc(100% - 1.67rem * 2 - 1.83rem * 2 - 1.67rem * 2);
+    margin: 0 auto;
+    height: 60%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    .swiper-root {
+      overflow: hidden;
+      height: 100%;
+      .swiper-wrapper {
+        // 用类选择器不会生效
+        img {
+          object-fit: contain;
+        }
+      }
+      .swiper-pagination {
+        top: 100%;
+        bottom: initial;
+        height: 0.42rem;
+        /deep/.swiper-pagination-bullet {
+          width: 5.34rem;
+          height: 0.42rem;
+          background-color: #999999;
+          margin-right: 0.79rem;
+          // background-color: #930909;
+          border-radius: initial;
+        }
+        /deep/.swiper-pagination-bullet.swiper-pagination-bullet-active {
+          background-color: #930909;
+        }
+      }
+      .swiper-button-prev {
+        left: calc(-1.67rem - 1.83rem);
+        width: 1.83rem;
+        height: 3.58rem;
+        background-image: url(@/assets/images/arrow-left.png);
+        background-size: contain;
+        &::after {
+          content: '';
+        }
+      }
+      .swiper-button-next {
+        right: calc(-1.67rem - 1.83rem);
+        width: 1.83rem;
+        height: 3.58rem;
+        background-image: url(@/assets/images/arrow-right.png);
+        background-size: contain;
+        &::after {
+          content: '';
+        }
+
+      }
+    }
+  }
+
+  > .type-tabbar {
+    position: absolute;
+    bottom: 11.9%;
+    left: 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    gap: 2.08rem;
+    > button {
+      > img {
+        width: 5rem;
+        height: 5rem;
+        margin-bottom: 0.42rem;
+      }
+      > div {
+        font-size: 1.25rem;
+        color: #666666;
+      }
+      &.active {
+        > div {
+          color: #930909;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/RelicDetail.vue

@@ -90,7 +90,7 @@
           >
         </button>
         <button
-          @click="$router.go(-1)"
+          @click="routeBack"
         >
           <img
             src="@/assets/images/close.png"
@@ -207,6 +207,11 @@ export default {
         value: '一级',
       }
     ]
+  },
+  methods: {
+    routeBack: globalUtils.throttle(function() {
+      this.$router.go(-1)
+    }, 500)
   }
 }
 </script>

src/config.js

@@ -8,10 +8,6 @@ export default {
       self: '6',
       children: {},
     },
-    swkkApp: {
-      self: '0',
-      children: {},
-    },
     pano: {
       self: '1',
       children: {},

src/router/index.js

@@ -8,6 +8,7 @@ import SwkkView from "@/views/SwkkView.vue"
 import ObliqueView from "@/views/ObliqueView.vue"
 import PanoView from "@/views/PanoView.vue"
 import PanoList from "@/components/PanoList.vue"
+import HotspotDetail from "@/components/HotspotDetail.vue"
 import TestView from "@/components/TestView.vue"
 
 Vue.use(VueRouter)
@@ -52,6 +53,17 @@ const routes = [
       isShowBottomBar: true,
       canFullScreen: true,
     },
+    children: [
+      {
+        path: 'hotspot-detail',
+        name: 'HotspotDetail',
+        component: HotspotDetail,
+        meta: {
+          isShowBottomBar: false,
+          canFullScreen: false,
+        }
+      },
+    ],
     beforeEnter (to, from, next) {
       if (from.name === 'HomeView') {
         // 从首页过来的，需要reload。此时location还没有变。

src/views/SwkkView.vue

@@ -4,7 +4,6 @@
   >
     <div
       class="swkk-wrap"
-      :style="{zIndex: $globalConfig.zIndex.swkkApp.self}"
     />
 
     <menu>
@@ -162,6 +161,8 @@
         </li>
       </ul>
     </div>
+
+    <router-view />
   </div>
 </template>
 
@@ -382,6 +383,11 @@ export default {
 
         // 聚焦当前点击的热点
         TagView.focus(e.data.sid)
+
+        this.$router.push({
+          name: 'HotspotDetail',
+          params: this.hotspotDetail,
+        })
       })
     })
 
@@ -499,12 +505,14 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
+  z-index: 0;
   .swkk-wrap {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
+    z-index: 0;
   }
 
   > menu {