<template>
  <view class="app-no-more">
    <view class="before" :style="{background: background}"></view>
    <view
      class="app-no-more__text"
      :style="{color:color}"
    >
      <slot>没有更多了</slot>
    </view>
    <view class="after" :style="{background: background}"></view>
  </view>
</template>

<script>
  /**
   * XdMore 全局Ui
   * @description 显示没有更多样式，支持插槽
   * @property {String} background 背景颜色值
   */
  export default {
    name: "XdMore",
    props: {
      background: {
        type: String,
        default: '#e5e5e5'
      },
      color: {
        type: String,
        default: '#999'
      }
    }
  }
</script>

<style scoped lang="less">
  .app-no-more {
    padding: unit(20,rpx) 0 unit(20, rpx);
    text-align: center;
    color: @custom-btn-info;
    font-size: @xd-font-size-sm;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    & > .before, &> .after {
      content: '  ';
      height: 1px;
      width: unit(80, rpx);
      background: #ccc;
    }
    
    &__text {
      position: relative;
      z-index: 2;
      padding: 0 unit(20, rpx);
    }
  }

</style>
