<template>
  <div class="orientation-tip" >
    <div>
      <img :src="require('@/assets/images/fanzhuan.png')" alt="">
      <p>请将手机旋转为横屏观看</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      hideClose: false,
      isLandscape: false,
      isTip: false,
    };
  },
  methods: {
    close() {
      this.$hideOrientationtip();
    },
  },
 
};
</script>

<style lang="less" scoped>
/*横屏体验*/
.orientation-tip {
  width: 100%;
  height: 100%;
  z-index: 1000000;
  position: fixed;
  top: 0;
  left: 0;
  backdrop-filter: blur(5px);
  background-color: #70474D;
  background-repeat: no-repeat;
  background-size: cover;
  > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%;
    > img {
      width: 100%;
    }
    >p{
      font-size: 16px;
      color: #ac5b5b;
      margin-top: 20px;
    }
  }
}

.isTip {
  background: none;
  backdrop-filter: none;
}
</style>
