<template>
  <view class="seckillshop">
    <img :src="imgurl" alt class="pic" />
    <view class="shopinfo">
        <view>
            <view class="shopname">{{shopname}}</view>
      <view class="shopdesc">{{shopdesc}}</view>
    <view class="tag">{{tag}}</view>
        </view>
      
      <view>
      
        <view class="price">
          <view class="money">
            <text class="moneyicon">￥</text>
            <text>{{price}}</text>
          </view>
          <view class="btn" >{{show == 0 ? '马上抢' : '待抢购'}}</view>
        </view>
        <view class="bottom">
          <view class="huaxian">￥{{huaxian}}</view>
          <view class="sale">
            <text>已售{{sale}}</text>
            <view class="schedule">
              <view class="progress" :style="progress1"></view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "seckillshop",
  data(){
    return {
      progress1:"width:"+this.sale
    }
  },
  props:{
      imgurl:{
          type:String
      },
      shopname:{
          type:String
      },
      shopdesc:{
          type:String
      },
      tag:{
        type:String
      },
      price:{
        type:Number
      },
      huaxian:{
        type:Number
      },
      sale:{
        type:String
      },
      show:{
        
      }
  }
};
</script>

<style lang="scss">
.seckillshop {
  width: 100%;
  height: 225upx;
  display: flex;
  justify-content: space-between;
  .pic {
    width: 192upx;
    height: 192upx;
    margin-left: 11upx;
  }
  .shopinfo {
    width: 475upx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top:18upx;
    margin-right: 49upx;
    margin-bottom: 24upx;
    .shopname {
      color: #393939;
      font-size: 26upx;
      font-weight: 800;
      text-align: center;
    }
    .shopdesc {
      color: #e44a59;
      font-size: 18upx;
      text-indent: 28upx;
    }
    .tag {
      width: 61upx;
      height: 27upx;
      background-color: #52a2de;
      color: white;
      line-height: 27upx;
      text-align: center;
      font-size: 16upx;
      font-weight: bold;
      margin-left: 21upx;
    }
    .price {
      display: flex;
      justify-content: space-between;
      color: #ea2544;
      font-size: 36upx;
      margin-left: 18upx;
      .money{
          position: relative;
          top: 25upx;
      }
      .moneyicon {
        font-size: 19upx;
      }
      .btn {
        width: 158upx;
        height: 53upx;
        font-size: 26upx;
        color: white;
        text-align: center;
        line-height: 53upx;
        background-color: #df3348;
        border-radius: 27upx;
        position: relative;
        top: 10upx;
        right:-15upx;
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      color: #666666;
    //   margin-left: 23upx;
    //   margin-top: 10upx;
    position: relative;
    left: 23upx;
    top: 11upx;
      .huaxian {
        font-size: 18upx;
        text-decoration: line-through;
      }
      .sale {
        font-size: 20upx;
        font-size: bold;
        display: flex;
        .schedule {
          width: 158upx;
          height: 15upx;
          background-color: rgba(252, 233, 237, 1);
          margin-top:10upx;
          margin-right: 54upx;
          margin-left: 7upx;
          border-radius: 8upx;
          .progress {
            height: 100%;
            background-color: rgba(236, 153, 163, 1);
            border-radius: 8upx;
          }
        }
      }
    }
  }
}
</style>