<template>
<div class="clearfix">
    <div class="drafts-cell">
        <div class="activity-image-panel">
            <span class="status-text">待发布</span>
            <img :src="activity.poster_photo" />
        </div>
        <div class="activity-info-panel">
            <h3 class="title">
                <a href="/">{{ activity.title }}</a>
            </h3>
            <div class="operation">
                <el-button type="primary" size="small" icon="el-icon-edit-outline">编辑</el-button>
                <el-button type="danger" size="small" icon="el-icon-delete">删除</el-button>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: "DraftsActivityCell",
    props: {
        activity: {
            type: Object,
            required: true,
        }
    },
    data() {
        return {
            
        }
    },
}
</script>

<style scoped rel="stylesheet/scss" lang="scss">
.drafts-cell {
    padding: 20px 15px;
    border: none;
    border-bottom: 1px solid #e5e8ea;
    float: left;
    margin: 0;
    width: 100%;
    border-radius: 0;
    position: relative;

    .activity-image-panel {
        width: 155px;
        height: 122px;
        border: 1px #dee2e5 solid;
        display: flex;
        justify-content: center;
        position: relative;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        overflow: hidden;
        float: left;

        .status-text {
            position: absolute;
            font-size: 12px;
            color: #fff;
            top: 14px;
            left: 3px;
            -webkit-transform: rotate(316deg);
            transform: rotate(316deg);
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    }
    .activity-image-panel::before {
        border-top: 28px solid #65d3e3;
        border-right: 28px solid transparent;
        border-bottom: 28px solid transparent;
        border-left: 28px solid #65d3e3;
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        display: block;
        content: "";
    }

    .activity-info-panel {
        padding: 7px 20px;
        width: 60%;
        float: left;

        .title {
            padding-bottom: 5px;

            a {
                color: #495060;
                font-size: 20px;
                max-width: 100%;
                font-weight: 500;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                display: inline-block;
            }
        }

        .operation {
            padding: 10px 0 0;
        }
    }
}
</style>





