搞搞搞

public/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport"
         content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <title>徐州汉画像石艺术馆</title>
+    <title>务川县仡佬文化博物馆</title>
     <meta name="description" content="四维时代">
     <meta property="og:title" content="四维时代">
     <meta property="og:description" content="四维时代">

public/static/js/Hot.js

@@ -37,8 +37,8 @@ window.initHot = function (model) {
   var getCommonHotspotUrl = function (link) {
     var querySectionInLink = link.split('?')[1]
     var langParam = "en" == manage.number("lang") ? "&lang=" + manage.number("lang") : ""
-    // return `http://192.168.20.16:8082/#/${browser.isMobile() ? 'mobile' : 'web'}/?${querySectionInLink}&time=${randomTime().getTime()}&id=${window.number}${langParam}`
-    return `../hotspot/index.html#/${browser.isMobile() ? 'mobile' : 'web'}/?${querySectionInLink}&time=${randomTime().getTime()}&id=${window.number}${langParam}`
+    return `http://192.168.20.16:8083/#/${browser.isMobile() ? 'mobile' : 'web'}/?${querySectionInLink}&time=${randomTime().getTime()}&id=${window.number}${langParam}`
+    // return `../hotspot/index.html#/${browser.isMobile() ? 'mobile' : 'web'}/?${querySectionInLink}&time=${randomTime().getTime()}&id=${window.number}${langParam}`
   }
   var removeSrcPostMark = function (url) {//去除texture.load时自动加上的'?'
     var index = url.indexOf('?')

src/App.vue

@@ -97,21 +97,23 @@ export default {
   height: 222px !important;
   border-radius: 10px;
   z-index: 999;
-  background: rgba(0, 0, 0, 0.37) !important;
+  background: rgba(81, 32, 32, 0.40) !important;
+  backdrop-filter: blur(0.9vw);
+  border: 1px solid #D8B275;
   svg {
     path {
-      stroke-width: 1;
+      stroke-width: 1px;
     }
   }
 }
 
 .mobile {
   .cad{
-    top: 12px !important;
-    right: 13px !important;
-    width: 111px !important;
-    height: 111px !important;
-    border-radius: 5px;
+    top: 4.7vw !important;
+    right: 3.9vw !important;
+    width: 24.9vw !important;
+    height: 24vw !important;
+    border-radius: 0.9vw;
   }
 }
 
@@ -129,12 +131,12 @@ export default {
 // 小地图 当前位置标志
 // 位置圆圈。默认半径2.69，圆圈粗细1.076
 #ele1 circle {
-  fill: #fff;
-  r: 0.8;
+  fill: rgb(163, 51, 40);
+  r: 2px;
 }
 // 视野
 #ele1 path {
-  fill: rgba(117, 31, 17, 0.8);
+  fill: rgba(163, 51, 40, 0.7);
 }
 
 #popup {

src/views/gui/guide.vue

@@ -5,17 +5,6 @@
       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"
@@ -63,41 +52,23 @@ export default {
 <style lang="less" scoped>
 #drawer-container {
   #drawer {
-    font-size: 16px;
     &.open {
-      height: 160px;
     }
     &.playing {
       bottom: 0;
     }
     &.open.playing {
-      height: 180px;
+      height: 157px;
     }
     .frame-container {
-      background-color: transparent;
+      background: rgba(163, 51, 40, 0.90);
       button.collapse {
-        position: absolute;
-        top: 5px;
-        left: 45px;
-        width: 78px;
-        height: 32px;
-        z-index:1;
         > img {
-          width: 100%;
-          height: 100%;
         }
       }
       #scrollFrame.frame {
-        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;
+        background: transparent;
         ul#thumb-container {
-          border-radius: 20px;
-          padding: 10px 20px;
           li.thumbImg {
             // 在这里写也没用
           }
@@ -105,7 +76,6 @@ export default {
       }
       #scroller {
         .handle {
-
         }
       }
     }
@@ -117,32 +87,19 @@ export default {
   #drawer-container {
     #drawer {
       &.open {
-        height: 138px;
       }
       &.playing {
       }
       &.open.playing {
-        height: 160px;
+        height: 138px;
       }
       .frame-container {
         button.collapse {
-          top: 5px;
-          left: 7px;
-          width: 47px;
-          height: 19px;
           > img {
           }
         }
         #scrollFrame.frame {
-          height: 138px;
-          margin-left: initial;
-          margin-right: initial;
-          padding-top: 26px;
-          width: 100%;
-          border-radius: 10px;
           ul#thumb-container {
-            border-radius: 10px;
-            padding: 9px 8px;
             li.thumbImg {
               // 在这里写也没用
             }
@@ -150,7 +107,6 @@ export default {
         }
         #scroller {
           .handle {
-
           }
         }
       }
@@ -162,57 +118,38 @@ export default {
 <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 {
-  box-sizing: border-box;
-  border: none;
-  height: 100%;
-  width: 100%;
-  object-fit: cover;
+  border: 0.7vw solid transparent;
 }
 // hover时
 .frame .slidee li.thumbImg.hasHover>img:hover {
 }
 // 选中后
 .frame .slidee li.thumbImg.active>img {
+  border: 0.7vw solid #E5C4A8 !important;
 }
 
 // 场景名称
 // 平时
 .frame .slidee li .overlay {
-  font-size: 16px;
-  font-family: DFLiShuW7;
-  box-sizing: border-box;
-  left: 0;
-  top: initial;
-  bottom: 0;
-  height: 30px;
-  width: 100%;
-  line-height: 30px;
-  transform: initial;
   color: #fff;
-  background: linear-gradient(180deg, rgba(87, 36, 25, 0) 0%, rgba(87, 36, 25, 1) 50%);
 }
 // 选中后
 .frame .slidee li.thumbImg.active>.overlay {
+  color: #E5C4A8;
+  font-weight: bold;
 }
 
 .mobile {
   // 每个item
   #thumb-container .thumbImg {
-    width: 145px;
-    height: 94px;
-    margin-right: 6px;
   }
   // 选中后
   .frame .slidee li.thumbImg.active {
@@ -232,7 +169,6 @@ export default {
   // 场景名称
   // 平时
   .frame .slidee li .overlay {
-    font-size: 12px;
   }
   // 选中后
   .frame .slidee li.thumbImg.active>.overlay {

src/views/gui/menu.vue

@@ -12,20 +12,6 @@
     <div class="pinBottom left">
       <div>
         <div class="viewContainer">
-          <!-- <div
-            id="previous"
-            class="previous desktop-only ui-icon"
-            style="display: none"
-          >
-            <a>
-              <img
-                rel="tooltip"
-                title=""
-                :src="require('@/assets/images/play.png')"
-                data-original-title="播放"
-              />
-            </a>
-          </div> -->
           <div
             id="play"
             class="ui-icon"
@@ -33,8 +19,6 @@
             data-original-title="播放"
             @click="onClickPlay"
           >
-            <!-- 鼠标移入的显示 -->
-            <!-- <div class="hoverTit">自动导览</div> -->
             <a>
               <img
                 :src="require('@/assets/images/play.png')"
@@ -46,8 +30,6 @@
             class="ui-icon"
             style="display: none"
           >
-            <!-- 鼠标移入的显示 -->
-            <!-- <div class="hoverTit">自动导览</div> -->
             <a>
               <img
                 rel="tooltip"
@@ -57,20 +39,6 @@
               >
             </a>
           </div>
-          <!-- <div
-            id="next"
-            class="next desktop-only ui-icon wide"
-            style="display: none"
-          >
-            <a>
-              <i
-                rel="tooltip"
-                title=""
-                class="icon icon-dpad-right"
-                data-original-title="下一个"
-              ></i>
-            </a>
-          </div> -->
           <div
             id="gui-modes-map"
             class="ui-icon double active"
@@ -81,16 +49,17 @@
               rel="tooltip"
               title="场景导览"
             >
-              <!-- 鼠标移入的显示 -->
-              <!-- <div class="hoverTit">导览列表</div> -->
               <img
                 title=""
                 class="icon icon-inside"
                 src="@/assets/images/auto.png"
-                :style="{
-                  opacity: isGuide ? '1' : '',
-                }"
               >
+              <!-- <img
+                v-show="!isGuide"
+                title=""
+                class="icon icon-inside"
+                src="@/assets/images/auto-suspend.png"
+              > -->
             </div>
 
             <div
@@ -98,12 +67,14 @@
               data-original-title="全景漫游"
               rel="tooltip"
             >
-              <!-- 鼠标移入的显示 -->
-              <!-- <div class="hoverTit">自由漫游</div> -->
               <img
-                class="icon icon-inside"
+                class="icon icon-inside active"
                 :src="require('@/assets/images/inside.png')"
               >
+              <img
+                class="icon icon-inside inactive"
+                :src="require('@/assets/images/inside-inactive.png')"
+              >
             </div>
             <div
               id="gui-modes-dollhouse"
@@ -111,12 +82,14 @@
               data-original-title="迷你模型"
               rel="tooltip"
             >
-              <!-- 鼠标移入的显示 -->
-              <!-- <div class="hoverTit">三维视觉</div> -->
               <img
-                class="icon icon-inside"
+                class="icon icon-inside active"
                 :src="require('@/assets/images/dollhouse.png')"
               >
+              <img
+                class="icon icon-inside inactive"
+                :src="require('@/assets/images/dollhouse-inactive.png')"
+              >
             </div>
             <div
               id="gui-modes-floorplan"
@@ -124,27 +97,17 @@
               rel="tooltip"
               title="顶部俯视"
             >
-              <!-- 鼠标移入的显示 -->
-              <!-- <div class="hoverTit">平面视觉</div> -->
               <img
-                class="icon icon-inside"
+                class="icon icon-inside active"
                 :src="require('@/assets/images/floor.png')"
               >
-            </div>
-            <!-- <div
-              data-original-title="VR"
-              id="vr"
-              rel="tooltip"
-              title=""
-              style="display: none"
-            >
               <img
-                class="icon icon-inside"
-                :src="require('@/assets/images/VR.png')"
-              />
-            </div> -->
+                class="icon icon-inside inactive"
+                :src="require('@/assets/images/floor-inactive.png')"
+              >
+            </div>
             <!-- 没有这个元素会导致报错 -->
-            <!-- <div
+            <div
               id="hotList"
               style="display: none;"
               data-original-title="热点列表"
@@ -155,19 +118,7 @@
                 class="icon icon-inside"
                 :src="require('@/assets/images/hotlist.png')"
               >
-            </div> -->
-            <!-- <div
-              data-original-title="消除外壳"
-              id="gui-remove-face"
-              rel="tooltip"
-              title=""
-              style="display: none; float: left"
-            >
-              <img
-                class="icon icon-inside"
-                :src="require('@/assets/images/face.jpg')"
-              />
-            </div> -->
+            </div>
           </div>
         </div>
       </div>
@@ -175,121 +126,6 @@
 
     <div class="pinBottom right hideTarget">
       <div class="rightViewContainer clearfix">
-        <div
-          v-if="!isMobile"
-          class="ui-icon my-floor"
-          :class="{
-            active: currentSceneCode === '1265'
-          }"
-          @click="ChangeFloor('1265')"
-        >
-          <a>
-            <img
-              src="@/assets/images/floor-1.png"
-              alt=""
-              draggable="false"
-            >
-          </a>
-        </div>
-        <div
-          v-if="!isMobile"
-          class="ui-icon my-floor"
-          :class="{
-            active: currentSceneCode === '1263'
-          }"
-          @click="ChangeFloor('1263')"
-        >
-          <a>
-            <img
-              src="@/assets/images/floor-2.png"
-              alt=""
-              draggable="false"
-            >
-          </a>
-        </div>
-        <div
-          v-if="!isMobile"
-          class="ui-icon my-floor"
-          :class="{
-            active: currentSceneCode === '1264'
-          }"
-          @click="ChangeFloor('1264')"
-        >
-          <a>
-            <img
-              src="@/assets/images/floor-3.png"
-              alt=""
-              draggable="false"
-            >
-          </a>
-        </div>
-
-        <div
-          v-if="isMobile"
-          class="floor-selector-wrap"
-          :class="{
-            expanded: isSelectingFloor,
-          }"
-        >
-          <div
-            class="ui-icon floor-mobile"
-            :style="{
-              opacity: (currentSceneCode === '1265' || isSelectingFloor) ? '1' : '0',
-              right: !isSelectingFloor ? '0' : currentSceneCode === '1265' ? '0' : 'calc(44px + 12px)',
-            }"
-            @click="onClickFloorBtnMobile('1265')"
-          >
-            <a>
-              <img
-                :class="{
-                  active: currentSceneCode === '1265'
-                }"
-                src="@/assets/images/floor-1.png"
-                alt=""
-                draggable="false"
-              >
-            </a>
-          </div>
-          <div
-            class="ui-icon floor-mobile"
-            :style="{
-              opacity: (currentSceneCode === '1263' || isSelectingFloor) ? '1' : '0',
-              right: !isSelectingFloor ? '0' : currentSceneCode === '1265' ? 'calc(44px + 12px)' : currentSceneCode === '1263' ? '0' : 'calc(44px * 2 + 12px * 2)',
-            }"
-            @click="onClickFloorBtnMobile('1263')"
-          >
-            <a>
-              <img
-                :class="{
-                  active: currentSceneCode === '1263'
-                }"
-                src="@/assets/images/floor-2.png"
-                alt=""
-                draggable="false"
-              >
-            </a>
-          </div>
-          <div
-            class="ui-icon floor-mobile"
-            :style="{
-              opacity: (currentSceneCode === '1264' || isSelectingFloor) ? '1' : '0',
-              right: !isSelectingFloor ? '0' : currentSceneCode === '1265' ? 'calc(44px * 2 + 12px * 2)' : currentSceneCode === '1263' ? 'calc(44px * 2 + 12px * 2)' : '0',
-            }"
-            @click="onClickFloorBtnMobile('1264')"
-          >
-            <a>
-              <img
-                :class="{
-                  active: currentSceneCode === '1264'
-                }"
-                src="@/assets/images/floor-3.png"
-                alt=""
-                draggable="false"
-              >
-            </a>
-          </div>
-        </div>
-
         <!-- 音乐 -->
         <div
           id="volume"
@@ -451,50 +287,6 @@ export default {
   outline: none;
 }
 
-// ------tooltip相关--------------
-// #gui-modes-inside {
-//   position: relative;
-// }
-// #gui-modes-dollhouse {
-//   position: relative;
-// }
-// #gui-modes-floorplan {
-//   position: relative;
-// }
-// .hoverTit {
-//   pointer-events: none;
-//   transition: all 0.5s;
-//   opacity: 0;
-//   position: absolute;
-//   left: 50%;
-//   transform: translateX(-50%);
-//   top: -40px;
-//   width: 80px;
-//   height: 37px;
-//   line-height: 30px;
-//   text-align: center;
-//   background: url("../../assets/img/hoverTit.png");
-//   background-size: 100% 100%;
-//   font-size: 14px;
-//   color: #fff6d2;
-// }
-// #play:hover {
-//   .hoverTit {
-//     opacity: 1;
-//   }
-// }
-// #pause:hover {
-//   .hoverTit {
-//     opacity: 1;
-//   }
-// }
-// #gui-modes-map > div:hover {
-//   .hoverTit {
-//     opacity: 1;
-//   }
-// }
-// -------end of tooltip相关--------------
-
 @width: 99px;
 @height: 125px;
 // ----------左下方菜单--------------
@@ -531,18 +323,28 @@ export default {
           width: @width;
           height: @height;
           padding: 0;
-          > img {
+          > img.active {
+            display: none;
+          }
+          > img.inactive {
             height: 100%;
             width: 100%;
-            opacity: 0.7;
-            display: block !important;
+            display: block;
           }
-          &.active {
-            > img {
-              opacity: 1;
-            }
+        }
+        > div.active {
+          > img.active {
+            height: 100%;
+            width: 100%;
+            display: block;
+          }
+          > img.inactive {
+            display: none;
           }
         }
+        > #hotList {
+          display: none;
+        }
       }
     }
   }
@@ -583,12 +385,6 @@ export default {
         }
       }
     }
-    .ui-icon.my-floor {
-      opacity: 0.7;
-    }
-    .ui-icon.my-floor.active {
-      opacity: 1;
-    }
   }
 }
 // ----------end of 右下方菜单---------------
@@ -602,10 +398,10 @@ export default {
       bottom: 20px !important;
     }
     &.open {
-      bottom: 158px !important;
+      bottom: 118px !important;
     }
     &.open.playing {
-      bottom: 178px !important
+      bottom: 138px !important
     }
     > div {
       > .viewContainer {
@@ -616,8 +412,8 @@ export default {
         #pause {
           margin-top: 15px;
           margin-right: 0;
-          width: 45px;
-          height: 60px;
+          width: 10.7vw;
+          height: 10.7vw;
           img {
           }
         }
@@ -625,8 +421,8 @@ export default {
           > div {
             margin-top: 15px;
             margin-right: 0;
-            width: 45px;
-            height: 60px;
+            width: 10.7vw;
+            height: 10.7vw;
             > img {
             }
             &.active {
@@ -648,25 +444,9 @@ export default {
       padding-bottom: 0;
       flex-direction: column;
       align-items: flex-end !important;
-      > .floor-selector-wrap {
-        height: 44px;
-        width: 44px;
-        position: relative;
-        margin-bottom: 10.5px;
-        > .floor-mobile {
-          position: absolute;
-          top: 0;
-          right: 0;
-          opacity: 0;
-          transition: all 0.5s;
-        }
-        &.expanded {
-          width: calc(44px * 3 + 12px * 2);
-        }
-      }
       .ui-icon {
-        width: 44px;
-        height: 44px;
+        width: 10.7vw;
+        height: 10.7vw;
         margin-bottom: 10.5px;
         margin-left: initial;
         > a {