完成了星座运势

This commit is contained in:
expdsn 2024-10-18 18:17:45 +08:00
parent 2628e3076c
commit a2c98cec87
42 changed files with 729 additions and 3 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 811 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
public/bg/xingzuo_bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 811 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/icons/stared.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
public/icons/starun.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 616 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

View File

@ -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
}}

View File

@ -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>
)
})

View File

@ -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>
)
})

View File

@ -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>
)
})

View File

@ -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>
)
})

View File

@ -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

View File

@ -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
}
})

View File

@ -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>
)
})

View File

@ -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>
)
})

View File

@ -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>
)
})

View File

@ -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>
)
})

View File

@ -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

View File

@ -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
}
})

View File

@ -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>
)
})

View File

@ -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>
)
})

View File

@ -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>
)
})

View File

@ -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>
)
})

View File

@ -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

View File

@ -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[]

View File

@ -0,0 +1,8 @@
import { defineStore } from "pinia";
export default defineStore('video', () => {
return {
}
})