<template>
  <div class="card-bar posi-relative" :style="cardBarStyle">
    <div class="left-panel">
      <!-- <img :src="thumb" /> -->
    </div>
    <div class="right-panel">
      <p class="font-16" v-if="title!==''">{{title}}</p>
      <p class="font-14 desp" v-if="desc!==''">{{desc}}</p>
      <p class="time" v-if="time!==''">xxx{{time}}</p>
      <p class="font-16">
        <slot name="title"></slot>
      </p>
      <p class="font-14 desp">
        <slot name="desp"></slot>
      </p>
      <p class="time">
        <slot name="time"></slot>
      </p>

      <div class="btn-panel">
        <slot name="operate"></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "card-bar",
  props: {
    width: {
      default: "100%"
    },
    height: {
      default: "90px"
    },
    thumb: {
      default: ""
    },
    title: {
      default: ""
    },
    desc: {
      default:''
    },
    time: {
      default: ""
    },
    tag: {
      default: ""
    }
  },
  computed: {
    cardBarStyle() {
      return {
        width: this.width,
        height: this.height
      };
    }
  },
  methods: {}
};
</script>
<style scoped lang='scss'>
.card-bar > div {
  height: 100%;
}
.card-bar {
  background: #ffffff;
  width: 100%;
  padding: 5px;
  .left-panel {
    width: 80px;
    float: left;
  }
  .right-panel {
    margin-left: 80px;
    padding:5px;
    position: relative;
    .desp {
      color: #72747b;
    }
    .time {
      color: #a6a9b3;
      font-size:10px;
    }
    p{
      padding-bottom:5px;
    }
  }
  .btn-panel {
    position: absolute;
    right:10px;
    height:50%;
    top: 25%;
  }
}
</style>