style: --

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

@@ -200,6 +200,9 @@
   .frame .thumbImg {
     width: 103px;
   }
+  #drawer.open {
+    height: 110px;
+  }
   #drawer.open.noScroll,
   #drawer.open.noScroll.playing {
     height: 90px;

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

@@ -9,14 +9,10 @@
     bottom: 140px;
 
     &.playing {
-      bottom: 160px;
+      bottom: 140px;
     }
     &.noScroll {
       bottom: 120px;
-
-      &.playing {
-        bottom: 140px;
-      }
     }
   }
   &.playing:not(.open) {
@@ -78,14 +74,13 @@
     bottom: 5px;
 
     &.open {
-      bottom: 105px;
+      bottom: 115px;
 
       &.noScroll {
         bottom: 95px;
-
-        &.playing {
-          bottom: 115px;
-        }
+      }
+      &.playing {
+        bottom: 120px;
       }
     }
     &.playing:not(.open) {

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

@@ -22,7 +22,7 @@ export default defineComponent({
     const baseStore = useBaseStore();
     const route = useRoute();
     const { isFullscreen, isSupported, toggle } = useFullscreen();
-    const { kankanInited, guidePlaying, hotList, bgMusicDom, bgMusicPlaying } =
+    const { kankanInited, guidePlaying, hotList, hotListVisible, bgMusicDom, bgMusicPlaying } =
       storeToRefs(baseStore);
     const guideVisible = ref(false);
     const rulesRef = ref<IRulesMethods>();
@@ -35,10 +35,10 @@ export default defineComponent({
         player.pause();
       } else {
         player.play();
+        guideVisible.value = true;
       }
 
       baseStore.setState('guidePlaying', !playing);
-      guideVisible.value = !playing;
     };
 
     const handleDollhouse = () => {
@@ -51,7 +51,7 @@ export default defineComponent({
       window.kankan.Camera.panorama();
     };
     const openHotList = () => {
-      baseStore.setState('hotListVisible', true);
+      baseStore.setState('hotListVisible', !hotListVisible.value);
     };
     const startMeasure = () => {
       rulesRef.value?.startMeasure();
@@ -86,6 +86,7 @@ export default defineComponent({
 
     return {
       hotList,
+      hotListVisible,
       isSupported,
       isFullscreen,
       guideVisible,
@@ -111,6 +112,7 @@ export default defineComponent({
             <div
               class={className('pinBottom-container', {
                 open: this.guideVisible,
+                playing: this.guidePlaying,
                 noScroll: !this.guidePlaying,
               })}
             >
@@ -118,9 +120,9 @@ export default defineComponent({
                 <div id="play" class="ui-icon" onClick={this.handlePlayGuide}>
                   <a>
                     {!this.guidePlaying ? (
-                      <img src="images/play.png" width="24" height="24" />
+                      <img src="images/play.png" />
                     ) : (
-                      <img title="暂停" src="images/pause.png" width="24" height="24" />
+                      <img title="暂停" src="images/pause.png" />
                     )}
                   </a>
                 </div>
@@ -129,13 +131,7 @@ export default defineComponent({
                   class={className({ opened: this.guideVisible })}
                   onClick={() => (this.guideVisible = !this.guideVisible)}
                 >
-                  <img
-                    class="icon icon-inside"
-                    src="images/auto.png"
-                    title="导览"
-                    data-default-url="images/auto.png"
-                    data-active-url="images/auto-suspend.png"
-                  />
+                  <img class="icon icon-inside" src="images/auto.png" title="导览" />
                 </div>
                 {Boolean(this.hotList.length) && (
                   <div id="hotList" onClick={this.openHotList}>