vue 打开分享的链接，页面上方显示APP下载浮层

涉及到的功能点：

1. 判断是ios系统还是android系统
2. 控制浮层的显示和隐藏

1。浮层UI，DownLoadPopWindow

<template>
    <div class="dialog" v-show="isShow" @click="downLoadUrl">
        <img src="./../assets/home_app.png" width="44px" height="44px" class="imgStyle">
        <div class="downFont">海尔智家 定制美好生活</div>
        <button class="btnStyle">下载APP</button>
    </div>
</template>

<script>
    export default {
        name: "DownLoadPopWindow",
        data () {
            return {
                isShow: false
            }
        },
        created() {
            console.log('down', this.$route.query.isShow)
            this.isShow = this.$route.query.isShow
        },
        methods: {
            downLoadUrl () {
                // let ua = navigator.userAgent.toLowerCase();
                // //android终端
                // let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1; //ios终端
                // let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
                if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                     //ios
                     window.location = 'http://www.baidu.com'
                 } else if (/(Android)/i.test(navigator.userAgent)) {
                     //android
                     window.location = 'http://www.taobao.com'
                 }
            }
        }
    }
</script>

<style scoped>
.dialog {
    width: 100%;
    height: 56px;
    background-color: #333333;
}
.imgStyle {
    float: left;
    margin-left: 12px;
    /*垂直居中*/
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.downFont {
    background-color: #00000000;
    border: 0px solid #00000000;
    color: #FFFFFF;
    font-size: 15px;
    float: left;
    margin-left: 10px;
    line-height: 56px;
}
.btnStyle {
    float: right;
    border-radius: 22px;
    border: 0px solid #00000000;
    height: 44px;
    padding-left: 20px;
    padding-right: 20px;
    margin-right: 12px;
    color: #FFFFFF;
    background-color: royalblue;
    font-size: 15px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
</style>

2。调用：

<template>
  <div>
    <DownLoadPopWindow></DownLoadPopWindow>
    ...........
  </div>
</template>