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

完成了星座运势小组件

This commit is contained in:
expdsn 2024-10-21 15:45:16 +08:00
parent a2c98cec87
commit be58156b6d
18 changed files with 234 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/icons/constellation/constellation_icon_bg_large.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 194 KiB

BIN
public/icons/constellation/constellation_icon_bg_medium.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

BIN
public/icons/constellation/constellation_un.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
public/icons/constellation/starSign__back.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
public/icons/constellation/starSign__icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/icons/constellation/xingzuo_right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

1
src/GlobalModal.tsx
View File

@ -99,7 +99,6 @@ export default defineComponent(() => {
</div>
)
const compo = selected.modal
console.log(compo)
return <compo />
})()
) : null}

3
src/layout/background/BackgroundSwtich.tsx
View File

@ -59,7 +59,6 @@ export default defineComponent(() => {
const sortBy = ref<'hotNum' | 'time'>('hotNum')
onMounted(() => {
request<BackgroundType[]>('GET', '/api/app/backgroundTypes').then((res) => {
console.log(res)
typeList.value = res
selectType.value = res[0].id
})
@ -71,7 +70,6 @@ export default defineComponent(() => {
wallpaperList.value = []
request<WallpaperItem[]>('GET', `/api/app/backgrounds?typeId=${e[0]}&sort=${sortBy.value}`).then(
(res) => {
console.log(res)
wallpaperList.value = res
}
)
@ -220,7 +218,6 @@ export default defineComponent(() => {
<div
key={index}
onClick={() => {
console.log(index)
if (index === 2) {
if (!userStore.isLogin) {

1
src/utils/UploadAndCut.tsx
View File

@ -25,7 +25,6 @@ export default defineComponent({
const file = target.files?.[0]
target.value = ''
console.log(file?.name);
if (!file) return
// upload(file).then(res => {

81
src/widgets/constellation/Large.tsx
View File

@ -1,9 +1,86 @@
import { defineComponent } from 'vue'
import { useConstellationStore, zodiacMap } from './useConstellationStore'
import dayjs from 'dayjs'
import StarCicle from './starCicle'
export default defineComponent(() => {
const store = useConstellationStore()
return () => (
<div class="w-full h-full bg-[#ecfbff] flex flex-col">
large
<div
class="w-full h-full flex flex-col p-2"
style={{
backgroundImage: 'url(/icons/constellation/constellation_icon_bg_large.webp)',
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center'
}}
>
<div
class={
'w-full h-full p-2 backdrop-blur-sm rounded-xl flex relative items-center justify-between overflow-hidden'
}
style={{
boxShadow: 'inset 0 1px 3px #ffffff80',
background: 'rgba(255,255,255,.5)'
}}
>
<span class={'absolute right-5 top-1 text-[12px] text-[#666] flex gap-x-1 font-bold '}>
今日运势
<span>{dayjs().format('YYYY.MM.DD')}</span>
</span>
<div class={'w-[60%] h-full flex flex-col justify-between items-center'}>
<div class={'w-full pt-2 pl-5 relative'}>
<img
class={'w-[25px] h-[25px] top-0 left-2 absolute '}
src={`/icons/constellation/${zodiacMap.get(store.state.selectCode)}_big.png`}
></img>
<span
class={'relative z-10 flex items-center gap-x-2 font-bold text-[16px] text-[#333]'}
>
{zodiacMap.get(store.state.selectCode)}
<img
src="/icons/change_constellation.png"
class={'w-[14px] h-[14px] cursor-pointer'}
></img>
</span>
<div
class={'w-[180px] -ml-6 h-[2px] mb-[2px] mt-[5px] '}
style={{
background: 'linear-gradient(90deg,rgba(255,255,255,0),#ffffff,rgba(255,255,255,0))'
}}
></div>
<div class={'flex flex-col gap-y-1 mt-4'}>
<div class={'flex items-center text-[14px] gap-x-1'}>
<span class={'text-[#333]'}>幸运颜色：</span>
<span class={'text-[14px] text-[#757575] flex items-center leading-[14px]'}>
{store.data?.today.lucky_color}
</span>
</div>
<div class={'flex items-center text-[14px] gap-x-1'}>
<span class={'text-[#333]'}>速配星座：</span>
<span class={'text-[14px] text-[#757575] flex items-center leading-[14px]'}>
{store.data?.today.grxz}
</span>
</div>
<div class={'flex items-start text-[14px] gap-x-1 overflow-hidden '}>
<span class={'text-[#333]'}>今日提醒：</span>
<span
class={
'text-[14px] w-[120px] text-[#757575] text-ellipsis whitespace-nowrap overflow-hidden items-center '
}
>
{store.data?.today.day_notice}
</span>
</div>
</div>
</div>
</div>
<div class={'flex-1 pt-5 h-full flex items-center justify-center'}>
<StarCicle size={100} star={store.data?.today.exponents.zonghe.star}></StarCicle>
</div>
</div>
</div>
)
})

56
src/widgets/constellation/Middle.tsx
View File

@ -1,10 +1,60 @@
import { defineComponent } from 'vue'
import StarCicle from './starCicle'
import { useConstellationStore, zodiacMap } from './useConstellationStore'
import dayjs from 'dayjs'
export default defineComponent(() => {
const store = useConstellationStore()
return () => (
<div class="w-full h-full bg-[#ecfbff] flex flex-col">
middle
<div
class="w-full h-full flex flex-col p-2"
style={{
backgroundImage: 'url(/icons/constellation/constellation_icon_bg_medium.webp)',
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center'
}}
>
<div
class={
'w-full h-full pb-1 backdrop-blur-sm rounded-xl flex flex-col items-center justify-between overflow-hidden'
}
style={{
boxShadow: 'inset 0 1px 3px #ffffff80',
background: 'rgba(255,255,255,.5)'
}}
>
<div class={'w-full pt-4 pl-5 relative'}>
<img
class={'w-[25px] h-[25px] top-1 left-2 absolute '}
src={`/icons/constellation/${zodiacMap.get(store.state.selectCode)}_big.png`}
></img>
<span class={'absolute right-1 top-1 text-[12px] text-[#666] scale-75'}>
{dayjs().format('YYYY.MM.DD')}
</span>
<span class={'relative z-10 flex items-center gap-x-1 font-bold text-[16px] text-[#333]'}>
{zodiacMap.get(store.state.selectCode)}
<img
src="/icons/change_constellation.png"
class={'w-[14px] h-[14px] cursor-pointer'}
></img>
</span>
</div>
<div
class={'w-[120px] h-[2px] mb-[2px] '}
style={{
background: 'linear-gradient(90deg,rgba(255,255,255,0),#ffffff,rgba(255,255,255,0))'
}}
></div>
<StarCicle size={85} star={store.data?.today.exponents.zonghe.star}></StarCicle>
<div class={'overflow-hidden w-full px-4'}>
<div
class={'w-full text-[14px] text-ellipsis overflow-hidden text-[#333] whitespace-nowrap'}
>
{store.data?.today.day_notice}
</div>
</div>
</div>
</div>
)
})

23
src/widgets/constellation/Modal.tsx
View File

@ -1,6 +1,7 @@
import { defineComponent, ref } from 'vue'
import { useConstellationStore, zodiacDateMap, zodiacMap } from './useConstellationStore'
import dayjs from 'dayjs'
import clsx from 'clsx'
export default defineComponent(() => {
const store = useConstellationStore()
@ -13,6 +14,9 @@ export default defineComponent(() => {
background: `url('/bg/xingzuo_bg.png')`,
backgroundSize: '100% 100%'
}}
onClick={() => {
open.value = false
}}
>
<div class={'bg-white/40 w-full h-full rounded-xl'}>
<div
@ -40,19 +44,30 @@ export default defineComponent(() => {
<img
src="/icons/change_constellation.png"
class={'w-[14px] h-[14px] cursor-pointer'}
onClick={() => {
onClick={(e) => {
open.value = true
e.stopPropagation()
}}
></img>
{open.value && (
<div
class={
'w-[824px] h-[158px] bg-white rounded-lg absolute left-0 top-6 border-[#af9ff1] border-[1px] px-14'
'w-[824px] h-[158px] bg-white rounded-lg absolute left-0 top-6 border-[#af9ff1] border-[1px] px-14'
}
>
<img
onClick={() => {
page.value = (page.value % 2) + 1
}}
class={clsx(
'absolute top-1/2 -translate-y-1/2 hover:scale-110 duration-150 w-10 cursor-pointer',
page.value === 1 ? 'right-5' : 'left-5 rotate-180 '
)}
src="/icons/constellation/xingzuo_right.png"
></img>
<div class={'w-full h-full grid grid-cols-6 grid-rows-1'}>
{Array.from(zodiacMap)
.filter((_, index) => index < page.value * 6)
.filter((_, index) => index < page.value * 6 && index >= (page.value - 1) * 6)
.map(([key, value]) => (
<div key={key} class={'flex flex-col gap-y-2 items-center justify-center'}>
<div
@ -124,7 +139,7 @@ export default defineComponent(() => {
{Array.from({ length: 5 }).map((_, index) => (
<img
src={
store.data?.today.exponents.zonghe.star || 0 > index
(store.data?.today.exponents.zonghe.star || 0) > index
? '/icons/stared.png'
: '/icons/starun.png'
}

19
src/widgets/constellation/Small.tsx
View File

@ -3,12 +3,25 @@ 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"
class="w-full h-full flex items-center px-3"
style={{
background: 'linear-gradient(135deg,#5996ff 0%,#4862ff 100%)'
background: `url('/icons/constellation/starSign__back.png')`,
backgroundSize: 'cover'
}}
>
<img class={'w-[48px] h-[48px]'} src={'/icons/constellation/starSign__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>
)
})

54
src/widgets/constellation/starCicle.tsx Normal file
View File

@ -0,0 +1,54 @@
import { ConfigProvider, Progress } from 'ant-design-vue'
import { defineComponent } from 'vue'
export default defineComponent({
name: 'StarCicle',
props: {
star: {
type: Number,
default: 1
},
type: {
type: String,
default: '综合运势'
},
size: {
type: Number,
default: 80
}
},
setup(props) {
return () => (
<div
class="flex items-center justify-center relative overflow-hidden"
style={{
width: props.size + 'px',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center'
}}
>
<img class={'absolute top-0 '} src="/icons/constellation/constellation_un.png"></img>
<Progress
percent={20 * props.star}
type="dashboard"
size={props.size}
strokeWidth={13}
gapDegree={60}
trailColor="transparent"
strokeColor={{
'0%': '#A98BF7',
'100%': '#FABFE1'
}}
showInfo={false}
/>
<div
class={
'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[28px] h-[38px] text-[14px]'
}
>
{props.type}
</div>
</div>
)
}
})

2
src/widgets/constellation/useConstellationStore.ts
View File

@ -85,7 +85,7 @@ export const zodiacMap = new Map<number, string>([
[107, "天秤座"],
[108, "天蝎座"],
[109, "射手座"],
[110, "魔羯座"],
[110, "摩羯座"],
[111, "水瓶座"],
[112, "双鱼座"]
]);

2
src/widgets/discount/Modal.tsx
View File

@ -10,10 +10,8 @@ export default defineComponent(() => {
const handleScroll = () => {
const container = containerRef.value
console.log(container)
if (container.scrollTop + container.clientHeight >= container.scrollHeight - 50) {
console.log('到底了')
store.getNews()
}

2
src/widgets/gameNews/Modal.tsx
View File

@ -10,10 +10,8 @@ export default defineComponent(() => {
const handleScroll = () => {
const container = containerRef.value
console.log(container)
if (container.scrollTop + container.clientHeight >= container.scrollHeight - 50) {
console.log('到底了')
store.getNews()
}

15
src/widgets/video/useVideoStore.tsx
View File

@ -1,8 +1,15 @@
import { defineStore } from "pinia";
import useLayoutStore from '@/layout/useLayoutStore'
import { defineStore } from 'pinia'
import { computed, ref, watch } from 'vue'
export default defineStore('video', () => {
return {
const videoList = ref([])
const layout = useLayoutStore()
watch(
() => layout.state.current,
(val) => {
console.log('videoList', val)
}
)
return {}
})