<template>
  <layout>
    <view class="swiper">
      <image src="https://b2c-pro-static-dev.zkthink.com/static/images/zkzq.png" />
    </view>
    <div class="time-bar">
      <uv-tabs :current="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>
    <div class="discount-top">
      <container>
        <card>
          <goods
            list
            title="Cookawu灰色涤纶宽松T 恤潮趣味罗文落肩上衣"
            primary
            groupNum="3"
            price="239"
            original="339"
          >
            <template #action>
              <uv-button
                round
                block
                type="primary"
              >
                立即拼团
              </uv-button>
            </template>
          </goods>
        </card>
      </container>
    </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
              groupNum="3"
              price="239"
              original="339"
            >
              <template #action>
                <uv-button
                  round
                  block
                  type="primary"
                >
                  立即拼团
                </uv-button>
              </template>
            </goods>
          </card>

        </uv-grid-item>
        <uv-grid-item>
          <goods
            card
            title="Cookawu灰色涤纶宽松T 恤潮趣味罗文落肩上衣"
            primary
            groupNum="3"
            price="239"
            original="339"
          />
        </uv-grid-item>
        <uv-grid-item>
          <goods
            card
            title="Cookawu灰色涤纶宽松T 恤潮趣味罗文落肩上衣"
            primary
            groupNum="3"
            price="239"
            original="339"
          />
        </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 { 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;
  }
}

.discount-top {
  margin-top: 20rpx;
  z-index: 9;
  position: relative;
}
</style>
