brand-top.vue 1.49 KB
<template>
    <div class="top-box clearfix">
        <i class="back"></i>
        <div class="right">
            <i class="favorite"></i>
            <a class="share" href="{{ shareLink }}"></a>
            <i class="filter"></i>
        </div>
    </div>
</template>

<style>
    .top-box {
        width: 100%;
        height: 60px;
        position: fixed;
        top: 60px;
        left: 0;
        z-index: 99;

        .back {
            width: 60px;
            height: 60px;
            float: left;
            background: url("/channel/back.png") no-repeat;
        }

        .right {
            height: 60px;
            float: right;

            i {
                width: 60px;
                height: 60px;
                margin: 0 5px;
                display: inline-block;
            }

            .favorite {
                background: url("/channel/favorite.png") no-repeat;
            }

            .share {
                width: 60px;
                height: 60px;
                margin: 0 5px;
                display: inline-block;
                background: url("/channel/share.png") no-repeat;
            }

            .filter {
                background: url("/channel/filter.png") no-repeat;
            }
        }
    }
</style>

<script>
    module.exports = {
        props: {
            shareLink: {
                type: String
            }
        },
        methods: {
            getShareLink() {
                return '1234';
            }
        }
    };
</script>