You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
2.4 KiB
68 lines
2.4 KiB
<script setup lang="ts"> |
|
import { pcHomeSeckillApi } from '~/server/homeApi' |
|
import useOrder from '~/composables/useOrder' |
|
import { Navigation, Pagination } from 'swiper' |
|
const { handleIntoPage } = useOrder() |
|
const { data: seckillLists, pending: couponlistLoading } = await useAsyncData(async () => pcHomeSeckillApi()) |
|
|
|
const swiperData = reactive({ |
|
spaceBetween: 0, |
|
slidesPerView: 4, |
|
boxWidth: 'w-100%', |
|
slideWidth: 'w-240px', |
|
modules: [Navigation], |
|
navigationColor: 'color: #fff', |
|
navigationBgColor: 'background: rgba(0, 0, 0, 0.3)' |
|
}) |
|
</script> |
|
|
|
<template> |
|
<div |
|
v-if="seckillLists&&seckillLists.length" |
|
class="seckillIndex cursors acea-row wrapper_1200 mb-38px bg-#FFFFFF b-rd-12px overflow-hidden" |
|
> |
|
<img |
|
@click.prevent="handleIntoPage('/activity/seckill_list', { type: '3' })" |
|
src="@/assets/images/miaosbj.jpg" |
|
class="w-240px h-316px" |
|
/> |
|
<div class="py-30px w-960px"> |
|
<swiper-index :swiperSlideList="seckillLists" :swiperData="swiperData"> |
|
<template v-slot:default="slotProps"> |
|
<div class="bg-#FFFFFF w-240px overflow-hidden seckill-border flex-x-center"> |
|
<div class="w-180px" @click="handleIntoPage('/activity/seckill_list', { type: '3' })"> |
|
<el-image class="backImg w-180px h-180px b-rd-12px" :src="slotProps.value.swiperItem.image"></el-image> |
|
<div class="bg-white px15px pt-15px content" style="margin-top: -5px"> |
|
<div class="line1 text-14px fontColor333 mb22px products-name h-18px line-heightOne"> |
|
{{ slotProps.value.swiperItem.name }} |
|
</div> |
|
<div class="center"> |
|
<div class="text-12px font-color text-center"> |
|
<span class="font-600 oppoSans-M">￥</span><span class="text-20px lh-20px font-600 dinProSemiBold">{{ slotProps.value.swiperItem.seckillPrice }}</span> |
|
<span class="line-through text-14px text-#999 ml-10px dinProRegular font-400">￥{{ slotProps.value.swiperItem.price }}</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
</swiper-index> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<style scoped lang="scss"> |
|
.dinSemiBold{ |
|
font-family: 'dinSemiBold'; |
|
} |
|
.seckill-border{ |
|
border-right: 1px solid #EEEEEE; |
|
} |
|
.seckillIndex{ |
|
:deep(.swiper-slide){ |
|
display: flex; |
|
justify-content: center; |
|
// width: 180px !important; |
|
} |
|
} |
|
</style> |