秒杀倒计时

<template>
  <div class="spike">
    <swiper :options="swiperOption" class="banner-swiper">
      <swiper-slide
        class="swiper-slide"
        v-for="(item, index) in spikeList"
        :key="index"
      >
        <div>
          <div class="spike-top">
            <img :src="item.imgUrl" alt="" />
            <span>距离结束</span>
            <count-down
              :currentTime="item.startTime"
              :startTime="item.startTime"
              :endTime="item.endTime"
              :dayTxt="'天'"
              :hourTxt="':'"
              :minutesTxt="':'"
              :secondsTxt="''"
            ></count-down>
          </div>
          <div class="spike-bottom">
            <img src="imgs/spike2.jpg" alt="" />
            <div class="bottom-text">
              <p class="bottom-title">
                {{ item.title }}
              </p>
              <div class="price">
                <span>￥{{ item.price }}</span>
                <span class="last">剩余{{ item.num }}个</span>
              </div>
            </div>
          </div>
        </div>
      </swiper-slide>

      <!-- 分页器 -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import CountDown from "vue2-countdown";

export default {
  components: { CountDown },
  props: {},
  data() {
    return {
      spikeList: [
       
        {
          id: 1,
          startTime: 1587094184386,
          endTime: 1587526750039,
          imgUrl: "@/assets/img/spike1.png",
          title:
            "2色达+四姑娘山4日全年计划-10人精品小团，二进色达五明佛学院，见证信仰，感悟天葬轮回；观四姑娘山全景，赏双桥沟景区风光魅力（经典行程)",
          price: 180,
          num: 35,
        },
         {
          id: 1,
          startTime: 1587094184386,
          endTime: 1597526750039,
          imgUrl: "@/assets/img/spike1.png",
          title:
            "3色达+四姑娘山4日全年计划-10人精品小团，二进色达五明佛学院，见证信仰，感悟天葬轮回；观四姑娘山全景，赏双桥沟景区风光魅力（经典行程)",
          price: 12280,
          num: 3225,
        },
      ],
      swiperOption: {
        // loop: true,
        autoplay: true,
        pagination: {
          el: ".swiper-pagination",
        },
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    countDownS_cb: function(x) {
      console.log(x);
    },
    countDownE_cb: function(x) {
      console.log(x);
    },
  },
  created() {},
  mounted() {
    console.log(new Date().getTime() + 5 * 24 * 3600 * 1000);
  },
};
</script>
<style scoped>
.swiper-container {
  overflow: visible;
}
.bottom-title {
  width: 5.86rem;
}
.price {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.last {
  background-color: orange;
  border: 1px solid black;
  padding: 0.1rem;
  border-radius: 0.2rem;
  color: black;
}
.bottom-text {
  width: 5.86rem;
}
.bottom-title {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  display: -webkit-box;
  line-height: 0.38rem;
  text-align: left;
}
.spike-bottom {
  display: flex;
  align-items: center;
}
.spike-bottom img {
  width: 3.09333rem;
  height: 2.12rem;
}
.spike-top {
  width: 100%;
  height: 1.29333rem;
  display: flex;
  align-items: center;
  font-size: 0.35rem;
}
.spike-top img {
  height: 0.41333rem;
  widows: 1.89333rem;
}
.spike-top >>>div  span ,.spike-top >>>div span i{
    border-radius: .1rem;
    color: #fff;
    background-color: #8b8b8b;
    margin-left: .05rem;
    padding: .1rem;
}
.spike-top span {
  margin-left: 0.15rem;
}
.spike {
  width: 100%;
  height: 4.37rem;
  padding: 0.3rem;
}
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: -0.7rem;
}

.swiper-pagination >>> .swiper-pagination-bullet-active {
  background-color: orange;
}
</style>