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

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

<script>
    module.exports = {
        props: ['title']
    };
</script>

<style>
    .floor-header {
        position: relative;
        width: 100%;
        height: 100px;
        font-size: 32px;
        line-height: 100px;
        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: 100px;
            padding: 0 30px 0 0;
            overflow: hidden;
        }
    }
</style>