icore-pass/src/views/index/components/download.vue

<template>
     <div class="content" v-bind:style="{backgroundImage:'url(' + bg + ')'}" iud="body">
        <img v-show="show_wx" :src="wx"   width="100%"  /> 
        <!-- <img  :src="logo" style="margin:100px auto auto 150px;text-align:center; height:100px; width:85px;"  />  -->
        <img   style="margin:90% auto auto 25%; height:8%; width:50%;"  :src="btn" id="btn_img" @click="download()"/>
    </div> 
</template> 

<script>

export default {
    data() {
        return {
            type : "android",
            // logo:require('@/assets/img/logoApp.png'),
            wx:require('@/assets/download/image.png'),
            btn:require('@/assets/download/down.png'),
            show_wx :false,
             bg: require('@/assets/download/login.png'),
        };
    },
    created() {

        let ua = navigator.userAgent.toLowerCase();

        if (/iphone|ipad|ipod/.test(ua)) {

            this.type = "ios";

        } else if (/android/.test(ua)) {
            this.type = "android";
        }

        if(isWeixinBrowser()){
            this.show_wx = true;
        }
        function isWeixinBrowser() {
            return (/micromessenger/.test(ua)) ? true : false;
        }
    },

    methods: {

        download() {

            const that = this;

            if(that.type == 'android') {

                window.location.href = 'https://wl.dasteel.cn:32322 /%E6%95%B0%E8%A3%81%E7%89%A9%E6%B5%81.apk';
                

            } else {

                window.location.href = 'IOS下载地址';

            }

        },

    }

};

</script>
<style>
    .content {
        position:relative;
        margin:0px auto;
        background-size: cover;
        width: 100%;
        height: 100%;
 }




div img:first-of-type { 
    position: absolute; 
   
} 
</style>