share-bottom.vue 1.34 KB
<template>
	<div class="share-bottom clearfix" v-bind:class="{ 'hidden': close }">

        <!-- TODO iconfont 要换-->
        <span class="icon close" @click="closeBottom()">&#xe609;</span>
        <img v-lazy="">
        <a href="javascript:;" class="new-user">新用户送千元礼包</a>
        <a href="http://m.yohoblk.com" class="download">立即下载</a>
    </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;
        }

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

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

        .download {
            float: right;
        }

    }

    .hidden {
        display: none;
    }
</style>
<script>
    module.exports = {
        data() {
            return {
                close: false
            };
        },
        methods: {
            closeBottom() {
                this.close = true;
            }
        }
    };
</script>