<template>
  <CommentPlaceholder v-bind="$attrs" v-on="$listeners">
    <div class="comment-empty-wrap">
      <div class="empty-content">
        <div class="empty-img"></div>
        <p class="empty-tip">暂无评论，快来评论吧！</p>
      </div>
    </div>
  </CommentPlaceholder>
</template>

<script>

import CommentPlaceholder from './comment-placeholder';

export default {
  name: 'CommentEmpty',
  components: {
    CommentPlaceholder
  }
};
</script>

<style lang="css" scoped>
  .comment-empty-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
  }

  .empty-content {
    margin-top: -10px;
  }

  .empty-img {
    width: 250px;
    height: 181px;
    background-image: url("~statics/image/article/comment-empty.png");
    background-size: 100%;
    margin: 0 auto 20px;
  }

  .empty-tip {
    font-size: 26px;
    color: #b0b0b0;
    font-weight: 300;
  }
</style>