<template>
  <view class="seckillTop">
    <img src="../../static/img/seckilltopbg.png" alt class="topbg" />
    <view class="timelist">
      <view v-for="(i,j) in list" :class="cutime==j?active:time" :key="j">
        <view>{{i.ms_starttime}}</view>
        <view class="event" style="font-size:24upx">{{j == 0?"开抢中":"未开始" }}</view>
      </view>
      <!-- <view :class="cutime==1?active:time">
        <view>16:00</view>
        <view class="event" style="font-size:24upx">开抢中</view>
      </view>
            <view :class="cutime==2?active:time">
        <view>16:00</view>
        <view class="event" style="font-size:24upx">开抢中</view>
      </view>
            <view :class="cutime==3?active:time">
        <view>16:00</view>
        <view class="event" style="font-size:24upx">开抢中</view>
      </view>

            <view :class="cutime==4?active:time">
        <view>16:00</view>
        <view class="event" style="font-size:24upx">开抢中</view>
      </view>-->
    </view>
  </view>
</template>

<script>
export default {
  name: "seckillTop",
  data() {
    return {
      active: "active",
      time: "time"
    };
  },
  props: {
    cutime: {
      type: Number
    },
    list:{
      type: Array
    }
  },
  mounted() {
    console.log(this.list, 221);
  }
};
</script>

<style lang="scss">
.seckillTop {
  .topbg {
    height: 210upx;
    width: 100%;
    position: relative;
    z-index: -1;
  }
  .timelist {
    display: flex;
    justify-content: space-around;
    position: relative;
    bottom: 143upx;
    .time {
      width: 96upx;
      font-size: 40upx;
      color: #e49299;
      text-align: center;
      .event {
        font-size: 24upx;
      }
    }
  }
  .active {
    width: 96upx;
    font-size: 40upx;
    color: white;
    text-align: center;
  }
}
</style>