xyyd
/
xyyd-fatfox
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完善小组件

This commit is contained in:
expdsn 2024-11-11 10:59:28 +08:00
parent da41cc1e12
commit 9f2506b498
2 changed files with 95 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/widgets/discount/Large.tsx
View File

@ -1,9 +1,58 @@
import { defineComponent } from 'vue'
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">
large
<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>
)
})

47
src/widgets/discount/Middle.tsx
View File

@ -1,10 +1,49 @@
import { defineComponent } from 'vue'
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">
middle
<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>
</div>
<div
class={
'absolute bottom-0 h-1/2 w-full rounded-lg bg-[#0003] backdrop-blur-md'
}
>
<div class="flex flex-col w-full h-full justify-center gap-y-1 py-2 px-3">
<span class="text-white text-[14px]">{selectItem.value.name}</span>
<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>
)
})