83 lines
2.9 KiB
TypeScript
83 lines
2.9 KiB
TypeScript
import { defineComponent } from 'vue'
|
|
import useHotspotStore, { PlatformList } from './useHotspotStore'
|
|
import clsx from 'clsx'
|
|
import { BiCaretRightFill } from 'oh-vue-icons/icons'
|
|
import jump from '@/utils/jump'
|
|
import { addIcons, OhVueIcon } from 'oh-vue-icons'
|
|
|
|
addIcons(BiCaretRightFill)
|
|
export default defineComponent(() => {
|
|
const store = useHotspotStore()
|
|
return () => (
|
|
<div class="w-full h-full bg-[#e4eaff] flex flex-col">
|
|
<div class={'w-full rounded-xl flex px-2 justify-between items-center '}>
|
|
<div>
|
|
{[...PlatformList.entries()]
|
|
.filter((_, idx) => idx === 0)
|
|
.map(([key, value]) => (
|
|
<div
|
|
key={key}
|
|
onClick={(e) => {
|
|
store.type = key
|
|
e.stopPropagation()
|
|
}}
|
|
class={clsx(
|
|
' py-2 cursor-pointer bg rounded-xl flex gap-x-1 relative',
|
|
store.type === key ? 'text-[#4162ce] font-bold' : ''
|
|
)}
|
|
>
|
|
<span class={'z-10'}>{value}</span>
|
|
{store.type === key && (
|
|
<img
|
|
src="/icons/hotspot/hot_tab_bg.png"
|
|
class={'w-[26px] h-[11px] object-cover absolute -right-3 bottom-2'}
|
|
alt="bg"
|
|
/>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div>
|
|
<OhVueIcon name={BiCaretRightFill.name} fill="#9B9B9B"></OhVueIcon>
|
|
</div>
|
|
</div>
|
|
<div class={'w-full h-0 flex-1 '}>
|
|
<div class="px-3 w-full bg-white rounded-xl h-full flex flex-col justify-between">
|
|
{store.hotMap
|
|
.get(store.type)
|
|
?.filter((_, idx) => idx < 5)
|
|
.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
class={'flex items-center gap-x-4 justify-between cursor-pointer group'}
|
|
onClick={() => {
|
|
jump(item.url)
|
|
}}
|
|
>
|
|
<div class={'flex items-center w-[85px] gap-x-2 '}>
|
|
<span
|
|
class={clsx('text-[#666] flex justify-center items-center rounded', {
|
|
'text-[#ff3300] ': index === 0,
|
|
'text-[#ff7e00] ': index === 1,
|
|
'text-[#ffc600] ': index === 2
|
|
})}
|
|
>
|
|
{index + 1}.
|
|
</span>
|
|
<span
|
|
class={
|
|
'text-[#666] items-center whitespace-nowrap overflow-hidden text-ellipsis group-hover:text-[#477aff] text-[14px] leading-[14px]'
|
|
}
|
|
>
|
|
{item.title}
|
|
</span>
|
|
</div>
|
|
<span class="text-[#999] text-[12px]">{item.hotScore}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|