JHStoreH5/src/components/Inner/WxTips.vue

<template>
  <div class="wx_tips clear" @click="close">
    <div class="bg"></div>
    <div class="tips_box">
      <div class="clear">
        <div class="tips">
          请在菜单中选择浏览器打开，<br />
          以完成支付 <br />
          <span> 点击任意位置关闭该提示</span>
        </div>
        <img class="arrows" src="@/assets/image/arrows.png" alt="" />
      </div>
      <img
        class="tip_img ios"
        v-if="isIos"
        src="@/assets/image/ios_wx_tips.png"
        alt=""
      />
      <img
        class="tip_img android"
        v-else
        src="@/assets/image/android_wx_tips.png"
        alt=""
      />
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "WxTips",
  components: {},
  data() {
    return {
      isIos: this.$utils.isiOS(),
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    ...mapActions(["wxTipsAction"]),
    close() {
      this.wxTipsAction(false);
    },
  },
};
</script>

<style lang='less' scoped>
.wx_tips {
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f4f3f8;
  }

  .tips_box {
    position: relative;
    z-index: 10;
  }

  .tips {
    line-height: 70 / @rem;
    margin-right: 90 / @rem;
    margin-top: 120 / @rem;
    float: right;
    text-align: left;
    color: #3b3b3d;

    span {
      font-size: 40 / @rem;
      color: #ca0000;
    }
  }

  .arrows {
    width: 90 / @rem;
    position: absolute;
    right: 20 / @rem;
    top: 20 / @rem;
  }

  .tip_img {
    width: 300 / @rem;
  }

  .android {
    width: 320 / @rem;
  }
}

// 横屏
@media screen and (orientation: landscape),
  /**竖屏 */ all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad */ all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
  .wx_tips {
    .tips {
      line-height: 35 / @rem;
      margin-right: 45 / @rem;
      margin-top: 60 / @rem;

      span {
        font-size: 20 / @rem;
      }
    }

    .arrows {
      width: 45 / @rem;
      right: 20 / @rem;
      top: 10 / @rem;
    }

    .tip_img {
      width: 150 / @rem;
    }

    .android {
      width: 160 / @rem;
    }
  }
}
</style>