reidtraffic.vue 1.69 KB
<template>
    <div class="customgroup-wrapper">
        <div class="element-main behavior-main">
            <iframe
            :src="devLogUrl"
            width="100%"
            :height="iframeHeight"
            frameborder="0"
            name="device_log"
            class="log-iframe"></iframe>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            devLogUrl: '',
            iframeHeight: 0,
        }
    },
    created() {
        this.iframeHeight = this.computedHeight('px');
        window.addEventListener('resize', () => {
            this.iframeHeight = this.computedHeight('px');
        })
        this.devLogUrl = window._vionConfig.reidUrl;
    },
    mounted() {
        this.devLogUrl = window._vionConfig.reidUrl;
    },
    methods: {
        computedHeight(unit) {
            let computedH = 0
                , winH = $(window).height()
                , scale = 0.16;
            if(winH <= 720) {
                scale = 0.16
            } else if (winH <= 768) {
                scale = 0.15
            } else if (winH <= 900) {
                scale = 0.14
            } else if (winH <= 1080) {
                scale = 0.10
            }
            computedH = winH - winH * scale;
            computedH = unit ? computedH + unit : computedH;
            return computedH;
        }
    }
}
</script>

<style scoped>
    .customgroup-wrapper {
        width: 100%;
    }
    .log-iframe {
        margin-top: 10px;
    }
    >>>.element-main, .behavior-main {
        margin-top: 51px !important;
    }
   @media (max-width: 1680px) {
        .element-main, .behavior-main {
            margin-top: 45px !important;
        }
    }
</style>