<template>
  <div class="winshop">
    <div class="winshop-head">
      <img :src="data.avatar" alt="">
    </div>
    <div class="winshop-content">
      <p>{{ data.desc }}</p>
      <p>{{ data.price }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: Object
  },
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
  .winshop{
    display: flex;
    padding: 0.18rem 0;
    margin: 0 0.18rem;
    border-top: 1px solid #E6E6E6;
    &-head{
      flex-shrink: 0;
      width: 0.6rem;
      height: 0.6rem;
      border: 1px solid #E6E6E6;
      border-radius: 6px;
      img{
        width: 100%;
        height: 100%;
      }
    }
    &-content{
      p{
        margin: 0;
        max-width: 2.52rem;
        line-height: 0.32rem;
        margin-left: 10px;
        &:first-child{
          font-size: 0.22rem;
          color: #282F3C;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        &:last-child{
          font-size: 0.26rem;
          color: #FE5309;
        }
      }
    }
  }
</style>