style: --

public/js/main_2020_show.js

@@ -6485,7 +6485,7 @@ window.Modernizr = function(n, e, t) {
                             for (var i = 0; i < t.elements.length; i++)
                                 $(t.elements[i]).hide()
                     }
-                je.highlight.visible && $(".pinBottom").addClass("highlightExists"),
+                je.highlight.visible && $(".pinBottom-container").addClass("highlightExists"),
                 je.tourControls.visible === !1 && $("#drawer").addClass("fullWidth"),
                 n()
             }
@@ -6496,7 +6496,7 @@ window.Modernizr = function(n, e, t) {
             }
             function a() {
                 c(),
-                $(".pinBottom").toggleClass("open"),
+                $(".pinBottom-container").toggleClass("open"),
                 $("#drawer").toggleClass("open"),
                 $(".footer").toggleClass("open"),
                 $("#drawer").hasClass("open") ? ($("#pullTab .icon").attr("data-original-title", Re.CLOSE_HIGHLIGHTS),
@@ -6505,7 +6505,7 @@ window.Modernizr = function(n, e, t) {
                 setTimeout(function() {
                     $("#pullTab").toggleClass("opened");
                 }, $("#drawer").hasClass("open") ? 0 : Q.highlightAnimationDuration),
-                $(".pinBottom").hasClass("open") && s($(".vr-popup")) && $(".vr-popup").is(":visible") && Ae.dismiss()
+                $(".pinBottom-container").hasClass("open") && s($(".vr-popup")) && $(".vr-popup").is(":visible") && Ae.dismiss()
             }
             function s(e) {
                 var t;
@@ -6936,7 +6936,7 @@ window.Modernizr = function(n, e, t) {
                 var e = $("#player").width() - 20
                   , t = $("#scroller")
                   , i = $("#drawer")
-                  , n = $(".pinBottom");
+                  , n = $(".pinBottom-container");
                 if ($("#player").width() < 488 || $("#player").height() < 488)
                     t.addClass("hidden"),
                     i.addClass("noScroll"),
@@ -6976,7 +6976,7 @@ window.Modernizr = function(n, e, t) {
                         padding: 10
                     }
                 }),
-                K.inIframe() && document.getElementsByClassName("pinBottom-container")[0].classList.add("embed")),
+                K.inIframe() && document.getElementsByClassName("pinBottom-container-container")[0].classList.add("embed")),
                 // t("presented_by") && 1 !== Q.specialEdition && Q.brand && !K.valueFromHash("mls", 0) ? document.getElementById("loaderCoBrandName").innerText = t("presented_by") : document.getElementById("loaderCoBrand").classList.add("hidden"),
                 de.populate({
                     name: t("model_name", "name"),
@@ -7076,7 +7076,7 @@ window.Modernizr = function(n, e, t) {
                 });
                 var l = $("#play").eq(0)
                   , c = $("#pause").eq(0)
-                  , h = $(".pinBottom").toArray()
+                  , h = $(".pinBottom-container").toArray()
                   , u = $("#drawer").eq(0)
                   , d = $("#playHead").eq(0)
                   , p = $("#progressBar").eq(0)
@@ -7650,10 +7650,10 @@ window.Modernizr = function(n, e, t) {
                 $("#drawer").hasClass("open") ? (J.trackAlways("showcase_gui", {
                     gui_action: "hide_highlight_reel"
                 }),
-                $(this).addClass("open").children("img").attr("src","images/auto.png")) : (J.trackAlways("showcase_gui", {
+                $(this).addClass("open").children("img").attr("src",$(this).children("img").data('default-url'))) : (J.trackAlways("showcase_gui", {
                     gui_action: "show_highlight_reel"
                 }),
-                $(this).removeClass("open").children("img").attr("src","images/auto-suspend.png"));
+                $(this).removeClass("open").children("img").attr("src",$(this).children("img").data('active-url')));
                 a()
             });
 
@@ -8067,12 +8067,12 @@ window.Modernizr = function(n, e, t) {
           , y = e("../enum/DirectorEvents")
           , A = e("../enum/PlayerEvents")
           , C = e("../enum/Viewmode")
-          , I = $(".pinTop.left, .pinBottom-container, #drawer-container, #drawer, .footer").toArray()
-          , E = $(".pinBottom-container, #drawer-container, .footer").toArray()
+          , I = $(".pinTop.left, .pinBottom-container-container, #drawer-container, #drawer, .footer").toArray()
+          , E = $(".pinBottom-container-container, #drawer-container, .footer").toArray()
           , b = $("#hover-bottom, #hover-top").toArray()
           , w = ($("#pullTab").eq(0),
         $("#playHead").eq(0),
-        $(".pinBottom-container").eq(0))
+        $(".pinBottom-container-container").eq(0))
           , _ = $("#drawer").eq(0)
           , T = $("#drawer-container").eq(0)
           , x = $("#meta-info").eq(0)
@@ -8227,7 +8227,7 @@ window.Modernizr = function(n, e, t) {
           , y = $("#loaderCoBrand").eq(0)
           , C = $("#interaction-modal").eq(0)
           , I = C.find(".interaction").toArray()
-          , E = ($("#model-title, .pinBottom-container, #drawer-container, #drawer, .footer").toArray(),
+          , E = ($("#model-title, .pinBottom-container-container, #drawer-container, #drawer, .footer").toArray(),
         "");
         t.exports.delayLanding = r,
         t.exports.showMessage = o,

public/js/manage.js

@@ -2805,10 +2805,10 @@ Manage.prototype.loadAudio = function() { //相关：g_tourAudio \  g_playAudio
         },
         callback:(state)=>{//play或pause时随之触发的函数（即使还没开始播放）
             if(state){
-                $("#volume a img").attr("src", "./images/Volume btn_off.png")
+                $("#volume a img").attr("src", $("#volume a img").data('active-url'))
                 $("#volume").attr("title", "关闭声音");
             }else{
-                $("#volume a img").attr("src", "./images/Volume btn_on.png")
+                $("#volume a img").attr("src", $("#volume a img").data('default-url'))
                 $("#volume").attr("title", "打开声音");
             }
         }

src/index/views/home/components/guide/index.scss

@@ -3,16 +3,10 @@
   left: 0;
   bottom: 0px;
   width: 100%;
-  height: 200px;
-  overflow: hidden;
   pointer-events: none;
   transition-property: bottom, opacity;
   transition-duration: 0.5s;
   z-index: var(--z-index-normal);
-
-  #drawer.playing {
-    bottom: 20px;
-  }
 }
 
 #drawer {
@@ -26,34 +20,27 @@
   transition-duration: 0.5s;
   transition-property: height, bottom;
 
+  &.playing {
+    bottom: 20px;
+  }
   &.open {
     height: 130px;
 
     &.noScroll {
-      height: 107px;
+      height: 110px;
+    }
+    &.fadeOut {
+      pointer-events: none;
     }
   }
 }
 
-#drawer-container.drawerOpen #drawer.open {
-  height: 136px;
-}
-
-#drawer.open.fadeOut {
-  pointer-events: none;
-}
-
-#drawer-container.drawerOpen #drawer.open.noScroll,
-#drawer.open.noScroll.playing {
-  height: 113px;
-}
-
 #thumb-container {
   .thumbImg {
     cursor: pointer;
 
     img {
-      height: 97px;
+      height: 90px;
     }
   }
 }
@@ -69,15 +56,11 @@
 
 .frame {
   width: calc(100% - 20px);
-  height: 97px;
-  margin: 9px 10px;
+  height: 90px;
+  margin: 10px;
   float: left;
 }
 
-.frame.noScroll {
-  margin: 17px 10px;
-}
-
 .frame .slidee {
   display: flex;
   height: 100%;
@@ -227,16 +210,13 @@
 @media only screen and (max-width: 487px), (max-height: 487px) {
   #thumb-container .thumbImg img,
   .frame {
-    height: 77px;
+    height: 70px;
   }
   .frame .slidee li {
     width: 103px;
   }
-  #drawer-container.drawerOpen #drawer.open.noScroll {
-    height: 94px;
-  }
   #drawer.open.noScroll,
   #drawer.open.noScroll.playing {
-    height: 88px;
+    height: 90px;
   }
 }

src/index/views/home/components/hot-spot-list/index.tsx

@@ -15,7 +15,7 @@ export default defineComponent({
           <ul></ul>
         </div>
         <div id="hotListBottom">
-          <img id="hotListClose" src="/images/close1.png" alt="" />
+          <img id="hotListClose" src="/images/hotListClose.png" alt="" />
         </div>
       </div>
     );

src/index/views/home/components/menu/index.scss

@@ -1,17 +1,27 @@
 .pinBottom-container {
   position: absolute;
-  bottom: 0px;
+  bottom: 10px;
   width: 100%;
   transition: all 0.5s;
   z-index: var(--z-index-top);
 
-  .pinBottom.playing {
-    bottom: 20px;
-  }
-}
+  &.open {
+    bottom: 140px;
+
+    &.playing {
+      bottom: 160px;
+    }
+    &.noScroll {
+      bottom: 120px;
 
-#gui .pinBottom.open.noScroll.playing {
-  bottom: 135px;
+      &.playing {
+        bottom: 140px;
+      }
+    }
+  }
+  &.playing:not(.open) {
+    bottom: 30px;
+  }
 }
 
 .pinBottom {
@@ -21,106 +31,55 @@
   transition: all 0.5s;
 
   &.left {
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 10px;
     left: 10px;
-    bottom: 10px;
+    bottom: 0;
+    overflow: hidden;
+    border-radius: 10px;
+    background: rgba(0, 0, 0, 0.2);
   }
   &.right {
     right: 0;
-    bottom: 10px;
+    bottom: 0;
     text-shadow: 0 0 1px rgba(0, 0, 0, 0.6);
 
-    .rightViewContainer > div:hover {
-      background: rgba(0, 0, 0, 0.25);
-    }
     .ui-icon {
-      float: left;
-      padding: 0;
       margin-right: 10px;
-      background: rgba(0, 0, 0, 0.2);
-      border-radius: 10px;
-    }
-  }
-  &.open {
-    bottom: 140px;
-
-    &.noScroll {
-      bottom: 117px;
-
-      &.playing {
-        bottom: 135px;
-      }
     }
-    &.playing {
-      bottom: 150px;
+    > div {
+      width: 48px;
+      height: 48px;
+      border-radius: 10px;
+      background: rgba(0, 0, 0, 0.2);
     }
   }
-}
-
-.viewContainer {
-  float: left;
-  position: relative;
-
   > div {
     float: left;
-  }
-}
-
-#play,
-#pause {
-  position: relative;
-  width: 94px;
-  height: 48px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-
-  &:hover {
-    background: rgba(0, 0, 0, 0.25);
-  }
-}
-
-#gui-modes-map > div {
-  float: left;
-  width: 94px;
-  height: 48px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
+    width: 94px;
+    height: 48px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
 
-  &:hover,
-  &.active,
-  &.opened {
-    background: rgba(0, 0, 0, 0.25);
-  }
-  img {
-    width: 24px;
-    height: 24px;
+    &.active,
+    &:hover,
+    &.opened {
+      background: rgba(0, 0, 0, 0.25);
+    }
+    img {
+      width: 24px;
+      height: 24px;
+    }
   }
 }
 
-#pullTab {
-  display: block;
-  position: relative;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
-  text-align: center;
-}
-
 #volume > a,
 #gui-fullscreen > a {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 48px;
-  height: 48px;
-}
-
-.terms2 {
-  display: none;
+  width: 100%;
+  height: 100%;
 }
 
 .icon-fullscreen:before {
@@ -133,38 +92,40 @@
 }
 
 @media only screen and (max-width: 600px) {
-  .pinBottom.right,
-  .pinBottom.left {
+  .pinBottom-container {
     bottom: 5px;
+
+    &.open {
+      bottom: 105px;
+
+      &.noScroll {
+        bottom: 95px;
+
+        &.playing {
+          bottom: 115px;
+        }
+      }
+    }
+    &.playing:not(.open) {
+      bottom: 25px;
+    }
   }
-  .pinBottom.left {
-    left: 5px;
-  }
-  .pinBottom.right .ui-icon {
-    margin-right: 5px;
+  .pinBottom {
+    display: flex;
+
+    &.left {
+      flex-direction: column;
+      left: 5px;
+    }
+    &.right .ui-icon {
+      margin-right: 5px;
+    }
+    > div {
+      width: 64px;
+    }
   }
   #play,
   #pause {
     width: 64px;
   }
-  #gui-modes-map > div {
-    width: 64px;
-  }
-  .viewContainer,
-  #gui-modes-map {
-    display: flex;
-    flex-direction: column;
-  }
-}
-
-@media only screen and (max-width: 487px), (max-height: 487px) {
-  .pinBottom-container.drawerOpen.duringTour {
-    bottom: 6px;
-  }
-  #gui .pinBottom.open.noScroll {
-    bottom: 93px;
-  }
-  .pinBottom.open.noScroll.playing {
-    bottom: 108px;
-  }
 }

src/index/views/home/components/menu/index.tsx

@@ -7,98 +7,101 @@ export default defineComponent({
     return (
       <div class="pinBottom-container">
         <div class="pinBottom left">
-          <div class="viewContainer">
-            <div id="previous" class="previous desktop-only ui-icon" style="display: none;">
-              <a>
-                <img src="images/play.png" width="24" height="24" data-original-title="播放" />
-              </a>
-            </div>
-            <div id="play" class="ui-icon" data-original-title="播放">
-              <a>
-                <img src="images/play.png" width="24" height="24" />
-              </a>
-            </div>
-            <div id="pause" class="ui-icon" style="display: none;">
-              <a>
-                <img title="暂停" src="images/pause.png" width="24" height="24" />
-              </a>
-            </div>
-            <div id="next" class="next desktop-only ui-icon wide" style="display: none;">
-              <a>
-                <i title="" class="icon icon-dpad-right" data-original-title="下一个"></i>
-              </a>
-            </div>
-            <div id="gui-modes-map" class="ui-icon double active">
-              <div data-original-title="导览" id="pullTab" title="">
-                <img class="icon icon-inside" src="images/auto.png" title="导览" />
-              </div>
-              <div data-original-title="热点列表" id="hotList" title="" style="display: none">
-                <img class="icon icon-inside" src="images/hotlist.png" title="热点列表" />
-              </div>
-              <div data-original-title="全景漫游" id="gui-modes-inside" title="" class="">
-                <img class="icon icon-inside" src="images/inside.png" title="全景漫游" />
-              </div>
-              <div data-original-title="迷你模型" id="gui-modes-dollhouse" title="" class="">
-                <img class="icon icon-inside" src="images/dollhouse.png" title="迷你模型" />
-              </div>
-              <div data-original-title="俯视图" id="gui-modes-floorplan" title="">
-                <img class="icon icon-inside" src="images/floor.png" title="俯视图" />
-              </div>
-              <div data-original-title="VR" id="vr" title="" style="display: none;">
-                <img class="icon icon-inside" src="images/VR.png" title="VR" />
-              </div>
-              <div
-                data-original-title="消除外壳"
-                id="gui-remove-face"
-                title=""
-                style="display: none; float: left;"
-              >
-                <img class="icon icon-inside" src="images/face.jpg" />
-              </div>
-            </div>
+          <div id="previous" class="previous desktop-only ui-icon" style="display: none;">
+            <a>
+              <img src="images/play.png" width="24" height="24" data-original-title="播放" />
+            </a>
+          </div>
+          <div id="play" class="ui-icon" data-original-title="播放">
+            <a>
+              <img src="images/play.png" width="24" height="24" />
+            </a>
+          </div>
+          <div id="pause" class="ui-icon" style="display: none;">
+            <a>
+              <img title="暂停" src="images/pause.png" width="24" height="24" />
+            </a>
+          </div>
+          <div id="next" class="next desktop-only ui-icon wide" style="display: none;">
+            <a>
+              <i title="" class="icon icon-dpad-right" data-original-title="下一个"></i>
+            </a>
+          </div>
+          <div data-original-title="导览" id="pullTab" title="">
+            <img
+              class="icon icon-inside"
+              src="images/auto.png"
+              title="导览"
+              data-default-url="images/auto.png"
+              data-active-url="images/auto-suspend.png"
+            />
+          </div>
+          <div data-original-title="热点列表" id="hotList" title="" style="display: none">
+            <img class="icon icon-inside" src="images/hotlist.png" title="热点列表" />
+          </div>
+          <div data-original-title="全景漫游" id="gui-modes-inside" title="" class="">
+            <img class="icon icon-inside" src="images/inside.png" title="全景漫游" />
+          </div>
+          <div data-original-title="迷你模型" id="gui-modes-dollhouse" title="" class="">
+            <img class="icon icon-inside" src="images/dollhouse.png" title="迷你模型" />
+          </div>
+          <div data-original-title="俯视图" id="gui-modes-floorplan" title="">
+            <img class="icon icon-inside" src="images/floor.png" title="俯视图" />
+          </div>
+          <div data-original-title="VR" id="vr" title="" style="display: none;">
+            <img class="icon icon-inside" src="images/VR.png" title="VR" />
+          </div>
+          <div
+            data-original-title="消除外壳"
+            id="gui-remove-face"
+            title=""
+            style="display: none; float: left;"
+          >
+            <img class="icon icon-inside" src="images/face.jpg" />
           </div>
         </div>
-        <div class="pinBottom right hideTarget">
-          <div class="rightViewContainer clearfix">
-            <div id="volume" class="ui-icon wide">
-              <a>
-                <img src="images/Volume btn_on.png" width="24" height="24" />
-              </a>
-            </div>
-            <div id="vr" class="ui-icon wide hidden" style="display: none;">
-              <a>
-                <i title="{[{ VIEW_IN_VR }]}" class="icon icon-webvr"></i>
-              </a>
-            </div>
-            <div id="sharing" class="ui-icon wide hidden" style="display: none;">
-              <a>
-                <i title="{[{ SOCIAL_SHARING }]}" class="icon icon-share"></i>
-              </a>
-            </div>
-            <div
-              id="gui-fullscreen"
-              class="ui-icon wide"
-              data-placement="top"
-              title="{[{ VIEW_FULLSCREEN }]}"
-            >
-              <a>
-                <i class="icon icon-fullscreen"></i>
-              </a>
-            </div>
-            <div
-              id="gui-fullscreen-exit"
-              class="ui-icon wide"
-              data-placement="top"
-              title="{[{ EXIT_FULLSCREEN }]}"
-              style="display: none;"
-            >
-              <a>
-                <i class="icon icon-fullscreen-exit"></i>
-              </a>
-            </div>
-            <div class="pull-right terms terms2">
-              <a>{'{[{ TERMS }]}'}</a>
-            </div>
+        <div class="pinBottom right">
+          <div id="volume" class="ui-icon wide">
+            <a>
+              <img
+                src="images/Volume btn_on.png"
+                width="24"
+                height="24"
+                data-default-url="images/Volume btn_on.png"
+                data-active-url="images/Volume btn_off.png"
+              />
+            </a>
+          </div>
+          <div id="vr" class="ui-icon wide hidden">
+            <a>
+              <i title="{[{ VIEW_IN_VR }]}" class="icon icon-webvr"></i>
+            </a>
+          </div>
+          <div id="sharing" class="ui-icon wide hidden">
+            <a>
+              <i title="{[{ SOCIAL_SHARING }]}" class="icon icon-share"></i>
+            </a>
+          </div>
+          <div
+            id="gui-fullscreen"
+            class="ui-icon wide"
+            data-placement="top"
+            title="{[{ VIEW_FULLSCREEN }]}"
+          >
+            <a>
+              <i class="icon icon-fullscreen"></i>
+            </a>
+          </div>
+          <div
+            id="gui-fullscreen-exit"
+            class="ui-icon wide"
+            data-placement="top"
+            title="{[{ EXIT_FULLSCREEN }]}"
+            style="display: none;"
+          >
+            <a>
+              <i class="icon icon-fullscreen-exit"></i>
+            </a>
           </div>
         </div>
       </div>

src/index/views/home/index.tsx

@@ -11,6 +11,13 @@ import Popup from './components/popup';
 import HotSpotList from './components/hot-spot-list';
 import './index.scss';
 
+// 自定义热点图标
+// @ts-ignore
+// window.hoticon = {
+//   default: '/images/point.png',
+//   higt: '/images/point2.png',
+// };
+
 export default defineComponent({
   name: 'home',
   components: {
@@ -64,10 +71,10 @@ export default defineComponent({
             {/* 导览 */}
             <Guide />
 
-            <div class="home_logo">
+            {/* <div class="home_logo">
               <img src="images/btm_logo.png" />
               <span>提供技术支持</span>
-            </div>
+            </div> */}
           </div>
 
           <WebVr />