yangshi_cloudExbition/src/clients/mobile.vue

<template>
  <div class="bbbb">
    <router-view />
    <div class="orientation-tip">
      <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";
import "@/assets/theme/color.less";

export default {};
</script>
<style lang="less">
html,
body,
.bbbb {
  width: 100%;
  height: 100%;
  color: #fff;
}

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