web_qp_phone_ui/src/components2/JumpWeb.vue

<template>
    <div class="iframeContent" v-show="show">
        <div class="back" @click="back"></div>
        <iframe :src="url" frameborder="0"></iframe>
    </div>
</template>

<script>
export default {
    data() {
        return {
            url: '',
            show: false
        }
    },
    methods: {
        back() {
            this.$store.commit("changeJumpUrl", "");
            this.$store.commit("changeIframeJudge", false);
        }
    },
    computed: {
        storeUrl() {
            return this.$store.state.jumpUrl
        },
        iframeJudge() {
            return this.$store.state.iframeJudge
        }
    },
    watch: {
        storeUrl(newVal, oldVal) {
            this.url = newVal;
        },
        iframeJudge(newVal, oldVal) {
            this.show = newVal;
        }
    }
}
</script>

<style lang="less" scoped>
.iframeContent {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: #ffffff;

    iframe {
        width: 100%;
        height: 100%;
    }

    .back {
        width: 32px;
        height: 32px;
        margin: 10px 20px;
        background: #c5c5c5 url(~@/assets/img/tool/close.png) center center / 60% 60% no-repeat;
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 999;
        border-radius: 32px;
    }
}
</style>