<style scoped>
.card {
  width: 550px;
height: 162px;
  margin-bottom: 18px;
}
.tag {
  position: absolute;
  bottom: 14px;
  left: 14px;
  color: #fff;
}
.card-img {width: 272px;
height: 162px;
border-radius: 10px 0px 0px 10px;
}
.content {
  padding: 10px;
  width: 258px;
}
.title {
  font-size: 16px;
  line-height: 20px;
  height: 40px;
}
.tag-item {
height: 24px;
background: #EFF7FE;
border-radius: 4px;
padding: 0 10px;
font-size: 12px;
margin-right: 10px;
color: #36A1FA;
}
</style>
<template>
  <div class="card flex">
    <div class="relative">
      <div class="tag">
        <i
          class="iconfont icondingweixiao q-icon notranslate"
          style="font-size: 14px; margin-right: 8px"
        ></i>
        <span>大阪·{{data.ProductType}}</span>
      </div>
      <img
        class="card-img"
        :src="data.ImgCover"
      />
    </div>
    <div class="content">
    <div class="title ellipsis-2">{{data.Title}}</div>
    <!-- <div>
      <i
        class="iconfont icondingweixiao q-icon notranslate"
        style="font-size: 14px; margin-right: 8px"
      ></i>
      4.6
    </div>
    <div>
      <span class="tag-item mb mt" v-for="item in 4" :key="item">开发日志{{item}}</span>
    </div> -->
    <div class="bold mt">
      CNY
      <span>{{data.B2CPrice}}</span>
      <span class="ml-5 normal">起</span>
    </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      default: () => ({})
    }
  },
  data() {
    return {};
  }
};
</script>