89 lines
3.2 KiB
TypeScript
89 lines
3.2 KiB
TypeScript
|
import { defineComponent, ref, watch, type VNodeRef } from 'vue'
|
||
|
|
import useGameNews from './useGameNews'
|
||
|
|
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={()=> {
|
||
|
|
window.open(item.share_url)
|
||
|
|
}}
|
||
|
|
key={index}
|
||
|
|
>
|
||
|
|
<img class={'h-full w-[40%] rounded-xl object-cover'} src={item.cover}></img>
|
||
|
|
|
||
|
|
<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.title}
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
class={' text-ellipsis overflow-hidden text-[12px] opacity-60 line-clamp-2'}
|
||
|
|
>
|
||
|
|
{item.content}
|
||
|
|
</span>
|
||
|
|
<div class={'text-[12px] items-center flex opacity-40 gap-x-1'}>
|
||
|
|
<OhVueIcon
|
||
|
|
name={RiTimeLine.name}
|
||
|
|
class={'text-white'}
|
||
|
|
scale={0.7}
|
||
|
|
></OhVueIcon>
|
||
|
|
<span>{dayjs(item.create_time * 1000).format('YYYY-MM-DD')}</span>
|
||
|
|
</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>
|
||
|
|
)
|
||
|
|
})
|