59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import { computed, defineComponent, onMounted, ref } from 'vue'
|
|
import useDiscountStore from './useDiscountStore'
|
|
|
|
export default defineComponent(() => {
|
|
const store = useDiscountStore()
|
|
const idx = ref(0)
|
|
const selectItem = computed(() => {
|
|
return store.list[idx.value]
|
|
})
|
|
onMounted(() => {
|
|
setInterval(() => {
|
|
idx.value = idx.value + 1
|
|
if (idx.value > store.list.length - 1) {
|
|
idx.value = 0
|
|
}
|
|
}, 5000)
|
|
})
|
|
return () => (
|
|
<div class="w-full h-full bg-[#ecfbff] flex flex-col" style={{
|
|
background: `url('${selectItem.value?.commdity[0]?.img}')`
|
|
}}>
|
|
<div class={"absolute left-0 top-0 flex text-[14px] h-[26px] bg-[#78635D] rounded-lg items-center text-white"}>
|
|
<div class="bg-[#ef5a41] flex items-center h-full text-white rounded px-2 font-bold ">
|
|
-13%
|
|
</div>
|
|
<span class={" rounded-lg px-2"}>剩余1天</span>
|
|
</div>
|
|
<div
|
|
class={
|
|
'absolute right-0 h-full w-1/2 rounded-lg bg-[#0003] backdrop-blur-md'
|
|
}
|
|
>
|
|
<div class="flex flex-col w-full h-full justify-center gap-y-2 py-2 px-3">
|
|
<span class="text-white text-[14px]">{selectItem.value.name}</span>
|
|
<div>
|
|
<span
|
|
class={
|
|
'border-[1px] border-[#f6d1b8] border-solid text-[#f6d1b8] p-1 text-[12px] rounded'
|
|
}
|
|
>
|
|
{selectItem.value.typename}
|
|
</span>
|
|
</div>
|
|
<div class={"flex flex-col"}>
|
|
<span class="text-[#fffbc2] text-[18px] font-bold ">
|
|
￥{selectItem.value.commdity[0]?.price}
|
|
</span>
|
|
<span class="text-[12px] text-[#bdbdbd] line-through decoration-current">
|
|
￥{selectItem.value.commdity[0]?.oldprice}
|
|
</span>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|