DaLiEH/web/src/App.vue

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

<script>
import '@/assets/style/reset.less'
import '@/assets/style/public.less'
export default {
    
}
</script>
<style lang="less">
.vvvv{
    width: 100%;
    height: 100vh;
}


/*横屏体验*/
.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;
  }
}
</style>