<template>
  <view>
    <view v-bind:class="[choose==2 ? active : '', errclass]" v-if="choose!=3">
      <view class="msphoto">
        <img src="../../static/img/miaosha.png" alt class="mspic" />
      </view>
      <view class="pri">
        <text class="price">￥0.01</text>
        <view class="btn">
          <text>立即抢</text>
        </view>
      </view>
    </view>
    <view v-bind:class="ms3" v-if="choose==3">
      <view class="msphoto">
        <img src="../../static/img/miaosha.png" alt class="mspic" />
      </view>
      <view class="pri">
        <text class="price">￥{{price}}</text>
        <view class="btn">
          <text>立即抢</text>
        </view>
      </view>
    </view>
    <!-- choose:1 蓝色   choose:2  红色 choose3 黑色 -->
  </view>
</template>
<script>
export default {
  name: "indexMiaosha",
  data() {
    return {
      active: "miaosha1",
      errclass: "miaosha",
      ms3: "miaosha2"
    };
  },
  props: {
    choose: {
      type: Number
    },
    price: {
      type: Number
    }
  }
};
// price 秒杀的价格  choose 秒杀部分的背景色
</script>
<style lang="scss" scoped>
.miaosha {
  width: 176upx;
  height: 195upx;
  background: linear-gradient(
    -45deg,
    rgba(0, 74, 157, 1),
    rgba(116, 180, 251, 1)
  );
  box-shadow: 0px 8upx 13upx 0px rgba(68, 136, 212, 0.3);

  border-radius: 10upx;
}
.msphoto {
  width: 148upx;
  display: flex;
  justify-content: center;
  .mspic {
    width: 125upx;
    height: 119upx;
  }
}
.pri {
  display: flex;
  margin-top: 24upx;
  .price {
    color: white;
    font-size: 19upx;
    margin-left: 9upx;
    margin-top: 11upx;
  }
  .btn {
    width: 95upx;
    height: 38upx;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10upx;
    color: white;
    font-size: 20upx;
    text-align: center;
    margin-left: 11upx;
    margin-top: 5upx;
  }
}
.miaosha1 {
  width: 176upx;
  height: 195upx;
  background: linear-gradient(
    135deg,
    rgba(255, 95, 24, 1),
    rgba(255, 28, 28, 1)
  );
  box-shadow: 0px 8px 13px 0px rgba(255, 71, 31, 0.3);

  border-radius: 10upx;
}
.miaosha2 {
  width: 176upx;
  height: 195upx;
  background: linear-gradient(135deg, rgba(87, 87, 87, 1), rgba(55, 55, 55, 1));
  box-shadow: 0px 8px 13px 0px rgba(74, 74, 74, 0.3);
  border-radius: 10upx;
}
</style>