up

全景看看/src/framework/show/index.vue

@@ -345,7 +345,7 @@ export default {
       this.$nextTick(() => {
         setTimeout(() => {
           let swDoms = document.querySelectorAll(".pic-list li");
-          if (swDoms.length > 11) {
+          if (swDoms.length > 9) {
             let acDom = document.querySelector(".pic-list .active");
             let bs = acDom.getAttribute("data-value");
             this.$refs.myListRef.changeSwInd(Number(bs));
@@ -364,97 +364,6 @@ export default {
   width: 100%;
   height: 100%;
   position: relative;
-  .topTit {
-    pointer-events: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 84px;
-    z-index: 31;
-    background-image: url("../../assets/img/header.png");
-    background-size: 100% 100%;
-    & > h3 {
-      letter-spacing: 4px;
-      margin: 0;
-      line-height: 84px;
-      text-align: center;
-      font-size: 30px;
-      font-weight: 700;
-    }
-  }
-  > .video-list {
-    position: absolute;
-    left: 25px;
-    top: 70px;
-    z-index: 20;
-    .video-wrap {
-      width: 270px;
-      margin-bottom: 10px;
-      position: relative;
-      .openVideoBtn {
-        z-index: 30;
-        cursor: pointer;
-        position: absolute;
-        top: 6px;
-        right: 40px;
-        transform: translateY(-0px);
-        width: 30px;
-        height: 30px;
-        text-align: center;
-        & > img {
-          margin-top: 7px;
-          width: 15px;
-          height: 15px;
-        }
-      }
-    }
-
-    .big {
-      width: 480px;
-    }
-    .videoTopBs {
-      cursor: pointer;
-      width: 100%;
-      height: 42px;
-      line-height: 42px;
-      padding-left: 10px;
-      background-image: url("../../assets/img/video.png");
-      background-size: 100% 100%;
-      position: relative;
-      & > img {
-        position: absolute;
-        width: 13px;
-        height: 6px;
-        right: 15px;
-        top: 18px;
-      }
-    }
-    video {
-      width: 100%;
-    }
-    .hide {
-      opacity: 0;
-      width: 0;
-      height: 0;
-    }
-    // .showVideo {
-    //   width: 100%;
-    //   height: 30px;
-    //   background: repeating-linear-gradient(
-    //     rgba(2, 42, 88, 0.7),
-    //     rgba(2, 42, 88, 0.2)
-    //   );
-    //   cursor: pointer;
-    //   display: flex;
-    //   justify-content: center;
-    //   align-items: center;
-    //   & > img {
-    //     width: 18px;
-    //     height: 11px;
-    //   }
-    // }
-  }
 
   > .iframe-scene-3d {
     width: 100%;
@@ -496,29 +405,6 @@ export default {
     display: none;
   }
 
-  .aside {
-    cursor: pointer;
-    position: fixed;
-    z-index: 31;
-    bottom: 10px;
-    right: 15px;
-
-    > li {
-      width: 50px;
-      height: 50px;
-      & > img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-
-  .introcon {
-    line-height: 20px;
-    word-break: break-all;
-    text-align: justify;
-  }
-
   .hasDel {
     background: #fff;
     width: 100%;
@@ -540,13 +426,4 @@ export default {
     }
   }
 }
-.myStop {
-  position: absolute;
-  top: 100px;
-  left: 500px;
-  z-index: 999;
-  width: 100px;
-  height: 100px;
-  background-color: aqua;
-}
 </style>

全景看看/src/framework/show/list.vue

@@ -95,6 +95,7 @@
                 </div>
               </li>
             </ul>
+            <div class="swiper-scrollbar"></div>
           </div>
         </div>
       </div>
@@ -170,6 +171,9 @@ export default {
           prevEl: ".swiper-button-prev",
           nextEl: ".swiper-button-next",
         },
+        scrollbar: {
+          el: ".swiper-scrollbar",
+        },
       };
     },
   },
@@ -352,22 +356,6 @@ export default {
   z-index: 15;
   bottom: 10px;
   right: 15px;
-  .txtShowBtn3 {
-    width: 50px;
-    height: 50px;
-    cursor: pointer;
-    background-image: url("../../assets/img/mapBtn.png");
-    background-size: 100% 100%;
-    margin-bottom: 10px;
-  }
-}
-.txtShowBtn {
-  width: 50px;
-  height: 50px;
-  cursor: pointer;
-  background-image: url("../../assets/img/msg.png");
-  background-size: 100% 100%;
-  margin-bottom: 10px;
 }
 .txtShowBtn2 {
   width: 50px;
@@ -376,61 +364,6 @@ export default {
   background-image: url("../../assets/img/fullscreen.png");
   background-size: 100% 100%;
 }
-.btn {
-  display: inline-block;
-  margin: 0 auto;
-  padding: 0 20px;
-  height: 26px;
-  line-height: 26px;
-  background: rgba(0, 0, 0, 0.5);
-  border: 1px solid rgba(255, 255, 255, 0.5);
-  color: rgba(255, 255, 255, 0.5);
-  border-radius: 4px;
-  cursor: pointer;
-  word-break: keep-all;
-  max-width: 150px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  &.active {
-    border: 1px solid rgba(255, 255, 255, 1);
-    color: rgba(255, 255, 255, 1);
-  }
-}
-
-.pic-rect {
-  border-radius: 4px;
-  height: 24px;
-  line-height: 24px;
-  padding: 0;
-  padding-bottom: 10px;
-  background: none;
-  border: none;
-  &.active {
-    border: none;
-    color: rgba(255, 255, 255, 1);
-    position: relative;
-    &::before {
-      content: "";
-      display: inline-block;
-      position: absolute;
-      bottom: 0;
-      width: 20px;
-      height: 2px;
-      z-index: 9999;
-      left: 50%;
-      transform: translateX(-50%);
-      background: #0076f6;
-    }
-  }
-}
-
-.line {
-  background: #0076f6;
-  width: 100%;
-  height: 0.1px;
-  opacity: 0.5;
-}
 
 .list {
   transition: bottom 0.5s;
@@ -440,38 +373,7 @@ export default {
   z-index: 30;
   text-align: center;
   width: 100%;
-  .changeModel {
-    padding: 0 25px;
-    display: flex;
-    position: absolute;
-    z-index: 20;
-    top: -110px;
-    left: 50%;
-    transform: translateX(-50%);
-    height: 44px;
-    background: repeating-linear-gradient(
-      to right,
-      rgba(75, 121, 132, 0.3),
-      rgba(2, 42, 88, 1),
-      rgba(2, 42, 88, 0.3)
-    );
-    .row {
-      cursor: pointer;
-      opacity: 0.5;
-      min-width: 100px;
-      height: 34px;
-      line-height: 34px;
-      margin-top: 5px;
-    }
-    .active {
-      color: #8af8ff;
-      background-image: url("../../assets/img/selected.png");
-      background-size: 100% 100%;
-      pointer-events: none;
-      opacity: 1;
-      margin-right: 15px;
-    }
-  }
+
   .incoShow2 {
     transition: opacity 0.5s;
     border-radius: 50%;
@@ -508,10 +410,11 @@ export default {
       line-height: 48px;
     }
     .activeOne {
+      color: #d00724;
+      border-bottom: 2px solid #d00724;
       pointer-events: none;
-      color: #8af8ff;
-      background-image: url("../../assets/img/selected.png");
-      background-size: 100% 100%;
+      opacity: 1;
+      margin-right: 15px;
     }
     max-width: 1000px;
     z-index: 10;
@@ -595,26 +498,7 @@ export default {
       }
     }
   }
-  .dl {
-    background: rgba(0, 0, 0, 0.3);
-    border-radius: 18px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    pointer-events: auto;
-    margin-top: 18px;
-    height: 38px;
-    line-height: 38px;
-    color: #fff;
-
-    > i {
-      margin-right: 8px;
-      vertical-align: bottom;
-      font-size: 18px;
-    }
-  }
 
-  .deepbg {
-    background-color: red;
-  }
   .l-con {
     width: 100%;
     transition: all ease 0.3s;