<template>
  <view class="index-shopdetail" @click="goto">
    <img :src="picurl" alt class="shoppic" />
    <view class="desc">
      <view class="shopname">
        <text class="tag" v-if="ifbk">爆款</text>
        <text>{{shopname}}</text>
      </view>
      <view class="pri">
          <view class="pri-icon">￥</view>
          <view>{{pri}}</view>
        <view class="sale">已拼{{sale}}件</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "index-shopdetail",
  props:{
    picurl:{
    },
    ifbk:{
      
    },
    shopname:{
    },
    pri:{
    },
    sale:{
    },
    ptid:{
    }
  },
  methods:{
    goto(){
      console.log(this.ptid)
    }
  }
};
// 首页底部的商品详情
// shoppic  商品图片   ifbk 是否为爆款  shopname  商品名  pri  商品价格  sale 商品售量

</script>
<style lang="scss" scoped>
.index-shopdetail {
  width: 646upx;
  height: 173upx;
  // border-bottom: 1upx solid #dcdcdc;
  display: flex;
  // justify-content: space-between;
  .shoppic {
    width: 137upx;
    height: 132upx;
    margin-left: 6upx;
    margin-top: 12upx;
    margin-right: 36upx;
  }
  .desc {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 37upx;
    margin-bottom: 34upx;
    .shopname {
      color: #333333;
      font-size: 28upx;

      .tag {
        width: 61upx;
        height: 29upx;
        background-color: #e32e10;
        color: white;
        font-size: 24upx;
        text-align: center;
        line-height: 29upx;
        border-radius: 3upx;
        padding-left: 10upx;
        padding-right: 10upx;
        margin-right: 7upx;
      }
    }
    .pri {
      font-size: 24upx;
      color: #e32e10;
      display: flex;

      .pri-icon {
        font-size: 18upx;
        line-height: 36upx;
      }
      .sale {
        color: #cfcfcf;
        font-size: 22upx;
        margin-left: 18upx;
      }
    }
  }
}
</style>