<template>
  <div class="info">
    <image class="info-left" src="{{ info.image }}"></image>
    <div class="info-right">
      <text class="text-title">{{ info.title }}</text>
      <rating
        class="rate"
        numstars="5"
        rating="{{Number(info.score)}}"
        indicator="true"
      ></rating>
      <text class="text-remark">{{ info.author }}</text>
      <text class="text-remark">{{ info.words }}万字</text>
      <!-- <text class="button" onclick="onBtnClick">{{ 到书城查看更多好书 }}</text> -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default() {
        return {
          id: '',
          image: '',
          title: '',
          author: '',
          description: '',
          count: '',
          score: ''
        }
      }
    }
  }
  /* -------------------SelfCustomEvent------------------ */
}
</script>

<style lang="less">
@import '../../assets/styles/index.less';
.info {
  padding: @gap-4;
  width: 100%;
  height: 330px;
  margin-bottom: @gap-2;
  background-color: @white;
  .info-left {
    width: 28%;
    height: 100%;
    border-radius: 5px;
  }
  .info-right {
    width: 60%;
    padding: @gap-2 @gap-4;
    .flex-box-mixins(column, space-between, flex-start);
    .rate {
      width: 200px;
      height: 40px;
      .flex-box-mixins(row, flex-start, center);
    }
  }
}
</style>
