<template>
    <div class="floor-header">
        {{title.name}}

        <a class="more" :href="title.more_url | transformBlk">
            <span v-if="title.more_name === '···' || '···'" class="icon icon-more"></span>
            <span v-else>{{title.more_name}}</span>
        </a>
    </div>
</template>

<script>
    export default {
        props: ['title']
    };
</script>

<style>
    .floor-header {
        position: relative;
        width: 100%;
        height: 80px;
        font-size: 32px;
        line-height: 80px;
        text-align: center;
        font-weight: bold;
        border-top: 1px solid #eee;
        margin-top: 20px;
        background: #fff;

        .more {
            position: absolute;
            top: 0;
            right: 0;
            max-width: 200px;
            height: 80px;
            padding: 0 30px 0 0;
            line-height: 80px;
            letter-spacing: 5px;
            overflow: hidden;

            .icon {
                margin-left: 5px;
            }
        }
    }
</style>