518-JSSWLT/H5场景/src/views/gui/menu.vue

<template>
  <div class="pinBottom-container" @touchstart.stop @keydown.stop>
    <div class="pinBottom center">
      <div id="view-controllers"></div>
    </div>

    <!-- 返回按钮 -->
    <div class="backBtn" @click="goBack" v-if="screenWidth > 1000">
      <img class="imgLimit"
        :style="{ width: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px', height: screenWidth > 1000 ? parseInt(screenWidth / 32) + 'px' : '40px' }"
        :src="require(`@/assets/img/back.png`)" />
      <span>返回</span>
    </div>


    <!-- 展开按钮 -->
    <div class="myViewShowBox" @click="viewShow = true" :class="{ myViewShowBoxAc: !viewShow }">
      <img :src="require(`@/assets/img/show.png`)" />
    </div>

    <!-- 展开收起小地图 -->
    <div class="smMapBox" :class="{ smMapBoxHide: !smMapShow }">
      <div class="smMapBoxSon" @click="smMapShow = !smMapShow">
        <img src="../../assets/img/mapIcon.svg" alt="" />
      </div>
    </div>
    <!-- 音乐按钮 -->
    <div class="myMusicBox" id="volume">
      <div>
        <img id="openMusic" style="display: block !important" @click="switchBGM(true)" src="../../assets/img/openM.png"
          alt="" title="打开音乐" />
        <img id="closeMusic" style="display: none !important" @click="switchBGM(false)" src="../../assets/img/closeM.png"
          alt="" title="关闭音乐" />
      </div>
    </div>

    <div id="lineTop" class="pinBottom left" :class="{ viewShowAc: !viewShow }"
      :style="{ bottom: timer ? '140px' : !isGuide && screenWidth > 1000 ? '150px ' : isGuide && screenWidth > 1000 ? '20px ' : '0px ' }">
      <div>
        <div class="viewContainer">
          <div class="viewXian">
            <!-- 线段 -->
            <img src="../../assets/img/xian.png" alt="" />
            <!-- 收起按钮 -->
            <div class="viewShowIcon" @click="viewShow = false">
              <img :src="require(`@/assets/img/hide.png`)" />
            </div>
          </div>

          <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" rel="tooltip" data-original-title="播放">
            <!-- icon文字 -->
            <div class="iconTxt" :style="{ paddingLeft: screenWidth > 1000 && screenWidth < 2000 ? '80px' : '' }">{{
              screenWidth < 1000 ? '自动导览' : '〚自动导览〛' }}</div>
                <a>
                  <img :src="require('@/assets/images/icon/play.png')" />
                </a>
            </div>
            <div id="pause" class="ui-icon" style="display: none">
              <!-- icon文字 -->
              <div class="iconTxt iconTxtAc"
                :style="{ paddingLeft: screenWidth > 1000 && screenWidth < 2000 ? '80px' : '' }">{{ screenWidth < 1000
                  ? '自动导览' : '〚自动导览〛' }}</div>
                  <a>
                    <img rel="tooltip" title="" :src="require('@/assets/images/icon/pause.png')"
                      data-original-title="暂停" />
                  </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">
                <div data-original-title="导览" @click="isGuide = !isGuide" id="pullTab" rel="tooltip" title="场景导览"
                  :style="{ paddingLeft: screenWidth > 1000 && screenWidth < 2000 ? '100px' : '' }">
                  <!-- icon文字 -->
                  <div class="iconTxt" :class="{ iconTxtAc: !isGuide }"
                    :style="{ marginLeft: screenWidth > 1000 && screenWidth < 2000 ? '50px' : '' }">
                    {{ screenWidth < 1000 ? '导览列表' : '〚导览列表〛' }} </div>
                      <img title="" class="icon icon-inside" :src="require(`@/assets/images/icon/auto${!isGuide ? '_active' : ''
                        }.png`)
                        " />
                  </div>
                  <!-- 热点列表 -->
                  <div class="hotListBox" @click="meanInd = true"
                    :style="{ paddingRight: screenWidth > 1000 && screenWidth < 2000 ? '' : '', paddingLeft: screenWidth > 2000 ? '150px' : '' }">
                    <div class="iconTxt"
                      :style="{ paddingRight: screenWidth > 1000 && screenWidth < 2000 ? '' : '', marginLeft: screenWidth > 2000 ? '75px' : '' }">
                      {{ screenWidth < 1000 ? '热点列表' : '〚热点列表〛' }}</div>
                        <div class="hotListSon">
                          <img :src="require(`@/assets/images/icon/${meanInd ? 'hotAc' : 'hot'
                            }.png`)
                            " />
                        </div>
                    </div>

                    <div data-original-title="全景漫游" id="gui-modes-inside" rel="tooltip">
                      <img class="icon icon-inside" :src="require('@/assets/images/icon/inside.png')" />
                      <img class="icon icon-inside active" :src="require('@/assets/images/icon/inside_active.png')" />
                    </div>
                    <div title="迷你漫游" data-original-title="迷你模型" id="gui-modes-dollhouse" rel="tooltip"
                      :style="{ paddingRight: screenWidth > 1000 && screenWidth < 2000 ? '80px' : '', paddingLeft: screenWidth > 2000 ? '300px' : '' }">
                      <!-- icon文字 -->
                      <div class="iconTxt"
                        :style="{ paddingRight: screenWidth > 1000 && screenWidth < 2000 ? '80px' : '', marginLeft: screenWidth > 2000 ? '150px' : '' }">
                        {{ screenWidth < 1000 ? '迷你模型' : '〚迷你模型〛' }}</div>
                          <img class="icon icon-inside" :src="require('@/assets/images/icon/dollhouse.png')" />
                          <img class="icon icon-inside active"
                            :src="require('@/assets/images/icon/dollhouse_active.png')" />
                      </div>
                      <div data-original-title="俯视图" id="gui-modes-floorplan" rel="tooltip" title="顶部俯视"
                        :style="{ paddingRight: screenWidth > 1000 && screenWidth < 2000 ? '40px' : '', paddingLeft: screenWidth > 2000 ? '250px' : '' }">
                        <!-- icon文字 -->
                        <div class="iconTxt"
                          :style="{ paddingRight: screenWidth > 1000 && screenWidth < 2000 ? '40px' : '', marginLeft: screenWidth > 2000 ? '125px' : '' }">
                          {{ screenWidth < 1000 ? '俯瞰视图' : '〚俯瞰视图〛' }}</div>
                            <img class="icon icon-inside" :src="require('@/assets/images/icon/floor.png')" />
                            <img class="active icon icon-inside active"
                              :src="require('@/assets/images/icon/floor_active.png')" />
                        </div>
                        <div title="打开音乐" data-original-title="打开音乐" id="volumeBid" rel="tooltip"
                          :style="{ paddingLeft: screenWidth > 2000 ? '380px' : '' }" @click="switchBGM2(!isMusic)">
                          <!-- icon文字 -->
                          <div class="iconTxt" :class="isMusic ? 'iconTxtAc' : ''"
                            :style="{ marginLeft: screenWidth > 2000 ? '40px !important' : '' }">{{
                              isMusic ? '〚关闭音乐〛' : '〚打开音乐〛' }}</div>
                          <img v-if="isMusic" src="../../assets/img/openM.png" title="打开音乐" />
                          <img v-if="!isMusic" src="../../assets/img/closeM.png" alt="" title="关闭音乐" />
                        </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>
                        <div data-original-title="热点列表" id="hotList" rel="tooltip" title="">
                          <img class="icon icon-inside" :src="require('@/assets/images/hotlist.png')" />
                          <img class="icon icon-inside active" :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>

                <div class="pinBottom right hideTarget">
                  <div class="rightViewContainer clearfix">

                    <!-- 添加自己写的逻辑的楼层选择 -->
                    <FloorSelect />



                    <div class="gui-floor">
                      <div class="gui-floor-title"></div>
                      <div class="gui-floor-icon">
                        <span class="gui-floor-number"></span>
                      </div>
                      <div class="container"></div>
                    </div>

                    <div id="vr" class="ui-icon wide hidden" style="display: none">
                      <a>
                        <i rel="tooltip" title="{[{ VIEW_IN_VR }]}" class="icon icon-webvr"></i>
                      </a>
                    </div>
                    <div id="sharing" class="ui-icon wide hidden" style="display: none">
                      <a>
                        <i rel="tooltip" title="{[{ SOCIAL_SHARING }]}" class="icon icon-share"></i>
                      </a>
                    </div>
                    <!-- <div class="pull-right terms terms2">
          <a>{[{ TERMS }]}</a>
        </div> -->
                  </div>
                </div>

                <!-- 热点列表组件 -->
                <Hotspot v-if="meanInd" @close="meanInd = false" />
              </div>
</template>

<script>
//引入组件
import Hotspot from "./compomemt/hotspot";
import FloorSelect from "./compomemt/floorSelect";
export default {
  components: { Hotspot, FloorSelect },
  data() {
    return {
      // 自动导览切换
      isGuide: true,
      // 热点列表的显示和隐藏
      meanInd: false,
      // 整个导览的收起和展开
      viewShow: true,
      // 小地图的展开和收起
      smMapShow: true,
      isMusic: false,
      screenWidth: null,
      dialogWidth: 0,
      timer: false
    };
  },
  watch: {
    // 打开热点列表的时候隐藏使用指南
    meanInd(val) {
      if (val) {
        const dom = document.querySelector("#interaction-modal");
        dom.style.opacity = "0";
        dom.style.pointerEvents = "none";
      }
    },
    // 屏幕宽度
    screenWidth: {
      handler: function (val, oldVal) {
        this.dialogWidth = val
        console.log(this.dialogWidth)
      },
    },
    viewShow(val) {
      const dom = document.querySelector("#drawer-container");
      if (val) {
        dom.style.transform = "translateX(0px)";
      } else {
        dom.style.transform = "translateX(-500px)";
      }
    },
    smMapShow(val) {
      if (val) {
        $(".cad").css({ right: "0px" });
      } else {
        $(".cad").css({ right: "-140px" });
      }
    },
  },
  computed: {},
  mounted() {
    this.screenWidth = document.body.clientWidth
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth
      })()
    }
    if (this.screenWidth > 1000) {
      console.log('走')
      setTimeout(() => {
        this.timer = true
      }, 3000)
      setTimeout(() => {
        this.timer = false
      }, 5200)
    }
  },
  methods: {
    goBack() {
      console.log(window.history)
      // 如果有上一页，则传递信息
      if (window.history.length === 1) {
        window.close()
      } else {
        // 跨域传递信息
        window.parent.postMessage({ command: "back" }, "*");
      }
    },
    switchBGM(flag) {
      if (flag) {
        window.manage.switchBgmState(true);
        document.querySelector("#openMusic").style.display = "none";
        document.querySelector("#closeMusic").style.display = "block";
      } else {
        window.manage.switchBgmState(false);
        document.querySelector("#openMusic").style.display = "block";
        document.querySelector("#closeMusic").style.display = "none";
      }
    },
    switchBGM2(flag) {
      if (flag) {
        window.manage.switchBgmState(true);
        // document.querySelector("#openMusic").style.display = "none !important";
        // document.querySelector("#closeMusic").style.display = "block ";
        this.isMusic = true
      } else {
        window.manage.switchBgmState(false);
        // document.querySelector("#openMusic").style.display = "block ";
        // document.querySelector("#closeMusic").style.display = "none !important";
        this.isMusic = false
      }
      console.log(this.isMusic)
    },
  },
  created() {
  }
};
</script>

<style lang="less" scoped>
// 隐藏原本的楼层选择
<<<<<<< HEAD
.gui-floor {
  display: none !important;
}
=======
// .gui-floor{
//   display: none !important;
// }
>>>>>>> f468469ef5990cd123ca81a9344aa30f41158681


#hotList {
  display: none !important;
}

::-webkit-scrollbar {
  width: 5px;
  /*高宽分别对应横竖滚动条的尺寸*/
}

::-webkit-scrollbar-thumb {
  // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #edd3b0;
  border-color: #edd3b0;
  color: #edd3b0;
  outline: none;
}

#gui-modes-inside {
  position: relative;
  display: none !important;
}

#gui-modes-dollhouse {
  position: relative;
}

#volumeBid {
  position: relative;

  @media screen and (max-width: 1000px) {
    display: none !important;
  }
}

#gui-modes-floorplan {
  position: relative;
}

// 右侧菜单栏
@wh: 44px;
@margin: 0px;

#play,
#pause {
  margin-right: @margin;

  img {
    width: @wh;
    height: @wh;

    @media screen and (min-width: 1000px) and (max-width: 2000px) {
      width: 60px !important;
      height: 60px !important;
    }

    @media screen and (min-width: 2000px) {
      width: 80px !important;
      height: 80px !important;
    }

  }
}

.rightViewContainer {
  display: flex !important;
  align-items: center !important;
}

#gui-modes-map {

  // @media screen and (min-width: 2000px) {
  //   min-width: 500px;
  // }

  >div {
    margin-right: @margin;

    >img {
      width: 44px;
      height: 44px;
      display: block !important;

      @media screen and (min-width: 1000px) and (max-width: 2000px) {
        width: 60px !important;
        height: 60px !important;
      }

      @media screen and (min-width: 2000px) {
        width: 80px !important;
        height: 80px !important;
      }
    }




    .active {
      display: none !important;
    }
  }

  .active {
    >img {
      display: none !important;
    }

    .active {
      display: block !important;
    }
  }
}

.pinBottom.right .ui-icon {
  background: none;
}

#gui-fullscreen img {
  width: 40px;
}

.guiUp {
  @media screen and (min-width:1000px) {
    bottom: 140px;
  }
}

#volume {
  width: 40px;

  @media screen and (min-width: 1000px) {
    display: none !important;
  }


  // @media screen and (min-width: 1000px) and(max-width: 2000px) {
  //   width: 60px;
  // }

  // @media screen and (min-width: 2000px) {
  //   width: 80px;
  // }
}

#volumeBig {}

#gui-fullscreen-exit img {
  width: 40px !important;
}

.bgandshare {
  background: none !important;

  // margin-right: 20px!important;
  >div {
    width: 100%;
    cursor: pointer;

    img {
      width: 100%;
    }
  }
}

// --------------------

.pinBottom-container {
  .iconTxt {
    font-size: 12px;
    color: #fff;
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;

    @media screen and (min-width: 2000px) {
      font-size: 16px;
    }

    // &::before {
    //   content: "";
    //   position: absolute;
    //   right: -4px;
    //   bottom: 37px;
    //   width: 9px;
    //   height: 7px;
    //   background-image: url("../../assets/img/dian.png");
    //   background-size: 100% 100%;
    // }
  }

  .iconTxtAc {
    color: #0a93cd;
  }

  // .active{
  //   .iconTxt{
  //     color: #13709e;
  //   }
  // }
  #gui-modes-dollhouse.active {
    .iconTxt {
      color: #0a93cd;
    }
  }

  #gui-modes-floorplan.active {
    .iconTxt {
      color: #0a93cd;
    }
  }

  .hotListBox {
    cursor: pointer;
    float: left;
    width: 60px;
    height: 44px;
    position: relative;
    z-index: 100;

    @media screen and (min-width: 1000px) {
      height: auto;
      width: 300px;
    }


    .hotListSon {
      text-align: center;

      &>img {
        width: 44px !important;
        height: 44px !important;

        @media screen and (min-width: 1000px) and (max-width: 2000px) {
          width: 60px !important;
          height: 60px !important;
        }

        @media screen and (min-width: 2000px) {
          width: 80px !important;
          height: 80px !important;
        }
      }
    }
  }

  .viewContainer {
    padding: 10px 10px 34px 10px;
    background-color: #171c1f;
    border-radius: 0;
    width: 100vw;
    max-width: 500px;
    justify-content: center;
    display: flex;
    position: relative;

    @media screen and (min-width:1000px) {
      background-color: #ebebeb00;
      max-width: none;
    }

    .viewXian {
      padding: 10px 10px 46px 10px;
      position: absolute;
      width: 100%;
      max-width: 500px;
      height: 100%;
      left: 0;
      top: 0;

      @media screen and (min-width:1000px) {
        display: flex;
        justify-content: center;
        max-width: none;
        padding: 0px 10px 46px 10px;
        margin-top: -5px;
      }

      @media screen and (min-width:2000px) {
        display: flex;
        justify-content: center;
        max-width: none;
        padding: 0px 10px 46px 10px;
        margin-top: -10px;
      }


      &>img {
        width: 100%;
        height: 100%;
        object-fit: contain;

        @media screen and (min-width:1000px) {
          width: 80%;
          object-fit: inherit;
        }

      }

      .viewShowIcon {
        cursor: pointer;
        position: absolute;
        right: 7px;
        top: 4px;

        @media screen and (min-width: 1000px) {
          position: static;
          right: none;
          top: none;
          margin-top: 4px;
        }

        &>img {
          width: 30px;

          @media screen and (min-width: 1000px) and (max-width: 2000px) {
            width: 40px;
            z-index: 9999;
            position: absolute;
          }

          @media screen and (min-width: 2000px) {
            width: 52px;
            z-index: 9999;
            position: absolute;
          }
        }
      }
    }
  }

  // 兼容小手机
  @media screen and (max-width: 370px) {
    .viewContainer {
      padding: 10px 0 34px 0;

      .viewXian {
        padding: 10px 0px 46px 0px;

        .viewShowIcon {
          z-index: 999;
          position: absolute;
          right: 0px;
          top: 4px;

          &>img {
            width: 30px;
          }
        }
      }
    }
  }

  .backBtn {
    cursor: pointer;
    position: fixed;
    z-index: 99;
    top: 36px;
    left: 10px;
    opacity: 1;
    pointer-events: auto;
    display: flex;
    align-items: center;

    img {
      width: 70px;
      height: 70px;
    }

    span {
      color: #FFFAE9;
      font-family: 'Source Han Serif CN-Bold';
      font-size: 2.5em;
      text-shadow: 0px 0px 30px #9F7B46;
      -webkit-background-clip: text;
      // -webkit-text-fill-color: transparent;
    }

  }

  .myViewShowBox {
    cursor: pointer;
    position: fixed;
    z-index: 99;
    bottom: 36px;
    left: 10px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s;

    &>img {
      width: 30px;

      @media screen and (min-width:1000px) and (max-width: 2000px) {
        width: 40px;
      }

      @media screen and (min-width:2000px) {
        width: 50px;
      }
    }
  }

  .myViewShowBoxAc {
    opacity: 1;
    pointer-events: auto;
  }

  .viewShowAc {
    transform: translateX(-500px);

    @media screen and (min-width:1000px) {
      transform: translateX(-100vw);
    }
  }

  // 音乐
  .myMusicBox {
    cursor: pointer;
    position: fixed;
    z-index: 99;
    right: 10px;
    top: 320px;
    width: 40px;

    @media screen and (min-width: 1000px) and(max-width: 2000px) {
      width: 60px;
    }

    @media screen and (min-width: 2000px) {
      width: 80px;
    }

    &>div {
      width: 40px;

      @media screen and (min-width: 1000px) and(max-width: 2000px) {
        width: 60px;
      }

      @media screen and (min-width: 2000px) {
        width: 80px;
      }

      &>img {
        width: 40px;

        @media screen and (min-width: 1000px) and(max-width: 2000px) {
          width: 60px;
        }

        @media screen and (min-width: 2000px) {
          width: 80px;
        }
      }
    }
  }

  .smMapBox {
    position: fixed;
    z-index: 99;
    top: 180px;
    right: 78px;
    width: 140px;
    height: 16px;
    transition: all 0.3s;
    transform: rotate(90deg);

    // @media screen and (min-width: 1000px) {
    //   right: 98px;
    // }

    .smMapBoxSon {
      border-radius: 0 0 4px 4px;
      height: 16px;
      background-color: rgba(0, 0, 0, 0.3);
      width: 40px;
      margin: 0 auto;
      text-align: center;

      &>img {
        position: relative;
        top: -5px;
        width: 20px;
      }
    }
  }

  .smMapBoxHide {
    right: -61px;
    transform: rotate(-90deg);

    .smMapBoxSon {
      border-radius: 4px 4px 0px 0px;
    }
  }
}
</style>