Wuchuan/src/App.vue

<template>
  <div class="vue-root">
    <router-view />
    <div
      v-if="isMobile"
      class="orientation-tip"
    >
      <div>
        <img
          :src="require('@/assets/images/landtip.png')"
          alt=""
        >
        <p>请在竖屏模式观看</p>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  mounted() {
    if (this.isMobile) {
      document.body.classList.add('mobile')
    }
  }
}
</script>
<style lang="less">
.vue-root{
  width: 100%;
  height: 100%;
}


/*横屏体验*/
.orientation-tip {
  width: 100%;
  height: 100%;
  z-index: 10000;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  background-color: rgba(0, 0, 0, 0.8);

  > div {
    position: absolute;
    top: 50%;
    width: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    > img {
        width: 20%;
    }
    > p {
      font-size: 16px;
      margin-top: 20px;
      width: 100%;
    }
  }
}

/*竖屏*/
@media screen and (orientation: portrait) {
  .orientation-tip {
    display: none;
  }
}

/*横屏*/
@media screen and (orientation: landscape) {
  .orientation-tip {
    display: block;
  }
}

// vue组件过渡效果
.fade-out-leave-active {
  transition: opacity 1s;
}
.fade-out-leave-to {
  opacity: 0;
}

@font-face {
  font-family: 'DFLiShuW7';
  src: url('@/assets/style/DFLiShuW7.ttf');
}

.cad{
  top: 24px !important;
  right: 26px !important;
  width: 222px !important;
  height: 222px !important;
  border-radius: 10px;
  z-index: 999;
  background: rgba(81, 32, 32, 0.40) !important;
  backdrop-filter: blur(0.9vw);
  border: 1px solid #D8B275;
  svg {
    path {
      stroke-width: 1px;
    }
  }
}

.mobile {
  .cad{
    top: 4.7vw !important;
    right: 3.9vw !important;
    width: 24.9vw !important;
    height: 24vw !important;
    border-radius: 0.9vw;
  }
}

.mobile[view-mode='floor-plain'], .mobile[view-mode='doll-house'], .mobile[view-mode='transitioning'] {
  .cad {
    // display: none;
  }
}
.hotspot-detail-open {
  .cad {
    display: none;
  }
}

// 小地图 当前位置标志
// 位置圆圈。默认半径2.69，圆圈粗细1.076
#ele1 circle {
  fill: rgb(163, 51, 40);
  r: 2px;
}
// 视野
#ele1 path {
  fill: rgba(163, 51, 40, 0.7);
}

#popup {
  background: rgba(0, 0, 0, 0.7);
}

#closepop {
  display: initial;
}

.element-ui-loading {
  z-index: 9999 !important;
}
</style>