share-bottom.vue 1.95 KB
<template>
	<div class="share-bottom clearfix" :class="{ 'hidden': close }">
        <span class="icon close" @click="closeBottom()">&#xe610;</span>
      	<span class="icon blk-icon">&#xe60f;</span>
        <a href="javascript:;" class="new-user">高端潮流零售平台</a>
        <span href="javascript:;" @click="download" class="download">立即下载</span>
    </div>
</template>
<style>
    .share-bottom {
        width: 100%;
        padding: 20px 10px;
        background: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        height: 100px;
        border-top: #ececec solid 2px;

        .close {
            position: fixed;
            left: 0;
            bottom: 60px;
            font-size: 40px;
        }

        img {
            float: left;
        }

        .blk-icon {
            font-size: 64px;
            margin-left: 50px;
            margin-right: 20px;
            float: left;
        }

        a {
            border: #000 solid 2px;
            padding: 10px;
            border-radius: 40px;
            float: left;
        }

        .new-user {
            float: left;
            border: #fff solid 2px;
        }

        .download {
            border: #000 solid 2px;
            padding: 10px;
            border-radius: 40px;
            float: right;
            margin-right: 20px;
        }
    }

    .hidden {
        display: none;
    }
</style>
<script>
    import yoho from 'yoho';

    export default {
        data() {
            return {
                close: false
            };
        },
        methods: {
            closeBottom() {
                this.close = true;
            },
            download() {
                if (yoho.isiOS) {
                    location.href = 'https://itunes.apple.com/app/id1148578765?mt=8';
                }
            }
        },
        created() {
            if (yoho.isYohoBuy) {
                this.close = true;
            }
        }
    };
</script>