完成了星座运势
After Width: | Height: | Size: 811 B |
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 1.9 MiB |
After Width: | Height: | Size: 52 KiB |
After Width: | Height: | Size: 811 B |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 3.2 KiB |
After Width: | Height: | Size: 2.0 KiB |
After Width: | Height: | Size: 2.4 KiB |
After Width: | Height: | Size: 2.7 KiB |
After Width: | Height: | Size: 3.1 KiB |
After Width: | Height: | Size: 2.6 KiB |
After Width: | Height: | Size: 3.3 KiB |
After Width: | Height: | Size: 3.1 KiB |
After Width: | Height: | Size: 2.7 KiB |
After Width: | Height: | Size: 2.9 KiB |
After Width: | Height: | Size: 17 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 1.3 KiB |
After Width: | Height: | Size: 616 B |
After Width: | Height: | Size: 51 KiB |
|
@ -52,7 +52,7 @@ export default defineComponent(() => {
|
|||
<div
|
||||
class={
|
||||
'w-[16px] h-[16px] group flex justify-center items-center rounded-full overflow-hidden absolute bg-red-500/70 hover:bg-red-500 transition-all cursor-pointer z-30 ' +
|
||||
(router.path === 'global-adder' ? 'top-6 right-8' : 'top-2 right-6')
|
||||
(router.path === 'global-adder' ? 'top-6 right-8' : 'top-4 right-6')
|
||||
}
|
||||
onClick={() => {
|
||||
router.back()
|
||||
|
@ -65,7 +65,7 @@ export default defineComponent(() => {
|
|||
{/* 全屏按钮 */}
|
||||
{!fullList.includes(router.path) ? null : (
|
||||
<div
|
||||
class="w-[16px] group h-[16px] flex justify-center items-center rounded-full overflow-hidden absolute top-2 right-12 bg-green-500/70 hover:bg-green-500 transition-all cursor-pointer z-30"
|
||||
class="w-[16px] group h-[16px] flex justify-center items-center rounded-full overflow-hidden absolute top-4 right-12 bg-green-500/70 hover:bg-green-500 transition-all cursor-pointer z-30"
|
||||
onClick={() => {
|
||||
full.value = !full.value
|
||||
}}
|
||||
|
|
|
@ -0,0 +1,9 @@
|
|||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent(() => {
|
||||
return () => (
|
||||
<div class="w-full h-full bg-[#ecfbff] flex flex-col">
|
||||
large
|
||||
</div>
|
||||
)
|
||||
})
|
|
@ -0,0 +1,10 @@
|
|||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent(() => {
|
||||
|
||||
return () => (
|
||||
<div class="w-full h-full bg-[#ecfbff] flex flex-col">
|
||||
middle
|
||||
</div>
|
||||
)
|
||||
})
|
|
@ -0,0 +1,246 @@
|
|||
import { defineComponent, ref } from 'vue'
|
||||
import { useConstellationStore, zodiacDateMap, zodiacMap } from './useConstellationStore'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
export default defineComponent(() => {
|
||||
const store = useConstellationStore()
|
||||
const open = ref(false)
|
||||
const page = ref(1)
|
||||
return () => (
|
||||
<div
|
||||
class="w-full h-full p-2 overflow-hidden"
|
||||
style={{
|
||||
background: `url('/bg/xingzuo_bg.png')`,
|
||||
backgroundSize: '100% 100%'
|
||||
}}
|
||||
>
|
||||
<div class={'bg-white/40 w-full h-full rounded-xl'}>
|
||||
<div
|
||||
class={'w-full h-full flex'}
|
||||
style={{
|
||||
background: `url('/bg/xingzuo_bg_main.png')`,
|
||||
backgroundSize: '100% 100%'
|
||||
}}
|
||||
>
|
||||
<div class={'w-[358px] h-full flex flex-col py-2 pl-5'}>
|
||||
<div
|
||||
style={{
|
||||
background: `url('/icons/xingzuo_icon_bg.png')`,
|
||||
backgroundSize: '100% 100%'
|
||||
}}
|
||||
class={'w-[168px] h-[168px] flex items-center justify-center '}
|
||||
>
|
||||
<img
|
||||
class={'w-[48px] h-[48px]'}
|
||||
src={`/icons/constellation/${zodiacMap.get(store.state.selectCode)}_big.png`}
|
||||
></img>
|
||||
</div>
|
||||
<div class={'pl-8 mt-4 flex items-center gap-x-2 relative'}>
|
||||
<span class={'text-[16px] font-bold'}>{zodiacMap.get(store.state.selectCode)}</span>
|
||||
<img
|
||||
src="/icons/change_constellation.png"
|
||||
class={'w-[14px] h-[14px] cursor-pointer'}
|
||||
onClick={() => {
|
||||
open.value = true
|
||||
}}
|
||||
></img>
|
||||
{open.value && (
|
||||
<div
|
||||
class={
|
||||
'w-[824px] h-[158px] bg-white rounded-lg absolute left-0 top-6 border-[#af9ff1] border-[1px] px-14'
|
||||
}
|
||||
>
|
||||
<div class={'w-full h-full grid grid-cols-6 grid-rows-1'}>
|
||||
{Array.from(zodiacMap)
|
||||
.filter((_, index) => index < page.value * 6)
|
||||
.map(([key, value]) => (
|
||||
<div key={key} class={'flex flex-col gap-y-2 items-center justify-center'}>
|
||||
<div
|
||||
class={
|
||||
'w-[82px] h-[82px] cursor-pointer bg-[#af9ff1] rounded-full flex justify-center items-center'
|
||||
}
|
||||
onClick={() => {
|
||||
store.state.selectCode = key
|
||||
open.value = false
|
||||
}}
|
||||
>
|
||||
<img
|
||||
class={'w-[48px] h-[48px] '}
|
||||
src={`/icons/constellation/${value}_big.png`}
|
||||
></img>
|
||||
</div>
|
||||
<span class={'text-[16px] font-bold text-[#333] leading-[16px]'}>
|
||||
{value}
|
||||
</span>
|
||||
<span class={'text-[12px] text-[#666] leading-[12px]'}>
|
||||
{zodiacDateMap.get(value)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
class={'w-[177px] h-[2px] mb-[12px] mt-[8px]'}
|
||||
style={{
|
||||
background: 'linear-gradient(90deg,rgba(255,255,255,0),#ffffff,rgba(255,255,255,0))'
|
||||
}}
|
||||
></div>
|
||||
<div class={'flex flex-col gap-y-2'}>
|
||||
<div class={'flex gap-x-2 items-center'}>
|
||||
<span class={'text-[#333] text-[14px]'}>财富运势</span>
|
||||
<div class={'flex gap-x-1 items-center'}>
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
<img
|
||||
src={
|
||||
(store.data?.today.exponents.caiyun.star || 0) > index
|
||||
? '/icons/stared.png'
|
||||
: '/icons/starun.png'
|
||||
}
|
||||
class={'w-[20px] h-[20px]'}
|
||||
></img>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div class={'flex gap-x-2 items-center'}>
|
||||
<span class={'text-[#333] text-[14px]'}>爱情运势</span>
|
||||
<div class={'flex gap-x-1 items-center'}>
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
<img
|
||||
src={
|
||||
(store.data?.today.exponents.aiqing.star || 0) > index
|
||||
? '/icons/stared.png'
|
||||
: '/icons/starun.png'
|
||||
}
|
||||
class={'w-[20px] h-[20px]'}
|
||||
></img>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div class={'flex gap-x-2 items-center'}>
|
||||
<span class={'text-[#333] text-[14px]'}>综合运势</span>
|
||||
<div class={'flex gap-x-1 items-center'}>
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
<img
|
||||
src={
|
||||
store.data?.today.exponents.zonghe.star || 0 > index
|
||||
? '/icons/stared.png'
|
||||
: '/icons/starun.png'
|
||||
}
|
||||
class={'w-[20px] h-[20px]'}
|
||||
></img>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class={'w-[177px] h-[2px] mb-[12px] mt-[8px]'}
|
||||
style={{
|
||||
background: 'linear-gradient(90deg,rgba(255,255,255,0),#ffffff,rgba(255,255,255,0))'
|
||||
}}
|
||||
></div>
|
||||
<div class={'flex flex-col gap-y-3'}>
|
||||
<div class={'flex items-center text-[14px] gap-x-1'}>
|
||||
<span>幸运时间:</span>
|
||||
<span class={'text-[14px] text-[#333] flex items-center leading-[14px]'}>
|
||||
{store.data?.today.lucky_time}
|
||||
</span>
|
||||
</div>
|
||||
<div class={'flex items-center text-[14px] gap-x-1'}>
|
||||
<span>幸运数字:</span>
|
||||
<span class={'text-[14px] text-[#333] flex items-center leading-[14px]'}>
|
||||
{store.data?.today.lucky_num}
|
||||
</span>
|
||||
</div>
|
||||
<div class={'flex items-center text-[14px] gap-x-1'}>
|
||||
<span>幸运颜色:</span>
|
||||
<span class={'text-[14px] text-[#333] flex items-center leading-[14px]'}>
|
||||
{store.data?.today.lucky_color}
|
||||
</span>
|
||||
</div>
|
||||
<div class={'flex items-center text-[14px] gap-x-1'}>
|
||||
<span>速配星座:</span>
|
||||
<span class={'text-[14px] text-[#333] flex items-center leading-[14px]'}>
|
||||
{store.data?.today.grxz}
|
||||
</span>
|
||||
</div>
|
||||
<div class={'flex items-start text-[14px] gap-x-1 overflow-hidden '}>
|
||||
<span>今日提醒:</span>
|
||||
<span
|
||||
class={
|
||||
'text-[14px] w-[200px] text-[#333] text-overflow line-clamp-3 overflow-hidden items-center '
|
||||
}
|
||||
>
|
||||
{store.data?.today.day_notice}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class={'flex-1 w-0 h-full '}>
|
||||
<div class={'flex flex-col px-10 pt-7 gap-y-4'}>
|
||||
<div class={'flex flex-col gap-y-3'}>
|
||||
<div class={'flex'}>
|
||||
<div
|
||||
class={'px-5 py-2 text-white font-bold rounded-lg'}
|
||||
style={{
|
||||
background: 'linear-gradient(225deg,#7870ff 0%,#b46bff 100%)',
|
||||
boxShadow:
|
||||
'0 2px 4px #0003,inset -1px -1px 6px #653bd0,inset 1px 1px 6px #ffffff7a'
|
||||
}}
|
||||
>
|
||||
综合运势
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class={'text-[14px] text-[#333]'}>
|
||||
{store.data?.today.exponents.zonghe.content}
|
||||
</span>
|
||||
</div>
|
||||
<div class={'flex flex-col gap-y-3'}>
|
||||
<div class={'flex'}>
|
||||
<div
|
||||
class={'px-5 py-2 text-white font-bold rounded-lg'}
|
||||
style={{
|
||||
background: 'linear-gradient(225deg,#7870ff 0%,#b46bff 100%)',
|
||||
boxShadow:
|
||||
'0 2px 4px #0003,inset -1px -1px 6px #653bd0,inset 1px 1px 6px #ffffff7a'
|
||||
}}
|
||||
>
|
||||
财富运势
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class={'text-[14px] text-[#333]'}>
|
||||
{store.data?.today.exponents.caiyun.content}
|
||||
</span>
|
||||
</div>
|
||||
<div class={'flex flex-col gap-y-3'}>
|
||||
<div class={'flex'}>
|
||||
<div
|
||||
class={'px-5 py-2 text-white font-bold rounded-lg'}
|
||||
style={{
|
||||
background: 'linear-gradient(225deg,#7870ff 0%,#b46bff 100%)',
|
||||
boxShadow:
|
||||
'0 2px 4px #0003,inset -1px -1px 6px #653bd0,inset 1px 1px 6px #ffffff7a'
|
||||
}}
|
||||
>
|
||||
爱情运势
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class={'text-[14px] text-[#333]'}>
|
||||
{store.data?.today.exponents.aiqing.content}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class={'text-xs absolute right-28 top-[14px] text-[#666]'}>
|
||||
今日运势
|
||||
<span>{dayjs().format('YYYY-MM-DD')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
|
@ -0,0 +1,14 @@
|
|||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent(() => {
|
||||
return () => (
|
||||
<div
|
||||
class="w-full h-full items-center pl-3 gap-x-2 flex py-3 text-white"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg,#5996ff 0%,#4862ff 100%)'
|
||||
}}
|
||||
>
|
||||
|
||||
</div>
|
||||
)
|
||||
})
|
|
@ -0,0 +1,30 @@
|
|||
import asyncLoader from '@/utils/asyncLoader'
|
||||
import type { Widget } from '..'
|
||||
|
||||
export default {
|
||||
name: 'constellation',
|
||||
label: '星座运势',
|
||||
description: '你可查看星座运势',
|
||||
icon: '/icons/constellation_icon.png',
|
||||
modal: asyncLoader(() => import('./Modal')),
|
||||
list: [
|
||||
{
|
||||
w: 2,
|
||||
h: 1,
|
||||
label: '小',
|
||||
component: asyncLoader(() => import('./Small'))
|
||||
},
|
||||
{
|
||||
w: 2,
|
||||
h: 2,
|
||||
label: '中',
|
||||
component: asyncLoader(() => import('./Middle'))
|
||||
},
|
||||
{
|
||||
w: 4,
|
||||
h: 2,
|
||||
label: '大',
|
||||
component: asyncLoader(() => import('./Large'))
|
||||
}
|
||||
]
|
||||
} as Widget
|
|
@ -0,0 +1,113 @@
|
|||
import request from "@/utils/request";
|
||||
import { defineStore } from "pinia";
|
||||
import { reactive, ref, watch } from "vue";
|
||||
interface ConstellationType {
|
||||
date: string;
|
||||
star: string; // 星座
|
||||
this_month: HoroscopePeriod;
|
||||
this_week: HoroscopePeriod & {
|
||||
lucky_color: string;
|
||||
lucky_day: string;
|
||||
lucky_num: string;
|
||||
week_notice: string;
|
||||
};
|
||||
this_year: {
|
||||
general: {
|
||||
general_index: string;
|
||||
general_txt: string;
|
||||
};
|
||||
health: {
|
||||
health_txt: string;
|
||||
};
|
||||
love: {
|
||||
love_index: string;
|
||||
love_txt: string;
|
||||
};
|
||||
money: {
|
||||
money_index: string;
|
||||
money_txt: string;
|
||||
};
|
||||
oneword: string;
|
||||
time: string;
|
||||
work: {
|
||||
work_index: string;
|
||||
work_txt: string;
|
||||
};
|
||||
};
|
||||
today: DailyHoroscope;
|
||||
tomorrow: DailyHoroscope;
|
||||
};
|
||||
type HoroscopePeriod = {
|
||||
exponents: Exponents;
|
||||
grxz: string; // 贵人星座
|
||||
};
|
||||
|
||||
type DailyHoroscope = HoroscopePeriod & {
|
||||
day_notice: string;
|
||||
lucky_color: string;
|
||||
lucky_num: string;
|
||||
lucky_time: string;
|
||||
};
|
||||
|
||||
type Exponents = {
|
||||
aiqing: HoroscopeAspect;
|
||||
caiyun: HoroscopeAspect;
|
||||
gongzuo: HoroscopeAspect;
|
||||
zonghe: HoroscopeAspect;
|
||||
};
|
||||
|
||||
type HoroscopeAspect = {
|
||||
content: string;
|
||||
star: number; // 星级
|
||||
};
|
||||
export const zodiacDateMap = new Map([
|
||||
['白羊座', '3.21-4.19'],
|
||||
['金牛座', '4.20-5.20'],
|
||||
['双子座', '5.21-6.21'],
|
||||
['巨蟹座', '6.22-7.22'],
|
||||
['狮子座', '7.23-8.22'],
|
||||
['处女座', '8.23-9.22'],
|
||||
['天秤座', '9.23-10.23'],
|
||||
['天蝎座', '10.24-11.22'],
|
||||
['射手座', '11.23-12.21'],
|
||||
['摩羯座', '12.22-1.19'],
|
||||
['水瓶座', '1.20-2.18'],
|
||||
['双鱼座', '2.19-3.20']
|
||||
]);
|
||||
|
||||
export const zodiacMap = new Map<number, string>([
|
||||
[101, "白羊座"],
|
||||
[102, "金牛座"],
|
||||
[103, "双子座"],
|
||||
[104, "巨蟹座"],
|
||||
[105, "狮子座"],
|
||||
[106, "处女座"],
|
||||
[107, "天秤座"],
|
||||
[108, "天蝎座"],
|
||||
[109, "射手座"],
|
||||
[110, "魔羯座"],
|
||||
[111, "水瓶座"],
|
||||
[112, "双鱼座"]
|
||||
]);
|
||||
|
||||
export const useConstellationStore = defineStore("constellation", () => {
|
||||
const data = ref<ConstellationType | null>(null)
|
||||
const state = reactive({
|
||||
selectCode: 103
|
||||
})
|
||||
watch(() => [state.selectCode], (newVal) => {
|
||||
getConstellation(newVal[0])
|
||||
})
|
||||
const getConstellation = async (code: number) => {
|
||||
const res = await request<{
|
||||
data: ConstellationType;
|
||||
}>('GET', `/api/constellation?code=${code}`)
|
||||
data.value = res.data
|
||||
}
|
||||
getConstellation(state.selectCode)
|
||||
|
||||
return {
|
||||
state,
|
||||
data
|
||||
}
|
||||
})
|
|
@ -0,0 +1,9 @@
|
|||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent(() => {
|
||||
return () => (
|
||||
<div class="w-full h-full bg-[#ecfbff] flex flex-col">
|
||||
large
|
||||
</div>
|
||||
)
|
||||
})
|
|
@ -0,0 +1,10 @@
|
|||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent(() => {
|
||||
|
||||
return () => (
|
||||
<div class="w-full h-full bg-[#ecfbff] flex flex-col">
|
||||
middle
|
||||
</div>
|
||||
)
|
||||
})
|
|
@ -0,0 +1,85 @@
|
|||
import { defineComponent, ref, watch, type VNodeRef } from 'vue'
|
||||
import useGameNews from './useDiscountStore'
|
||||
import { RiTimeLine } from 'oh-vue-icons/icons'
|
||||
import { addIcons, OhVueIcon } from 'oh-vue-icons'
|
||||
import dayjs from 'dayjs'
|
||||
addIcons(RiTimeLine)
|
||||
export default defineComponent(() => {
|
||||
const store = useGameNews()
|
||||
const containerRef = ref<VNodeRef | null>(null as VNodeRef | null)
|
||||
|
||||
const handleScroll = () => {
|
||||
const container = containerRef.value
|
||||
console.log(container)
|
||||
|
||||
if (container.scrollTop + container.clientHeight >= container.scrollHeight - 50) {
|
||||
console.log('到底了')
|
||||
|
||||
store.getNews()
|
||||
}
|
||||
}
|
||||
return () => (
|
||||
<div
|
||||
class="w-full h-full flex flex-col p-5 bg-[#17212d]"
|
||||
style={{
|
||||
background: 'rgba(23,33,45,.6)'
|
||||
}}
|
||||
>
|
||||
<div class={'flex w-full justify-center pb-5'}>
|
||||
<img class={'h-[20px]'} src="/icons/游戏资讯@2x.png"></img>
|
||||
</div>
|
||||
<div class={'h-0 w-full flex-1'}>
|
||||
<div class={'w-full h-full overflow-y-scroll'} onWheel={handleScroll} ref={containerRef}>
|
||||
<div class={'grid grid-cols-2 gap-4 '}>
|
||||
{store.list.map((item, index) => {
|
||||
return (
|
||||
<div
|
||||
class={
|
||||
'flex cursor-pointer items-center h-[110px] rounded-lg relative overflow-hidden'
|
||||
}
|
||||
onClick={()=> {
|
||||
}}
|
||||
key={index}
|
||||
>
|
||||
|
||||
<div
|
||||
class={
|
||||
' absolute right-0 top-0 w-[70%] h-full rounded-xl flex flex-col justify-between py-4 text-white pl-2 overflow-hidden'
|
||||
}
|
||||
style={{
|
||||
backdropFilter: 'blur(16px)',
|
||||
backgroundColor: '#17212d',
|
||||
background: 'rgba(0, 0, 0, .2)'
|
||||
}}
|
||||
>
|
||||
<span class={'text-nowrap text-ellipsis overflow-hidden text-[14px]'}>
|
||||
{item.gameid}
|
||||
</span>
|
||||
<span
|
||||
class={' text-ellipsis overflow-hidden text-[12px] opacity-60 line-clamp-2'}
|
||||
>
|
||||
{item.name}
|
||||
</span>
|
||||
<div class={'text-[12px] items-center flex opacity-40 gap-x-1'}>
|
||||
<OhVueIcon
|
||||
name={RiTimeLine.name}
|
||||
class={'text-white'}
|
||||
scale={0.7}
|
||||
></OhVueIcon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{store.loading && (
|
||||
<div class={'w-full font-bold flex justify-center text-white py-2'}>加载中...</div>
|
||||
)}
|
||||
{store.noMoreData && (
|
||||
<div class={'w-full font-bold flex justify-center text-white py-2'}>无更多数据</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
|
@ -0,0 +1,28 @@
|
|||
|
||||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent(() => {
|
||||
return () => (
|
||||
<div
|
||||
class="w-full h-full flex items-center px-3"
|
||||
style={{
|
||||
background: `url('/bg/gameDiscount__back.png')`,
|
||||
backgroundSize: 'cover'
|
||||
}}
|
||||
>
|
||||
<img class={'w-[48px] h-[48px]'} src={'/icons/gameDiscount__icon.png'}></img>
|
||||
<div class={'flex-1 flex justify-center'}>
|
||||
<div class="flex-col flex">
|
||||
<span class={'text-[16px] text-white'}>游戏折扣</span>
|
||||
<div class={'flex items-center text-[#fffc] text-[12px] '}>
|
||||
立即查看
|
||||
<div>
|
||||
<img src="/icons/gt.png"></img>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import asyncLoader from '@/utils/asyncLoader'
|
||||
import type { Widget } from '..'
|
||||
|
||||
export default {
|
||||
name: 'discount',
|
||||
label: '游戏折扣',
|
||||
description: '游戏折扣',
|
||||
icon: '/icons/discounts_icon.png',
|
||||
modal: asyncLoader(() => import('./Modal')),
|
||||
list: [
|
||||
{
|
||||
w: 2,
|
||||
h: 1,
|
||||
label: '小',
|
||||
component: asyncLoader(() => import('./Small'))
|
||||
},
|
||||
{
|
||||
w: 2,
|
||||
h: 2,
|
||||
label: '中',
|
||||
component: asyncLoader(() => import('./Middle'))
|
||||
},
|
||||
{
|
||||
w: 4,
|
||||
h: 2,
|
||||
label: '大',
|
||||
component: asyncLoader(() => import('./Large'))
|
||||
}
|
||||
]
|
||||
} as Widget
|
|
@ -0,0 +1,56 @@
|
|||
import request from "@/utils/request";
|
||||
import { defineStore } from "pinia";
|
||||
import { ref, type VNodeRef } from "vue";
|
||||
|
||||
|
||||
export interface GameDiscount {
|
||||
gameid: string;
|
||||
status: number;
|
||||
typeid: string;
|
||||
typename: string;
|
||||
name: string;
|
||||
}
|
||||
export default defineStore("gameDiscount", () => {
|
||||
const list = ref<GameDiscount[]>([])
|
||||
const page = ref(1)
|
||||
const loading = ref(false)
|
||||
const noMoreData = ref(false)
|
||||
const containerRef = ref<VNodeRef | null>(null)
|
||||
|
||||
const getList = async () => {
|
||||
const res = await request<{
|
||||
data: GameDiscount[];
|
||||
}>('GET', `/api/gameDiscount?page=${page.value}&page_size=16`)
|
||||
return res.data
|
||||
}
|
||||
const getNews = async () => {
|
||||
|
||||
if (loading.value || noMoreData.value) return;
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
const data = await getList()
|
||||
|
||||
if (data.length === 0) {
|
||||
noMoreData.value = true;
|
||||
} else {
|
||||
list.value.push(...data);
|
||||
page.value++;
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
getNews()
|
||||
return {
|
||||
list,
|
||||
loading,
|
||||
noMoreData,
|
||||
getNews,
|
||||
containerRef
|
||||
}
|
||||
})
|
|
@ -0,0 +1,9 @@
|
|||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent(() => {
|
||||
return () => (
|
||||
<div class="w-full h-full bg-[#ecfbff] flex flex-col">
|
||||
large
|
||||
</div>
|
||||
)
|
||||
})
|
|
@ -0,0 +1,10 @@
|
|||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent(() => {
|
||||
|
||||
return () => (
|
||||
<div class="w-full h-full bg-[#ecfbff] flex flex-col">
|
||||
middle
|
||||
</div>
|
||||
)
|
||||
})
|
|
@ -0,0 +1,12 @@
|
|||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent(() => {
|
||||
return () => (
|
||||
<div
|
||||
class="w-full h-full bg-red-50 flex "
|
||||
style={{
|
||||
background: 'linear-gradient(180deg,#dcefff 0%,#e7ecff 100%)'
|
||||
}}
|
||||
></div>
|
||||
)
|
||||
})
|
|
@ -0,0 +1,14 @@
|
|||
import { defineComponent } from 'vue'
|
||||
|
||||
export default defineComponent(() => {
|
||||
return () => (
|
||||
<div
|
||||
class="w-full h-full items-center pl-3 gap-x-2 flex py-3 text-white"
|
||||
style={{
|
||||
background: 'linear-gradient(135deg,#5996ff 0%,#4862ff 100%)'
|
||||
}}
|
||||
>
|
||||
|
||||
</div>
|
||||
)
|
||||
})
|
|
@ -0,0 +1,30 @@
|
|||
import asyncLoader from '@/utils/asyncLoader'
|
||||
import type { Widget } from '..'
|
||||
|
||||
export default {
|
||||
name: 'hotspot',
|
||||
label: '热点资讯',
|
||||
description: '热点信息尽在此处',
|
||||
icon: '/icons/hot_information_icon.png',
|
||||
modal: asyncLoader(() => import('./Modal')),
|
||||
list: [
|
||||
{
|
||||
w: 2,
|
||||
h: 1,
|
||||
label: '小',
|
||||
component: asyncLoader(() => import('./Small'))
|
||||
},
|
||||
{
|
||||
w: 2,
|
||||
h: 2,
|
||||
label: '中',
|
||||
component: asyncLoader(() => import('./Middle'))
|
||||
},
|
||||
{
|
||||
w: 4,
|
||||
h: 2,
|
||||
label: '大',
|
||||
component: asyncLoader(() => import('./Large'))
|
||||
}
|
||||
]
|
||||
} as Widget
|
|
@ -4,6 +4,9 @@ import weather from './weather'
|
|||
import weApply from './weApply'
|
||||
import gameNews from './gameNews'
|
||||
import eat from './eat'
|
||||
import discount from './discount'
|
||||
import hotspot from './hotspot'
|
||||
import constellation from './constellation'
|
||||
export interface Widget {
|
||||
name: string // 小组件类型唯一标识
|
||||
label: string // 小组件名称
|
||||
|
@ -18,4 +21,4 @@ export interface Widget {
|
|||
}[] // 不同尺寸小组件块
|
||||
}
|
||||
|
||||
export default [calendar, weather, weApply, gameNews, eat] as Widget[]
|
||||
export default [calendar, weather, weApply, gameNews, eat, discount, hotspot, constellation] as Widget[]
|
||||
|
|
|
@ -0,0 +1,8 @@
|
|||
import { defineStore } from "pinia";
|
||||
|
||||
export default defineStore('video', () => {
|
||||
|
||||
return {
|
||||
|
||||
}
|
||||
})
|