<template>
    <div class="template-card">
        <div class="template-header">
            <span class="back" @click="goBack"><i class="iconfont icon-left-arrow"></i> 返回</span>
            <span class="line"></span>
            <span class="title">{{titleName}}</span>
            <slot name="operate"></slot>
        </div>
        <div class="template-body">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        titleName: {
            type: String
        }
    },
    data () {
        return {}
    },
    methods: {
        goBack () {
            this.$emit('goBack')
        }
    }
}
</script>
<style lang="scss">
    .template-card {
        width: 100%;
        overflow: hidden;
        background: #fff;
        color: #333;
        .template-header {
            width: 100%;
            height: 44px;
            line-height: 44px;
            z-index: 99;
            padding: 0px 20px;
            border-bottom: 1px solid #ebebeb;
            .title {
                display: inline-block;
            }
            .line {
                position: relative;
                top: 4px;
                margin: 0 10px;
                height: 20px;
                width: 1px;
                display: inline-block;
                background-color: #b5b5b5;
            }
            .back {
                color: #46ABf1;
                cursor: pointer;
            }
        }
        .template-body {
            padding: 8px;
            width: calc(100% - 16px);
        }
    }
</style>
