HaiDeBao/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>
import '@/assets/style/reset.less'

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');
}

.mobile {
  .cad {
    top: 8vw !important;
    right: 3.6vw !important;
    width: 35vw !important;
    height: 35vw !important;
    border-radius: 0.9vw;
    z-index: 999;
    background: rgba(21, 52, 115, 0.80) !important;
    backdrop-filter: blur(1.8vw);
    border: 1px solid #94E1FF;
    svg {
      path {
        stroke-width: 0.5;
      }
    }
  }
}

.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: #00a0e6;
  stroke: #fff;
}
// 视野
#ele1 path {
  fill: #00a0e6;
  stroke: #fff;
  opacity: 0.7;
}

#popup {
  background-color: rgba(21, 52, 115, 0.80);
  backdrop-filter: blur(1.8vw);
  z-index: 10006;
}
</style>