<template>
  <div class="overview">
    <div class="title">{{ title }}</div>
    <div class="content" v-loading="loading">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "Paragraph",
  props: {
    title: {
      type: String,
      default: "",
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
};
</script>
<style lang="scss" scoped>
.overview {
  min-height: 100px;
  background: #ffffff;
  margin-bottom: 0px;
  box-shadow: 0 1px 2px #d5d7d8;
  .title {
    margin: 10px 0px 0px 0px;
    padding: 10px 0px 0px 10px;
    height: 44px;
    border: 1px solid #e2e1e1;
    background: #f4f4f4;
    color: #333;
    font-weight: bold;
  }
  .content {
    padding: 15px;
    border: solid 1px #d5d7d8;
    .date-picker {
      margin-left: 5px;
      float: left;
      margin-right: 10px;
    }
    .do-search {
      margin-top: 2px;
      float: left;
      .ex {
        color: #666666;
        font-size: 12px;
        width: 60px;
        margin-left: 20px;
        cursor: pointer;
      }
      .ex:hover {
        color: #ff5b57;
        font-weight: bold;
      }
    }
    .item {
      display: block;
      border-right: none;
      border-bottom: none;
      min-height: 100px;
      padding: 6px;
      text-align: center;
      cursor: pointer;
      .do {
        border: solid 1px #cccccc;
        padding: 20px;
        border-radius: 2px;
      }
      .icon {
        height: 40px;
        width: 40px;
        display: block;
        padding: 5px;
        float: left;
        border: solid #8a8a8a 1px;
        border-radius: 30px;
      }
      .text {
        text-align: left;
        margin: 0px;
        text-indent: 10px;
        font-size: 14px;
      }
      .number {
        text-align: left;
        margin: 0px;
        font-weight: bold;
        text-indent: 10px;
        font-size: 18px;
        color: #ff5b57;
      }
    }
  }
}
</style>
