<template>
  <div class="refund">
    <div class="refund_goods">
      <div class="refund_goods_left">
        <img :src="list.imageUrl" />
      </div>
      <div class="refund_goods_middle">
        <div class="refund_goods_middle_title">
          {{ list.skuName }}
        </div>
        <div class="refund_goods_middle_price">
          <span>￥{{ list.salePrice }}</span>
          <span>{{ list.count }}件</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Object,
      default: () => {}
    }
  }
};
</script>
<style lang="less" scoped>
.refund {
  &_goods {
    display: flex;
    background-color: @white;
    padding: @padding-sm @padding-lg;
    &_left {
      width: 60px;
      height: 60px;
      img {
        width: 100%;
        height: 100%;
        border-radius: @border-radius-sm;
      }
    }
    &_middle {
      flex: 1;
      display: flex;
      flex-flow: column;
      margin-left: @padding-xs;
      &_title {
        .text-size(13);
        color: @black;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      &_price {
        margin-top: @padding-x;
        .text-size(13);
        display: flex;
        justify-content: space-between;
        align-items: center;
        span:last-child {
          color: @gray-4;
        }
      }
    }
  }
}
</style>
