pc端热点详情

src/components/HotspotDetail.vue

@@ -1,181 +1,190 @@
 <template>
   <div class="hotspot-detail">
-    <button
-      v-show="descForShow"
-      class="desc"
-      @click="isShowDesc = true"
-    >
-      <img
-        src="@/assets/images/desc.png"
-        alt="详情"
-        draggable="false"
+    <div class="wrapper">
+      <!-- <button
+        v-show="descForShow"
+        class="desc"
+        @click="isShowDesc = true"
       >
-    </button>
+        <img
+          src="@/assets/images/desc.png"
+          alt="详情"
+          draggable="false"
+        >
+      </button> -->
 
-    <h1 v-html="titleForShow" />
+      <h1
+        :title="titleForShow"
+        v-html="titleForShow"
+      />
 
-    <button
-      class="close"
-      @click="$emit('close')"
-    >
-      <img
-        src="@/assets/images/close.png"
-        alt="关闭"
-        draggable="false"
+      <button
+        class="close"
+        @click="$emit('close')"
       >
-    </button>
+        <img
+          src="@/assets/images/close.png"
+          alt="关闭"
+          draggable="false"
+        >
+      </button>
 
-    <div
-      v-if="typesForShow[currentTabIdx].name === '视频'"
-      class="swiper-wrapper-mine video-wrap"
-    >
       <div
-        class="swiper-root swiper-root"
+        v-if="typesForShow[currentTabIdx].name === '视频'"
+        class="swiper-wrapper-mine video-wrap"
       >
         <div
-          class="swiper-wrapper"
+          class="swiper-root swiper-root"
         >
           <div
-            v-for="(item, index) in typesForShow[currentTabIdx].list"
-            :key="index"
-            class="swiper-slide"
+            class="swiper-wrapper"
           >
-            <video
-              ref="video"
-              :src="`https://4dkk.4dage.com/scene_edit_data/${sceneCode}/user/${item.url}`"
-              controls
-              controlslist="nodownload"
-              disablePictureInPicture
-            />
+            <div
+              v-for="(item, index) in typesForShow[currentTabIdx].list"
+              :key="index"
+              class="swiper-slide"
+            >
+              <video
+                ref="video"
+                :src="`https://4dkk.4dage.com/scene_edit_data/${sceneCode}/user/${item.url}`"
+                controls
+                controlslist="nodownload"
+                disablePictureInPicture
+              />
+            </div>
           </div>
+          <div class="swiper-pagination">
+            <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesForShow[currentTabIdx].list.length }}</span>
+          </div>
+          <div class="swiper-button-prev" />
+          <div class="swiper-button-next" />
         </div>
-        <div class="swiper-pagination">
-          <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesForShow[currentTabIdx].list.length }}</span>
-        </div>
-        <div class="swiper-button-prev" />
-        <div class="swiper-button-next" />
       </div>
-    </div>
 
-    <div
-      v-if="typesForShow[currentTabIdx].name === '模型'"
-      class="swiper-wrapper-mine model-wrap"
-    >
       <div
-        class="swiper-root"
+        v-if="typesForShow[currentTabIdx].name === '模型'"
+        class="swiper-wrapper-mine model-wrap"
       >
         <div
-          class="swiper-wrapper"
+          class="swiper-root"
         >
-          <iframe
-            v-for="(item, index) in typesForShow[currentTabIdx].list"
-            :key="index"
-            :src="item.url"
-            frameborder="0"
-            class="swiper-slide"
-          />
-        </div>
-        <div class="swiper-pagination">
-          <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesForShow[currentTabIdx].list.length }}</span>
+          <div
+            class="swiper-wrapper"
+          >
+            <iframe
+              v-for="(item, index) in typesForShow[currentTabIdx].list"
+              :key="index"
+              :src="item.url"
+              frameborder="0"
+              class="swiper-slide"
+            />
+          </div>
+          <!-- <div class="swiper-pagination">
+            <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesForShow[currentTabIdx].list.length }}</span>
+          </div> -->
+          <div class="swiper-button-prev" />
+          <div class="swiper-button-next" />
         </div>
-        <div class="swiper-button-prev" />
-        <div class="swiper-button-next" />
       </div>
-    </div>
 
-    <div
-      v-show="typesForShow[currentTabIdx] && typesForShow[currentTabIdx].name === '音频'"
-      class="swiper-wrapper-mine audio-wrap"
-    >
       <div
-        class="swiper-root"
+        v-show="typesForShow[currentTabIdx] && typesForShow[currentTabIdx].name === '音频'"
+        class="swiper-wrapper-mine audio-wrap"
       >
         <div
-          class="swiper-wrapper"
+          class="swiper-root"
         >
-          <Audio
-            v-for="(item, index) in typesForShow[currentTabIdx].list"
-            ref="audio-comp"
-            :key="index"
-            class="audio-custom swiper-slide"
-            :audio-src="`https://4dkk.4dage.com/scene_edit_data/${sceneCode}/user/${item.url}`"
-          />
-        </div>
-        <div class="swiper-pagination">
-          <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesForShow[currentTabIdx].list.length }}</span>
+          <div
+            class="swiper-wrapper"
+          >
+            <Audio
+              v-for="(item, index) in typesForShow[currentTabIdx].list"
+              ref="audio-comp"
+              :key="index"
+              class="audio-custom swiper-slide"
+              :audio-src="`https://4dkk.4dage.com/scene_edit_data/${sceneCode}/user/${item.url}`"
+            />
+          </div>
+          <!-- <div class="swiper-pagination">
+            <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesForShow[currentTabIdx].list.length }}</span>
+          </div> -->
+          <div class="swiper-button-prev" />
+          <div class="swiper-button-next" />
         </div>
-        <div class="swiper-button-prev" />
-        <div class="swiper-button-next" />
       </div>
-    </div>
 
-    <div
-      v-show="typesForShow[currentTabIdx] && typesForShow[currentTabIdx].name === '图片'"
-      class="swiper-wrapper-mine image-wrap"
-    >
       <div
-        class="swiper-root"
+        v-show="typesForShow[currentTabIdx] && typesForShow[currentTabIdx].name === '图片'"
+        class="swiper-wrapper-mine image-wrap"
       >
         <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-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 typesForShow[currentTabIdx].list"
+              :key="index"
+              v-lazy="`https://4dkk.4dage.com/scene_edit_data/${sceneCode}/user/${item.url}`"
+              class="swiper-slide"
+              alt=""
+              draggable="false"
+            >
+          </div>
+          <!-- <div class="swiper-pagination">
+            <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesForShow[currentTabIdx].list.length }}</span>
+          </div> -->
+          <div class="swiper-button-prev" />
+          <div class="swiper-button-next" />
+        </div>
+      </div>
+
+      <p class="desc">
+        {{ descForShow }}
+      </p>
+
+      <!-- <div class="type-tabbar">
+        <button
+          v-for="(typeItem, index) in typesForShow"
+          :key="typeItem.name"
+          class="tab"
+          :class="{
+            active: currentTabIdx === index
           }"
-          class="swiper-wrapper"
+          @click="currentTabIdx = index"
         >
           <img
-            v-for="(item, index) in typesForShow[currentTabIdx].list"
-            :key="index"
-            v-lazy="`https://4dkk.4dage.com/scene_edit_data/${sceneCode}/user/${item.url}`"
-            class="swiper-slide"
+            :src="currentTabIdx !== index ? typeItem.icon : typeItem.iconActive"
             alt=""
             draggable="false"
           >
-        </div>
-        <div class="swiper-pagination">
-          <span class="cur">{{ currentSlideIdx + 1 }}</span> / <span>{{ typesForShow[currentTabIdx].list.length }}</span>
-        </div>
-        <div class="swiper-button-prev" />
-        <div class="swiper-button-next" />
-      </div>
-    </div>
+          <div>{{ typeItem.name + ' ' + typeItem.list.length }}</div>
+        </button>
+      </div> -->
 
-    <div class="type-tabbar">
-      <button
-        v-for="(typeItem, index) in typesForShow"
-        :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>
+      <!-- <MyDesc
+        v-show="isShowDesc"
+        :title="titleForShow"
+        :desc="descForShow"
+        @close="isShowDesc = false"
+      /> -->
     </div>
-
-    <MyDesc
-      v-show="isShowDesc"
-      :title="titleForShow"
-      :desc="descForShow"
-      @close="isShowDesc = false"
-    />
   </div>
 </template>
 
@@ -183,12 +192,12 @@
 import Swiper from 'swiper/swiper-bundle.esm.js'
 import 'swiper/swiper-bundle.css'
 import Audio from "@/components/Audio.vue"
-import MyDesc from "@/components/HotspotDetailDesc.vue"
+// import MyDesc from "@/components/HotspotDetailDesc.vue"
 
 export default {
   components: {
     Audio,
-    MyDesc,
+    // MyDesc,
   },
   props: {
     hotspotList: {
@@ -388,187 +397,196 @@ export default {
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(255,251,245,0.9);
+  background: rgba(20, 20, 20, 0.70);
   backdrop-filter: blur(4px);
-  z-index: 2;
-  > button.desc {
+  z-index: 11;
+  > .wrapper {
     position: absolute;
-    top: 3.2rem;
-    left: 1.25rem;
-    width: 5rem;
-    height: 5rem;
-    > img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  > h1 {
-    position: absolute;
-    top: 5rem;
-    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%;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    max-width: 1329px;
+    max-height: 848px;
+    background: #E5DFCD;
+    border-top: solid 8px #A10E0C;
+    border-bottom: solid 8px #A10E0C;
+    padding: 28px 100px;
+    > button.desc {
+      position: absolute;
+      top: 3.2rem;
+      left: 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 {
+    > h1 {
+      text-align: center;
+      font-size: 32px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #A10E0C;
       overflow: hidden;
-      height: 100%;
-      .swiper-wrapper {
+      white-space: pre;
+      text-overflow: ellipsis;
+      margin-bottom: 28px;
+    }
+    > button.close {
+      position: absolute;
+      top: 29px;
+      right: 37px;
+      width: 28px;
+      height: 28px;
+      > img {
+        width: 100%;
+        height: 100%;
       }
-      // .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-pagination {
-        position: absolute;
-        top: calc(100% + 1em);
-        left: 50%;
-        transform: translateX(-50%);
-        font-size: 1.33rem;
-        font-family: Inter-Regular, Inter;
-        color: #666;
-        .cur {
-          color: #930909;
+    }
+
+    .swiper-wrapper-mine {
+      height: calc(100% - 32px - 28px - 22px - 72px);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      margin-bottom: 22px;
+      .swiper-root {
+        overflow: hidden;
+        height: 100%;
+        width: 100%;
+        .swiper-wrapper {
         }
-      }
-      .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-pagination {
+          position: absolute;
+          top: calc(100% + 1em);
+          left: 50%;
+          transform: translateX(-50%);
+          font-size: 1.33rem;
+          font-family: Inter-Regular, Inter;
+          color: #666;
+          .cur {
+            color: #930909;
+          }
         }
-      }
-      .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: '';
+        .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: '';
+          }
         }
-
       }
     }
-  }
 
-  .swiper-wrapper-mine.video-wrap {
-    height: calc(31.5rem * 0.85);
-    width: calc(43.5rem * 0.85);
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -70%);
-    .swiper-root {
-      .swiper-wrapper {
-        .swiper-slide {
-          background-image: url(@/assets/images/swkk/hotspot-video-bg.png);
-          background-size: contain;
-          background-repeat: no-repeat;
-          padding: 5.67rem 2.21rem 1.88rem 1.8rem;
-          > video {
-            width: 100%;
-            height: 100%;
+    .swiper-wrapper-mine.video-wrap {
+      height: calc(31.5rem * 0.85);
+      width: calc(43.5rem * 0.85);
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -70%);
+      .swiper-root {
+        .swiper-wrapper {
+          .swiper-slide {
+            background-image: url(@/assets/images/swkk/hotspot-video-bg.png);
+            background-size: contain;
+            background-repeat: no-repeat;
+            padding: 5.67rem 2.21rem 1.88rem 1.8rem;
+            > video {
+              width: 100%;
+              height: 100%;
+            }
           }
         }
       }
     }
-  }
-  .swiper-wrapper-mine.model-wrap {
-    .swiper-root {
-      .swiper-wrapper {
+    .swiper-wrapper-mine.model-wrap {
+      .swiper-root {
+        .swiper-wrapper {
+        }
       }
     }
-  }
-  .swiper-wrapper-mine.audio-wrap {
-    width: calc(100% - 1.67rem * 2 - 1.83rem * 2 - 1.67rem * 2);
-    height: 30rem;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -70%);
-    .swiper-root {
-      width: 100%;
-      .swiper-wrapper {
+    .swiper-wrapper-mine.audio-wrap {
+      width: calc(100% - 1.67rem * 2 - 1.83rem * 2 - 1.67rem * 2);
+      height: 30rem;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -70%);
+      .swiper-root {
+        width: 100%;
+        .swiper-wrapper {
+        }
       }
     }
-  }
-  .swiper-wrapper-mine.image-wrap {
-    .swiper-root {
-      .swiper-wrapper {
-        > img {
-          object-fit: contain;
+    .swiper-wrapper-mine.image-wrap {
+      .swiper-root {
+        .swiper-wrapper {
+          > img {
+            object-fit: contain;
+          }
         }
       }
     }
-  }
 
-  > .type-tabbar {
-    position: absolute;
-    bottom: 11.9%;
-    left: 0;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    > button {
-      margin-right: 2.08rem;
-      &:last-child {
-        margin-right: initial;
-      }
-      > img {
-        width: 5rem;
-        height: 5rem;
-        margin-bottom: 0.42rem;
-      }
-      > div {
-        font-size: 1.25rem;
-        color: #666666;
-      }
-      &.active {
+    > p.desc {
+      font-size: 16px;
+      color: #494140;
+      line-height: 19px;
+      height: 72px;
+      overflow: auto;
+      padding-right: 6px;
+    }
+
+    > .type-tabbar {
+      position: absolute;
+      bottom: 11.9%;
+      left: 0;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      > button {
+        margin-right: 2.08rem;
+        &:last-child {
+          margin-right: initial;
+        }
+        > img {
+          width: 5rem;
+          height: 5rem;
+          margin-bottom: 0.42rem;
+        }
         > div {
-          color: #930909;
+          font-size: 1.25rem;
+          color: #666666;
+        }
+        &.active {
+          > div {
+            color: #930909;
+          }
         }
       }
     }
   }
+  ::-webkit-scrollbar { width: 2px; height: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+  ::-webkit-scrollbar-thumb {
+    background: #958D76;
+  }
 }
 </style>

src/config.js

@@ -9,7 +9,7 @@ export default {
       children: {},
     },
     swkkHotspotDetail: {
-      self: '6',
+      self: '11',
       children: {},
     },
     swkkHotspotList: {