<template>
  <layout>
    <view class="swiper">
      <image :src="seckillBg" />
    </view>
    <div class="time-bar">
      <uv-tabs v-model:active="active">
        <uv-tab v-for="(item, index) in times">
          <template #title>
            <div class="time-bar-item">
              <div class="time">15:00</div>
              <div class="status">已结束</div>
              <div
                class="countdown"
                v-if="index == active"
              >15:00</div>
            </div>
          </template>
        </uv-tab>
      </uv-tabs>
    </div>
    <blank size="15"></blank>
    <container min>
      <uv-grid
        :border="false"
        :col="2"
        :gutter="10"
      >
        <uv-grid-item>
          <card>
            <goods
              card
              title="Cookawu灰色涤纶宽松T 恤潮趣味罗文落肩上衣"
              primary
              price="239"
              quantity="339"
              buyProgress
            >
            </goods>
          </card>

        </uv-grid-item>
        <uv-grid-item>
          <goods
            card
            title="Cookawu灰色涤纶宽松T 恤潮趣味罗文落肩上衣"
            primary
            price="239"
            quantity="339"
            buyProgress
          />
        </uv-grid-item>
        <uv-grid-item>
          <goods
            card
            title="Cookawu灰色涤纶宽松T 恤潮趣味罗文落肩上衣"
            primary
            groupNum="3"
            price="239"
            original="339"
          />
        </uv-grid-item>
      </uv-grid>
    </container>
    <blank size="15"></blank>

  </layout>
</template>

<script setup>
import { seckillBg } from "@/utils/images";
import { ref } from 'vue'

const active = ref(0)
const times = ref([1, 2, 3, 4, 5, 6, 7])

</script>

<style lang="scss">
.swiper {
  width: 100%;

  .image {
    width: 100%;
    display: block;
  }
}
</style>
