场景导览样式与功能

public/static/js/main_2020_show.js

@@ -6301,6 +6301,7 @@ window.Modernizr = function(n, e, t) {
                 }, $("#drawer").hasClass("open") ? 0 : Q.highlightAnimationDuration),
                 $(".pinBottom").hasClass("open") && s($(".vr-popup")) && $(".vr-popup").is(":visible") && Ae.dismiss()
             }
+            window.toggleSceneGuide = a
             function s(e) {
                 var t;
                 "none" !== e.css("display") ? t = e.position().top + e.outerHeight() : (e.attr("style", "visibility: hidden"),

src/api.js

@@ -1,13 +1,4 @@
 import axios from "axios"
 
 export default {
-  async fetchPanoData() {
-    const res = await axios({
-      method: 'get',
-      // 这个是一组全景图的整体描述————分组情况之类的。
-      url: `/YHT/Qjkk/local/WK1578926366500417536/someData.json?_=${Math.random()}`,
-    })
-    console.log('fetch pano data: ', res.data)
-    return res.data
-  },
 }

src/views/gui/guide.vue

@@ -1,50 +1,96 @@
 <template>
   <div id="drawer-container">
-    
-    <div id="drawer" class="fullWidth">
+    <div
+      id="drawer"
+      class="fullWidth"
+    >
       <div class="frame-container darkGlass">
-
+        <button
+          class="collapse"
+          @click="onClickCollapse"
+        >
+          <img
+            class=""
+            src="@/assets/images/collapse.png"
+            alt=""
+            draggable="false"
+          >
+        </button>
         <!-- 场景列表 -->
-        <div id="scrollFrame" class="frame">
-          <ul id="thumb-container" class="slidee"></ul>
+        <div
+          id="scrollFrame"
+          class="frame"
+        >
+          <ul
+            id="thumb-container"
+            class="slidee"
+          />
         </div>
-        
+
         <!-- 滚动条 -->
-        <div class="scrollbar" id="scroller">
+        <div
+          id="scroller"
+          class="scrollbar"
+        >
           <!-- thumb -->
-          <div class="handle"></div>
+          <div class="handle" />
+          </ul>
         </div>
-        
       </div>
-    </div>
-    
-    <!-- 自动导览时显示导览进度 -->
-    <div id="playHead">
-      <div id="status">
-        <span class="curIdx">1</span>
-        of <span class="totalSteps"></span>
+
+      <!-- 自动导览时显示导览进度 -->
+      <div id="playHead">
+        <div id="status">
+          <span class="curIdx">1</span>
+          of <span class="totalSteps" />
+        </div>
+        <div id="progressBar" />
       </div>
-      <div id="progressBar"></div>
     </div>
-    
   </div>
 </template>
 <script>
 export default {
   props: {
   },
-};
+  methods: {
+    onClickCollapse() {
+      window.toggleSceneGuide()
+    }
+  }
+}
 </script>
 <style lang="less" scoped>
 #drawer-container {
   #drawer {
     font-size: 16px;
+    &.open {
+      height: 160px;
+    }
     .frame-container {
-      background-color: rgba(133, 119, 69, 0.5);
-      backdrop-filter: blur(10px);
+      background-color: transparent;
+      button.collapse {
+        position: absolute;
+        top: 5px;
+        left: 45px;
+        width: 78px;
+        height: 32px;
+        z-index:1;
+        > img {
+          width: 100%;
+          height: 100%;
+        }
+      }
       #scrollFrame.frame {
-        background-color: initial;
+        margin-left: 28px;
+        margin-right: 28px;
+        width: calc(100% - 28px * 2);
+        height: 152px;
+        background: rgba(235, 224, 214, 0.68);
+        border-radius: 20px;
+        padding-top: 35px;
         ul#thumb-container {
+          border-radius: 20px;
           padding: 10px 20px;
           li.thumbImg {
             // 在这里写也没用
@@ -62,6 +108,17 @@ export default {
 </style>
 
 <style lang="less">
+// 每个item
+#thumb-container .thumbImg {
+  overflow: hidden;
+  border-radius: 10px;
+  height: 97px;
+}
+// 选中后
+.frame .slidee li.thumbImg.active {
+  border: 3px solid #A10E0C !important;
+}
+
 // 场景封面图
 // 平时
 #thumb-container .thumbImg img {
@@ -75,30 +132,24 @@ export default {
 }
 // 选中后
 .frame .slidee li.thumbImg.active>img {
-  border: 3px solid #A10E0C !important;
 }
 
 // 场景名称
 // 平时
 .frame .slidee li .overlay {
+  font-size: 12px;
+  font-family: DFLiShuW7;
   box-sizing: border-box;
   left: 0;
-  top: 0;
-  bottom: initial;
-  height: 100%;
-  line-height: 97px;
+  top: initial;
+  bottom: 0;
+  height: 30px;
+  line-height: 30px;
   transform: initial;
-
   color: #fff;
-  pointer-events: none;
-  background: rgba(0, 0, 0, 0.5);
+  background: linear-gradient(180deg, rgba(87, 36, 25, 0) 0%, rgba(87, 36, 25, 1) 50%);
 }
 // 选中后
 .frame .slidee li.thumbImg.active>.overlay {
-  top: initial;
-  bottom: 0;
-  height: 36px;
-  line-height: 36px;
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5) 100%);
 }
 </style>

src/views/gui/menu.vue

@@ -307,7 +307,6 @@ export default {
   watch: {
   },
   mounted() {
-    console.log('sakldfjklwfl', this.currentSceneCode)
   },
   methods: {
     switchBGM(flag) {

vue.config.js

@@ -26,21 +26,6 @@ module.exports = {
       }),
     ],
   },
-  devServer: {
-    hot: true,
-    liveReload: false,
-    port: 8081,
-    proxy: {
-      '/YHT': {
-        target: 'http://yuhuatai.4dage.com',
-        changeOrigin: true,
-      },
-      '/YHTM': {
-        target: 'http://yuhuatai.4dage.com',
-        changeOrigin: true,
-      }
-    },
-  }
 }