WenLanGe/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')
    }

    globalApi.checkLoginStatusAndProcess()
  },
  methods: {
  }
}
</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: 'LiSu-Regular';
  src: url('@/assets/style/LiSu.ttf');
}

.cad {
  top: 52px !important;
  right: 29px !important;
  width: 219px !important;
  height: 149px !important;
  border-radius: 4px;
  z-index: 999;
  background: rgba(255, 168, 149, 0.2) !important;
  svg {
    path {
      stroke-width: 0.5;
    }
  }
}

.mobile {
  .cad {
    top: 31px !important;
    right: 15px !important;
    width: 124px !important;
    height: 85px !important;
    border-radius: 2px;
  }
}

.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: #A10E0C;
  r: 1.2;
  stroke-width: 0.3;
  stroke: rgba;
}
// 视野
#ele1 path {
  fill: rgba(161, 14, 12, 0.7);
  stroke-width: 0.3;
  stroke: #fff;
}

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

.el-message-box__wrapper {
  z-index: 20003 !important;
}
</style>